[7주차] TherapEase 과제 제출합니다.

package.json

@@ -17,6 +17,7 @@
     "axios": "^1.4.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-hook-form": "^7.45.0",
     "react-icons": "^4.9.0",
     "react-router-dom": "^6.12.1",
     "react-scripts": "5.0.1",

src/constants/errorMesssages.ts

@@ -0,0 +1,18 @@
+export const SIGNUP_LOGIN_ERROR_MESSAGES = {
+  userName: '*이름을 입력해주세요.',
+  userId: '*아이디를 입력해주세요.',
+
+  pw: [
+    '*비밀번호를 입력해주세요.',
+    '*비밀번호: 8~16자 영문 대소문자, 숫자를 입력해주세요.',
+  ],
+
+  pwCheck: [
+    '*비밀번호를 한 번 더 입력해주세요.',
+    '*비밀번호가 일치하지 않습니다.',
+  ],
+
+  email: ['*이메일을 입력해주세요.', '*이메일 형식을 입력해주세요.'],
+  teamName: '*팀을 선택해주세요.',
+  partName: '*파트를 선택해주세요.',
+};

src/constants/selectOptions.ts

@@ -0,0 +1,12 @@
+export const TEAM_OPTIONS = [
+  { label: 'TherapEase', value: 'TherapEase' },
+  { label: 'RePick', value: 'RePick' },
+  { label: 'BariBari', value: 'BariBari' },
+  { label: 'Hooking', value: 'Hooking' },
+  { label: 'Dansupport', value: 'Dansupport' },
+];
+
+export const PART_OPTIONS = [
+  { label: 'FRONTEND', value: 'fe' },
+  { label: 'BACKEND', value: 'be' },
+];

src/pages/Login/LoginPage.tsx

@@ -1,6 +1,107 @@
-import React from 'react';
+import React, { useEffect } from 'react';
+import { useForm, SubmitHandler } from 'react-hook-form';
+
+import styled from '@emotion/styled';
+
+import { Headline } from '../../styles/Typography';
+import { Button, TextField } from '@mui/material';
+
+import { REGEX } from '../../utils/regex';
+
+import { SIGNUP_LOGIN_ERROR_MESSAGES } from '../../constants/errorMesssages';
+
+interface loginFormValues {
+  userId: string;
+  userPassword: string;
+}
+
 const LoginPage = () => {
-  return <div>로그인 페이지</div>;
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+  } = useForm<loginFormValues>();
+
+  const onSubmit: SubmitHandler<loginFormValues> = (data) => {
+    // TODO - api 연동
+    console.log(data);
+  };
+
+  return (
+    <Wrapper>
+      <Headline
+        color="#ffff"
+        style={{ width: 'calc(30% + 8rem)', textAlign: 'start' }}
+      >
+        로그인
+      </Headline>
+      <FormWrapper onSubmit={handleSubmit(onSubmit)}>
+        <TextField
+          id="userId"
+          label="아이디"
+          helperText={errors?.userId?.message}
+          variant="outlined"
+          size="small"
+          fullWidth={true}
+          {...register('userId', {
+            required: {
+              value: true,
+              message: SIGNUP_LOGIN_ERROR_MESSAGES.userId,
+            },
+          })}
+        />
+        <TextField
+          id="userPassword"
+          label="비밀번호"
+          type="password"
+          helperText={errors?.userPassword?.message}
+          variant="outlined"
+          size="small"
+          fullWidth={true}
+          {...register('userPassword', {
+            required: {
+              value: true,
+              message: SIGNUP_LOGIN_ERROR_MESSAGES.pw[0],
+            },
+            pattern: {
+              value: REGEX.password,
+              message: SIGNUP_LOGIN_ERROR_MESSAGES.pw[1],
+            },
+          })}
+        />
+        <Button
+          type="submit"
+          variant="contained"
+          sx={{ width: '10rem', marginTop: '1rem' }}
+        >
+          로그인
+        </Button>
+      </FormWrapper>
+    </Wrapper>
+  );
 };
 
+const Wrapper = styled.div`
+  width: 100vw;
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  background-color: var(--ceos-blue-color);
+`;
+
+const FormWrapper = styled.form`
+  width: 30%;
+  // height: 80vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 5rem 4rem 3rem 4rem;
+  background-color: #ffff;
+  border-radius: 1.25rem;
+  border: 3px solid #fff;
+  gap: 1rem;
+`;
+
 export default LoginPage;