feat: 회원가입 ui 완성 (#21)

* feat: 회원가입 ui 완성
* chore: @mui/material 설치
* fix: img import ts 오류 해결

package.json

@@ -14,6 +14,7 @@
     "@emotion/server": "^11.11.0",
     "@emotion/styled": "^11.13.0",
     "@libsql/client": "^0.7.0",
+    "@mui/material": "^5.16.6",
     "@mui/material-nextjs": "^5.16.4",
     "@reduxjs/toolkit": "^2.2.7",
     "@tanstack/react-query": "^5.51.15",

src/app/signup/SignupPage.styled.ts

@@ -0,0 +1,10 @@
+import styled from '@emotion/styled';
+
+export const SignupPage = styled.div`
+  width: 100vw;
+  height: 100vh;
+  display: flex;
+  flex-direction; column;
+  justify-content: center;
+  align-items: center;
+`;

src/app/signup/page.tsx

@@ -0,0 +1,12 @@
+'use client';
+
+import SignupSection from '@/components/signup/index';
+import * as S from './SignupPage.styled';
+
+export default function Signup() {
+  return (
+    <S.SignupPage>
+      <SignupSection />
+    </S.SignupPage>
+  );
+}

src/components/signup/Signup.styled.ts

@@ -0,0 +1,24 @@
+import styled from '@emotion/styled';
+
+export const SignupSection = styled.div`
+  width: 450px;
+  height: 500px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+  align-items: center;
+`;
+
+export const SignupInputDiv = styled.div`
+  width: 300px;
+`;
+
+export const SignupTitle = styled.p`
+  width: 350px;
+  font-size: 15px;
+`;
+
+export const SignupLogo = styled.img`
+  width: 200px;
+  cursor: pointer;
+`;

src/components/signup/index.tsx

@@ -0,0 +1,65 @@
+'use client';
+
+import Button from '@mui/material/Button';
+import TextField from '@mui/material/TextField';
+import logo from '@/assets/images/sumtimeLogo.png';
+import * as S from './Signup.styled';
+
+function SignupSection() {
+  // const [validation, setValidation] = useState(true);
+
+  return (
+    <S.SignupSection>
+      <S.SignupLogo src={logo.src} alt="logo" />
+
+      <S.SignupInputDiv>
+        <TextField
+          // error={!validation}
+          fullWidth
+          id="outlined-error-helper-text"
+          label="email"
+          // helperText={validation ? '' : '올바른 형식의 이메일을 입력해주세요'}
+          variant="standard"
+          type="email"
+        />
+      </S.SignupInputDiv>
+      <S.SignupInputDiv>
+        <TextField
+          // error={!validation}
+          fullWidth
+          id="outlined-error-helper-text"
+          label="비밀번호"
+          // helperText={validation ? '' : '올바른 형식의 비밀번호를 입력해주세요'}
+          variant="standard"
+          type="password"
+        />
+      </S.SignupInputDiv>
+      <S.SignupInputDiv>
+        <TextField
+          // error={!validation}
+          fullWidth
+          id="outlined-error-helper-text"
+          label="비밀번호 확인"
+          // helperText={validation ? '' : '비밀번호가 일치하지 않습니다'}
+          variant="standard"
+          type="password"
+        />
+      </S.SignupInputDiv>
+      <S.SignupInputDiv>
+        <TextField
+          // error={!validation}
+          fullWidth
+          id="outlined-error-helper-text"
+          label="닉네임"
+          // helperText={validation ? '' : '0자 이내만 입력 가능합니다'}
+          variant="standard"
+          type="text"
+        />
+      </S.SignupInputDiv>
+
+      <Button variant="outlined">회원가입</Button>
+    </S.SignupSection>
+  );
+}
+
+export default SignupSection;

src/types/images.d.ts

@@ -0,0 +1,3 @@
+declare module '*.png';
+declare module '*.jpg';
+declare module '*.jpeg';

tsconfig.json

@@ -22,5 +22,6 @@
     }
   },
   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts", "next.config.mjs"],
-  "exclude": ["node_modules"]
+  "exclude": ["node_modules"],
+  "typeRoots": ["src/types"]
 }