Merge pull request #154 from Bamdoliro/feat/#144

funnel 대체제 세팅
Bamdoliro · Jul 17, 2023 · c829a8f · c829a8f
2 parents ff9b4e0 + 5e1b5a8
commit c829a8f
Show file tree

Hide file tree

Showing 29 changed files with 315 additions and 189 deletions.
diff --git a/apps/user/package.json b/apps/user/package.json
@@ -30,6 +30,7 @@
     "react": "18.2.0",
     "react-daum-postcode": "^3.1.3",
     "react-dom": "18.2.0",
-    "react-query": "^3.39.3"
+    "react-query": "^3.39.3",
+    "recoil": "^0.7.7"
   }
 }
diff --git a/apps/user/src/apis/instance/index.ts → apps/user/src/apis/instance/instance.ts b/apps/user/src/apis/instance/index.ts → apps/user/src/apis/instance/instance.ts
diff --git a/apps/user/src/apis/storage/index.ts → apps/user/src/apis/storage/storage.ts b/apps/user/src/apis/storage/index.ts → apps/user/src/apis/storage/storage.ts
diff --git a/apps/user/src/apis/token/refresh.ts b/apps/user/src/apis/token/refresh.ts
@@ -1,8 +1,8 @@
 import ROUTES from '@/constants/routes';
 import TOKEN from '@/constants/token';
 import { useRouter } from 'next/navigation';
