Merge pull request #52 from kakao-tech-campus-2nd-step3/Develop

Develop
kakao-tech-campus-2nd-step3 · Oct 8, 2024 · 8591c1b · 8591c1b
2 parents 2424a4b + fab5b1c
commit 8591c1b
Show file tree

Hide file tree

Showing 20 changed files with 2,155 additions and 5,059 deletions.
diff --git a/package.json b/package.json
@@ -20,6 +20,7 @@
     "msw": "^2.3.5",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-hook-form": "^7.53.0",
     "react-icons": "^5.2.1",
     "react-modal": "^3.16.1",
     "react-router-dom": "^6.26.1",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/app/routes/index.tsx b/src/app/routes/index.tsx
@@ -4,6 +4,7 @@ import { RouterPath } from './path';
 import MainPage from '@/pages/common/main';
 import RegisterPage from '@/pages/common/register';
 import SeniorRegisterPage from '@/pages/guard/register';
+import SiniddoReviewPage from '@/pages/guard/review';
 import ServiceHistoryPage from '@/pages/guard/service-history';
 import CallBackDetailPage from '@/pages/siniddo/call-back/detail';
 import CallBackListPage from '@/pages/siniddo/call-back/list';
@@ -15,64 +16,68 @@ import MyPage from '@/pages/siniddo/mypage';
 
 const router = createBrowserRouter([
   {
-    path: RouterPath.root,
+    path: RouterPath.ROOT,
     element: <MainPage />,
   },
   {
-    path: RouterPath.register,
+    path: RouterPath.REGISTER,
     element: <RegisterPage />,
   },
   {
-    path: RouterPath.mypage,
+    path: RouterPath.MYPAGE,
     element: <MyPage />,
   },
   {
-    path: RouterPath.serviceHistory,
+    path: RouterPath.SERVICE_HISTORY,
     element: <ServiceHistoryPage />,
   },
   {
-    path: RouterPath.helloCall,
+    path: RouterPath.HELLO_CALL,
     children: [
       {
         index: true,
         element: <HelloCallListPage />,
       },
       {
-        path: RouterPath.helloCallService,
+        path: RouterPath.HELLO_CALL_SERVICE,
         element: <HelloCallServicePage />,
       },
       {
-        path: RouterPath.helloCallReport,
+        path: RouterPath.HELLO_CALL_REPORT,
         element: <HelloCallReportPage />,
       },
     ],
   },
   {
-    path: RouterPath.seniorRegister,
+    path: RouterPath.SENIOR_REGISTER,
     element: <SeniorRegisterPage />,
   },
   {
-    path: RouterPath.callBackList,
+    path: RouterPath.CALL_BACK_LIST,
     children: [
       {
         index: true,
         element: <CallBackListPage />,
       },
       {
-        path: RouterPath.callBackDetail,
+        path: RouterPath.CALL_BACK_DETAIL,
         children: [
           {
             index: true,
             element: <CallBackDetailPage />,
           },
           {
-            path: RouterPath.callBackGuidLine,
+            path: RouterPath.CALL_BACK_GUID_LINE,
             element: <SiniddoGuideLinePage />,
           },
         ],
       },
     ],
   },
+  {
+    path: RouterPath.SINIDDO_REVIEW,
+    element: <SiniddoReviewPage />,
+  },
 ]);
 
 export const Routes = () => {

diff --git a/src/app/routes/path.ts b/src/app/routes/path.ts
@@ -1,14 +1,15 @@
 export const RouterPath = {
-  root: '/',
-  login: '/login',
-  register: '/register',
-  mypage: `/mypage`,
-  serviceHistory: `/service-history`,
-  helloCallService: 'service',
-  helloCallReport: 'report',
-  helloCall: `/hello-call`,
-  callBackList: '/call-back',
-  callBackDetail: ':callBackId',
-  callBackGuidLine: ':guideLineId',
-  seniorRegister: `/senior-register`,
+  ROOT: '/',
+  LOGIN: '/login',
+  REGISTER: '/register',
+  MYPAGE: `/mypage`,
+  SERVICE_HISTORY: `/service-history`,
+  HELLO_CALL_SERVICE: 'service',
+  HELLO_CALL_REPORT: 'report',
+  HELLO_CALL: `/hello-call`,
+  CALL_BACK_LIST: '/call-back',
+  CALL_BACK_DETAIL: ':callBackId',
+  CALL_BACK_GUID_LINE: ':guideLineId',
+  SENIOR_REGISTER: `/senior-register`,
+  SINIDDO_REVIEW: `/siniddo-review`,
 };
diff --git a/src/pages/common/register/components/register-fields/form-fileds/index.tsx b/src/pages/common/register/components/register-fields/form-fileds/index.tsx
@@ -0,0 +1,38 @@
+import { UseFormRegister } from 'react-hook-form';
+
+import type { FormValues } from '../../../types';
+import { Input, FormControl, FormErrorMessage } from '@chakra-ui/react';
+import styled from '@emotion/styled';
+
+type Props = {
+  label: string;
+  placeholder: string;
+  error?: string;
+  registerProps: ReturnType<UseFormRegister<FormValues>>;
+};
+
+export const FormField = ({
+  label,
+  placeholder,
+  error,
+  registerProps,
+}: Props) => (
+  <FormControl isInvalid={!!error}>
+    <Title>
+      <EmphasisSpan>{label}</EmphasisSpan>을 입력해주세요.
+    </Title>
+    <Input size='lg' placeholder={placeholder} {...registerProps} />
+    {error && <FormErrorMessage>{error}</FormErrorMessage>}
+  </FormControl>
+);
+
+const Title = styled.h1`
+  font-size: 24px;
+  font-weight: 700;
+  margin-top: 30px;
+  margin-bottom: 10px;
+`;
+
+const EmphasisSpan = styled.span`
+  color: #c69090;
+`;
diff --git a/src/pages/common/register/components/register-fields/index.tsx b/src/pages/common/register/components/register-fields/index.tsx
@@ -1,33 +1,39 @@
-import { Input } from '@chakra-ui/react';
+import { FieldErrors, UseFormRegister } from 'react-hook-form';
+
+import type { FormValues } from '../../types';
+import { FormField } from './form-fileds';
 import styled from '@emotion/styled';
 
-export const RegisterFields = () => {
+type Props = {
+  register: UseFormRegister<FormValues>;
+  errors: FieldErrors<FormValues>;
+};
+
+export const RegisterFields = ({ register, errors }: Props) => {
   return (
     <Wrapper>
-      <Title>
-        <EmphasisSpan>이름</EmphasisSpan>을 입력해주세요.
-      </Title>
-      <Input size='lg' placeholder='예시: 홍길동' />
-
-      <Title>
-        <EmphasisSpan>연락처</EmphasisSpan>를 입력해주세요.
-      </Title>
-      <Input size='lg' placeholder='예시: 010-0000-0000' />
+      <FormField
+        label='이름'
+        placeholder='예시: 홍길동'
+        error={errors.name?.message}
+        registerProps={register('name', { required: '이름을 입력해주세요.' })}
+      />
+      <FormField
+        label='연락처'
+        placeholder='예시: 010-0000-0000'
+        error={errors.phoneNumber?.message}
+        registerProps={register('phoneNumber', {
+          required: '연락처를 입력해주세요.',
+          pattern: {
+            value: /^010-\d{4}-\d{4}$/,
+            message: '유효한 연락처 형식이 아닙니다.',
+          },
+        })}
+      />
     </Wrapper>
   );
 };
 
 const Wrapper = styled.div`
   width: 100%;
 `;
-
-const Title = styled.h1`
-  font-size: 24px;
-  font-weight: 700;
-  margin-top: 30px;
-  margin-bottom: 10px;
-`;
-
-const EmphasisSpan = styled.span`
-  color: #c69090;
-`;
diff --git a/src/pages/common/register/components/register-type/index.tsx b/src/pages/common/register/components/register-type/index.tsx
@@ -1,12 +1,28 @@
+import { TypeButton } from './type-button.tsx';
 import styled from '@emotion/styled';
 
-export const RegisterType = () => {
+type Props = {
+  userType: string;
+  handleClick: (id: string) => void;
+};
+
+export const RegisterType = ({ userType, handleClick }: Props) => {
   return (
     <Wrapper>
       <Title>가입 유형</Title>
       <TypeWrapper>
-        <DefaultBtn>시니또</DefaultBtn>
-        <GrayBtn>보호자</GrayBtn>
+        <TypeButton
+          id='sinitto'
+          content='시니또'
+          isSelected={userType == 'sinitto'}
+          handleClick={handleClick}
+        />
+        <TypeButton
+          id='guard'
+          content='보호자'
+          isSelected={userType == 'guard'}
+          handleClick={handleClick}
+        />
       </TypeWrapper>
     </Wrapper>
   );
@@ -29,25 +45,3 @@ const TypeWrapper = styled.div`
   justify-content: space-between;
   margin-top: 13px;
 `;
-
-const DefaultBtn = styled.button`
-  width: 45%;
-  height: 70px;
-  border-radius: 10px;
-  background-color: #c69090;
-
-  color: #ffffff;
-  font-size: 22px;
-  font-weight: 700;
-`;
-
-const GrayBtn = styled.button`
-  width: 45%;
-  height: 70px;
-  border-radius: 10px;
-  background-color: #f2f2f2;
-
-  color: #909090;
-  font-size: 22px;
-  font-weight: 400;
-`;
diff --git a/src/pages/common/register/components/register-type/type-button.tsx/index.tsx b/src/pages/common/register/components/register-type/type-button.tsx/index.tsx
@@ -0,0 +1,37 @@
+import styled from '@emotion/styled';
+
+type Props = {
+  id: string;
+  isSelected: boolean;
+  content: string;
+  handleClick: (id: string) => void;
+};
+
+export const TypeButton = ({ content, isSelected, id, handleClick }: Props) => {
+  return (
+    <TypeBtn
+      type='button'
+      isSelected={isSelected}
+      onClick={() => handleClick(id)}
+    >
+      {content}
+    </TypeBtn>
+  );
+};
+
+type BtnProps = {
+  isSelected: boolean;
+};
+
+const TypeBtn = styled.button<BtnProps>`
+  width: 45%;
+  height: 70px;
+  border-radius: 10px;
+  background-color: ${(props) =>
+    props.isSelected ? 'var(--color-primary)' : '#f2f2f2'};
+
+  color: ${(props) => (props.isSelected ? 'var(--color-white)' : '#909090')};
+  font-size: 22px;
+  font-weight: ${(props) => (props.isSelected ? '600' : '400')};
+  outline: 0;
+`;
diff --git a/...n/register/components/tos/guard/index.tsx → ...register/components/tos/content/index.tsx b/...n/register/components/tos/guard/index.tsx → ...register/components/tos/content/index.tsx
@@ -1,12 +1,15 @@
-import { GUARD_DATA } from '../../../data/guard';
+import type { TosData } from '../../../types';
 import styled from '@emotion/styled';
 
-// 보호자 서약서 내용
-export const TosGuard = () => {
+type Props = {
+  data: TosData;
+};
+
+export const TosContent = ({ data }: Props) => {
   return (
     <Wrapper>
-      <Intro>{GUARD_DATA.intro}</Intro>
-      {GUARD_DATA.sections.map((section, index) => (
+      <Intro>{data.intro}</Intro>
+      {data.sections.map((section, index) => (
         <Paragraph key={index}>
           <Title>{section.title}</Title>
           {section.contents.map((content, i) => (