Merge pull request #288 from Bamdoliro/develop

develop 머지~
Bamdoliro · Aug 20, 2023 · a4ceb6a · a4ceb6a
2 parents bf5a6a0 + 86e493e
commit a4ceb6a
Show file tree

Hide file tree

Showing 15 changed files with 185 additions and 80 deletions.
diff --git a/apps/user/.eslintrc.js b/apps/user/.eslintrc.js
@@ -1,5 +1,10 @@
 module.exports = {
     root: true,
     // This tells ESLint to load the config from the package `eslint-config-custom`
-    extends: ['@maru/eslint/common', '@maru/eslint/query', 'plugin:storybook/recommended'],
+    extends: ['@maru/eslint/common', '@maru/eslint/query'],
+    settings: {
+        next: {
+            rootDir: ['apps/*/'],
+        },
+    },
 };
diff --git a/apps/user/next.config.js b/apps/user/next.config.js
@@ -1,6 +1,4 @@
 /** @type {import('next').NextConfig} */
-const nextConfig = {
+module.exports = {
     transpilePackages: ['@maru/ui'],
 };
-
-module.exports = nextConfig;
diff --git a/apps/user/src/apis/instance/instance.ts b/apps/user/src/apis/instance/instance.ts
@@ -23,13 +23,16 @@ maru.interceptors.response.use(
         return response;
     },
     async (error) => {
-        const {
-            status,
-            data: { message, code },
-        } = error.response;
-        if (message) {
-            if (status === 401 && code === 'EXPIRED_TOKEN') {
-                refreshToken();
+        if (error.response) {
+            const {
+                status,
+                data: { message, code },
+            } = error.response;
+
+            if (message) {
+                if (status === 401 && code === 'EXPIRED_TOKEN') {
+                    refreshToken();
+                }
             }
         }
         return Promise.reject(error);

diff --git a/apps/user/src/app/[...not_found]/page.tsx b/apps/user/src/app/[...not_found]/page.tsx
diff --git a/apps/user/src/app/form/초안제출완료/초안제출완료.tsx b/apps/user/src/app/form/초안제출완료/초안제출완료.tsx
@@ -1,59 +1,44 @@
 import { CompleteAlaram } from '@/components/form';
 import { AppLayout } from '@/layouts';
-import { useInterval } from '@maru/hooks';
 import { IconCheckCircle } from '@maru/icon';
 import { color } from '@maru/theme';
-import { Row, Button, Text, Column } from '@maru/ui';
+import { Button, Column, Row, Text } from '@maru/ui';
 import { flex } from '@maru/utils';
-import { useState } from 'react';
 import styled from 'styled-components';
 import { useCTAButton } from './초안제출완료.hooks';
 
 const 초안제출완료 = () => {
-    const [isShowCompleteAlaram, setIsShowCompleteAlaram] = useState(true);
     const { handleGoMainPageButtonClick, handleGo최종제출PageButtonClick } = useCTAButton();
 
-    setTimeout(() => {
-        setIsShowCompleteAlaram(false);
-    }, 1000);
-
     return (
         <AppLayout header>
-            {isShowCompleteAlaram ? (
-                <CompleteAlaram
-                    isComplete={isShowCompleteAlaram}
-                    completeText="원서 초안 제출 완료"
-                />
-            ) : (
-                <Styled초안제출완료>
-                    <Row gap={8} alignItems="center">
-                        <IconCheckCircle width={64} height={64} />
-                        <Text fontType="H1" color={color.gray900}>
-                            원서 초안 제출 완료
-                        </Text>
-                    </Row>
-                    <Column gap={12}>
-                        <Text fontType="p1" color={color.gray900}>
-                            원서 초안을 제출 완료하셨습니다.
-                        </Text>
-                        <Text fontType="H4" color={color.red}>
-                            원서 초안과 기타 제출서류를 함께 제출해야 최종적으로 원서 제출이
-                            완료됩니다.
-                        </Text>
-                    </Column>
-                    <Row gap={16}>
-                        <Button
-                            onClick={handleGoMainPageButtonClick}
-                            option="SECONDARY"
-                            size="LARGE">
-                            홈으로 돌아가기
-                        </Button>
-                        <Button onClick={handleGo최종제출PageButtonClick} size="LARGE">
-                            최종 제출 페이지로 이동하기
-                        </Button>
-                    </Row>
-                </Styled초안제출완료>
-            )}
+            <CompleteAlarmBox>
+                <CompleteAlaram isComplete completeText="원서 초안 제출 완료" />
+            </CompleteAlarmBox>
+            <Styled초안제출완료>
+                <Row gap={8} alignItems="center">
+                    <IconCheckCircle width={64} height={64} />
+                    <Text fontType="H1" color={color.gray900}>
+                        원서 초안 제출 완료
+                    </Text>
+                </Row>
+                <Column gap={12}>
+                    <Text fontType="p1" color={color.gray900}>
+                        원서 초안을 제출 완료하셨습니다.
+                    </Text>
+                    <Text fontType="H4" color={color.red}>
+                        원서 초안과 기타 제출서류를 함께 제출해야 최종적으로 원서 제출이 완료됩니다.
+                    </Text>
+                </Column>
+                <Row gap={16}>
+                    <Button onClick={handleGoMainPageButtonClick} option="SECONDARY" size="LARGE">
+                        홈으로 돌아가기
+                    </Button>
+                    <Button onClick={handleGo최종제출PageButtonClick} size="LARGE">
+                        최종 제출 페이지로 이동하기
+                    </Button>
+                </Row>
+            </Styled초안제출완료>
         </AppLayout>
     );
 };
@@ -66,4 +51,35 @@ const Styled초안제출완료 = styled.div`
     max-width: 800px;
     height: 100%;
     margin: 0 auto;
+
+    opacity: 0;
+    animation: show 1.2s 2s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
+
+    @keyframes show {
+        from {
+            transform: translateY(200px);
+        }
+        to {
+            transform: translateY(0);
+            opacity: 100;
+        }
+    }
+`;
+
+const CompleteAlarmBox = styled.div`
+    position: absolute;
+    width: 100%;
+
+    animation: hide 1.2s 1s cubic-bezier(0.65, 0.05, 0.36, 1) forwards;
+
+    @keyframes hide {
+        from {
+            transform: translateY(0);
+        }
+        to {
+            transform: translateY(-300px);
+            opacity: 0;
+            display: none;
+        }
+    }
 `;
diff --git a/apps/user/src/app/form/최종제출완료/최종제출완료.hooks.ts b/apps/user/src/app/form/최종제출완료/최종제출완료.hooks.ts
@@ -0,0 +1,12 @@
+import { ROUTES } from '@/constants/common/constant';
+import { useRouter } from 'next/navigation';
+
+export const useCTAButton = () => {
+    const router = useRouter();
+
+    const handleGoMainPageButtonClick = () => {
+        router.push(ROUTES.MAIN);
+    };
+
+    return { handleGoMainPageButtonClick };
+};
diff --git a/apps/user/src/app/form/최종제출완료/최종제출완료.tsx b/apps/user/src/app/form/최종제출완료/최종제출완료.tsx
@@ -1,12 +1,85 @@
 import { CompleteAlaram } from '@/components/form';
 import { AppLayout } from '@/layouts';
+import { IconCheckCircle } from '@maru/icon';
+import { color } from '@maru/theme';
+import { Button, Column, Row, Text } from '@maru/ui';
+import { flex } from '@maru/utils';
+import { useRouter } from 'next/navigation';
+import { styled } from 'styled-components';
+import { useCTAButton } from './최종제출완료.hooks';
 
 const 최종제출완료 = () => {
+    const router = useRouter();
+    const { handleGoMainPageButtonClick } = useCTAButton();
+
     return (
-        <AppLayout header>
-            <CompleteAlaram isComplete completeText="원서 최종 제출 완료" />
+        <AppLayout header footer>
+            <CompleteAlarmBox>
+                <CompleteAlaram isComplete completeText="원서 최종 제출 완료" />
+            </CompleteAlarmBox>
+            <Styled최종제출완료>
+                <Row gap={8} alignItems="center" justifyContent="center">
+                    <IconCheckCircle width={64} height={64} />
+                    <Text fontType="H1" color={color.gray900}>
+                        원서 최종 제출 완료
+                    </Text>
+                </Row>
+                <Column gap={71} alignItems="center">
+                    <Column gap={27} alignItems="center">
+                        <Text fontType="H2" color={color.gray900}>
+                            부산소프트웨어마이스터고에 지원해주셔서 감사합니다.
+                        </Text>
+                        <Text fontType="p2" color={color.gray900} textAlign="center">
+                            신준서 님, 부산소프트웨어마이스터고에 지원해주셔서 대단히 감사드립니다.
+                            <br />
+                            1차 합격자는 11월 3일에 발표됩니다.
+                            <br />
+                            신준서 님의 1차 합격을 기원합니다.
+                        </Text>
+                    </Column>
+                    <Button onClick={handleGoMainPageButtonClick} size="SMALL">
+                        홈으로 돌아가기
+                    </Button>
+                </Column>
+            </Styled최종제출완료>
         </AppLayout>
     );
 };
 
 export default 최종제출완료;
+
+const Styled최종제출완료 = styled.div`
+    ${flex({ flexDirection: 'column' })}
+    gap: 70px;
+
+    opacity: 0;
+    animation: show 1.2s 2s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
+
+    @keyframes show {
+        from {
+            transform: translateY(200px);
+        }
+        to {
+            transform: translateY(0);
+            opacity: 100;
+        }
+    }
+`;
+
+const CompleteAlarmBox = styled.div`
+    position: absolute;
+    width: 100%;
+
+    animation: hide 1.2s 1s cubic-bezier(0.65, 0.05, 0.36, 1) forwards;
+
+    @keyframes hide {
+        from {
+            transform: translateY(0);
+        }
+        to {
+            transform: translateY(-300px);
+            opacity: 0;
+            display: none;
+        }
+    }
+`;
diff --git a/apps/user/src/components/common/Header/Header.tsx b/apps/user/src/components/common/Header/Header.tsx
@@ -7,7 +7,6 @@ import Image from 'next/image';
 import { usePathname, useRouter } from 'next/navigation';
 import styled from 'styled-components';
 import Profile from './Profile/Profile';
-
 const NAVIGATION_DATA = [
     {
         name: '홈',

diff --git a/apps/user/src/components/common/Wrappers/AuthWrapper/AuthWrapper.tsx b/apps/user/src/components/common/Wrappers/AuthWrapper/AuthWrapper.tsx
@@ -1,9 +1,9 @@
 'use client';
 
-import { ROUTES } from '@/constants/common/constant';
-import { useUser } from '@/hooks';
-import { Column, Confirm, Text } from '@maru/ui';
+import { Storage } from '@/apis/storage/storage';
+import { ROUTES, TOKEN } from '@/constants/common/constant';
 import { color } from '@maru/theme';
+import { Column, Confirm, Text } from '@maru/ui';
 import { useOverlay } from '@toss/use-overlay';
 import { usePathname, useRouter } from 'next/navigation';
 import { ReactNode, useEffect } from 'react';
@@ -19,10 +19,11 @@ const AuthWrapper = ({ children }: PropsType) => {
     const router = useRouter();
     const pathName = usePathname();
     const overlay = useOverlay();
-    const { isLoggedIn } = useUser();
+
+    const token = Storage.getItem(TOKEN.ACCESS);
 
     useEffect(() => {
-        if (NOT_LOGGEDIN_PRIVATE_PAGE.includes(pathName) && !isLoggedIn) {
+        if (NOT_LOGGEDIN_PRIVATE_PAGE.includes(pathName) && !token) {
             router.push(ROUTES.MAIN);
             overlay.open(({ isOpen, close }) => (
                 <Confirm
@@ -49,12 +50,12 @@ const AuthWrapper = ({ children }: PropsType) => {
             ));
         }
 
-        if (isLoggedIn) {
+        if (token) {
             if (LOGGEDIN_PRIVATE_PAGE.includes(pathName)) {
                 router.push(ROUTES.MAIN);
             }
         }
-    }, [isLoggedIn, pathName]);
+    }, [token, pathName]);
 
     return <>{children}</>;
 };

diff --git a/apps/user/src/hooks/useUser.tsx b/apps/user/src/hooks/useUser.tsx
@@ -4,13 +4,13 @@ import { useEffect } from 'react';
 
 const useUser = () => {
     const [user, setUser] = useUserStore();
-    const { data: userData, isLoading } = useUserQuery();
+    const { data: userData } = useUserQuery();
 
     useEffect(() => {
         if (userData) setUser(userData);
     }, [setUser, userData]);
 
-    return { userData: user, isLoggedIn: isLoading || !!userData };
+    return { userData: user, isLoggedIn: !!userData };
 };
 
 export default useUser;
diff --git a/apps/user/src/services/form/mutations.ts b/apps/user/src/services/form/mutations.ts
@@ -1,16 +1,15 @@
-import { FormDocument } from '@/types/form/client';
-import { Form } from '@/types/form/client';
-import { Dispatch, SetStateAction } from 'react';
+import { useSetFormStepStore, useSetFormStore } from '@/store';
+import { Form, FormDocument } from '@/types/form/client';
 import { useMutation } from '@tanstack/react-query';
+import { AxiosError, AxiosResponse } from 'axios';
+import { Dispatch, SetStateAction } from 'react';
 import {
     postSaveForm,
     postSubmitDraftForm,
     postSubmitFinalForm,
     postUploadFormDocumnet,
     postUploadProfileImage,
 } from './api';
-import { useSetFormStepStore, useFormValueStore, useSetFormStore } from '@/store';
-import { Axios, AxiosError, AxiosResponse } from 'axios';
 
 export const useSubmitFinalFormMutation = (formUrl: string) => {
     const setFormStep = useSetFormStepStore();

diff --git a/apps/user/src/services/form/queries.ts b/apps/user/src/services/form/queries.ts
@@ -28,6 +28,7 @@ export const useSaveFormQuery = () => {
     const { data, ...restQuery } = useQuery({
         queryKey: [KEY.SAVE_FORM],
         queryFn: getSaveForm,
+        enabled: !!Storage.getItem(TOKEN.ACCESS),
         retry: 1,
         suspense: false,
     });
@@ -39,6 +40,7 @@ export const useFormStatusQuery = () => {
     const { data, ...restQuery } = useQuery({
         queryKey: [KEY.FORM_STATUS],
         queryFn: getFormStatus,
+        enabled: !!Storage.getItem(TOKEN.ACCESS),
         suspense: false,
         retry: 1,
     });

diff --git a/apps/user/src/store/user/user.ts b/apps/user/src/store/user/user.ts
@@ -5,7 +5,7 @@ const userAtomState = atom<User>({
     key: 'user',
     default: {
         email: '',
-        authority: 'USER',
+        authority: '',
         name: '',
     },
 });

diff --git a/apps/user/src/types/user/client.ts b/apps/user/src/types/user/client.ts
@@ -1,5 +1,5 @@
 export interface User {
     email: string;
     name: string;
-    authority: 'USER' | 'ADMIN';
+    authority: string;
 }