-import { maru } from '../instance';
-import { Storage } from '../storage';
+import { maru } from '../instance/instance';
+import { Storage } from '../storage/storage';
 
 const refreshToken = async () => {
     const router = useRouter();

diff --git a/apps/user/src/apis/token/token.ts b/apps/user/src/apis/token/token.ts
@@ -1,5 +1,5 @@
 import TOKEN from '@/constants/token';
-import { Storage } from '../storage';
+import { Storage } from '../storage/storage';
 
 const authorization = () => {
     return {

diff --git a/apps/user/src/app/form/page.tsx b/apps/user/src/app/form/page.tsx
@@ -1,9 +1,30 @@
 'use client';
 
-import { FormLayout } from '@/layouts';
+import { useForm } from '@/hooks';
+import { 지원자정보, 보호자정보, 출신학교및학력 } from '@/components/form';
 
 const FormPage = () => {
-    return <FormLayout title="지원자 정보">a</FormLayout>;
+    const { formStep, onMoveForm } = useForm();
+    return (
+        <div>
+            {formStep === '지원자 정보' && <지원자정보 onNext={() => onMoveForm('보호자 정보')} />}
+            {formStep === '보호자 정보' && (
+                <보호자정보
+                    onPrevious={() => onMoveForm('지원자 정보')}
+                    onNext={() => onMoveForm('출신학교 및 학력')}
+                />
+            )}
+            {formStep === '출신학교 및 학력' && (
+                <출신학교및학력
+                    onPrevious={() => onMoveForm('보호자 정보')}
+                    onNext={() => onMoveForm('전형 선택')}
+                />
+            )}
+            {formStep === '전형 선택' && <div />}
+            {formStep === '성적 입력' && <div />}
+            {formStep === '자기소개서' && <div />}
+        </div>
+    );
 };
 
 export default FormPage;
diff --git a/apps/user/src/app/layout.tsx b/apps/user/src/app/layout.tsx
@@ -1,5 +1,6 @@
 import { ReactNode } from 'react';
 import QueryClientProvider from '@/services/QueryClientProvider';
+import Provider from '@/components/Provider';
 
 export const metadata = {
     title: '마루',
@@ -14,7 +15,9 @@ const RootLayout = ({ children }: PropsType) => {
     return (
         <html lang="en">
             <body>
-                <QueryClientProvider>{children}</QueryClientProvider>
+                <QueryClientProvider>
+                    <Provider>{children}</Provider>
+                </QueryClientProvider>
             </body>
         </html>
     );

diff --git a/apps/user/src/components/Provider.tsx b/apps/user/src/components/Provider.tsx
@@ -0,0 +1,20 @@
+'use client';
+
+import { RecoilRoot } from 'recoil';
+import { GlobalStyle } from '@maru/theme';
+import { ReactNode } from 'react';
+
+interface PropsType {
+    children: ReactNode;
+}
+
+const Provider = ({ children }: PropsType) => {
+    return (
+        <RecoilRoot>
+            {children}
+            <GlobalStyle />
+        </RecoilRoot>
+    );
+};
+
+export default Provider;
diff --git a/apps/user/src/components/common/Header/Header.tsx b/apps/user/src/components/common/Header/Header.tsx
@@ -1,4 +1,4 @@
-import { Storage } from '@/apis/storage';
+import { Storage } from '@/apis/storage/storage';
 import { useRouter } from 'next/navigation';
 import styled from 'styled-components';
 import { color } from '@maru/theme';

diff --git a/apps/user/src/components/form/FormController/FormController.tsx b/apps/user/src/components/form/FormController/FormController.tsx
@@ -0,0 +1,37 @@
+import { Button } from '@maru/ui';
+import { flex } from '@maru/utils';
+import styled from 'styled-components';
+
+interface PropsType {
+    onPrevious: () => void;
+    onNext: () => void;
+}
+
+const FormController = ({ onPrevious, onNext }: PropsType) => {
+    return (
+        <FormControllerBar>
+            <StyledFormController>
+                <Button width="50%" option="SECONDARY" onClick={onPrevious}>
+                    이전
+                </Button>
+                <Button width="50%" onClick={onNext}>
+                    다음
+                </Button>
+            </StyledFormController>
+        </FormControllerBar>
+    );
+};
+
+export default FormController;
+
+const FormControllerBar = styled.div`
+    ${flex({ justifyContent: 'flex-end' })}
+    width: 100%;
+    margin-top: 60px;
+`;
+
+const StyledFormController = styled.div`
+    ${flex({ alignItems: 'center' })}
+    gap: 24px;
+    width: 331px;
+`;
diff --git a/apps/user/src/components/form/ProgressBar/ProgressBar.tsx b/apps/user/src/components/form/ProgressBar/ProgressBar.tsx
@@ -1,50 +1,32 @@
-import { useFormPage } from '@/hooks';
 import { color, font } from '@maru/theme';
 import { flex } from '@maru/utils';
+import { useForm } from '@/hooks';
 import styled from 'styled-components';
 
 const PROGRESS_BAR_DATA = [
-    {
-        id: 0,
-        name: '지원자 정보',
-    },
-    {
-        id: 1,
-        name: '보호자 정보',
-    },
-    {
-        id: 2,
-        name: '출신학교 및 학력',
-    },
-    {
-        id: 3,
-        name: '전형 선택',
-    },
-    {
-        id: 4,
-        name: '성적 입력',
-    },
-    {
-        id: 5,
-        name: '자기소개서',
-    },
-];
+    '지원자 정보',
+    '보호자 정보',
+    '출신학교 및 학력',
+    '전형 선택',
+    '성적 입력',
+    '자기소개서',
+] as const;
 
 /**
  * @TODO 다음페이지로 성공적으로 넘어갔을때 complete 처리를 해줘야합니다
  */
 
 const ProgressBar = () => {
-    const { currentPage, movePage } = useFormPage();
+    const { formStep, onMoveForm } = useForm();
 
     return (
         <StyledProgressBar>
             {PROGRESS_BAR_DATA.map((item, index) => (
                 <Circle
-                    key={item.id}
-                    name={item.name}
-                    active={currentPage === index + 1}
-                    onClick={movePage}>
+                    key={`progress ${index}`}
+                    name={item}
+                    active={formStep === PROGRESS_BAR_DATA[index]}
+                    onClick={() => onMoveForm(PROGRESS_BAR_DATA[index])}>
                     {index + 1}
                 </Circle>
             ))}

diff --git a/apps/user/src/components/form/index.ts b/apps/user/src/components/form/index.ts
@@ -1,2 +1,6 @@
-export { default as ProgressBar } from './ProgressBar/ProgressBar';
 export { default as 보호자정보 } from './보호자정보/보호자정보';
+export { default as 지원자정보 } from './지원자정보/지원자정보';
+export { default as 출신학교및학력 } from './출신학교및학력/출신학교및학력';
+
+export { default as ProgressBar } from './ProgressBar/ProgressBar';
+export { default as FormController } from './FormController/FormController';
diff --git a/apps/user/src/components/form/보호자정보/보호자정보.tsx b/apps/user/src/components/form/보호자정보/보호자정보.tsx
@@ -2,8 +2,15 @@ import { ButtonInput, Column, Input, Row } from '@maru/ui';
 import { useState } from 'react';
 import FindAddressModal from './FindAddressModal/FindAddressModal';
 import styled from 'styled-components';
+import FormController from '../FormController/FormController';
+import { FormLayout } from '@/layouts';
 
-const 보호자정보 = () => {
+interface PropsType {
+    onPrevious: () => void;
+    onNext: () => void;
+}
+
+const 보호자정보 = ({ onPrevious, onNext }: PropsType) => {
     const [isOpenFindAddressModal, setIsOpenFindAddressModal] = useState(false);
     const [address, setAddress] = useState('');
 
@@ -12,7 +19,7 @@ const 보호자정보 = () => {
     };
 
     return (
-        <>
+        <FormLayout title="보호자 정보">
             <Styled보호자정보>
                 <Column gap={30}>
                     <Row gap={48} alignItems="center">
@@ -30,13 +37,14 @@ const 보호자정보 = () => {
                     <Input label="상세 주소" width="100%" />
                 </Column>
             </Styled보호자정보>
+            <FormController onPrevious={onPrevious} onNext={onNext} />
             {isOpenFindAddressModal && (
                 <FindAddressModal
                     closeModal={() => setIsOpenFindAddressModal(false)}
                     setAddress={setAddress}
                 />
             )}
-        </>
+        </FormLayout>
     );
 };
 

diff --git a/apps/user/src/components/form/지원자정보/지원자정보.tsx b/apps/user/src/components/form/지원자정보/지원자정보.tsx
@@ -1,27 +1,40 @@
-import { Column, Input, Row, Radio, RadioGroup } from '@maru/ui';
+import { Column, Input, Row, RadioGroup, Button } from '@maru/ui';
+import { flex } from '@maru/utils';
 import Dropdown from '@maru/ui/components/Dropdown/Dropdown';
 import ProfileUpload from './ProfileUpload/ProfileUpload';
+import { FormLayout } from '@/layouts';
 import styled from 'styled-components';
 
-const 지원자정보 = () => {
+interface PropsType {
+    onNext: () => void;
+}
+
+const 지원자정보 = ({ onNext }: PropsType) => {
     return (
-        <Styled지원자정보>
-            <Row width="100%" justifyContent="space-between">
-                <ProfileUpload />
-                <Column gap={30} width={492}>
-                    <Input label="성명" width="100%" />
-                    <Row gap={16} alignItems="flex-end">
-                        <Dropdown label="생년월일" data={[]} placeholder="년" />
-                        <Dropdown data={[]} placeholder="월" />
-                        <Dropdown data={[]} placeholder="일" />
-                    </Row>
-                    <Row gap={40} alignItems="flex-end">
-                        <RadioGroup label="성별" name="gender" list={['남자', '여자']} />
-                    </Row>
-                    <Input label="전화번호" placeholder="- 없이 입력해주세요" width="100%" />
-                </Column>
-            </Row>
-        </Styled지원자정보>
+        <FormLayout title="지원자 정보">
+            <Styled지원자정보>
+                <Row width="100%" justifyContent="space-between">
+                    <ProfileUpload />
+                    <Column gap={30} width={492}>
+                        <Input label="성명" width="100%" />
+                        <Row gap={16} alignItems="flex-end">
+                            <Dropdown label="생년월일" data={[]} placeholder="년" />
+                            <Dropdown data={[]} placeholder="월" />
+                            <Dropdown data={[]} placeholder="일" />
+                        </Row>
+                        <Row gap={40} alignItems="flex-end">
+                            <RadioGroup label="성별" name="gender" list={['남자', '여자']} />
+                        </Row>
+                        <Input label="전화번호" placeholder="- 없이 입력해주세요" width="100%" />
+                    </Column>
+                </Row>
+            </Styled지원자정보>
+            <FormControllerBar>
+                <Button width={150} onClick={onNext}>
+                    다음
+                </Button>
+            </FormControllerBar>
+        </FormLayout>
     );
 };
 
@@ -31,3 +44,9 @@ const Styled지원자정보 = styled.div`
     width: 100%;
     height: 100%;
 `;
+
+const FormControllerBar = styled.div`
+    ${flex({ justifyContent: 'flex-end' })}
+    width: 100%;
+    margin-top: 60px;
+`;
diff --git a/...nts/form/Modal/SchoolSearchModal.hooks.ts → ...oolSearchModal/SchoolSearchModal.hooks.ts b/...nts/form/Modal/SchoolSearchModal.hooks.ts → ...oolSearchModal/SchoolSearchModal.hooks.ts
diff --git a/...mponents/form/Modal/SchoolSearchModal.tsx → ...력/SchoolSearchModal/SchoolSearchModal.tsx b/...mponents/form/Modal/SchoolSearchModal.tsx → ...력/SchoolSearchModal/SchoolSearchModal.tsx