feat: #4 인풋 mui 적용, 로고텍스트 수정

package.json

@@ -3,6 +3,8 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@emotion/react": "^11.10.5",
+    "@emotion/styled": "^11.10.5",
     "@material-ui/core": "^4.12.4",
     "@mui/material": "^5.11.3",
     "@testing-library/jest-dom": "^5.16.5",
@@ -12,6 +14,7 @@
     "@types/node": "^16.18.11",
     "@types/react": "^18.0.26",
     "@types/react-dom": "^18.0.10",
+    "node-sass": "^8.0.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.6.1",

src/components/StoreRegister/Input.scss

@@ -0,0 +1,3 @@
+.Input {
+    //text-align: center;
+}

src/components/StoreRegister/Logo.scss

@@ -1,10 +1,15 @@
 .Logo {
-    width: 120px;
-    height: 120px;
+    width: 150px;
+    height: 190px;
+    margin-top: 110px;
    object-fit: cover;
 }
 
-.Logo
+.LogoText {
+    margin-top: -1.5em;
+    font-family: "BMDOHYEON";
+    font-size: 1.5em;
+}
 
 // margin-top: 9em;
 //width: 120px;

src/components/StoreRegister/Logo.tsx

@@ -1,12 +1,12 @@
 import React from "react";
 import LogoImage from '../../assets/image/LogoImage.png'; //이미지 불러오기
-
+import './Logo.scss';
 
 function Logo() {
   return (
   <div>
     <img src={LogoImage} className="Logo"/>
-    <div className="LogeImage">Waiter</div>
+    <div className="LogoText">Waiter</div>
   </div>
   );
 }

src/components/StoreRegister/input.tsx

@@ -1,24 +1,21 @@
-import React from "react";
-
-function InputSample() {
+import * as React from 'react';
+import Box from '@mui/material/Box';
+import TextField from '@mui/material/TextField';
+
+export default function Input() {
   return (
-    <div>
-      <input />
-      <button>초기화</button>
-      <div>
-        <b>이름</b>
-        어쩌고저쩌고...
-      </div>
-      <div>
-        <b>전화번호</b>
-        어쩌고저쩌고...
-      </div>
-      <div>
-        <b>인원수</b>
-        어쩌고저쩌고...
-      </div>
-    </div>
+    <Box
+      component="form"
+      sx={{
+        '& > :not(style)': { m: 1, width: '25ch' },
+      }}
+      noValidate
+      autoComplete="off"
+    >
+      <TextField id="standard-basic" label="가게명/업소명" variant="standard" />
+      <TextField id="standard-basic" label="가게 번호" variant="standard" />
+      <TextField id="standard-basic" label="가게 주소" variant="standard" />
+      <TextField id="standard-basic" label="비밀번호 (4자리)" variant="standard" />
+    </Box>
   );
-}
-
-export default InputSample;
+}

src/pages/StoreRegister/StoreRegister.tsx

@@ -3,12 +3,14 @@ import React from "react";
 import Logo from "../../components/StoreRegister/Logo";
 //import RegisterButton from "../../components/CustomerRegister/RegisterButton";
 //import RegisterInput from "../../components/CustomerRegister/RegisterInput";
+import Input from "../../components/StoreRegister/Input";
 
 function CustomerRegister() {
     document.body.style.backgroundColor = "#FFFBD9";
     return(
     <div>
       <Logo/>
+      <Input/>
       </div>);
   }