From 2320ddbbbf7a250b70c19eaa3d0bcf8f38574d5d Mon Sep 17 00:00:00 2001 From: chaeneey <127743435+chaeneey@users.noreply.github.com> Date: Sun, 1 Sep 2024 16:45:55 +0900 Subject: [PATCH 01/18] =?UTF-8?q?[Feat/#237]=20eslint=20import=20=EC=88=9C?= =?UTF-8?q?=EC=84=9C=20=EC=84=A4=EC=A0=95=20/=20url=20=EC=88=98=EC=A0=95?= =?UTF-8?q?=20/=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=EB=AA=85=20?= =?UTF-8?q?=EC=88=98=EC=A0=95=20/=20ClassApply=20=EA=B5=AC=EC=A1=B0=20?= =?UTF-8?q?=EB=B3=80=EA=B2=BD=20(#239)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat: import 정렬 설정하기 * feat: import 예쁘게 정렬하기 - 순서 정하기 * chore: 필요없는 주석 제거 * chore: url 수정 (classList, classApply 빼고) + Categories -> ClassList로 이름 수정 * feat: categories -> classList로 바꾸기 / ClassApply 만들기 * feat: ClassApply 컴포넌트 갈아끼우는 구조로 변경 + 자잘한 url 이슈 수정 * chore: 안쓰는 코드 지우고 애매한 부분 주석 달아두기 * feat: mutateAsync로 바꾸기 * feat: prettier 패키지 설치 / eslint @types, @schema 부분 한 그룹에 넣기 * refactor: 코드리뷰 반영 (Header, ProgressBar 공통으로 빼기, mutateAsync 빼기, requestData도 함수 안에 선언) * refactor: 코드리뷰 반영 (handleChangePage 함수 인자 안받게 변경) * refactor: 코드리뷰 반영 (함수 이름 컨벤션 맞게 수정) * refactor: 코드리뷰 반영 (updateAnswer 함수 하나로 answer, account 부분 수정 가능하게 합치기) * refactor: 코드리뷰 반영 (useClassApply 훅 만들기) --- .eslintrc.cjs | 60 +- package.json | 5 + src/App.tsx | 17 +- src/apis/domains/actuator/useFetchHealth.ts | 3 +- src/apis/domains/host/index.ts | 4 +- src/apis/domains/host/useFetchMoimHost.ts | 8 +- src/apis/domains/host/usePostHostApply.ts | 7 +- src/apis/domains/moim/useFetchGuestApply.ts | 4 +- .../domains/moim/useFetchGuestParticipate.ts | 4 +- src/apis/domains/moim/useFetchHostMoimInfo.ts | 4 +- src/apis/domains/moim/useFetchMoimBanner.ts | 7 +- .../domains/moim/useFetchMoimCategories.ts | 7 +- .../domains/moim/useFetchMoimDescription.ts | 4 +- src/apis/domains/moim/useFetchMoimDetail.ts | 4 +- .../moim/useFetchMoimListByCategory.ts | 6 +- src/apis/domains/moim/useFetchMyHost.ts | 4 +- src/apis/domains/moim/useFetchQuestionList.ts | 6 +- .../moim/useFetchSubmittedMoimDetail.ts | 4 +- src/apis/domains/moim/usePostMoim.ts | 7 +- .../moimSubmission/useFetchSubmitRequest.ts | 6 +- .../moimSubmission/useFetchSubmitterList.ts | 4 +- .../moimSubmission/usePatchSubmitter.ts | 8 +- .../moimSubmission/usePostAnswerList.ts | 16 +- .../domains/notice/useFetchMoimNoticeList.ts | 6 +- src/apis/domains/notice/usePostNotice.ts | 7 +- .../presignedUrl/useFetchPresignedUrl.ts | 1 + .../submitter/useFetchHostSubmitterList.ts | 4 +- .../submitter/usePatchHostSubmitter.tsx | 8 +- src/apis/domains/test/usePostTest.ts | 3 +- src/apis/domains/user/usePostKakaoLogin.ts | 9 +- src/apis/domains/user/usePostLogout.ts | 8 +- .../AbsoluteModal/AbsoluteModal.style.ts | 3 +- .../common/AbsoluteModal/AbsoluteModal.tsx | 1 + src/components/common/Carousel/Carousel.tsx | 2 +- .../CategorySelectBox.style.ts | 1 + .../CategorySelectBox/CategorySelectBox.tsx | 1 + .../common/CountPeople/CountPeople.style.ts | 35 +- .../common/CountPeople/CountPeople.tsx | 1 + .../common/DateSelect/DateSelect.style.ts | 1 + .../common/DateSelect/DateSelect.tsx | 16 +- src/components/common/Footer/Footer.style.ts | 1 + src/components/common/Footer/Footer.tsx | 1 + .../common/IconText/IconText.style.ts | 1 + src/components/common/IconText/IconText.tsx | 1 + src/components/common/Image/Image.tsx | 3 +- .../common/ImageSelect/ImageSelect.style.ts | 6 +- .../common/ImageSelect/ImageSelect.tsx | 10 +- src/components/common/Label/Label.style.ts | 1 + src/components/common/Modal/Modal.style.ts | 1 + src/components/common/Modal/Modal.tsx | 1 + .../common/NavigateBox/NavigateBox.style.ts | 4 +- .../common/NavigateBox/NavigateBox.tsx | 4 +- src/components/common/Notice/Notice.style.ts | 1 + src/components/common/Notice/Notice.tsx | 1 + .../common/NumberLabel/NumberLabel.tsx | 3 +- .../common/ProgressBar/ProgressBar.style.ts | 11 +- .../QuestionInput/QuestionInput.style.ts | 1 + .../common/QuestionInput/QuestionInput.tsx | 1 + .../common/QuestionText/QuestionText.style.ts | 2 +- .../common/QuestionText/QuestionText.tsx | 2 + .../SimpleUserProfile.style.ts | 1 + .../SimpleUserProfile/SimpleUserProfile.tsx | 4 +- .../common/TextArea/TextArea.style.ts | 72 +- .../common/TimeSelect/TimeSelect.style.ts | 37 +- .../common/TimeSelect/TimeSelect.tsx | 4 +- src/components/common/Toast/Toast.style.ts | 42 +- src/components/common/Toast/Toast.tsx | 3 +- .../ApplicantAccordion.style.ts | 1 + .../ApplicantAccordion/ApplicantAccordion.tsx | 8 +- .../ApplicantAccordionList.style.ts | 1 + .../ApplicantAccordionList.tsx | 3 +- .../applicantAccordions/mergeApplicantData.ts | 1 - .../common/buttons/Button/Button.style.ts | 1 + .../common/buttons/Button/Button.tsx | 3 +- .../CategoryButton/CategoryButton.style.ts | 62 +- .../buttons/CategoryButton/CategoryButton.tsx | 1 + .../ClipboardCopyButton.style.ts | 1 + .../ClipboardCopyButton.tsx | 6 +- .../buttons/IconButton/IconButton.style.ts | 1 + .../common/buttons/IconButton/IconButton.tsx | 1 + .../InterestCategoryButton.style.ts | 1 + .../InterestCategoryButton.tsx | 3 +- .../buttons/PayButton/PayButton.style.ts | 1 + .../common/buttons/PayButton/PayButton.tsx | 10 +- .../SelectButton/SelectButton.style.ts | 1 + .../buttons/ShareButton/ShareButton.style.ts | 1 + .../buttons/ShareButton/ShareButton.tsx | 4 +- .../SocialLoginButton.style.ts | 1 + .../SocialLoginButton/SocialLoginButton.tsx | 1 + .../common/headers/Header/Header.style.ts | 32 +- .../common/headers/Header/Header.tsx | 3 +- .../headers/LogoHeader/LogoHeader.style.ts | 1 + .../common/headers/LogoHeader/LogoHeader.tsx | 3 +- src/components/common/index.ts | 55 +- .../AccountNumberInput/AccountNumberInput.tsx | 1 + .../common/inputs/Input/Input.style.ts | 57 +- src/components/common/inputs/Input/Input.tsx | 1 + .../select/FilterSelect/FilterSelect.style.ts | 1 + .../select/FilterSelect/FilterSelect.tsx | 4 +- .../common/select/Select/Select.style.ts | 1 + .../common/select/Select/Select.tsx | 10 +- src/constants/category.tsx | 3 +- src/constants/index.ts | 6 +- src/constants/mocks/classApplyQuestionData.ts | 12 +- src/constants/mocks/hostInfoCardData.ts | 2 +- src/constants/routePath.ts | 19 +- src/hooks/index.ts | 2 +- src/hooks/useEasyNavigate.ts | 1 + src/main.tsx | 1 + .../page/HostSubmitter/HostSubmitter.style.ts | 26 +- .../page/HostSubmitter/HostSubmitter.tsx | 6 +- src/pages/auth/page/Login/Login.style.ts | 1 + src/pages/auth/page/Login/Login.tsx | 10 +- .../auth/page/Redirection/Redirection.tsx | 3 +- src/pages/categories/components/index.ts | 4 - src/pages/categories/page/index.ts | 3 - .../AddAmountBox/AddAmountBox.style.ts | 1 + .../components/AddAmountBox/AddAmountBox.tsx | 1 + .../ClassNotice/ClassNotice.style.ts | 1 + .../components/ClassNotice/ClassNotice.tsx | 4 +- .../ClassNoticeEmptyView.style.ts | 1 + .../ClassNoticeEmptyView.tsx | 1 + .../class/components/ClassPost/ClassPost.tsx | 6 +- .../ClassReviewEmptyView.style.ts | 1 + .../ClassReviewEmptyView.tsx | 1 + .../GuestClassRegisterCard.style.ts | 1 + .../GuestClassRegisterCard.tsx | 18 +- .../HostInfoCard/HostInfoCard.style.ts | 1 + .../components/HostInfoCard/HostInfoCard.tsx | 3 +- .../components/NoticeCard/NoticeCard.style.ts | 1 + .../components/NoticeCard/NoticeCard.tsx | 6 +- .../components/StepFour/StepFour.style.ts | 1 + .../class/components/StepFour/StepFour.tsx | 12 +- .../class/components/StepOne/StepOne.style.ts | 1 + .../class/components/StepOne/StepOne.tsx | 16 +- .../components/StepThree/StepThree.style.ts | 1 + .../class/components/StepThree/StepThree.tsx | 20 +- .../class/components/StepTwo/StepTwo.style.ts | 1 + .../class/components/StepTwo/StepTwo.tsx | 7 +- src/pages/class/components/index.ts | 8 +- src/pages/class/hooks/useClassApply.ts | 39 + .../class/hooks/useClassPostInputChange.ts | 1 + src/pages/class/page/Class/Class.style.ts | 47 +- src/pages/class/page/Class/Class.tsx | 73 +- .../class/page/ClassApply/ClassApply.style.ts | 5 + .../class/page/ClassApply/ClassApply.tsx | 19 + .../ClassApplyComplete.style.ts | 13 +- .../ClassApplyComplete/ClassApplyComplete.tsx | 79 +- .../ClassApplyDeposit.style.ts | 10 +- .../ClassApplyDeposit/ClassApplyDeposit.tsx | 83 +- .../ClassApplyQuestion.style.ts | 6 +- .../ClassApplyQuestion/ClassApplyQuestion.tsx | 233 +- .../ClassApplyRule/ClassApplyRule.style.ts | 5 +- .../ClassApplyRule/ClassApplyRule.tsx | 74 +- .../page/ClassNotice/ClassNotice.style.ts | 1 + .../class/page/ClassNotice/ClassNotice.tsx | 14 +- .../page/ClassPostPage/ClassPostPage.tsx | 6 +- src/pages/class/page/index.ts | 8 +- .../ClassListCard/ClassListCard.style.ts | 1 + .../ClassListCard/ClassListCard.tsx | 5 +- .../ClassListEmptyView.style.ts} | 1 + .../ClassListEmptyView.tsx} | 7 +- src/pages/classList/components/index.ts | 4 + .../{categories => classList}/hooks/.keep | 0 .../page/ClassList/ClassList.style.ts} | 1 + .../page/ClassList/ClassList.tsx} | 25 +- src/pages/classList/page/index.ts | 3 + src/pages/dev/page/Card/Card.tsx | 2 +- .../dev/page/Components/Components.style.ts | 1 + src/pages/dev/page/Components/Components.tsx | 18 +- src/pages/error/Error.style.ts | 4 +- src/pages/error/Error.tsx | 8 +- .../DepositErrorModal.style.ts | 1 + .../DepositErrorModal/DepositErrorModal.tsx | 3 +- .../DepositModal/DepositModal.style.ts | 1 + .../components/DepositModal/DepositModal.tsx | 1 + .../GuestMyClassEmptyView.style.ts | 1 + .../GuestMyClassEmptyView.tsx | 6 +- .../components/MoimCard/MoimCard.style.ts | 1 + .../guest/components/MoimCard/MoimCard.tsx | 11 +- src/pages/guest/components/index.ts | 2 +- .../page/GuestMyClass/GuestMyClass.style.ts | 10 +- .../guest/page/GuestMyClass/GuestMyClass.tsx | 15 +- src/pages/home/page/Home/Home.style.ts | 1 + src/pages/home/page/Home/Home.tsx | 17 +- .../ApplicantListModal.style.ts | 1 + .../ApplicantListModal/ApplicantListModal.tsx | 15 +- .../ClassManageEmptyView.style.ts | 1 + .../ClassManageEmptyView.tsx | 9 +- .../host/components/HostApply/HostApply.tsx | 6 +- .../HostMyClassCard/HostMyClassCard.style.ts | 1 + .../HostMyClassCard/HostMyClassCard.tsx | 5 +- .../HostMyClassEmptyView.style.ts | 1 + .../HostMyClassEmptyView.tsx | 6 +- .../host/components/StepOne/StepOne.style.ts | 1 + src/pages/host/components/StepOne/StepOne.tsx | 7 +- .../components/StepThree/StepThree.style.ts | 1 + .../host/components/StepThree/StepThree.tsx | 5 +- .../host/components/StepTwo/StepTwo.style.ts | 1 + src/pages/host/components/StepTwo/StepTwo.tsx | 14 +- src/pages/host/components/index.ts | 21 +- .../host/hooks/useHostApplyInputChange.ts | 8 +- .../host/page/HostApplyPage/HostApplyPage.tsx | 6 +- .../page/HostMyClass/HostMyClass.style.ts | 10 +- .../host/page/HostMyClass/HostMyClass.tsx | 21 +- .../page/MyClassManage/MyClassManage.style.ts | 2 +- .../host/page/MyClassManage/MyClassManage.tsx | 17 +- src/pages/host/page/index.ts | 2 +- .../HostInfoCardWithLink.style.ts | 1 + .../HostInfoCardWithLink.tsx | 11 +- .../HostMyPageEmptyView.style.ts | 1 + .../HostMyPageEmptyView.tsx | 6 +- .../LogoutModal/LogoutModal.style.ts | 1 + .../components/LogoutModal/LogoutModal.tsx | 4 +- .../page/GuestMyPage/GuestMyPage.style.ts | 1 + .../myPage/page/GuestMyPage/GuestMyPage.tsx | 20 +- .../page/HostMyPage/HostMyPage.style.ts | 1 + .../myPage/page/HostMyPage/HostMyPage.tsx | 23 +- src/routes/PrivateRoute/PrivateRoute.tsx | 3 +- src/routes/adminRoutes.tsx | 5 +- src/routes/authRoutes.tsx | 3 +- src/routes/categoriesRoutes.tsx | 12 - src/routes/classListRoutes.tsx | 13 + src/routes/classRoutes.tsx | 44 +- src/routes/errorRoutes.tsx | 1 + src/routes/guestRoutes.tsx | 4 +- src/routes/homeRoutes.tsx | 3 +- src/routes/hostRoutes.tsx | 3 +- src/routes/index.ts | 9 +- src/routes/myPageRoutes.tsx | 3 +- src/stores/classPostData.ts | 1 + src/stores/hostApplyData.ts | 3 +- src/stores/index.ts | 2 +- src/stores/user.ts | 4 +- src/styles/emotion.d.ts | 6 +- src/styles/theme.ts | 19 +- src/types/api/schema/index.ts | 5012 +++++++++++------ src/types/responseType.ts | 10 +- src/types/routeType.ts | 2 +- src/utils/day.ts | 2 +- src/utils/getDeviceType.ts | 32 +- src/utils/image.ts | 3 +- src/utils/postMoimTypeChange.ts | 47 +- vite.config.ts | 2 +- yarn.lock | 831 ++- 245 files changed, 5374 insertions(+), 2821 deletions(-) delete mode 100644 src/pages/categories/components/index.ts delete mode 100644 src/pages/categories/page/index.ts create mode 100644 src/pages/class/hooks/useClassApply.ts create mode 100644 src/pages/class/page/ClassApply/ClassApply.style.ts create mode 100644 src/pages/class/page/ClassApply/ClassApply.tsx rename src/pages/{categories => classList}/components/ClassListCard/ClassListCard.style.ts (99%) rename src/pages/{categories => classList}/components/ClassListCard/ClassListCard.tsx (94%) rename src/pages/{categories/components/CategoryEmptyView/CategoryEmptyView.style.ts => classList/components/ClassListEmptyView/ClassListEmptyView.style.ts} (99%) rename src/pages/{categories/components/CategoryEmptyView/CategoryEmptyView.tsx => classList/components/ClassListEmptyView/ClassListEmptyView.tsx} (80%) create mode 100644 src/pages/classList/components/index.ts rename src/pages/{categories => classList}/hooks/.keep (100%) rename src/pages/{categories/page/Categories/Categories.style.ts => classList/page/ClassList/ClassList.style.ts} (99%) rename src/pages/{categories/page/Categories/Categories.tsx => classList/page/ClassList/ClassList.tsx} (94%) create mode 100644 src/pages/classList/page/index.ts delete mode 100644 src/routes/categoriesRoutes.tsx create mode 100644 src/routes/classListRoutes.tsx diff --git a/.eslintrc.cjs b/.eslintrc.cjs index d6c95379..e2365072 100644 --- a/.eslintrc.cjs +++ b/.eslintrc.cjs @@ -5,14 +5,64 @@ module.exports = { 'eslint:recommended', 'plugin:@typescript-eslint/recommended', 'plugin:react-hooks/recommended', + 'plugin:import/recommended', + 'plugin:prettier/recommended', ], ignorePatterns: ['dist', '.eslintrc.cjs'], parser: '@typescript-eslint/parser', - plugins: ['react-refresh'], + plugins: ['react-refresh', 'import'], rules: { - 'react-refresh/only-export-components': [ - 'warn', - { allowConstantExport: true }, + 'prettier/prettier': 'error', + 'react-refresh/only-export-components': ['warn', { allowConstantExport: true }], + 'import/order': [ + 'error', + { + groups: [ + 'builtin', + 'external', + 'internal', + ['parent', 'sibling', 'index'], + 'object', + 'type', + ], + pathGroups: [ + { + pattern: 'react', + group: 'external', + position: 'before', + }, + { + pattern: 'react*', + group: 'external', + position: 'before', + }, + { + pattern: '@tanstack/*', + group: 'external', + position: 'before', + }, + { + pattern: '@apis/**', + group: 'internal', + position: 'before', + }, + { + pattern: '{@types,@schema}', + group: 'type', + position: 'before', + }, + ], + alphabetize: { order: 'asc', caseInsensitive: true }, + 'newlines-between': 'always', + }, ], }, -} + settings: { + 'import/resolver': { + typescript: { + alwaysTryTypes: true, + project: './tsconfig.app.json', + }, + }, + }, +}; diff --git a/package.json b/package.json index 4ac8c82d..4e6c9307 100644 --- a/package.json +++ b/package.json @@ -34,8 +34,13 @@ "@typescript-eslint/parser": "^7.13.1", "@vitejs/plugin-react-swc": "^3.5.0", "eslint": "^8.57.0", + "eslint-config-prettier": "^9.1.0", + "eslint-import-resolver-typescript": "^3.6.1", + "eslint-plugin-import": "^2.29.1", + "eslint-plugin-prettier": "^5.2.1", "eslint-plugin-react-hooks": "^4.6.2", "eslint-plugin-react-refresh": "^0.4.7", + "prettier": "^3.3.3", "typescript": "^5.2.2", "vite": "^5.3.1", "vite-plugin-svgr": "^4.2.0", diff --git a/src/App.tsx b/src/App.tsx index 73433af0..da2ae9ab 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,33 +1,34 @@ import { Global, ThemeProvider } from '@emotion/react'; -import { createBrowserRouter, RouterProvider } from 'react-router-dom'; -import theme from './styles/theme'; -import GlobalStyle from './styles/global'; import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; import { ReactQueryDevtools } from '@tanstack/react-query-devtools'; +import { createBrowserRouter, RouterProvider } from 'react-router-dom'; + import { authRoutes, - categoriesRoutes, + classListRoutes, classRoutes, guestRoutes, homeRoutes, hostRoutes, myPageRoutes, //devRoutes, - adminRoutes - + adminRoutes, } from '@routes'; + import errorPageRoutes from './routes/errorRoutes'; import PrivateRoute from './routes/PrivateRoute/PrivateRoute'; +import GlobalStyle from './styles/global'; +import theme from './styles/theme'; const allRoutes = [ - ...categoriesRoutes, + ...classListRoutes, ...classRoutes, ...guestRoutes, ...homeRoutes, ...hostRoutes, ...myPageRoutes, ...errorPageRoutes, - ...adminRoutes + ...adminRoutes, // ...devRoutes, ]; diff --git a/src/apis/domains/actuator/useFetchHealth.ts b/src/apis/domains/actuator/useFetchHealth.ts index fc206f6b..a9a8dbdc 100644 --- a/src/apis/domains/actuator/useFetchHealth.ts +++ b/src/apis/domains/actuator/useFetchHealth.ts @@ -1,6 +1,7 @@ import { useQuery } from '@tanstack/react-query'; -import { QUERY_KEY } from '@apis/queryKeys/queryKeys'; + import { get } from '@apis/api'; +import { QUERY_KEY } from '@apis/queryKeys/queryKeys'; const getHealth = async () => { const response = await get('/actuator/health'); diff --git a/src/apis/domains/host/index.ts b/src/apis/domains/host/index.ts index 50190773..db476faf 100644 --- a/src/apis/domains/host/index.ts +++ b/src/apis/domains/host/index.ts @@ -1,4 +1,4 @@ -import { usePostHostApply } from './usePostHostApply'; import { useFetchMoimHost } from './useFetchMoimHost'; +import { usePostHostApply } from './usePostHostApply'; -export { usePostHostApply, useFetchMoimHost }; \ No newline at end of file +export { usePostHostApply, useFetchMoimHost }; diff --git a/src/apis/domains/host/useFetchMoimHost.ts b/src/apis/domains/host/useFetchMoimHost.ts index 515c2c93..52260f30 100644 --- a/src/apis/domains/host/useFetchMoimHost.ts +++ b/src/apis/domains/host/useFetchMoimHost.ts @@ -1,8 +1,10 @@ import { useQuery } from '@tanstack/react-query'; -import { QUERY_KEY } from '@apis/queryKeys/queryKeys'; + import { get } from '@apis/api'; -import { ApiResponseType } from '@types'; +import { QUERY_KEY } from '@apis/queryKeys/queryKeys'; + import { components } from '@schema'; +import { ApiResponseType } from '@types'; type HostByMoimResponse = components['schemas']['HostByMoimResponse']; @@ -26,4 +28,4 @@ export const useFetchMoimHost = (hostId: number) => { refetchOnWindowFocus: false, enabled: !!hostId && hostId > 0, }); -}; \ No newline at end of file +}; diff --git a/src/apis/domains/host/usePostHostApply.ts b/src/apis/domains/host/usePostHostApply.ts index 42428e53..918a26d6 100644 --- a/src/apis/domains/host/usePostHostApply.ts +++ b/src/apis/domains/host/usePostHostApply.ts @@ -1,10 +1,13 @@ +import { useQueryClient, useMutation } from '@tanstack/react-query'; +import { Dispatch, RefObject, SetStateAction } from 'react'; + import { post } from '@apis/api'; import { QUERY_KEY } from '@apis/queryKeys/queryKeys'; + import { useEasyNavigate } from '@hooks'; + import { components } from '@schema'; -import { useQueryClient, useMutation } from '@tanstack/react-query'; import { ErrorResponse, ErrorType, MutateResponseType } from '@types'; -import { Dispatch, RefObject, SetStateAction } from 'react'; type HostApplyRequest = components['schemas']['SubmitterCreateRequest']; diff --git a/src/apis/domains/moim/useFetchGuestApply.ts b/src/apis/domains/moim/useFetchGuestApply.ts index c6a12c73..d4189a2d 100644 --- a/src/apis/domains/moim/useFetchGuestApply.ts +++ b/src/apis/domains/moim/useFetchGuestApply.ts @@ -1,7 +1,9 @@ +import { keepPreviousData, useQuery } from '@tanstack/react-query'; + import { get } from '@apis/api'; import { QUERY_KEY } from '@apis/queryKeys/queryKeys'; + import { components } from '@schema'; -import { keepPreviousData, useQuery } from '@tanstack/react-query'; import { ApiResponseType } from '@types'; type SubmittedMoimByGuestResponse = components['schemas']['SubmittedMoimByGuestResponse']; diff --git a/src/apis/domains/moim/useFetchGuestParticipate.ts b/src/apis/domains/moim/useFetchGuestParticipate.ts index 3404e108..829c452d 100644 --- a/src/apis/domains/moim/useFetchGuestParticipate.ts +++ b/src/apis/domains/moim/useFetchGuestParticipate.ts @@ -1,7 +1,9 @@ +import { useQuery } from '@tanstack/react-query'; + import { get } from '@apis/api'; import { QUERY_KEY } from '@apis/queryKeys/queryKeys'; + import { components } from '@schema'; -import { useQuery } from '@tanstack/react-query'; import { ApiResponseType } from '@types'; type SubmittedMoimByGuestResponse = components['schemas']['SubmittedMoimByGuestResponse']; diff --git a/src/apis/domains/moim/useFetchHostMoimInfo.ts b/src/apis/domains/moim/useFetchHostMoimInfo.ts index b69bcb2c..b785cce0 100644 --- a/src/apis/domains/moim/useFetchHostMoimInfo.ts +++ b/src/apis/domains/moim/useFetchHostMoimInfo.ts @@ -1,7 +1,9 @@ +import { keepPreviousData, useQuery } from '@tanstack/react-query'; + import { get } from '@apis/api'; import { QUERY_KEY } from '@apis/queryKeys/queryKeys'; + import { components } from '@schema'; -import { keepPreviousData, useQuery } from '@tanstack/react-query'; import { ApiResponseType } from '@types'; type MoimListByHostGetResponse = components['schemas']['MoimListByHostGetResponse']; diff --git a/src/apis/domains/moim/useFetchMoimBanner.ts b/src/apis/domains/moim/useFetchMoimBanner.ts index f1271a09..6d2fe0f8 100644 --- a/src/apis/domains/moim/useFetchMoimBanner.ts +++ b/src/apis/domains/moim/useFetchMoimBanner.ts @@ -1,9 +1,12 @@ import { useQuery } from '@tanstack/react-query'; -import { QUERY_KEY } from '@apis/queryKeys/queryKeys'; + import { get } from '@apis/api'; -import { ApiResponseType } from '@types'; +import { QUERY_KEY } from '@apis/queryKeys/queryKeys'; + import { isLoggedIn } from '@utils'; +import { ApiResponseType } from '@types'; + const getMoimBanner = async (): Promise => { try { const response = await get>('/moim/banner'); diff --git a/src/apis/domains/moim/useFetchMoimCategories.ts b/src/apis/domains/moim/useFetchMoimCategories.ts index 7a83f5ff..d6e3e4e2 100644 --- a/src/apis/domains/moim/useFetchMoimCategories.ts +++ b/src/apis/domains/moim/useFetchMoimCategories.ts @@ -1,9 +1,12 @@ import { useQuery } from '@tanstack/react-query'; -import { QUERY_KEY } from '@apis/queryKeys/queryKeys'; + import { get } from '@apis/api'; -import { ApiResponseType } from '@types'; +import { QUERY_KEY } from '@apis/queryKeys/queryKeys'; + import { isLoggedIn } from '@utils'; +import { ApiResponseType } from '@types'; + const getMoimCategories = async (): Promise => { try { const response = await get>('/moim/categories'); diff --git a/src/apis/domains/moim/useFetchMoimDescription.ts b/src/apis/domains/moim/useFetchMoimDescription.ts index 4725faed..d987c3c6 100644 --- a/src/apis/domains/moim/useFetchMoimDescription.ts +++ b/src/apis/domains/moim/useFetchMoimDescription.ts @@ -1,6 +1,8 @@ import { useQuery } from '@tanstack/react-query'; -import { QUERY_KEY } from '@apis/queryKeys/queryKeys'; + import { get } from '@apis/api'; +import { QUERY_KEY } from '@apis/queryKeys/queryKeys'; + import { ApiResponseType } from '@types'; const getMoimDescription = async (moimId: string): Promise => { diff --git a/src/apis/domains/moim/useFetchMoimDetail.ts b/src/apis/domains/moim/useFetchMoimDetail.ts index a098cd3a..34a3c544 100644 --- a/src/apis/domains/moim/useFetchMoimDetail.ts +++ b/src/apis/domains/moim/useFetchMoimDetail.ts @@ -1,6 +1,8 @@ import { useQuery } from '@tanstack/react-query'; -import { QUERY_KEY } from '@apis/queryKeys/queryKeys'; + import { get } from '@apis/api'; +import { QUERY_KEY } from '@apis/queryKeys/queryKeys'; + import { components } from '@schema'; import { ApiResponseType } from '@types'; diff --git a/src/apis/domains/moim/useFetchMoimListByCategory.ts b/src/apis/domains/moim/useFetchMoimListByCategory.ts index 50928483..3514726a 100644 --- a/src/apis/domains/moim/useFetchMoimListByCategory.ts +++ b/src/apis/domains/moim/useFetchMoimListByCategory.ts @@ -1,8 +1,10 @@ import { useQuery } from '@tanstack/react-query'; -import { QUERY_KEY } from '@apis/queryKeys/queryKeys'; + import { get } from '@apis/api'; -import { ApiResponseType } from '@types'; +import { QUERY_KEY } from '@apis/queryKeys/queryKeys'; + import { components } from '@schema'; +import { ApiResponseType } from '@types'; type MoimByCategoryResponse = components['schemas']['MoimByCategoryResponse']; diff --git a/src/apis/domains/moim/useFetchMyHost.ts b/src/apis/domains/moim/useFetchMyHost.ts index c7014ad0..d7c35002 100644 --- a/src/apis/domains/moim/useFetchMyHost.ts +++ b/src/apis/domains/moim/useFetchMyHost.ts @@ -1,7 +1,9 @@ +import { useQuery } from '@tanstack/react-query'; + import { get } from '@apis/api'; import { QUERY_KEY } from '@apis/queryKeys/queryKeys'; + import { components } from '@schema'; -import { useQuery } from '@tanstack/react-query'; import { ApiResponseType } from '@types'; type HostGetResponse = components['schemas']['HostGetResponse']; diff --git a/src/apis/domains/moim/useFetchQuestionList.ts b/src/apis/domains/moim/useFetchQuestionList.ts index 55cc0b45..409c0520 100644 --- a/src/apis/domains/moim/useFetchQuestionList.ts +++ b/src/apis/domains/moim/useFetchQuestionList.ts @@ -1,8 +1,10 @@ import { useQuery } from '@tanstack/react-query'; -import { QUERY_KEY } from '@apis/queryKeys/queryKeys'; + import { get } from '@apis/api'; -import { ApiResponseType } from '@types'; +import { QUERY_KEY } from '@apis/queryKeys/queryKeys'; + import { components } from '@schema'; +import { ApiResponseType } from '@types'; type QuestionInfo = components['schemas']['QuestionInfo']; diff --git a/src/apis/domains/moim/useFetchSubmittedMoimDetail.ts b/src/apis/domains/moim/useFetchSubmittedMoimDetail.ts index 8a1b3c2d..34adc9e0 100644 --- a/src/apis/domains/moim/useFetchSubmittedMoimDetail.ts +++ b/src/apis/domains/moim/useFetchSubmittedMoimDetail.ts @@ -1,6 +1,8 @@ import { useQuery } from '@tanstack/react-query'; -import { QUERY_KEY } from '@apis/queryKeys/queryKeys'; + import { get } from '@apis/api'; +import { QUERY_KEY } from '@apis/queryKeys/queryKeys'; + import { components } from '@schema'; import { ApiResponseType } from '@types'; diff --git a/src/apis/domains/moim/usePostMoim.ts b/src/apis/domains/moim/usePostMoim.ts index c1a53457..93936126 100644 --- a/src/apis/domains/moim/usePostMoim.ts +++ b/src/apis/domains/moim/usePostMoim.ts @@ -1,10 +1,13 @@ +import { useMutation, useQueryClient } from '@tanstack/react-query'; + import { post } from '@apis/api'; import { QUERY_KEY } from '@apis/queryKeys/queryKeys'; -import { useMutation, useQueryClient } from '@tanstack/react-query'; -import { ApiResponseType, ErrorResponse } from '@types'; + import { ClassPostDataType } from 'src/stores/types/classPostDataType'; import { transformClassPostState } from 'src/utils/postMoimTypeChange'; +import { ApiResponseType, ErrorResponse } from '@types'; + interface postMoimResponseType { moimId: number; } diff --git a/src/apis/domains/moimSubmission/useFetchSubmitRequest.ts b/src/apis/domains/moimSubmission/useFetchSubmitRequest.ts index 3e717189..d2ce41bd 100644 --- a/src/apis/domains/moimSubmission/useFetchSubmitRequest.ts +++ b/src/apis/domains/moimSubmission/useFetchSubmitRequest.ts @@ -1,8 +1,10 @@ +import { useQuery } from '@tanstack/react-query'; + import { get } from '@apis/api'; import { QUERY_KEY } from '@apis/queryKeys/queryKeys'; -import { useQuery } from '@tanstack/react-query'; -import { ApiResponseType } from '@types'; + import { components } from '@schema'; +import { ApiResponseType } from '@types'; type SubmittionDetailResponse = components['schemas']['SubmittionDetailResponse']; diff --git a/src/apis/domains/moimSubmission/useFetchSubmitterList.ts b/src/apis/domains/moimSubmission/useFetchSubmitterList.ts index 34bb39bd..7f1e549a 100644 --- a/src/apis/domains/moimSubmission/useFetchSubmitterList.ts +++ b/src/apis/domains/moimSubmission/useFetchSubmitterList.ts @@ -1,7 +1,9 @@ +import { useQuery } from '@tanstack/react-query'; + import { get } from '@apis/api'; import { QUERY_KEY } from '@apis/queryKeys/queryKeys'; + import { components } from '@schema'; -import { useQuery } from '@tanstack/react-query'; import { ApiResponseType } from '@types'; type MoimSubmissionByMoimResponse = components['schemas']['MoimSubmissionByMoimResponse']; diff --git a/src/apis/domains/moimSubmission/usePatchSubmitter.ts b/src/apis/domains/moimSubmission/usePatchSubmitter.ts index ec580392..c0f464c3 100644 --- a/src/apis/domains/moimSubmission/usePatchSubmitter.ts +++ b/src/apis/domains/moimSubmission/usePatchSubmitter.ts @@ -1,10 +1,12 @@ +import { useMutation, useQueryClient } from '@tanstack/react-query'; +import { useAtom } from 'jotai'; +import { useNavigate } from 'react-router-dom'; + import { patch } from '@apis/api'; import { QUERY_KEY } from '@apis/queryKeys/queryKeys'; + import { userAtom } from '@stores'; -import { useMutation, useQueryClient } from '@tanstack/react-query'; import { smoothScroll } from '@utils'; -import { useAtom } from 'jotai'; -import { useNavigate } from 'react-router-dom'; export interface PatchSubmitterRequest { moimId: number; diff --git a/src/apis/domains/moimSubmission/usePostAnswerList.ts b/src/apis/domains/moimSubmission/usePostAnswerList.ts index da4a0b5c..992b4a7f 100644 --- a/src/apis/domains/moimSubmission/usePostAnswerList.ts +++ b/src/apis/domains/moimSubmission/usePostAnswerList.ts @@ -1,9 +1,13 @@ +import { useMutation, useQueryClient } from '@tanstack/react-query'; +import { useNavigate } from 'react-router-dom'; + import { post } from '@apis/api'; import { QUERY_KEY } from '@apis/queryKeys/queryKeys'; + import { DataType } from '@pages/class/page/ClassApply/ClassApplyQuestion/ClassApplyQuestion'; -import { useMutation, useQueryClient } from '@tanstack/react-query'; +import { ClassApplyProps } from '@pages/class/page/ClassApply/ClassApplyRule/ClassApplyRule'; + import { ErrorResponse, ErrorType, MutateResponseType } from '@types'; -import { useNavigate } from 'react-router-dom'; interface PostAnswerRequest { moimId: number; @@ -35,15 +39,13 @@ const postAnswerList = async ({ status: statusCode, message: errorMessage, }; - - throw new Error(errorMessage); } else { throw new Error('unknown error'); } } }; -export const usePostAnswerList = (moimId: string) => { +export const usePostAnswerList = ({ handlePageChange }: ClassApplyProps) => { const navigate = useNavigate(); const queryClient = useQueryClient(); return useMutation({ @@ -51,10 +53,10 @@ export const usePostAnswerList = (moimId: string) => { onSuccess: (data) => { queryClient.invalidateQueries({ queryKey: [QUERY_KEY.ANSWER_LIST] }); if (data.status === 20008) { - navigate(`/class/${moimId}/apply/deposit`); + handlePageChange(); } else { alert(data.message); - navigate(-2); + navigate(-1); } }, }); diff --git a/src/apis/domains/notice/useFetchMoimNoticeList.ts b/src/apis/domains/notice/useFetchMoimNoticeList.ts index 3d1354ca..21494117 100644 --- a/src/apis/domains/notice/useFetchMoimNoticeList.ts +++ b/src/apis/domains/notice/useFetchMoimNoticeList.ts @@ -1,8 +1,10 @@ import { useQuery } from '@tanstack/react-query'; -import { QUERY_KEY } from '@apis/queryKeys/queryKeys'; + import { get } from '@apis/api'; -import { ApiResponseType } from '@types'; +import { QUERY_KEY } from '@apis/queryKeys/queryKeys'; + import { components } from '@schema'; +import { ApiResponseType } from '@types'; type NoticeListGetByMoimResponse = components['schemas']['NoticeListGetByMoimResponse']; diff --git a/src/apis/domains/notice/usePostNotice.ts b/src/apis/domains/notice/usePostNotice.ts index 12f7a164..0dd4ac77 100644 --- a/src/apis/domains/notice/usePostNotice.ts +++ b/src/apis/domains/notice/usePostNotice.ts @@ -1,10 +1,13 @@ +import { useMutation, useQueryClient } from '@tanstack/react-query'; +import { useParams } from 'react-router-dom'; + import { post } from '@apis/api'; import { QUERY_KEY } from '@apis/queryKeys/queryKeys'; + import { useEasyNavigate } from '@hooks'; + import { components } from '@schema'; -import { useMutation, useQueryClient } from '@tanstack/react-query'; import { MoimIdPathParameterType } from '@types'; -import { useParams } from 'react-router-dom'; type MutateFunctionProps = { params: NoticeCreateRequest; diff --git a/src/apis/domains/presignedUrl/useFetchPresignedUrl.ts b/src/apis/domains/presignedUrl/useFetchPresignedUrl.ts index 379c33be..8cabf119 100644 --- a/src/apis/domains/presignedUrl/useFetchPresignedUrl.ts +++ b/src/apis/domains/presignedUrl/useFetchPresignedUrl.ts @@ -1,4 +1,5 @@ import { get } from '@apis/api'; + import { components } from '@schema'; import { ApiResponseType } from '@types'; diff --git a/src/apis/domains/submitter/useFetchHostSubmitterList.ts b/src/apis/domains/submitter/useFetchHostSubmitterList.ts index 72bfc777..d23095a5 100644 --- a/src/apis/domains/submitter/useFetchHostSubmitterList.ts +++ b/src/apis/domains/submitter/useFetchHostSubmitterList.ts @@ -1,7 +1,9 @@ +import { useQuery } from '@tanstack/react-query'; + import { get } from '@apis/api'; import { QUERY_KEY } from '@apis/queryKeys/queryKeys'; + import { components } from '@schema'; -import { useQuery } from '@tanstack/react-query'; import { ApiResponseType } from '@types'; type SubmitterListGetResponse = components['schemas']['SubmitterListGetResponse']; diff --git a/src/apis/domains/submitter/usePatchHostSubmitter.tsx b/src/apis/domains/submitter/usePatchHostSubmitter.tsx index 35c48235..ba354e0d 100644 --- a/src/apis/domains/submitter/usePatchHostSubmitter.tsx +++ b/src/apis/domains/submitter/usePatchHostSubmitter.tsx @@ -1,6 +1,7 @@ +import { QueryClient, useMutation } from '@tanstack/react-query'; + import { patch } from '@apis/api'; import { QUERY_KEY } from '@apis/queryKeys/queryKeys'; -import { QueryClient, useMutation } from '@tanstack/react-query'; export interface PatchHostSubmitterRequest { submitterId: number; @@ -19,10 +20,9 @@ const patchHostSubmitter = async ({ submitterId }: PatchHostSubmitterRequest) => export const usePatchHostSubmitter = () => { const queryClient = new QueryClient(); return useMutation({ - mutationFn: ({ submitterId }: PatchHostSubmitterRequest) => - patchHostSubmitter({ submitterId }), + mutationFn: ({ submitterId }: PatchHostSubmitterRequest) => patchHostSubmitter({ submitterId }), onSuccess: () => { queryClient.invalidateQueries({ queryKey: [QUERY_KEY.HOST_SUBMIT_REQUEST] }); }, }); -}; \ No newline at end of file +}; diff --git a/src/apis/domains/test/usePostTest.ts b/src/apis/domains/test/usePostTest.ts index d792009e..19cd0022 100644 --- a/src/apis/domains/test/usePostTest.ts +++ b/src/apis/domains/test/usePostTest.ts @@ -1,6 +1,7 @@ +import { useMutation, useQueryClient } from '@tanstack/react-query'; + import { post } from '@apis/api'; import { QUERY_KEY } from '@apis/queryKeys/queryKeys'; -import { useMutation, useQueryClient } from '@tanstack/react-query'; const postTest = async () => { const response = await post('/test'); diff --git a/src/apis/domains/user/usePostKakaoLogin.ts b/src/apis/domains/user/usePostKakaoLogin.ts index 4f0c2bac..8cac4020 100644 --- a/src/apis/domains/user/usePostKakaoLogin.ts +++ b/src/apis/domains/user/usePostKakaoLogin.ts @@ -1,12 +1,14 @@ +import { useMutation, useQueryClient } from '@tanstack/react-query'; +import { AxiosResponse } from 'axios'; +import { useAtom } from 'jotai'; + import { instance, post } from '@apis/api'; import { QUERY_KEY } from '@apis/queryKeys/queryKeys'; + import { useEasyNavigate } from '@hooks'; import { userAtom } from '@stores'; -import { useMutation, useQueryClient } from '@tanstack/react-query'; -import { useAtom } from 'jotai'; import { components } from '@schema'; -import { AxiosResponse } from 'axios'; import { ApiResponseType } from '@types'; type LoginSuccessResponse = components['schemas']['LoginSuccessResponse']; @@ -18,6 +20,7 @@ const postKakaoLogin = async ( `/user/login?authorizationCode=${authCode}`, { socialType: 'KAKAO', + redirectUri: 'http://localhost:5173/kakao/redirection', } ); diff --git a/src/apis/domains/user/usePostLogout.ts b/src/apis/domains/user/usePostLogout.ts index 9a0c9387..af3f1686 100644 --- a/src/apis/domains/user/usePostLogout.ts +++ b/src/apis/domains/user/usePostLogout.ts @@ -1,10 +1,12 @@ -import { post } from '@apis/api'; -import { useEasyNavigate } from '@hooks'; -import { userAtom } from '@stores'; import { useMutation } from '@tanstack/react-query'; import { useAtom } from 'jotai'; import { RESET } from 'jotai/utils'; +import { post } from '@apis/api'; + +import { useEasyNavigate } from '@hooks'; +import { userAtom } from '@stores'; + const postLogout = async () => { try { const response = await post(`/user/logout`); diff --git a/src/components/common/AbsoluteModal/AbsoluteModal.style.ts b/src/components/common/AbsoluteModal/AbsoluteModal.style.ts index a6a01e59..3e2f643d 100644 --- a/src/components/common/AbsoluteModal/AbsoluteModal.style.ts +++ b/src/components/common/AbsoluteModal/AbsoluteModal.style.ts @@ -1,4 +1,5 @@ import { Theme, css } from '@emotion/react'; + import { flexGenerator } from '@styles/generator'; export const backdropStyle = css` @@ -24,5 +25,5 @@ export const modalContentStyle = (theme: Theme) => css` border-radius: 10px; background-color: ${theme.color.white}; - box-shadow: 0px 0px 60px 0px rgba(0, 0, 0, 0.20); + box-shadow: 0px 0px 60px 0px rgba(0, 0, 0, 0.2); `; diff --git a/src/components/common/AbsoluteModal/AbsoluteModal.tsx b/src/components/common/AbsoluteModal/AbsoluteModal.tsx index 92ea6006..5a72bd12 100644 --- a/src/components/common/AbsoluteModal/AbsoluteModal.tsx +++ b/src/components/common/AbsoluteModal/AbsoluteModal.tsx @@ -1,5 +1,6 @@ import { PropsWithChildren } from 'react'; import { createPortal } from 'react-dom'; + import { backdropStyle, modalContentStyle } from './AbsoluteModal.style'; interface ModalProps { diff --git a/src/components/common/Carousel/Carousel.tsx b/src/components/common/Carousel/Carousel.tsx index 87e9dfdc..1ebd0677 100644 --- a/src/components/common/Carousel/Carousel.tsx +++ b/src/components/common/Carousel/Carousel.tsx @@ -1,5 +1,5 @@ -import { Swiper, SwiperSlide } from 'swiper/react'; import { Pagination } from 'swiper/modules'; +import { Swiper, SwiperSlide } from 'swiper/react'; import 'swiper/css'; import 'swiper/css/pagination'; diff --git a/src/components/common/CategorySelectBox/CategorySelectBox.style.ts b/src/components/common/CategorySelectBox/CategorySelectBox.style.ts index ad27ee7f..7b62d2dd 100644 --- a/src/components/common/CategorySelectBox/CategorySelectBox.style.ts +++ b/src/components/common/CategorySelectBox/CategorySelectBox.style.ts @@ -1,4 +1,5 @@ import { Theme, css } from '@emotion/react'; + import { flexGenerator } from '@styles/generator'; export const ulStyle = css` diff --git a/src/components/common/CategorySelectBox/CategorySelectBox.tsx b/src/components/common/CategorySelectBox/CategorySelectBox.tsx index 9ab2f80d..27caf526 100644 --- a/src/components/common/CategorySelectBox/CategorySelectBox.tsx +++ b/src/components/common/CategorySelectBox/CategorySelectBox.tsx @@ -1,4 +1,5 @@ import { CATEGORY_ICON } from '@constants'; + import { imgStyle, labelStyle, liStyle, ulStyle } from './CategorySelectBox.style'; const categoryIcons = [ diff --git a/src/components/common/CountPeople/CountPeople.style.ts b/src/components/common/CountPeople/CountPeople.style.ts index fb0ca3f3..0e2ef227 100644 --- a/src/components/common/CountPeople/CountPeople.style.ts +++ b/src/components/common/CountPeople/CountPeople.style.ts @@ -1,4 +1,5 @@ import { Theme, css } from '@emotion/react'; + import { flexGenerator } from '@styles/generator'; export const containerStyle = (theme: Theme) => css` @@ -32,24 +33,22 @@ export const plusAndMinusIconStyle = css` pointer-events: none; /* 클릭 이벤트가 아래 요소에 전달되도록 설정 */ `; -export const minusStyle = (people: number) => (theme: Theme) => - css` - circle { - stroke: ${people <= 1 ? theme.color.lightgray1 : theme.color.purple1}; - } - path { - fill: ${people <= 1 ? theme.color.lightgray1 : theme.color.purple1}; - } - `; -export const plusStyle = (people: number) => (theme: Theme) => - css` - circle { - stroke: ${people >= 15 ? theme.color.lightgray1 : theme.color.purple1}; - } - path { - fill: ${people >= 15 ? theme.color.lightgray1 : theme.color.purple1}; - } - `; +export const minusStyle = (people: number) => (theme: Theme) => css` + circle { + stroke: ${people <= 1 ? theme.color.lightgray1 : theme.color.purple1}; + } + path { + fill: ${people <= 1 ? theme.color.lightgray1 : theme.color.purple1}; + } +`; +export const plusStyle = (people: number) => (theme: Theme) => css` + circle { + stroke: ${people >= 15 ? theme.color.lightgray1 : theme.color.purple1}; + } + path { + fill: ${people >= 15 ? theme.color.lightgray1 : theme.color.purple1}; + } +`; export const disabledStyle = css` pointer-events: none; diff --git a/src/components/common/CountPeople/CountPeople.tsx b/src/components/common/CountPeople/CountPeople.tsx index f63a2da3..01a01e1e 100644 --- a/src/components/common/CountPeople/CountPeople.tsx +++ b/src/components/common/CountPeople/CountPeople.tsx @@ -1,4 +1,5 @@ import { IcBtnMinus, IcBtnPlus } from '@svg'; + import { buttonWrapperStyle, containerStyle, diff --git a/src/components/common/DateSelect/DateSelect.style.ts b/src/components/common/DateSelect/DateSelect.style.ts index fd9c6377..a8fb9e64 100644 --- a/src/components/common/DateSelect/DateSelect.style.ts +++ b/src/components/common/DateSelect/DateSelect.style.ts @@ -1,4 +1,5 @@ import { css, Theme } from '@emotion/react'; + import { flexGenerator } from '@styles/generator'; export const customInputContainer = css` diff --git a/src/components/common/DateSelect/DateSelect.tsx b/src/components/common/DateSelect/DateSelect.tsx index 4819da7b..95aff290 100644 --- a/src/components/common/DateSelect/DateSelect.tsx +++ b/src/components/common/DateSelect/DateSelect.tsx @@ -1,8 +1,11 @@ +import { ko } from 'date-fns/locale'; +import dayjs from 'dayjs'; import React, { InputHTMLAttributes } from 'react'; import DatePicker from 'react-datepicker'; -import dayjs from 'dayjs'; -import { ko } from 'date-fns/locale'; + import 'react-datepicker/dist/react-datepicker.css'; +import { IcDropdownPlatformDown } from '@svg'; + import { dataPickerWrapper, customInputContainer, @@ -10,7 +13,6 @@ import { customInputStyle, iconStyle, } from './DateSelect.style'; -import { IcDropdownPlatformDown } from '@svg'; interface CustomInputProps extends InputHTMLAttributes { value?: string; @@ -28,7 +30,13 @@ const CustomInput = React.forwardRef(
- +
); } diff --git a/src/components/common/Footer/Footer.style.ts b/src/components/common/Footer/Footer.style.ts index d65684b2..6a5757a9 100644 --- a/src/components/common/Footer/Footer.style.ts +++ b/src/components/common/Footer/Footer.style.ts @@ -1,4 +1,5 @@ import { Theme, css } from '@emotion/react'; + import { flexGenerator } from '@styles/generator'; export const footerContainer = (theme: Theme) => css` diff --git a/src/components/common/Footer/Footer.tsx b/src/components/common/Footer/Footer.tsx index a0730968..6f648bab 100644 --- a/src/components/common/Footer/Footer.tsx +++ b/src/components/common/Footer/Footer.tsx @@ -1,4 +1,5 @@ import { Logo } from '@svg'; + import { contactTextStyle, contactWrapper, diff --git a/src/components/common/IconText/IconText.style.ts b/src/components/common/IconText/IconText.style.ts index 637df8be..f5a9a516 100644 --- a/src/components/common/IconText/IconText.style.ts +++ b/src/components/common/IconText/IconText.style.ts @@ -1,4 +1,5 @@ import { css, Theme } from '@emotion/react'; + import { flexGenerator } from '@styles/generator'; export const IconTextContainer = css` diff --git a/src/components/common/IconText/IconText.tsx b/src/components/common/IconText/IconText.tsx index f02f4aba..e88840e2 100644 --- a/src/components/common/IconText/IconText.tsx +++ b/src/components/common/IconText/IconText.tsx @@ -1,4 +1,5 @@ import { ReactNode } from 'react'; + import { IconTextContainer, iconWrapper, textStyle } from './IconText.style'; interface IconTextProps { diff --git a/src/components/common/Image/Image.tsx b/src/components/common/Image/Image.tsx index d09e5ae4..1bfd9e0f 100644 --- a/src/components/common/Image/Image.tsx +++ b/src/components/common/Image/Image.tsx @@ -1,6 +1,7 @@ +import { SerializedStyles, Theme } from '@emotion/react'; import { HTMLAttributes, ReactNode } from 'react'; + import { imageStyle, imageVariant, imageWrapper, labelStyle } from './Image.style'; -import { SerializedStyles, Theme } from '@emotion/react'; interface ImageProps extends HTMLAttributes { src: string; diff --git a/src/components/common/ImageSelect/ImageSelect.style.ts b/src/components/common/ImageSelect/ImageSelect.style.ts index 8098d329..b18c8a72 100644 --- a/src/components/common/ImageSelect/ImageSelect.style.ts +++ b/src/components/common/ImageSelect/ImageSelect.style.ts @@ -1,5 +1,5 @@ -import { Theme } from '@emotion/react'; -import { css } from '@emotion/react'; +import { Theme, css } from '@emotion/react'; + import { flexGenerator } from '@styles/generator'; export const thumbnailStyle = (theme: Theme) => css` @@ -75,4 +75,4 @@ export const deleteImageIconStyle = css` export const svgStyle = css` width: 100%; height: 100%; -`; \ No newline at end of file +`; diff --git a/src/components/common/ImageSelect/ImageSelect.tsx b/src/components/common/ImageSelect/ImageSelect.tsx index b161bea4..246f4dde 100644 --- a/src/components/common/ImageSelect/ImageSelect.tsx +++ b/src/components/common/ImageSelect/ImageSelect.tsx @@ -1,4 +1,7 @@ import { InputHTMLAttributes, useRef, useState, SetStateAction, Dispatch } from 'react'; + +import { IcCameraAdd, IcDeletePhoto } from '@svg'; + import { imageSelectWrapper, inputStyle, @@ -10,7 +13,6 @@ import { deleteImageIconStyle, svgStyle, } from './ImageSelect.style'; -import { IcCameraAdd, IcDeletePhoto } from '@svg'; interface ImageSelectProps extends InputHTMLAttributes { onFileSelect: Dispatch>; @@ -18,7 +20,11 @@ interface ImageSelectProps extends InputHTMLAttributes { maxImageLength: number; } -const ImageSelect = ({ onFileSelect, isMultiple = false, maxImageLength = 1 }: ImageSelectProps) => { +const ImageSelect = ({ + onFileSelect, + isMultiple = false, + maxImageLength = 1, +}: ImageSelectProps) => { const [previewURLs, setPreviewURLs] = useState([]); const inputRef = useRef(null); diff --git a/src/components/common/Label/Label.style.ts b/src/components/common/Label/Label.style.ts index 87348efb..a370e901 100644 --- a/src/components/common/Label/Label.style.ts +++ b/src/components/common/Label/Label.style.ts @@ -1,4 +1,5 @@ import { Theme, css } from '@emotion/react'; + import { flexGenerator } from '@styles/generator'; export const labelStyle = css` diff --git a/src/components/common/Modal/Modal.style.ts b/src/components/common/Modal/Modal.style.ts index 5be57f63..51d67b00 100644 --- a/src/components/common/Modal/Modal.style.ts +++ b/src/components/common/Modal/Modal.style.ts @@ -1,4 +1,5 @@ import { Theme, css } from '@emotion/react'; + import { flexGenerator } from '@styles/generator'; export const backdropStyle = css` diff --git a/src/components/common/Modal/Modal.tsx b/src/components/common/Modal/Modal.tsx index d156426a..89c65172 100644 --- a/src/components/common/Modal/Modal.tsx +++ b/src/components/common/Modal/Modal.tsx @@ -1,5 +1,6 @@ import { PropsWithChildren } from 'react'; import { createPortal } from 'react-dom'; + import { backdropStyle, modalContentStyle } from './Modal.style'; interface ModalProps { diff --git a/src/components/common/NavigateBox/NavigateBox.style.ts b/src/components/common/NavigateBox/NavigateBox.style.ts index f0a9ce4c..15f15d4e 100644 --- a/src/components/common/NavigateBox/NavigateBox.style.ts +++ b/src/components/common/NavigateBox/NavigateBox.style.ts @@ -1,5 +1,5 @@ -import { Theme } from '@emotion/react'; -import { css } from '@emotion/react'; +import { Theme, css } from '@emotion/react'; + import { flexGenerator } from '@styles/generator'; export const wrapperStyle = css` diff --git a/src/components/common/NavigateBox/NavigateBox.tsx b/src/components/common/NavigateBox/NavigateBox.tsx index 24455f51..074b4a11 100644 --- a/src/components/common/NavigateBox/NavigateBox.tsx +++ b/src/components/common/NavigateBox/NavigateBox.tsx @@ -1,6 +1,8 @@ -import { IcNext } from '@svg'; import { HTMLAttributes } from 'react'; import { useNavigate } from 'react-router-dom'; + +import { IcNext } from '@svg'; + import { childrenStyle, iconStyle, wrapperStyle } from './NavigateBox.style'; export interface NavigateBoxProps extends HTMLAttributes { diff --git a/src/components/common/Notice/Notice.style.ts b/src/components/common/Notice/Notice.style.ts index 6ae9e2a9..8db2676f 100644 --- a/src/components/common/Notice/Notice.style.ts +++ b/src/components/common/Notice/Notice.style.ts @@ -1,4 +1,5 @@ import { css, Theme } from '@emotion/react'; + import { flexGenerator } from '@styles/generator'; export const noticeStyle = css` diff --git a/src/components/common/Notice/Notice.tsx b/src/components/common/Notice/Notice.tsx index 6d77e6f4..9bb00b3e 100644 --- a/src/components/common/Notice/Notice.tsx +++ b/src/components/common/Notice/Notice.tsx @@ -1,4 +1,5 @@ import { HTMLAttributes } from 'react'; + import { NumberLabel } from '@components'; import { noticeStyle, textStyle } from 'src/components/common/Notice/Notice.style'; diff --git a/src/components/common/NumberLabel/NumberLabel.tsx b/src/components/common/NumberLabel/NumberLabel.tsx index f2fb86ca..b5b154c8 100644 --- a/src/components/common/NumberLabel/NumberLabel.tsx +++ b/src/components/common/NumberLabel/NumberLabel.tsx @@ -1,5 +1,6 @@ -import { IcNumberLabel } from '@svg'; import { PropsWithChildren } from 'react'; + +import { IcNumberLabel } from '@svg'; import { wrapperStyle, iconStyle, diff --git a/src/components/common/ProgressBar/ProgressBar.style.ts b/src/components/common/ProgressBar/ProgressBar.style.ts index d897f85e..cf987441 100644 --- a/src/components/common/ProgressBar/ProgressBar.style.ts +++ b/src/components/common/ProgressBar/ProgressBar.style.ts @@ -9,9 +9,8 @@ export const progressBarContainer = (theme: Theme) => css` background-color: ${theme.color.lightgray1}; `; -export const progressBarStyle = (progress: number) => (theme: Theme) => - css` - width: ${progress}%; - height: 100%; - background-color: ${theme.color.purple1}; - `; +export const progressBarStyle = (progress: number) => (theme: Theme) => css` + width: ${progress}%; + height: 100%; + background-color: ${theme.color.purple1}; +`; diff --git a/src/components/common/QuestionInput/QuestionInput.style.ts b/src/components/common/QuestionInput/QuestionInput.style.ts index 50cd321f..f85b0903 100644 --- a/src/components/common/QuestionInput/QuestionInput.style.ts +++ b/src/components/common/QuestionInput/QuestionInput.style.ts @@ -1,4 +1,5 @@ import { css, Theme } from '@emotion/react'; + import { flexGenerator } from '@styles/generator'; export const questionInputStyle = (theme: Theme) => css` diff --git a/src/components/common/QuestionInput/QuestionInput.tsx b/src/components/common/QuestionInput/QuestionInput.tsx index be0c6d40..b02ccfaf 100644 --- a/src/components/common/QuestionInput/QuestionInput.tsx +++ b/src/components/common/QuestionInput/QuestionInput.tsx @@ -1,4 +1,5 @@ import { InputHTMLAttributes } from 'react'; + import { NumberLabel } from '@components'; import { questionInputStyle, diff --git a/src/components/common/QuestionText/QuestionText.style.ts b/src/components/common/QuestionText/QuestionText.style.ts index 73001546..f60ef9c9 100644 --- a/src/components/common/QuestionText/QuestionText.style.ts +++ b/src/components/common/QuestionText/QuestionText.style.ts @@ -1,4 +1,5 @@ import { css, Theme } from '@emotion/react'; + import { flexGenerator } from '@styles/generator'; export const questionStyle = (theme: Theme) => css` @@ -20,4 +21,3 @@ export const textStyle = (theme: Theme) => css` export const preventDragStyle = css` user-select: none; `; - diff --git a/src/components/common/QuestionText/QuestionText.tsx b/src/components/common/QuestionText/QuestionText.tsx index 2e7ded89..45c35839 100644 --- a/src/components/common/QuestionText/QuestionText.tsx +++ b/src/components/common/QuestionText/QuestionText.tsx @@ -1,5 +1,7 @@ import { HTMLAttributes } from 'react'; + import { NumberLabel } from '@components'; + import { preventDragStyle, questionStyle, textStyle } from './QuestionText.style'; export interface QuestionTextProps extends HTMLAttributes { diff --git a/src/components/common/SimpleUserProfile/SimpleUserProfile.style.ts b/src/components/common/SimpleUserProfile/SimpleUserProfile.style.ts index 748ba3f5..f8c5855a 100644 --- a/src/components/common/SimpleUserProfile/SimpleUserProfile.style.ts +++ b/src/components/common/SimpleUserProfile/SimpleUserProfile.style.ts @@ -1,4 +1,5 @@ import { Theme, css } from '@emotion/react'; + import { flexGenerator } from '@styles/generator'; export const profileWrapperStyle = css` diff --git a/src/components/common/SimpleUserProfile/SimpleUserProfile.tsx b/src/components/common/SimpleUserProfile/SimpleUserProfile.tsx index facc1b1d..22f18530 100644 --- a/src/components/common/SimpleUserProfile/SimpleUserProfile.tsx +++ b/src/components/common/SimpleUserProfile/SimpleUserProfile.tsx @@ -1,4 +1,7 @@ import React from 'react'; + +import { IcDefaultUserimg } from '@svg'; + import { imgSizeStyle, imgStyle, @@ -7,7 +10,6 @@ import { usernameSizeStyle, usernameStyle, } from './SimpleUserProfile.style'; -import { IcDefaultUserimg } from '@svg'; export interface SimpleUserProfileProps extends React.HTMLAttributes { size: 'small' | 'medium' | 'large' | 'xlarge'; diff --git a/src/components/common/TextArea/TextArea.style.ts b/src/components/common/TextArea/TextArea.style.ts index 7ad94c95..1d562a97 100644 --- a/src/components/common/TextArea/TextArea.style.ts +++ b/src/components/common/TextArea/TextArea.style.ts @@ -1,4 +1,5 @@ import { css, Theme } from '@emotion/react'; + import { flexGenerator } from '@styles/generator'; export const textAreaContainerStyle = css` @@ -7,17 +8,16 @@ export const textAreaContainerStyle = css` width: 100%; `; -export const textAreaWrapperStyle = (isError: boolean, isFocused: boolean) => (theme: Theme) => - css` - ${flexGenerator('column', 'space-between', 'flex-end')} - width: 100%; - min-width: 33.5rem; - padding: 1.2rem 1.3rem 1rem 1rem; +export const textAreaWrapperStyle = (isError: boolean, isFocused: boolean) => (theme: Theme) => css` + ${flexGenerator('column', 'space-between', 'flex-end')} + width: 100%; + min-width: 33.5rem; + padding: 1.2rem 1.3rem 1rem 1rem; - border: 1px solid ${isError && isFocused ? theme.color.error : theme.color.lightgray1}; - border-radius: 10px; - background-color: ${theme.color.white}; - `; + border: 1px solid ${isError && isFocused ? theme.color.error : theme.color.lightgray1}; + border-radius: 10px; + background-color: ${theme.color.white}; +`; export const textAreaWrapperSize = { small: css` @@ -29,33 +29,31 @@ export const textAreaWrapperSize = { `, }; -export const textAreaStyle = (theme: Theme) => - css` - border: none; - width: 100%; - height: 100%; - resize: none; - - color: ${theme.color.darkgray}; - background-color: ${theme.color.white}; - ${theme.font['body01-r-15']}; - - &::placeholder { - color: ${theme.color.midgray1}; - } - - &:focus { - outline: none; - } - `; - -export const textLengthStyle = (isError: boolean, isFocused: boolean) => (theme: Theme) => - css` - right: 1.5rem; - bottom: 1.2rem; - color: ${isError && isFocused ? theme.color.error : theme.color.midgray1}; - ${theme.font['body02-r-14']} - `; +export const textAreaStyle = (theme: Theme) => css` + border: none; + width: 100%; + height: 100%; + resize: none; + + color: ${theme.color.darkgray}; + background-color: ${theme.color.white}; + ${theme.font['body01-r-15']}; + + &::placeholder { + color: ${theme.color.midgray1}; + } + + &:focus { + outline: none; + } +`; + +export const textLengthStyle = (isError: boolean, isFocused: boolean) => (theme: Theme) => css` + right: 1.5rem; + bottom: 1.2rem; + color: ${isError && isFocused ? theme.color.error : theme.color.midgray1}; + ${theme.font['body02-r-14']} +`; export const errorMessageStyle = (theme: Theme) => css` color: ${theme.color.error}; diff --git a/src/components/common/TimeSelect/TimeSelect.style.ts b/src/components/common/TimeSelect/TimeSelect.style.ts index 91d1550f..3f7f1952 100644 --- a/src/components/common/TimeSelect/TimeSelect.style.ts +++ b/src/components/common/TimeSelect/TimeSelect.style.ts @@ -1,4 +1,5 @@ import { Theme, css } from '@emotion/react'; + import { flexGenerator } from '@styles/generator'; export const timeSelectContainer = css` @@ -15,19 +16,18 @@ export const timeSelectWrapper = (theme: Theme) => css` border-radius: 10px; `; -export const selectStyle = (hasValue: boolean) => (theme: Theme) => - css` - width: 13rem; - border: none; - border-radius: 4px; - color: ${hasValue ? theme.color.blackgray : theme.color.midgray1}; - ${theme.font['body01-r-15']}; +export const selectStyle = (hasValue: boolean) => (theme: Theme) => css` + width: 13rem; + border: none; + border-radius: 4px; + color: ${hasValue ? theme.color.blackgray : theme.color.midgray1}; + ${theme.font['body01-r-15']}; - cursor: pointer; + cursor: pointer; - appearance: none; - -webkit-appearance: none; - `; + appearance: none; + -webkit-appearance: none; +`; export const textStyle = (theme: Theme) => css` color: ${theme.color.midgray1}; @@ -48,12 +48,11 @@ export const labelWrapper = css` position: relative; `; -export const svgStyle = (hasValue: boolean) => (theme: Theme) => - css` - path { - fill: ${hasValue ? theme.color.blackgray : theme.color.midgray1}; - } +export const svgStyle = (hasValue: boolean) => (theme: Theme) => css` + path { + fill: ${hasValue ? theme.color.blackgray : theme.color.midgray1}; + } - width: 2.4rem; - height: 2.4rem; - `; + width: 2.4rem; + height: 2.4rem; +`; diff --git a/src/components/common/TimeSelect/TimeSelect.tsx b/src/components/common/TimeSelect/TimeSelect.tsx index d281b6a2..3e58ed13 100644 --- a/src/components/common/TimeSelect/TimeSelect.tsx +++ b/src/components/common/TimeSelect/TimeSelect.tsx @@ -1,4 +1,7 @@ import React, { useRef } from 'react'; + +import { IcDropdownPlatformDown } from '@svg'; + import { timeSelectWrapper, selectStyle, @@ -8,7 +11,6 @@ import { labelWrapper, svgStyle, } from './TimeSelect.style'; -import { IcDropdownPlatformDown } from '@svg'; interface TimeselectProps { startTime: number | null; diff --git a/src/components/common/Toast/Toast.style.ts b/src/components/common/Toast/Toast.style.ts index 4c8f9a9a..077792cc 100644 --- a/src/components/common/Toast/Toast.style.ts +++ b/src/components/common/Toast/Toast.style.ts @@ -1,29 +1,29 @@ import { css, keyframes, Theme } from '@emotion/react'; + import { flexGenerator } from '@styles/generator'; -export const toastWrapperStyle = (isVisible: boolean, toastBottom: number) => (theme: Theme) => - css` - ${flexGenerator()}; - gap: 0.4rem; - min-width: 33.5rem; - width: calc(100dvw - 4rem); - height: 4.5rem; - padding: 0.8rem; +export const toastWrapperStyle = (isVisible: boolean, toastBottom: number) => (theme: Theme) => css` + ${flexGenerator()}; + gap: 0.4rem; + min-width: 33.5rem; + width: calc(100dvw - 4rem); + height: 4.5rem; + padding: 0.8rem; - position: fixed; - left: 50%; - bottom: ${toastBottom}rem; - transform: translateX(-50%); - background-color: ${theme.color.midgray2}; - border-radius: 10px; - display: ${isVisible ? 'flex' : 'none'}; - animation: ${isVisible && toastShow} 2s forwards; - z-index: 10; + position: fixed; + left: 50%; + bottom: ${toastBottom}rem; + transform: translateX(-50%); + background-color: ${theme.color.midgray2}; + border-radius: 10px; + display: ${isVisible ? 'flex' : 'none'}; + animation: ${isVisible && toastShow} 2s forwards; + z-index: 10; - @media screen and (min-width: 430px) { - width: 39rem; - } - `; + @media screen and (min-width: 430px) { + width: 39rem; + } +`; const toastShow = keyframes` 0% { diff --git a/src/components/common/Toast/Toast.tsx b/src/components/common/Toast/Toast.tsx index f66f754c..8cd6426d 100644 --- a/src/components/common/Toast/Toast.tsx +++ b/src/components/common/Toast/Toast.tsx @@ -1,6 +1,7 @@ -import { IcExclamation } from '@svg'; import { HTMLAttributes } from 'react'; import { createPortal } from 'react-dom'; + +import { IcExclamation } from '@svg'; import { toastIconStyle, toastMessageStyle, diff --git a/src/components/common/applicantAccordions/ApplicantAccordion/ApplicantAccordion.style.ts b/src/components/common/applicantAccordions/ApplicantAccordion/ApplicantAccordion.style.ts index c4f53506..3d27894c 100644 --- a/src/components/common/applicantAccordions/ApplicantAccordion/ApplicantAccordion.style.ts +++ b/src/components/common/applicantAccordions/ApplicantAccordion/ApplicantAccordion.style.ts @@ -1,4 +1,5 @@ import { css, Theme } from '@emotion/react'; + import { flexGenerator } from '@styles/generator'; export const applicantAccordionLayout = css` diff --git a/src/components/common/applicantAccordions/ApplicantAccordion/ApplicantAccordion.tsx b/src/components/common/applicantAccordions/ApplicantAccordion/ApplicantAccordion.tsx index 7e6185c2..cf13632b 100644 --- a/src/components/common/applicantAccordions/ApplicantAccordion/ApplicantAccordion.tsx +++ b/src/components/common/applicantAccordions/ApplicantAccordion/ApplicantAccordion.tsx @@ -1,5 +1,10 @@ import { useState, useEffect } from 'react'; + +import { useFetchSubmitRequest } from '@apis/domains/moimSubmission/useFetchSubmitRequest'; + +import { Image, QuestionText } from '@components'; import { IcApplicantArrcodionDown, IcCheckActive, IcCheckDefault } from '@svg'; + import { applicantAccordionLayout, applicantLayoutStyle, @@ -17,8 +22,7 @@ import { accdionContentStyle, answerStyle, } from './ApplicantAccordion.style'; -import { Image, QuestionText } from '@components'; -import { useFetchSubmitRequest } from '@apis/domains/moimSubmission/useFetchSubmitRequest'; + import { components } from '@schema'; interface ApplicantAccordionProps { diff --git a/src/components/common/applicantAccordions/ApplicantAccoridonList/ApplicantAccordionList.style.ts b/src/components/common/applicantAccordions/ApplicantAccoridonList/ApplicantAccordionList.style.ts index 515f3ab3..317b9aac 100644 --- a/src/components/common/applicantAccordions/ApplicantAccoridonList/ApplicantAccordionList.style.ts +++ b/src/components/common/applicantAccordions/ApplicantAccoridonList/ApplicantAccordionList.style.ts @@ -1,4 +1,5 @@ import { css } from '@emotion/react'; + import { flexGenerator } from '@styles/generator'; export const applicantAccordionListLayout = css` diff --git a/src/components/common/applicantAccordions/ApplicantAccoridonList/ApplicantAccordionList.tsx b/src/components/common/applicantAccordions/ApplicantAccoridonList/ApplicantAccordionList.tsx index 0cd2870d..cf6165ad 100644 --- a/src/components/common/applicantAccordions/ApplicantAccoridonList/ApplicantAccordionList.tsx +++ b/src/components/common/applicantAccordions/ApplicantAccoridonList/ApplicantAccordionList.tsx @@ -1,7 +1,8 @@ import { ApplicantAccordion } from '@components'; + import { applicantAccordionListLayout } from './ApplicantAccordionList.style'; -import { components } from '@schema'; +import { components } from '@schema'; interface ApplicantAccordionListProps { moimId: number; diff --git a/src/components/common/applicantAccordions/mergeApplicantData.ts b/src/components/common/applicantAccordions/mergeApplicantData.ts index a8527cdb..ab9044dd 100644 --- a/src/components/common/applicantAccordions/mergeApplicantData.ts +++ b/src/components/common/applicantAccordions/mergeApplicantData.ts @@ -1,4 +1,3 @@ - // import { APPLICANT_DATA } from '../../../constants/mocks/applicant'; // // 통합된 데이터 타입 정의 (TypeScript) // interface ApplicantData { diff --git a/src/components/common/buttons/Button/Button.style.ts b/src/components/common/buttons/Button/Button.style.ts index 67934acf..28842acb 100644 --- a/src/components/common/buttons/Button/Button.style.ts +++ b/src/components/common/buttons/Button/Button.style.ts @@ -1,4 +1,5 @@ import { Theme, css } from '@emotion/react'; + import { flexGenerator } from '@styles/generator'; export const buttonStyle = css` diff --git a/src/components/common/buttons/Button/Button.tsx b/src/components/common/buttons/Button/Button.tsx index 4a41004e..39c11b3c 100644 --- a/src/components/common/buttons/Button/Button.tsx +++ b/src/components/common/buttons/Button/Button.tsx @@ -1,6 +1,7 @@ +import { SerializedStyles, Theme } from '@emotion/react'; import { ButtonHTMLAttributes } from 'react'; + import { buttonSize, buttonStyle, disabledStyle } from './Button.style'; -import { SerializedStyles, Theme } from '@emotion/react'; export interface ButtonProps extends ButtonHTMLAttributes { variant: 'large' | 'medium' | 'small' | 'xSmall' | 'stroke' | 'round'; diff --git a/src/components/common/buttons/CategoryButton/CategoryButton.style.ts b/src/components/common/buttons/CategoryButton/CategoryButton.style.ts index 0f20f63e..357475f1 100644 --- a/src/components/common/buttons/CategoryButton/CategoryButton.style.ts +++ b/src/components/common/buttons/CategoryButton/CategoryButton.style.ts @@ -1,4 +1,5 @@ import { Theme, css } from '@emotion/react'; + import { flexGenerator } from '@styles/generator'; export const categoryButtonContainer = css` @@ -7,45 +8,42 @@ export const categoryButtonContainer = css` gap: 0.5rem; `; -export const categoryButtonWrapper = (isSelected: boolean) => (theme: Theme) => - css` - ${flexGenerator('column')}; +export const categoryButtonWrapper = (isSelected: boolean) => (theme: Theme) => css` + ${flexGenerator('column')}; - height: 5.7rem; - align-self: stretch; + height: 5.7rem; + align-self: stretch; - border-radius: 10px; - background: ${isSelected ? theme.color.purple5 : theme.color.background}; - border: ${isSelected ? `1px solid ${theme.color.purple2}` : 'none'}; + border-radius: 10px; + background: ${isSelected ? theme.color.purple5 : theme.color.background}; + border: ${isSelected ? `1px solid ${theme.color.purple2}` : 'none'}; - color: ${theme.color.lightgray2}; + color: ${theme.color.lightgray2}; - cursor: pointer; - `; + cursor: pointer; +`; -export const categoryButtonStyle = (isSelected: boolean) => (theme: Theme) => - css` - border: none; - background: none; - cursor: pointer; +export const categoryButtonStyle = (isSelected: boolean) => (theme: Theme) => css` + border: none; + background: none; + cursor: pointer; - & span { - fill: ${isSelected ? theme.color.purple2 : theme.color.darkgray}; /* SVG 색상 변경 */ - } - `; - -export const iconWrapper = (isSelected: boolean) => (theme: Theme) => - css` - ${flexGenerator()} - width: 3.6rem; - height: 3.6rem; - - & svg { - path { - stroke: ${isSelected ? theme.color.purple2 : ''}; - } + & span { + fill: ${isSelected ? theme.color.purple2 : theme.color.darkgray}; /* SVG 색상 변경 */ + } +`; + +export const iconWrapper = (isSelected: boolean) => (theme: Theme) => css` + ${flexGenerator()} + width: 3.6rem; + height: 3.6rem; + + & svg { + path { + stroke: ${isSelected ? theme.color.purple2 : ''}; } - `; + } +`; export const textStyle = (theme: Theme) => css` color: ${theme.color.lightgray2}; diff --git a/src/components/common/buttons/CategoryButton/CategoryButton.tsx b/src/components/common/buttons/CategoryButton/CategoryButton.tsx index c89cef7f..fe2b1fd4 100644 --- a/src/components/common/buttons/CategoryButton/CategoryButton.tsx +++ b/src/components/common/buttons/CategoryButton/CategoryButton.tsx @@ -1,4 +1,5 @@ import { ButtonHTMLAttributes } from 'react'; + import { categoryButtonWrapper, categoryButtonStyle, diff --git a/src/components/common/buttons/ClipboardCopyButton/ClipboardCopyButton.style.ts b/src/components/common/buttons/ClipboardCopyButton/ClipboardCopyButton.style.ts index 87b14b1d..bc657409 100644 --- a/src/components/common/buttons/ClipboardCopyButton/ClipboardCopyButton.style.ts +++ b/src/components/common/buttons/ClipboardCopyButton/ClipboardCopyButton.style.ts @@ -1,4 +1,5 @@ import { Theme, css } from '@emotion/react'; + import { flexGenerator } from '@styles/generator'; export const buttonWrapperStyle = (theme: Theme) => css` diff --git a/src/components/common/buttons/ClipboardCopyButton/ClipboardCopyButton.tsx b/src/components/common/buttons/ClipboardCopyButton/ClipboardCopyButton.tsx index 630aeca7..6965c98a 100644 --- a/src/components/common/buttons/ClipboardCopyButton/ClipboardCopyButton.tsx +++ b/src/components/common/buttons/ClipboardCopyButton/ClipboardCopyButton.tsx @@ -1,8 +1,10 @@ +import { useState } from 'react'; + import { IcClipboardCopy } from '@svg'; -import { accountNumberStyle, buttonWrapperStyle, iconStyle } from './ClipboardCopyButton.style'; import useToast from 'src/hooks/useToast'; + +import { accountNumberStyle, buttonWrapperStyle, iconStyle } from './ClipboardCopyButton.style'; import Toast from '../../Toast/Toast'; -import { useState } from 'react'; const ClipboardCopyButton = () => { const { showToast, isToastVisible } = useToast(); diff --git a/src/components/common/buttons/IconButton/IconButton.style.ts b/src/components/common/buttons/IconButton/IconButton.style.ts index dbe02e0b..cabf9a3b 100644 --- a/src/components/common/buttons/IconButton/IconButton.style.ts +++ b/src/components/common/buttons/IconButton/IconButton.style.ts @@ -1,4 +1,5 @@ import { css, Theme } from '@emotion/react'; + import { flexGenerator } from '@styles/generator'; export const buttonStyle = (theme: Theme) => css` diff --git a/src/components/common/buttons/IconButton/IconButton.tsx b/src/components/common/buttons/IconButton/IconButton.tsx index 5708660b..ec7c7d17 100644 --- a/src/components/common/buttons/IconButton/IconButton.tsx +++ b/src/components/common/buttons/IconButton/IconButton.tsx @@ -1,4 +1,5 @@ import { ButtonHTMLAttributes } from 'react'; + import { buttonStyle, iconWrapperStyle } from './IconButton.style'; interface IconButtonProps extends ButtonHTMLAttributes { diff --git a/src/components/common/buttons/InterestCategoryButton/InterestCategoryButton.style.ts b/src/components/common/buttons/InterestCategoryButton/InterestCategoryButton.style.ts index 38d2c2ee..6e9f393f 100644 --- a/src/components/common/buttons/InterestCategoryButton/InterestCategoryButton.style.ts +++ b/src/components/common/buttons/InterestCategoryButton/InterestCategoryButton.style.ts @@ -1,4 +1,5 @@ import { Theme, css } from '@emotion/react'; + import { flexGenerator } from '@styles/generator'; export const InterestCategoryButtonStyle = css` diff --git a/src/components/common/buttons/InterestCategoryButton/InterestCategoryButton.tsx b/src/components/common/buttons/InterestCategoryButton/InterestCategoryButton.tsx index 07a02924..7fd00b3a 100644 --- a/src/components/common/buttons/InterestCategoryButton/InterestCategoryButton.tsx +++ b/src/components/common/buttons/InterestCategoryButton/InterestCategoryButton.tsx @@ -1,9 +1,10 @@ +import { ButtonHTMLAttributes } from 'react'; + import { InterestCategoryButtonStyle, InterestCategoryButtonVariant, iconWrapperStyle, } from './InterestCategoryButton.style'; -import { ButtonHTMLAttributes } from 'react'; interface InterestCategoryButtonProps extends ButtonHTMLAttributes { variant?: 'default'; icon: React.ReactNode; diff --git a/src/components/common/buttons/PayButton/PayButton.style.ts b/src/components/common/buttons/PayButton/PayButton.style.ts index 47d837ea..da8b90c8 100644 --- a/src/components/common/buttons/PayButton/PayButton.style.ts +++ b/src/components/common/buttons/PayButton/PayButton.style.ts @@ -1,4 +1,5 @@ import { Theme, css } from '@emotion/react'; + import { flexGenerator } from '@styles/generator'; export const payButtonStyle = (theme: Theme) => css` diff --git a/src/components/common/buttons/PayButton/PayButton.tsx b/src/components/common/buttons/PayButton/PayButton.tsx index 129f719d..65b11436 100644 --- a/src/components/common/buttons/PayButton/PayButton.tsx +++ b/src/components/common/buttons/PayButton/PayButton.tsx @@ -1,9 +1,11 @@ -import { IcKakaoPay, IcTossPay } from '@svg'; import { ButtonHTMLAttributes } from 'react'; -import { payButtonStyle, paySpanStyle } from './PayButton.style'; -import { getDeviceType } from 'src/utils/getDeviceType'; -import Toast from 'src/components/common/Toast/Toast'; + import { useToast } from '@hooks'; +import { IcKakaoPay, IcTossPay } from '@svg'; +import Toast from 'src/components/common/Toast/Toast'; +import { getDeviceType } from 'src/utils/getDeviceType'; + +import { payButtonStyle, paySpanStyle } from './PayButton.style'; export interface PayButtonProps extends ButtonHTMLAttributes { variant: 'toss' | 'kakao'; diff --git a/src/components/common/buttons/SelectButton/SelectButton.style.ts b/src/components/common/buttons/SelectButton/SelectButton.style.ts index 1bb95d41..b5f2039e 100644 --- a/src/components/common/buttons/SelectButton/SelectButton.style.ts +++ b/src/components/common/buttons/SelectButton/SelectButton.style.ts @@ -1,4 +1,5 @@ import { Theme, css } from '@emotion/react'; + import { flexGenerator } from '@styles/generator'; export const selectButtonContainer = css` diff --git a/src/components/common/buttons/ShareButton/ShareButton.style.ts b/src/components/common/buttons/ShareButton/ShareButton.style.ts index b30fce47..454c5c7b 100644 --- a/src/components/common/buttons/ShareButton/ShareButton.style.ts +++ b/src/components/common/buttons/ShareButton/ShareButton.style.ts @@ -1,4 +1,5 @@ import { Theme, css } from '@emotion/react'; + import { flexGenerator } from '@styles/generator'; export const buttonStyle = (theme: Theme) => css` diff --git a/src/components/common/buttons/ShareButton/ShareButton.tsx b/src/components/common/buttons/ShareButton/ShareButton.tsx index c1cf27e6..7bc75cf0 100644 --- a/src/components/common/buttons/ShareButton/ShareButton.tsx +++ b/src/components/common/buttons/ShareButton/ShareButton.tsx @@ -1,5 +1,7 @@ -import { IcShare } from '@svg'; import { ButtonHTMLAttributes } from 'react'; + +import { IcShare } from '@svg'; + import { buttonStyle, iconStyle } from './ShareButton.style'; export interface ShareButtonProps extends ButtonHTMLAttributes { diff --git a/src/components/common/buttons/SocialLoginButton/SocialLoginButton.style.ts b/src/components/common/buttons/SocialLoginButton/SocialLoginButton.style.ts index 89f115a0..091d82e8 100644 --- a/src/components/common/buttons/SocialLoginButton/SocialLoginButton.style.ts +++ b/src/components/common/buttons/SocialLoginButton/SocialLoginButton.style.ts @@ -1,4 +1,5 @@ import { Theme, css } from '@emotion/react'; + import { flexGenerator } from '@styles/generator'; export const buttonStyle = (theme: Theme) => css` diff --git a/src/components/common/buttons/SocialLoginButton/SocialLoginButton.tsx b/src/components/common/buttons/SocialLoginButton/SocialLoginButton.tsx index a93bed85..2d98ac7b 100644 --- a/src/components/common/buttons/SocialLoginButton/SocialLoginButton.tsx +++ b/src/components/common/buttons/SocialLoginButton/SocialLoginButton.tsx @@ -1,4 +1,5 @@ import React, { ButtonHTMLAttributes } from 'react'; + import { buttonStyle, iconWrapperStyle, kakaoStyle } from './SocialLoginButton.style'; export interface SocialLoginButtonProps extends ButtonHTMLAttributes { diff --git a/src/components/common/headers/Header/Header.style.ts b/src/components/common/headers/Header/Header.style.ts index 8feaa9ac..06202ff0 100644 --- a/src/components/common/headers/Header/Header.style.ts +++ b/src/components/common/headers/Header/Header.style.ts @@ -1,22 +1,22 @@ import { Theme, css } from '@emotion/react'; + import { flexGenerator } from '@styles/generator'; -export const headerContainer = (isLine: boolean) => (theme: Theme) => - css` - position: fixed; - top: 0; - z-index: 2; - ${flexGenerator('row', 'space-between', 'center')}; - width: 100%; - max-width: 43rem; - height: 6rem; - padding: 0 2rem; - gap: 1rem; - - border-bottom: ${isLine ? `0.1rem solid ${theme.color.lightgray1}` : 'none'}; - - background-color: ${theme.color.white}; - `; +export const headerContainer = (isLine: boolean) => (theme: Theme) => css` + position: fixed; + top: 0; + z-index: 2; + ${flexGenerator('row', 'space-between', 'center')}; + width: 100%; + max-width: 43rem; + height: 6rem; + padding: 0 2rem; + gap: 1rem; + + border-bottom: ${isLine ? `0.1rem solid ${theme.color.lightgray1}` : 'none'}; + + background-color: ${theme.color.white}; +`; export const headerTitle = (theme: Theme) => css` ${flexGenerator('row', 'flex-start', 'center')} diff --git a/src/components/common/headers/Header/Header.tsx b/src/components/common/headers/Header/Header.tsx index c5ff49ba..108ee781 100644 --- a/src/components/common/headers/Header/Header.tsx +++ b/src/components/common/headers/Header/Header.tsx @@ -1,4 +1,6 @@ +import { useEasyNavigate } from '@hooks'; import { IcHome } from '@svg'; + import { centerWrapper, headerContainer, @@ -7,7 +9,6 @@ import { leftWrapper, rightWrapper, } from './Header.style'; -import { useEasyNavigate } from '@hooks'; interface HeaderProps { title: string; diff --git a/src/components/common/headers/LogoHeader/LogoHeader.style.ts b/src/components/common/headers/LogoHeader/LogoHeader.style.ts index 3adee2e1..ec78d4b3 100644 --- a/src/components/common/headers/LogoHeader/LogoHeader.style.ts +++ b/src/components/common/headers/LogoHeader/LogoHeader.style.ts @@ -1,4 +1,5 @@ import { Theme, css } from '@emotion/react'; + import { flexGenerator } from '@styles/generator'; export const logoHeaderWrapper = (theme: Theme) => css` diff --git a/src/components/common/headers/LogoHeader/LogoHeader.tsx b/src/components/common/headers/LogoHeader/LogoHeader.tsx index 66e8cbf7..9156d365 100644 --- a/src/components/common/headers/LogoHeader/LogoHeader.tsx +++ b/src/components/common/headers/LogoHeader/LogoHeader.tsx @@ -1,6 +1,7 @@ +import { useEasyNavigate } from '@hooks'; import { IcLogo, IcMypage } from '@svg'; + import { logoHeaderWrapper, iconStyle, logoWrapper } from './LogoHeader.style'; -import { useEasyNavigate } from '@hooks'; interface LogoHeaderProps { isIcon?: boolean; diff --git a/src/components/common/index.ts b/src/components/common/index.ts index 9b1e7576..c95fe503 100644 --- a/src/components/common/index.ts +++ b/src/components/common/index.ts @@ -1,38 +1,39 @@ -import IconButton from './buttons/IconButton/IconButton'; -import SocialLoginButton from './buttons/SocialLoginButton/SocialLoginButton'; -import PayButton from './buttons/PayButton/PayButton'; -import Header from './headers/Header/Header'; -import NumberLabel from 'src/components/common/NumberLabel/NumberLabel'; -import ProgressBar from './ProgressBar/ProgressBar'; -import NavigateBox from './NavigateBox/NavigateBox'; +import ApplicantAccordion from 'src/components/common/applicantAccordions/ApplicantAccordion/ApplicantAccordion'; +import ApplicantAccordionList from 'src/components/common/applicantAccordions/ApplicantAccoridonList/ApplicantAccordionList'; +import LogoHeader from 'src/components/common/headers/LogoHeader/LogoHeader'; +import Image from 'src/components/common/Image/Image'; +import ImageSelect from 'src/components/common/ImageSelect/ImageSelect'; +import Input from 'src/components/common/inputs/Input/Input'; import Notice from 'src/components/common/Notice/Notice'; -import QuestionText from 'src/components/common/QuestionText/QuestionText'; +import NumberLabel from 'src/components/common/NumberLabel/NumberLabel'; import QuestionInput from 'src/components/common/QuestionInput/QuestionInput'; -import SelectButton from './buttons/SelectButton/SelectButton'; -import Label from './Label/Label'; -import CategoryButton from './buttons/CategoryButton/CategoryButton'; -import InterestCategoryButton from './buttons/InterestCategoryButton/InterestCategoryButton'; -import ShareButton from './buttons/ShareButton/ShareButton'; -import Input from 'src/components/common/inputs/Input/Input'; +import QuestionText from 'src/components/common/QuestionText/QuestionText'; +import SimpleUserProfile from 'src/components/common/SimpleUserProfile/SimpleUserProfile'; import TextArea from 'src/components/common/TextArea/TextArea'; +import TimeSelect from 'src/components/common/TimeSelect/TimeSelect'; import Toast from 'src/components/common/Toast/Toast'; + +import Button from './buttons/Button/Button'; +import CategoryButton from './buttons/CategoryButton/CategoryButton'; import ClipboardCopyButton from './buttons/ClipboardCopyButton/ClipboardCopyButton'; -import Modal from './Modal/Modal'; +import IconButton from './buttons/IconButton/IconButton'; +import InterestCategoryButton from './buttons/InterestCategoryButton/InterestCategoryButton'; +import PayButton from './buttons/PayButton/PayButton'; +import SelectButton from './buttons/SelectButton/SelectButton'; +import ShareButton from './buttons/ShareButton/ShareButton'; +import SocialLoginButton from './buttons/SocialLoginButton/SocialLoginButton'; +import Carousel from './Carousel/Carousel'; +import CategorySelectBox from './CategorySelectBox/CategorySelectBox'; +import CountPeople from './CountPeople/CountPeople'; import DateSelect from './DateSelect/DateSelect'; +import Header from './headers/Header/Header'; +import IconText from './IconText/IconText'; +import Label from './Label/Label'; +import Modal from './Modal/Modal'; +import NavigateBox from './NavigateBox/NavigateBox'; +import ProgressBar from './ProgressBar/ProgressBar'; import FilterSelect from './select/FilterSelect/FilterSelect'; -import CountPeople from './CountPeople/CountPeople'; -import Button from './buttons/Button/Button'; import Select from './select/Select/Select'; -import Carousel from './Carousel/Carousel'; -import ApplicantAccordion from 'src/components/common/applicantAccordions/ApplicantAccordion/ApplicantAccordion'; -import ApplicantAccordionList from 'src/components/common/applicantAccordions/ApplicantAccoridonList/ApplicantAccordionList'; -import Image from 'src/components/common/Image/Image'; -import LogoHeader from 'src/components/common/headers/LogoHeader/LogoHeader'; -import TimeSelect from 'src/components/common/TimeSelect/TimeSelect'; -import ImageSelect from 'src/components/common/ImageSelect/ImageSelect'; -import SimpleUserProfile from 'src/components/common/SimpleUserProfile/SimpleUserProfile'; -import IconText from './IconText/IconText'; -import CategorySelectBox from './CategorySelectBox/CategorySelectBox'; import { Spinner } from './Spinner/Spinner'; export { diff --git a/src/components/common/inputs/AccountNumberInput/AccountNumberInput.tsx b/src/components/common/inputs/AccountNumberInput/AccountNumberInput.tsx index ac17e6cc..18c99e4f 100644 --- a/src/components/common/inputs/AccountNumberInput/AccountNumberInput.tsx +++ b/src/components/common/inputs/AccountNumberInput/AccountNumberInput.tsx @@ -1,4 +1,5 @@ import React from 'react'; + import Input from '../Input/Input'; interface AccountNumberInputProps { diff --git a/src/components/common/inputs/Input/Input.style.ts b/src/components/common/inputs/Input/Input.style.ts index b2e8e683..b8593abb 100644 --- a/src/components/common/inputs/Input/Input.style.ts +++ b/src/components/common/inputs/Input/Input.style.ts @@ -1,4 +1,5 @@ import { css, Theme } from '@emotion/react'; + import { flexGenerator } from '@styles/generator'; export const inputContainerStyle = css` @@ -18,35 +19,33 @@ export const inputWrapperStyle = css` width: 100%; `; -export const inputStyle = (isError: boolean, isFocused: boolean) => (theme: Theme) => - css` - width: 100%; - height: 5.2rem; - padding: 1.5rem; - padding-right: 6rem; - border: 1px solid ${isError && isFocused ? theme.color.error : theme.color.lightgray1}; - border-radius: 10px; - - color: ${theme.color.darkgray}; - background-color: ${theme.color.white}; - ${theme.font['body01-r-15']} - - &::placeholder { - color: ${theme.color.midgray1}; - } - - &:focus { - outline: none; - } - `; - -export const textLengthStyle = (isError: boolean, isFocused: boolean) => (theme: Theme) => - css` - position: absolute; - right: 1.5rem; - color: ${isError && isFocused ? theme.color.error : theme.color.midgray1}; - ${theme.font['body02-r-14']} - `; +export const inputStyle = (isError: boolean, isFocused: boolean) => (theme: Theme) => css` + width: 100%; + height: 5.2rem; + padding: 1.5rem; + padding-right: 6rem; + border: 1px solid ${isError && isFocused ? theme.color.error : theme.color.lightgray1}; + border-radius: 10px; + + color: ${theme.color.darkgray}; + background-color: ${theme.color.white}; + ${theme.font['body01-r-15']} + + &::placeholder { + color: ${theme.color.midgray1}; + } + + &:focus { + outline: none; + } +`; + +export const textLengthStyle = (isError: boolean, isFocused: boolean) => (theme: Theme) => css` + position: absolute; + right: 1.5rem; + color: ${isError && isFocused ? theme.color.error : theme.color.midgray1}; + ${theme.font['body02-r-14']} +`; export const errorMessageStyle = (theme: Theme) => css` color: ${theme.color.error}; diff --git a/src/components/common/inputs/Input/Input.tsx b/src/components/common/inputs/Input/Input.tsx index c11f8063..65c82226 100644 --- a/src/components/common/inputs/Input/Input.tsx +++ b/src/components/common/inputs/Input/Input.tsx @@ -1,4 +1,5 @@ import { InputHTMLAttributes, forwardRef, useState } from 'react'; + import { inputContainerStyle, inputLabelStyle, diff --git a/src/components/common/select/FilterSelect/FilterSelect.style.ts b/src/components/common/select/FilterSelect/FilterSelect.style.ts index c2993792..c3b4b049 100644 --- a/src/components/common/select/FilterSelect/FilterSelect.style.ts +++ b/src/components/common/select/FilterSelect/FilterSelect.style.ts @@ -1,4 +1,5 @@ import { Theme, css } from '@emotion/react'; + import { flexGenerator } from '@styles/generator'; export const selectContainer = (theme: Theme) => css` diff --git a/src/components/common/select/FilterSelect/FilterSelect.tsx b/src/components/common/select/FilterSelect/FilterSelect.tsx index b84203c3..3812626f 100644 --- a/src/components/common/select/FilterSelect/FilterSelect.tsx +++ b/src/components/common/select/FilterSelect/FilterSelect.tsx @@ -1,4 +1,7 @@ import { useState } from 'react'; + +import { IcDropdownDown, IcDropdownUp } from '@svg'; + import { iconStyle, selectContainer, @@ -6,7 +9,6 @@ import { sortList, selectedOptionStyle, } from './FilterSelect.style'; -import { IcDropdownDown, IcDropdownUp } from '@svg'; interface SelectProps { options: string[]; diff --git a/src/components/common/select/Select/Select.style.ts b/src/components/common/select/Select/Select.style.ts index 5ff079b4..b16d519a 100644 --- a/src/components/common/select/Select/Select.style.ts +++ b/src/components/common/select/Select/Select.style.ts @@ -1,4 +1,5 @@ import { Theme, css } from '@emotion/react'; + import { flexGenerator } from '@styles/generator'; export const selectContainer = (theme: Theme) => css` diff --git a/src/components/common/select/Select/Select.tsx b/src/components/common/select/Select/Select.tsx index 892022ef..908024d2 100644 --- a/src/components/common/select/Select/Select.tsx +++ b/src/components/common/select/Select/Select.tsx @@ -1,4 +1,7 @@ import { useState } from 'react'; + +import { IcDropdownPlatformDown, IcDropdownPlatformUp } from '@svg'; + import { iconStyle, placeholderStyle, @@ -7,7 +10,6 @@ import { sortItem, sortList, } from './Select.style'; -import { IcDropdownPlatformDown, IcDropdownPlatformUp } from '@svg'; interface SelectProps { placeholder?: string; @@ -24,7 +26,7 @@ const Select = ({ placeholder, options, value, onChange }: SelectProps) => { }; const handleOptionClick = (option: string) => { - onChange(option) + onChange(option); setIsOpen(false); }; @@ -32,7 +34,9 @@ const Select = ({ placeholder, options, value, onChange }: SelectProps) => { return (
- {value ? value : placeholder} + + {value ? value : placeholder} + {isOpen ? : } {isOpen && (
    diff --git a/src/constants/category.tsx b/src/constants/category.tsx index fbe653eb..a43c0fb2 100644 --- a/src/constants/category.tsx +++ b/src/constants/category.tsx @@ -1,3 +1,5 @@ +import { ReactNode } from 'react'; + import { IcEmploymentSmall, IcHealthSmall, @@ -10,7 +12,6 @@ import { IcProductivitySmall, IcStartupSmall, } from '@svg'; -import { ReactNode } from 'react'; interface CategoryIcon { [key: string]: { diff --git a/src/constants/index.ts b/src/constants/index.ts index 439eb572..96050dde 100644 --- a/src/constants/index.ts +++ b/src/constants/index.ts @@ -1,6 +1,6 @@ -import routePath from './routePath'; -import * as graphicImage from './images/graphics'; -import * as images from './images'; import { CATEGORY_ICON, CATEGORY_NAME, CATEGORY_SMALL_ICON } from './category'; +import * as images from './images'; +import * as graphicImage from './images/graphics'; +import routePath from './routePath'; export { routePath, graphicImage, images, CATEGORY_ICON, CATEGORY_NAME, CATEGORY_SMALL_ICON }; diff --git a/src/constants/mocks/classApplyQuestionData.ts b/src/constants/mocks/classApplyQuestionData.ts index 9313d732..9b81e7b6 100644 --- a/src/constants/mocks/classApplyQuestionData.ts +++ b/src/constants/mocks/classApplyQuestionData.ts @@ -1,7 +1,7 @@ export const classApplyQuestionData = { - data: { - "question1": "저의 클래스에 참여하신적이 있으신가요?", - "question2": "비슷한 클래스에 참여하신적이 있나요?", - "question3": "비슷한 클래스에 참여하신적이 있나요?" - } -} \ No newline at end of file + data: { + question1: '저의 클래스에 참여하신적이 있으신가요?', + question2: '비슷한 클래스에 참여하신적이 있나요?', + question3: '비슷한 클래스에 참여하신적이 있나요?', + }, +}; diff --git a/src/constants/mocks/hostInfoCardData.ts b/src/constants/mocks/hostInfoCardData.ts index 336e8d4d..1ef31f5a 100644 --- a/src/constants/mocks/hostInfoCardData.ts +++ b/src/constants/mocks/hostInfoCardData.ts @@ -5,6 +5,6 @@ export const HOST_INFO_DATA = { hostCategories: { category1: 'investment', category2: 'investment', - category3: null + category3: null, }, }; diff --git a/src/constants/routePath.ts b/src/constants/routePath.ts index cc9faca9..12b19fe2 100644 --- a/src/constants/routePath.ts +++ b/src/constants/routePath.ts @@ -7,18 +7,15 @@ const homePages = { HOME: '/', }; -const categoriesPages = { - CATEGORY: '/categories', +const classListPages = { + CLASS_LIST: '/class-list', }; const classPages = { CLASS_DETAIL: '/class/:moimId', CLASS_NOTICE_POST: '/class/:moimId/notice/post', CLASS_POST: '/class/post/:step', - CLASS_APPLY_RULE: '/class/:moimId/apply/rule', - CLASS_APPLY_QUESTION: '/class/:moimId/apply/question', - CLASS_APPLY_DEPOSIT: '/class/:moimId/apply/deposit', - CLASS_APPLY_COMPLETE: '/class/:moimId/apply/complete', + CLASS_APPLY: '/class/:moimId/apply', }; const myPagePages = { @@ -27,12 +24,12 @@ const myPagePages = { }; const guestPages = { - GUEST_MY_CLASS: '/guest/myclass', + GUEST_MY_CLASS: '/mypage/guest/myclass', }; const hostPages = { - HOST_MY_CLASS: '/host/myclass', - HOST_MY_CLASS_MANAGE: '/host/myclass/manage/:moimId', + HOST_MY_CLASS: '/mypage/host/myclass', + HOST_MY_CLASS_MANAGE: '/mypage/host/myclass/manage/:moimId', HOST_APPLY: '/host/apply/:step', }; @@ -47,12 +44,12 @@ const errorPages = { const adminPages = { ADMIN: '/pickple-admin', -} +}; export default { ...authPages, ...homePages, - ...categoriesPages, + ...classListPages, ...classPages, ...myPagePages, ...guestPages, diff --git a/src/hooks/index.ts b/src/hooks/index.ts index 0f6a0ce3..72dabd85 100644 --- a/src/hooks/index.ts +++ b/src/hooks/index.ts @@ -1,6 +1,6 @@ +import useClipboard from './useCopyClip'; import useEasyNavigate from './useEasyNavigate'; import useToast from './useToast'; import useWindowSize from './useWindowSize'; -import useClipboard from './useCopyClip'; export { useEasyNavigate, useToast, useWindowSize, useClipboard }; diff --git a/src/hooks/useEasyNavigate.ts b/src/hooks/useEasyNavigate.ts index f507ef0c..90ea8d0d 100644 --- a/src/hooks/useEasyNavigate.ts +++ b/src/hooks/useEasyNavigate.ts @@ -1,4 +1,5 @@ import { useNavigate } from 'react-router-dom'; + import { routePath } from '@constants'; const useEasyNavigate = () => { diff --git a/src/main.tsx b/src/main.tsx index 5a0654ac..23145733 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -1,5 +1,6 @@ import React from 'react'; import ReactDOM from 'react-dom/client'; + import App from './App.tsx'; ReactDOM.createRoot(document.getElementById('root')!).render( diff --git a/src/pages/admin/page/HostSubmitter/HostSubmitter.style.ts b/src/pages/admin/page/HostSubmitter/HostSubmitter.style.ts index 6a04eb9e..a2240fbe 100644 --- a/src/pages/admin/page/HostSubmitter/HostSubmitter.style.ts +++ b/src/pages/admin/page/HostSubmitter/HostSubmitter.style.ts @@ -1,14 +1,15 @@ import { css, Theme } from '@emotion/react'; + import { flexGenerator } from '@styles/generator'; -export const adminLayoutStyle = (theme: Theme) =>css` +export const adminLayoutStyle = (theme: Theme) => css` position: absolute; right: 0; top: 0; width: 100vw; height: 100vh; background-color: ${theme.color.white}; -` +`; export const tableLayoutStyle = css` ${flexGenerator('column', 'flex-start', 'flex-start')} @@ -18,15 +19,15 @@ export const tableLayoutStyle = css` `; export const inputLayoutStyle = (theme: Theme) => css` -${flexGenerator('column', 'center', 'center')} -gap: 1rem; -height: 50%; -${theme.font['subhead05-sb-14']} -` + ${flexGenerator('column', 'center', 'center')} + gap: 1rem; + height: 50%; + ${theme.font['subhead05-sb-14']} +`; export const commonContainerStyle = css` -${flexGenerator('column', 'center', 'center')} -` + ${flexGenerator('column', 'center', 'center')} +`; export const tableContainerStyle = css` border-collapse: collapse; @@ -70,10 +71,9 @@ export const tdStyle = (theme: Theme) => css` text-align: center; border: 1px solid #ddd; ${theme.font['subhead03-m-16']} - `; export const inputStyle = css` -width: 30rem; -height: 4rem; -` \ No newline at end of file + width: 30rem; + height: 4rem; +`; diff --git a/src/pages/admin/page/HostSubmitter/HostSubmitter.tsx b/src/pages/admin/page/HostSubmitter/HostSubmitter.tsx index 4195e38e..302083f1 100644 --- a/src/pages/admin/page/HostSubmitter/HostSubmitter.tsx +++ b/src/pages/admin/page/HostSubmitter/HostSubmitter.tsx @@ -1,5 +1,8 @@ +import { useEffect, useState } from 'react'; + import { useFetchHostSubmitterList } from '@apis/domains/submitter/useFetchHostSubmitterList'; import { usePatchHostSubmitter } from '@apis/domains/submitter/usePatchHostSubmitter'; + import { CATEGORY_NAME } from '@constants'; import { adminLayoutStyle, @@ -9,10 +12,9 @@ import { tableLayoutStyle, tableStyle, tdStyle, -thStyle + thStyle, } from '@pages/admin/page/HostSubmitter/HostSubmitter.style'; import { titleStyle } from '@pages/auth/page/Login/Login.style'; -import { useEffect, useState } from 'react'; const SUBMITTER_STATUS = { approve: '승인 완료', diff --git a/src/pages/auth/page/Login/Login.style.ts b/src/pages/auth/page/Login/Login.style.ts index 53df7ddf..807147b9 100644 --- a/src/pages/auth/page/Login/Login.style.ts +++ b/src/pages/auth/page/Login/Login.style.ts @@ -1,4 +1,5 @@ import { css, Theme } from '@emotion/react'; + import { flexGenerator } from '@styles/generator'; export const loginWrapper = css` diff --git a/src/pages/auth/page/Login/Login.tsx b/src/pages/auth/page/Login/Login.tsx index 071e73ee..81540902 100644 --- a/src/pages/auth/page/Login/Login.tsx +++ b/src/pages/auth/page/Login/Login.tsx @@ -1,5 +1,11 @@ +import { useEffect } from 'react'; +import { useNavigate } from 'react-router-dom'; + import { SocialLoginButton } from '@components'; +import { graphicImage, routePath } from '@constants'; import { IcKakaoLogo, Logo } from '@svg'; +import { isLoggedIn } from '@utils'; + import { loginWrapper, titleStyle, @@ -8,10 +14,6 @@ import { titleWrapper, loginImageWrapper, } from './Login.style'; -import { graphicImage, routePath } from '@constants'; -import { isLoggedIn } from '@utils'; -import { useNavigate } from 'react-router-dom'; -import { useEffect } from 'react'; const Login = () => { const navigate = useNavigate(); diff --git a/src/pages/auth/page/Redirection/Redirection.tsx b/src/pages/auth/page/Redirection/Redirection.tsx index 54509f01..78c5041b 100644 --- a/src/pages/auth/page/Redirection/Redirection.tsx +++ b/src/pages/auth/page/Redirection/Redirection.tsx @@ -1,6 +1,7 @@ -import { usePostKakaoLogin } from '@apis/domains/user'; import { useEffect } from 'react'; +import { usePostKakaoLogin } from '@apis/domains/user'; + const Redirection = () => { const code: string = new URL(window.location.href).searchParams.get('code') || ''; window.history.forward(); diff --git a/src/pages/categories/components/index.ts b/src/pages/categories/components/index.ts deleted file mode 100644 index 31c8cc22..00000000 --- a/src/pages/categories/components/index.ts +++ /dev/null @@ -1,4 +0,0 @@ -import ClassListCard from './ClassListCard/ClassListCard'; -import CategoryEmptyView from './CategoryEmptyView/CategoryEmptyView'; - -export { ClassListCard, CategoryEmptyView }; diff --git a/src/pages/categories/page/index.ts b/src/pages/categories/page/index.ts deleted file mode 100644 index 13187eb1..00000000 --- a/src/pages/categories/page/index.ts +++ /dev/null @@ -1,3 +0,0 @@ -import Categories from './Categories/Categories'; - -export { Categories }; diff --git a/src/pages/class/components/AddAmountBox/AddAmountBox.style.ts b/src/pages/class/components/AddAmountBox/AddAmountBox.style.ts index f9042fba..5922f5fd 100644 --- a/src/pages/class/components/AddAmountBox/AddAmountBox.style.ts +++ b/src/pages/class/components/AddAmountBox/AddAmountBox.style.ts @@ -1,4 +1,5 @@ import { Theme, css } from '@emotion/react'; + import { flexGenerator } from '@styles/generator'; export const addAmountBoxContainer = css` diff --git a/src/pages/class/components/AddAmountBox/AddAmountBox.tsx b/src/pages/class/components/AddAmountBox/AddAmountBox.tsx index 59e48df8..4441c54f 100644 --- a/src/pages/class/components/AddAmountBox/AddAmountBox.tsx +++ b/src/pages/class/components/AddAmountBox/AddAmountBox.tsx @@ -1,4 +1,5 @@ import { Input } from '@components'; + import { addAmountBoxContainer, amountBoxWrapper, diff --git a/src/pages/class/components/ClassNotice/ClassNotice.style.ts b/src/pages/class/components/ClassNotice/ClassNotice.style.ts index 906adbac..5fb6ade1 100644 --- a/src/pages/class/components/ClassNotice/ClassNotice.style.ts +++ b/src/pages/class/components/ClassNotice/ClassNotice.style.ts @@ -1,4 +1,5 @@ import { css } from '@emotion/react'; + import { flexGenerator } from '@styles/generator'; export const noticeCardContainer = css` diff --git a/src/pages/class/components/ClassNotice/ClassNotice.tsx b/src/pages/class/components/ClassNotice/ClassNotice.tsx index 11967577..635dbd36 100644 --- a/src/pages/class/components/ClassNotice/ClassNotice.tsx +++ b/src/pages/class/components/ClassNotice/ClassNotice.tsx @@ -1,7 +1,7 @@ -import { components } from '@schema'; +import { noticeCardContainer } from './ClassNotice.style'; import { NoticeCard } from '..'; -import { noticeCardContainer } from './ClassNotice.style'; +import { components } from '@schema'; type NoticeListGetByMoimResponse = components['schemas']['NoticeListGetByMoimResponse']; diff --git a/src/pages/class/components/ClassNoticeEmptyView/ClassNoticeEmptyView.style.ts b/src/pages/class/components/ClassNoticeEmptyView/ClassNoticeEmptyView.style.ts index d9de8bc0..1606dcc3 100644 --- a/src/pages/class/components/ClassNoticeEmptyView/ClassNoticeEmptyView.style.ts +++ b/src/pages/class/components/ClassNoticeEmptyView/ClassNoticeEmptyView.style.ts @@ -1,4 +1,5 @@ import { css, Theme } from '@emotion/react'; + import { flexGenerator } from '@styles/generator'; export const emptyReviewContainer = css` diff --git a/src/pages/class/components/ClassNoticeEmptyView/ClassNoticeEmptyView.tsx b/src/pages/class/components/ClassNoticeEmptyView/ClassNoticeEmptyView.tsx index 1454aeae..9e8bac42 100644 --- a/src/pages/class/components/ClassNoticeEmptyView/ClassNoticeEmptyView.tsx +++ b/src/pages/class/components/ClassNoticeEmptyView/ClassNoticeEmptyView.tsx @@ -1,4 +1,5 @@ import { graphicImage } from '@constants'; + import { emptyReviewContainer, imageStyle, textStyle } from './ClassNoticeEmptyView.style'; const ClassNoticeEmptyView = () => { diff --git a/src/pages/class/components/ClassPost/ClassPost.tsx b/src/pages/class/components/ClassPost/ClassPost.tsx index 3d74b877..081f36ba 100644 --- a/src/pages/class/components/ClassPost/ClassPost.tsx +++ b/src/pages/class/components/ClassPost/ClassPost.tsx @@ -1,9 +1,11 @@ import React from 'react'; + import { FunnelProps, StepProps } from 'src/hooks/useFunnel'; + +import StepFour from '../StepFour/StepFour'; import StepOne from '../StepOne/StepOne'; -import StepTwo from '../StepTwo/StepTwo'; import StepThree from '../StepThree/StepThree'; -import StepFour from '../StepFour/StepFour'; +import StepTwo from '../StepTwo/StepTwo'; export interface ClassPostProps { steps: string[]; diff --git a/src/pages/class/components/ClassReviewEmptyView/ClassReviewEmptyView.style.ts b/src/pages/class/components/ClassReviewEmptyView/ClassReviewEmptyView.style.ts index d9de8bc0..1606dcc3 100644 --- a/src/pages/class/components/ClassReviewEmptyView/ClassReviewEmptyView.style.ts +++ b/src/pages/class/components/ClassReviewEmptyView/ClassReviewEmptyView.style.ts @@ -1,4 +1,5 @@ import { css, Theme } from '@emotion/react'; + import { flexGenerator } from '@styles/generator'; export const emptyReviewContainer = css` diff --git a/src/pages/class/components/ClassReviewEmptyView/ClassReviewEmptyView.tsx b/src/pages/class/components/ClassReviewEmptyView/ClassReviewEmptyView.tsx index 2aef13df..5d2bd02d 100644 --- a/src/pages/class/components/ClassReviewEmptyView/ClassReviewEmptyView.tsx +++ b/src/pages/class/components/ClassReviewEmptyView/ClassReviewEmptyView.tsx @@ -1,4 +1,5 @@ import { graphicImage } from '@constants'; + import { emptyReviewContainer, imageStyle, textStyle } from './ClassReviewEmptyView.style'; const ClassReviewEmptyView = () => { diff --git a/src/pages/class/components/GuestClassRegisterCard/GuestClassRegisterCard.style.ts b/src/pages/class/components/GuestClassRegisterCard/GuestClassRegisterCard.style.ts index a313114c..aca0f318 100644 --- a/src/pages/class/components/GuestClassRegisterCard/GuestClassRegisterCard.style.ts +++ b/src/pages/class/components/GuestClassRegisterCard/GuestClassRegisterCard.style.ts @@ -1,4 +1,5 @@ import { Theme, css } from '@emotion/react'; + import { flexGenerator } from '@styles/generator'; export const cardContainerStyle = (theme: Theme) => css` diff --git a/src/pages/class/components/GuestClassRegisterCard/GuestClassRegisterCard.tsx b/src/pages/class/components/GuestClassRegisterCard/GuestClassRegisterCard.tsx index 36f5b6ad..fcd0ac5a 100644 --- a/src/pages/class/components/GuestClassRegisterCard/GuestClassRegisterCard.tsx +++ b/src/pages/class/components/GuestClassRegisterCard/GuestClassRegisterCard.tsx @@ -1,5 +1,12 @@ +import { useFetchSubmittedMoimDetail } from '@apis/domains/moim'; + +import { Modal, Spinner } from '@components'; +import Error from '@pages/error/Error'; +import { DepositModal } from '@pages/guest/components'; +import { IcDate, IcOffline, IcOneline } from '@svg'; import Image from 'src/components/common/Image/Image'; import SimpleUserProfile from 'src/components/common/SimpleUserProfile/SimpleUserProfile'; + import { cardContainerStyle, dividerStyle, @@ -15,25 +22,20 @@ import { titleAndProfileWrapperStyle, titleStyle, } from './GuestClassRegisterCard.style'; -import { IcDate, IcOffline, IcOneline } from '@svg'; -import { useFetchSubmittedMoimDetail } from '@apis/domains/moim'; -import Error from '@pages/error/Error'; -import { Modal, Spinner } from '@components'; -import { DepositModal } from '@pages/guest/components'; -import { useNavigate } from 'react-router-dom'; export interface GuestClassRegisterCardProps { moimId: string; isModalOpen?: boolean; handleModalClose?: () => void; + handlePageChange?: () => void; } const GuestClassRegisterCard = ({ moimId, isModalOpen, handleModalClose = () => {}, + handlePageChange = () => {}, }: GuestClassRegisterCardProps) => { - const navigate = useNavigate(); const { data: appliedMoimData, isLoading } = useFetchSubmittedMoimDetail(Number(moimId)); if (isLoading) { @@ -54,7 +56,7 @@ const GuestClassRegisterCard = ({ const handleButtonClick = () => { handleModalClose(); - navigate(`/class/${moimId}/apply/complete`); + handlePageChange(); }; return ( diff --git a/src/pages/class/components/HostInfoCard/HostInfoCard.style.ts b/src/pages/class/components/HostInfoCard/HostInfoCard.style.ts index b77c1256..1a56af25 100644 --- a/src/pages/class/components/HostInfoCard/HostInfoCard.style.ts +++ b/src/pages/class/components/HostInfoCard/HostInfoCard.style.ts @@ -1,4 +1,5 @@ import { css, Theme } from '@emotion/react'; + import { flexGenerator } from '@styles/generator'; export const hostInfoCardContainer = (theme: Theme) => css` diff --git a/src/pages/class/components/HostInfoCard/HostInfoCard.tsx b/src/pages/class/components/HostInfoCard/HostInfoCard.tsx index f2b1ca27..f50a8484 100644 --- a/src/pages/class/components/HostInfoCard/HostInfoCard.tsx +++ b/src/pages/class/components/HostInfoCard/HostInfoCard.tsx @@ -1,3 +1,5 @@ +import { useFetchMoimHost } from '@apis/domains/host'; + import { Image, Label } from '@components'; import { CATEGORY_NAME, CATEGORY_SMALL_ICON, images } from '@constants'; @@ -11,7 +13,6 @@ import { countStyle, imageStyle, } from './HostInfoCard.style'; -import { useFetchMoimHost } from '@apis/domains/host'; interface HostInfoCardProps { hostId: number; diff --git a/src/pages/class/components/NoticeCard/NoticeCard.style.ts b/src/pages/class/components/NoticeCard/NoticeCard.style.ts index 6dffdd2b..6e384c5b 100644 --- a/src/pages/class/components/NoticeCard/NoticeCard.style.ts +++ b/src/pages/class/components/NoticeCard/NoticeCard.style.ts @@ -1,4 +1,5 @@ import { Theme, css } from '@emotion/react'; + import { flexGenerator } from '@styles/generator'; export const noticeCardContainer = (theme: Theme) => css` diff --git a/src/pages/class/components/NoticeCard/NoticeCard.tsx b/src/pages/class/components/NoticeCard/NoticeCard.tsx index c1ca8df8..ecfe596a 100644 --- a/src/pages/class/components/NoticeCard/NoticeCard.tsx +++ b/src/pages/class/components/NoticeCard/NoticeCard.tsx @@ -1,4 +1,5 @@ -import { components } from '@schema'; +import { formatCreatedDate } from '@utils'; + import { noticeCardContainer, noticeContent, @@ -11,7 +12,8 @@ import { profileTextBox, profileWrapper, } from './NoticeCard.style'; -import { formatCreatedDate } from '@utils'; + +import { components } from '@schema'; type NoticeListGetByMoimResponse = components['schemas']['NoticeListGetByMoimResponse']; diff --git a/src/pages/class/components/StepFour/StepFour.style.ts b/src/pages/class/components/StepFour/StepFour.style.ts index 51a10afc..6d19b54b 100644 --- a/src/pages/class/components/StepFour/StepFour.style.ts +++ b/src/pages/class/components/StepFour/StepFour.style.ts @@ -1,4 +1,5 @@ import { Theme, css } from '@emotion/react'; + import { flexGenerator } from '@styles/generator'; export const layoutStyle = css` diff --git a/src/pages/class/components/StepFour/StepFour.tsx b/src/pages/class/components/StepFour/StepFour.tsx index 80471197..8d727f9e 100644 --- a/src/pages/class/components/StepFour/StepFour.tsx +++ b/src/pages/class/components/StepFour/StepFour.tsx @@ -1,4 +1,11 @@ +import { useAtom } from 'jotai'; +import { useNavigate } from 'react-router-dom'; + import { Button, ProgressBar } from '@components'; +import { graphicImage } from '@constants'; +import { useEasyNavigate } from '@hooks'; +import { moimIdAtom } from 'src/stores/classPostData'; + import { footerStyle, headerSpanStyle, @@ -9,11 +16,6 @@ import { subTitleStyle, titleStyle, } from './StepFour.style'; -import { graphicImage } from '@constants'; -import { useAtom } from 'jotai'; -import { moimIdAtom } from 'src/stores/classPostData'; -import { useNavigate } from 'react-router-dom'; -import { useEasyNavigate } from '@hooks'; const StepFour = () => { const [moimId] = useAtom(moimIdAtom); diff --git a/src/pages/class/components/StepOne/StepOne.style.ts b/src/pages/class/components/StepOne/StepOne.style.ts index ea6e4324..cb57873e 100644 --- a/src/pages/class/components/StepOne/StepOne.style.ts +++ b/src/pages/class/components/StepOne/StepOne.style.ts @@ -1,4 +1,5 @@ import { Theme, css } from '@emotion/react'; + import { flexGenerator } from '@styles/generator'; export const layoutStyle = css` diff --git a/src/pages/class/components/StepOne/StepOne.tsx b/src/pages/class/components/StepOne/StepOne.tsx index f97c253f..6e3e78ef 100644 --- a/src/pages/class/components/StepOne/StepOne.tsx +++ b/src/pages/class/components/StepOne/StepOne.tsx @@ -1,3 +1,6 @@ +import dayjs, { Dayjs } from 'dayjs'; +import { useState } from 'react'; + import { Button, CategorySelectBox, @@ -10,7 +13,13 @@ import { SelectButton, TimeSelect, } from '@components'; +import { useClassPostInputChange, useClassPostInputValidation } from '@pages/class/hooks'; +import { smoothScroll } from '@utils'; +import AccountNumberInput from 'src/components/common/inputs/AccountNumberInput/AccountNumberInput'; +import { options } from 'src/constants/options'; +import { ClassPostDataType } from 'src/stores/types/classPostDataType'; import { StepProps } from 'src/types/nextStep'; + import { footerStyle, headerStyle, @@ -22,14 +31,7 @@ import { subTitleStyle, titleStyle, } from './StepOne.style'; -import { useState } from 'react'; -import dayjs, { Dayjs } from 'dayjs'; import AddAmountBox from '../AddAmountBox/AddAmountBox'; -import { ClassPostDataType } from 'src/stores/types/classPostDataType'; -import { smoothScroll } from '@utils'; -import { useClassPostInputChange, useClassPostInputValidation } from '@pages/class/hooks'; -import AccountNumberInput from 'src/components/common/inputs/AccountNumberInput/AccountNumberInput'; -import { options } from 'src/constants/options'; const StepOne = ({ onNext }: StepProps) => { const { diff --git a/src/pages/class/components/StepThree/StepThree.style.ts b/src/pages/class/components/StepThree/StepThree.style.ts index abc1f1eb..38a35589 100644 --- a/src/pages/class/components/StepThree/StepThree.style.ts +++ b/src/pages/class/components/StepThree/StepThree.style.ts @@ -1,4 +1,5 @@ import { Theme, css } from '@emotion/react'; + import { flexGenerator } from '@styles/generator'; export const layoutStyle = css` diff --git a/src/pages/class/components/StepThree/StepThree.tsx b/src/pages/class/components/StepThree/StepThree.tsx index 8fbdd056..e78e26ae 100644 --- a/src/pages/class/components/StepThree/StepThree.tsx +++ b/src/pages/class/components/StepThree/StepThree.tsx @@ -1,5 +1,16 @@ +import { useAtom } from 'jotai'; +import { useEffect, useState } from 'react'; + +import { usePostMoim } from '@apis/domains/moim/usePostMoim'; +import { usePutS3Upload } from '@apis/domains/presignedUrl/usePutS3Upload'; + import { Button, ImageSelect, Input, ProgressBar, Spinner, TextArea } from '@components'; +import { useClassPostInputChange, useClassPostInputValidation } from '@pages/class/hooks'; +import { smoothScroll } from '@utils'; +import { moimIdAtom } from 'src/stores/classPostData'; import { StepProps } from 'src/types/nextStep'; +import { handleUpload } from 'src/utils/image'; + import { footerStyle, headerSpanStyle, @@ -12,15 +23,8 @@ import { subTitleStyle, titleStyle, } from './StepThree.style'; -import { usePostMoim } from '@apis/domains/moim/usePostMoim'; -import { useEffect, useState } from 'react'; + import { ErrorType } from '@types'; -import { handleUpload } from 'src/utils/image'; -import { usePutS3Upload } from '@apis/domains/presignedUrl/usePutS3Upload'; -import { smoothScroll } from '@utils'; -import { useClassPostInputChange, useClassPostInputValidation } from '@pages/class/hooks'; -import { useAtom } from 'jotai'; -import { moimIdAtom } from 'src/stores/classPostData'; const StepThree = ({ onNext }: StepProps) => { const { classPostState, handleInputChange } = useClassPostInputChange(); diff --git a/src/pages/class/components/StepTwo/StepTwo.style.ts b/src/pages/class/components/StepTwo/StepTwo.style.ts index 51fdd835..973b3883 100644 --- a/src/pages/class/components/StepTwo/StepTwo.style.ts +++ b/src/pages/class/components/StepTwo/StepTwo.style.ts @@ -1,4 +1,5 @@ import { Theme, css } from '@emotion/react'; + import { flexGenerator } from '@styles/generator'; export const layoutStyle = css` diff --git a/src/pages/class/components/StepTwo/StepTwo.tsx b/src/pages/class/components/StepTwo/StepTwo.tsx index c6672665..5aa0efa0 100644 --- a/src/pages/class/components/StepTwo/StepTwo.tsx +++ b/src/pages/class/components/StepTwo/StepTwo.tsx @@ -1,4 +1,8 @@ +import { Button, ProgressBar, QuestionInput } from '@components'; +import { useClassPostInputChange, useClassPostInputValidation } from '@pages/class/hooks'; +import { smoothScroll } from '@utils'; import { StepProps } from 'src/types/nextStep'; + import { exampleQuestion, exampleQuestions, @@ -13,9 +17,6 @@ import { subTitleStyle, titleStyle, } from './StepTwo.style'; -import { Button, ProgressBar, QuestionInput } from '@components'; -import { smoothScroll } from '@utils'; -import { useClassPostInputChange, useClassPostInputValidation } from '@pages/class/hooks'; const StepTwo = ({ onNext }: StepProps) => { const { classPostState, handleQuestionChange } = useClassPostInputChange(); diff --git a/src/pages/class/components/index.ts b/src/pages/class/components/index.ts index 14f54c74..729b962d 100644 --- a/src/pages/class/components/index.ts +++ b/src/pages/class/components/index.ts @@ -1,11 +1,11 @@ -import HostInfoCard from './HostInfoCard/HostInfoCard'; import AddAmountBox from './AddAmountBox/AddAmountBox'; -import GuestClassRegisterCard from './GuestClassRegisterCard/GuestClassRegisterCard'; -import NoticeCard from './NoticeCard/NoticeCard'; import ClassInfo from './ClassInfo/ClassInfo'; import ClassNotice from './ClassNotice/ClassNotice'; -import ClassReviewEmptyView from './ClassReviewEmptyView/ClassReviewEmptyView'; import ClassNoticeEmptyView from './ClassNoticeEmptyView/ClassNoticeEmptyView'; +import ClassReviewEmptyView from './ClassReviewEmptyView/ClassReviewEmptyView'; +import GuestClassRegisterCard from './GuestClassRegisterCard/GuestClassRegisterCard'; +import HostInfoCard from './HostInfoCard/HostInfoCard'; +import NoticeCard from './NoticeCard/NoticeCard'; export { HostInfoCard, diff --git a/src/pages/class/hooks/useClassApply.ts b/src/pages/class/hooks/useClassApply.ts new file mode 100644 index 00000000..4cafea73 --- /dev/null +++ b/src/pages/class/hooks/useClassApply.ts @@ -0,0 +1,39 @@ +import { useState } from 'react'; + +import ClassApplyComplete from '@pages/class/page/ClassApply/ClassApplyComplete/ClassApplyComplete'; +import ClassApplyDeposit from '@pages/class/page/ClassApply/ClassApplyDeposit/ClassApplyDeposit'; +import ClassApplyQuestion from '@pages/class/page/ClassApply/ClassApplyQuestion/ClassApplyQuestion'; +import ClassApplyRule from '@pages/class/page/ClassApply/ClassApplyRule/ClassApplyRule'; + +type StepType = 'rule' | 'question' | 'deposit' | 'complete'; +const STEPS: StepType[] = ['rule', 'question', 'deposit', 'complete']; + +const STEP_COMPONENTS = { + [STEPS[0]]: ClassApplyRule, + [STEPS[1]]: ClassApplyQuestion, + [STEPS[2]]: ClassApplyDeposit, + [STEPS[3]]: ClassApplyComplete, +}; + +const PROGRESS = { + [STEPS[0]]: 25, + [STEPS[1]]: 50, + [STEPS[2]]: 75, + [STEPS[3]]: 100, +}; + +const useClassApply = () => { + const [step, setStep] = useState(STEPS[0]); + const CurrentComponent = STEP_COMPONENTS[step]; + + const onNext = () => { + const currentIndex = STEPS.indexOf(step); + const nextIndex = currentIndex + 1; + if (nextIndex < STEPS.length) { + setStep(STEPS[nextIndex]); + } + }; + return { progress: PROGRESS[step], CurrentComponent, onNext }; +}; + +export default useClassApply; diff --git a/src/pages/class/hooks/useClassPostInputChange.ts b/src/pages/class/hooks/useClassPostInputChange.ts index 4bbea8a3..48eeb45a 100644 --- a/src/pages/class/hooks/useClassPostInputChange.ts +++ b/src/pages/class/hooks/useClassPostInputChange.ts @@ -1,6 +1,7 @@ import dayjs, { Dayjs } from 'dayjs'; import 'dayjs/locale/ko'; import { useAtom } from 'jotai'; + import { classPostAtom } from 'src/stores/classPostData'; import { ClassPostDataType } from 'src/stores/types/classPostDataType'; diff --git a/src/pages/class/page/Class/Class.style.ts b/src/pages/class/page/Class/Class.style.ts index 8d38bd1a..7d8a9ee5 100644 --- a/src/pages/class/page/Class/Class.style.ts +++ b/src/pages/class/page/Class/Class.style.ts @@ -1,4 +1,5 @@ import { css, Theme } from '@emotion/react'; + import { flexGenerator } from '@styles/generator'; export const classLayout = css` @@ -41,21 +42,20 @@ export const tabWrapper = (theme: Theme) => css` gap: 2.3rem; `; -export const tabButtonStyle = (isSelected: boolean) => (theme: Theme) => - css` - display: inline-flex; - flex-shrink: 0; - ${theme.font['subhead01-sb-18']}; +export const tabButtonStyle = (isSelected: boolean) => (theme: Theme) => css` + display: inline-flex; + flex-shrink: 0; + ${theme.font['subhead01-sb-18']}; - background-color: ${theme.color.white}; - color: ${isSelected ? theme.color.blackgray : theme.color.midgray1}; + background-color: ${theme.color.white}; + color: ${isSelected ? theme.color.blackgray : theme.color.midgray1}; - padding: 0; - padding-bottom: 1.6rem; - margin-bottom: -2px; - border: none; - border-bottom: 2px solid ${isSelected ? theme.color.blackgray : theme.color.lightgray1}; - `; + padding: 0; + padding-bottom: 1.6rem; + margin-bottom: -2px; + border: none; + border-bottom: 2px solid ${isSelected ? theme.color.blackgray : theme.color.lightgray1}; +`; export const tabSectionStyle = (theme: Theme) => css` background-color: ${theme.color.background}; @@ -72,18 +72,17 @@ export const floatingButtonWrapper = (widowWidth: number) => css` right: ${widowWidth <= 430 ? '2rem' : `${widowWidth / 20 - 19.5}rem`}; `; -export const buttonContainer = (widowWidth: number) => (theme: Theme) => - css` - width: ${widowWidth <= 430 ? `${widowWidth}px` : '430px'}; - position: fixed; - bottom: 0; +export const buttonContainer = (widowWidth: number) => (theme: Theme) => css` + width: ${widowWidth <= 430 ? `${widowWidth}px` : '430px'}; + position: fixed; + bottom: 0; - background-color: ${theme.color.white}; + background-color: ${theme.color.white}; - ${flexGenerator()}; - gap: 0.5rem; + ${flexGenerator()}; + gap: 0.5rem; - padding: 1rem 2rem 3rem; + padding: 1rem 2rem 3rem; - z-index: 3; - `; + z-index: 3; +`; diff --git a/src/pages/class/page/Class/Class.tsx b/src/pages/class/page/Class/Class.tsx index 1de66194..7fe45a24 100644 --- a/src/pages/class/page/Class/Class.tsx +++ b/src/pages/class/page/Class/Class.tsx @@ -1,11 +1,10 @@ +import { useAtom } from 'jotai'; import { useState } from 'react'; -import { - ClassInfo, - ClassNotice, - ClassNoticeEmptyView, - ClassReviewEmptyView, - HostInfoCard, -} from '@pages/class/components'; +import { useNavigate, useParams } from 'react-router-dom'; + +import { useFetchMoimDetail, useFetchMoimDescription } from '@apis/domains/moim'; +import { useFetchMoimNoticeList } from '@apis/domains/notice'; + import { Button, Carousel, @@ -17,6 +16,19 @@ import { Spinner, Toast, } from '@components'; +import { useClipboard, useToast, useWindowSize } from '@hooks'; +import { + ClassInfo, + ClassNotice, + ClassNoticeEmptyView, + ClassReviewEmptyView, + HostInfoCard, +} from '@pages/class/components'; +import Error from '@pages/error/Error'; +import { userAtom } from '@stores'; +import { IcClassPerson, IcCopyPlus, IcDate, IcMoney, IcOffline, IcOneline } from '@svg'; +import { dDayText, handleShare, smoothScroll } from '@utils'; + import { buttonContainer, carouselWrapper, @@ -30,17 +42,8 @@ import { tabSectionStyle, tabWrapper, } from './Class.style'; -import { IcClassPerson, IcCopyPlus, IcDate, IcMoney, IcOffline, IcOneline } from '@svg'; -import { useNavigate, useParams } from 'react-router-dom'; -import { useFetchMoimDetail, useFetchMoimDescription } from '@apis/domains/moim'; -import { useClipboard, useToast, useWindowSize } from '@hooks'; -import { useFetchMoimNoticeList } from '@apis/domains/notice'; import { MoimIdPathParameterType } from '@types'; -import Error from '@pages/error/Error'; -import { dDayText, handleShare, smoothScroll } from '@utils'; -import { useAtom } from 'jotai'; -import { userAtom } from '@stores'; const Class = () => { const { windowWidth } = useWindowSize(); @@ -81,7 +84,7 @@ const Class = () => { const handleApplyButtonClick = () => { smoothScroll(0); - navigate(`/class/${moimId}/apply/rule`); + navigate(`/class/${moimId}/apply`); }; const handleShareButtonClick = async () => { @@ -125,24 +128,24 @@ const Class = () => {
    - - - + + +
    {selectTab === '모임소개' && } diff --git a/src/pages/class/page/ClassApply/ClassApply.style.ts b/src/pages/class/page/ClassApply/ClassApply.style.ts new file mode 100644 index 00000000..5ab0e3ce --- /dev/null +++ b/src/pages/class/page/ClassApply/ClassApply.style.ts @@ -0,0 +1,5 @@ +import { css } from '@emotion/react'; + +export const classApplyContainer = css` + padding-top: 6rem; +`; diff --git a/src/pages/class/page/ClassApply/ClassApply.tsx b/src/pages/class/page/ClassApply/ClassApply.tsx new file mode 100644 index 00000000..f328b6a2 --- /dev/null +++ b/src/pages/class/page/ClassApply/ClassApply.tsx @@ -0,0 +1,19 @@ +import { LogoHeader, ProgressBar } from '@components'; +import useClassApply from '@pages/class/hooks/useClassApply'; +import { classApplyContainer } from '@pages/class/page/ClassApply/ClassApply.style'; + +const ClassApply = () => { + const { progress, CurrentComponent, onNext } = useClassApply(); + + return ( + <> + +
    + + +
    + + ); +}; + +export default ClassApply; diff --git a/src/pages/class/page/ClassApply/ClassApplyComplete/ClassApplyComplete.style.ts b/src/pages/class/page/ClassApply/ClassApplyComplete/ClassApplyComplete.style.ts index ee587e9a..ba0698e7 100644 --- a/src/pages/class/page/ClassApply/ClassApplyComplete/ClassApplyComplete.style.ts +++ b/src/pages/class/page/ClassApply/ClassApplyComplete/ClassApplyComplete.style.ts @@ -1,9 +1,6 @@ import { css, Theme } from '@emotion/react'; -import { flexGenerator } from '@styles/generator'; -export const classApplyCompleteLayout = css` - padding-top: 6rem; -`; +import { flexGenerator } from '@styles/generator'; export const completeArticleLayout = css` ${flexGenerator('column', 'flex-start', 'flex-start')} @@ -48,14 +45,14 @@ export const completeCautionTitleStyle = (theme: Theme) => css` `; export const completeTextStyle = (theme: Theme) => css` - padding-left: 1.5rem; - margin-bottom: 1rem; + padding-left: 1.5rem; + margin-bottom: 1rem; li { ${theme.font['body02-r-14']} color: ${theme.color.midgray1}; - margin-bottom: 0.5rem; - list-style-type: disc; + margin-bottom: 0.5rem; + list-style-type: disc; } `; diff --git a/src/pages/class/page/ClassApply/ClassApplyComplete/ClassApplyComplete.tsx b/src/pages/class/page/ClassApply/ClassApplyComplete/ClassApplyComplete.tsx index 9c6a35c9..9665bc07 100644 --- a/src/pages/class/page/ClassApply/ClassApplyComplete/ClassApplyComplete.tsx +++ b/src/pages/class/page/ClassApply/ClassApplyComplete/ClassApplyComplete.tsx @@ -1,7 +1,9 @@ -import { Button, LogoHeader, ProgressBar } from '@components'; +import { useNavigate, useParams } from 'react-router-dom'; + +import { Button } from '@components'; import { GuestClassRegisterCard } from '@pages/class/components'; + import { - classApplyCompleteLayout, completeArticleLayout, completeCautionStyle, completeCautionTitleStyle, @@ -12,60 +14,47 @@ import { completeTextStyle, completeWrapperStyle, } from './ClassApplyComplete.style'; + import { MoimIdPathParameterType } from '@types'; -import { useNavigate, useParams } from 'react-router-dom'; const ClassApplyComplete = () => { const { moimId } = useParams(); const navigate = useNavigate(); const handleButtonClick = () => { - navigate(`/categories`); + navigate(`/class-list`); }; return ( -
    - - - -
    -
    -
    - 클래스 모임 신청 -

    - 모집 마감일 이후 마이페이지에서
    - 승인 여부를 확인할 수 있어요. -

    -
    +
    +
    +
    + 클래스 모임 신청 +

    + 모집 마감일 이후 마이페이지에서
    + 승인 여부를 확인할 수 있어요. +

    +
    -
    - +
    + -
    -

    유의 사항

    -
      -
    • - 입금 확인이 되면 '승인 대기' 상태로 전환됩니다. -
      • -
    • - 이후, 호스트 승인 여부에 따라 '승인 완료' 또는 '승인 거절' 이 결정됩니다. -
      • -
    • - 승인이 거절될 시, 모임 참가비는 개인 계좌로 환불됩니다. -
      • -
    • - 승인 완료 후에는 모임 신청을 취소할 수 없습니다. -
      • -
    -
    -
    -
    +
    +

    유의 사항

    +
      +
    • 입금 확인이 되면 '승인 대기' 상태로 전환됩니다.
      • +
    • 이후, 호스트 승인 여부에 따라 '승인 완료' 또는 '승인 거절' 이 결정됩니다.
      • +
    • 승인이 거절될 시, 모임 참가비는 개인 계좌로 환불됩니다.
      • +
    • 승인 완료 후에는 모임 신청을 취소할 수 없습니다.
      • +
    +
    + +
    -
    - -
    -
    -
    +
    + +
    + ); }; diff --git a/src/pages/class/page/ClassApply/ClassApplyDeposit/ClassApplyDeposit.style.ts b/src/pages/class/page/ClassApply/ClassApplyDeposit/ClassApplyDeposit.style.ts index 0f80e44c..c42f41d2 100644 --- a/src/pages/class/page/ClassApply/ClassApplyDeposit/ClassApplyDeposit.style.ts +++ b/src/pages/class/page/ClassApply/ClassApplyDeposit/ClassApplyDeposit.style.ts @@ -1,9 +1,6 @@ import { css, Theme } from '@emotion/react'; -import { flexGenerator } from '@styles/generator'; -export const classApplyDepositLayout = css` - padding-top: 6rem; -`; +import { flexGenerator } from '@styles/generator'; export const depositArticleLayout = css` ${flexGenerator('column', 'flex-start', 'flex-start')} @@ -41,7 +38,7 @@ export const depositFooterStyle = css` `; export const depositCautionTextStyle = (theme: Theme) => css` -padding: 0; + padding: 0; background-color: transparent; color: ${theme.color.midgray1}; border: none; @@ -49,7 +46,4 @@ padding: 0; ${theme.font['subhead03-m-16']} cursor: pointer; - - - `; diff --git a/src/pages/class/page/ClassApply/ClassApplyDeposit/ClassApplyDeposit.tsx b/src/pages/class/page/ClassApply/ClassApplyDeposit/ClassApplyDeposit.tsx index 2b9af645..bd01caff 100644 --- a/src/pages/class/page/ClassApply/ClassApplyDeposit/ClassApplyDeposit.tsx +++ b/src/pages/class/page/ClassApply/ClassApplyDeposit/ClassApplyDeposit.tsx @@ -1,7 +1,13 @@ -import { Button, LogoHeader, ProgressBar } from '@components'; +import { useState } from 'react'; +import { useParams } from 'react-router-dom'; + +import { Button } from '@components'; import { GuestClassRegisterCard } from '@pages/class/components'; +import { ClassApplyProps } from '@pages/class/page/ClassApply/ClassApplyRule/ClassApplyRule'; +import DepositErrorModal from '@pages/guest/components/DepositErrorModal/DepositErrorModal'; +import AbsoluteModal from 'src/components/common/AbsoluteModal/AbsoluteModal'; + import { - classApplyDepositLayout, depositArticleLayout, depositCautionTextStyle, depositFooterStyle, @@ -10,13 +16,10 @@ import { depositMainStyle, dipositWrapperStyle, } from './ClassApplyDeposit.style'; -import DepositErrorModal from '@pages/guest/components/DepositErrorModal/DepositErrorModal'; + import { MoimIdPathParameterType } from '@types'; -import { useState } from 'react'; -import { useParams } from 'react-router-dom'; -import AbsoluteModal from 'src/components/common/AbsoluteModal/AbsoluteModal'; -const ClassApplyDeposit = () => { +const ClassApplyDeposit = ({ handlePageChange }: ClassApplyProps) => { const [isErrorModalOpen, setIsErrorModalOpen] = useState(false); const [isModalOpen, setIsModalOpen] = useState(false); @@ -39,44 +42,40 @@ const ClassApplyDeposit = () => { return ( <> - -
    - - -
    -
    -
    - 클래스 모임 신청 -

    - 모임 신청이 완료되었습니다!
    이제 참가비를 입금해주세요. -

    -
    +
    +
    +
    + 클래스 모임 신청 +

    + 모임 신청이 완료되었습니다!
    이제 참가비를 입금해주세요. +

    +
    -
    - -
    -
    +
    + +
    +
    -
    - - -
    -
    +
    + + +
    + - {isErrorModalOpen && ( - - - - )} -
    + {isErrorModalOpen && ( + + + + )} ); }; diff --git a/src/pages/class/page/ClassApply/ClassApplyQuestion/ClassApplyQuestion.style.ts b/src/pages/class/page/ClassApply/ClassApplyQuestion/ClassApplyQuestion.style.ts index aba9dce1..84c3d636 100644 --- a/src/pages/class/page/ClassApply/ClassApplyQuestion/ClassApplyQuestion.style.ts +++ b/src/pages/class/page/ClassApply/ClassApplyQuestion/ClassApplyQuestion.style.ts @@ -1,10 +1,6 @@ import { css, Theme } from '@emotion/react'; -import { flexGenerator } from '@styles/generator'; -export const classApplyQuestionLayout = css` -width: 100%; - padding-top: 6rem; -`; +import { flexGenerator } from '@styles/generator'; export const questionArticleLayout = css` ${flexGenerator('column', 'flex-start', 'flex-start')} diff --git a/src/pages/class/page/ClassApply/ClassApplyQuestion/ClassApplyQuestion.tsx b/src/pages/class/page/ClassApply/ClassApplyQuestion/ClassApplyQuestion.tsx index 1beb8bb4..2b444243 100644 --- a/src/pages/class/page/ClassApply/ClassApplyQuestion/ClassApplyQuestion.tsx +++ b/src/pages/class/page/ClassApply/ClassApplyQuestion/ClassApplyQuestion.tsx @@ -1,14 +1,16 @@ +import { useEffect, useState } from 'react'; +import { useParams } from 'react-router-dom'; + +import { useFetchQuestionList } from '@apis/domains/moim/useFetchQuestionList'; +import { usePostAnswerList } from '@apis/domains/moimSubmission/usePostAnswerList'; + +import { Button, QuestionText, TextArea, Input, Spinner } from '@components'; +import { ClassApplyProps } from '@pages/class/page/ClassApply/ClassApplyRule/ClassApplyRule'; +import Error from '@pages/error/Error'; +import { IcCaution } from '@svg'; +import AccountNumberInput from 'src/components/common/inputs/AccountNumberInput/AccountNumberInput'; + import { - Button, - LogoHeader, - ProgressBar, - QuestionText, - TextArea, - Input, - Spinner, -} from '@components'; -import { - classApplyQuestionLayout, headerStyle, questionArticleLayout, questionCautionIconStyle, @@ -22,14 +24,8 @@ import { questionSpanStyle, questionWrapperStyle, } from './ClassApplyQuestion.style'; -import { IcCaution } from '@svg'; -import { useEffect, useState } from 'react'; -import { useParams } from 'react-router-dom'; -import { useFetchQuestionList } from '@apis/domains/moim/useFetchQuestionList'; -import { usePostAnswerList } from '@apis/domains/moimSubmission/usePostAnswerList'; + import { MoimIdPathParameterType } from '@types'; -import Error from '@pages/error/Error'; -import AccountNumberInput from 'src/components/common/inputs/AccountNumberInput/AccountNumberInput'; type AnswerListType = { [key: string]: string; @@ -44,7 +40,7 @@ export interface DataType { }; } -const ClassApplyQuestion = () => { +const ClassApplyQuestion = ({ handlePageChange }: ClassApplyProps) => { const { moimId } = useParams(); const [questionList, setQuestionList] = useState([]); @@ -62,7 +58,7 @@ const ClassApplyQuestion = () => { }, }); - const { mutate } = usePostAnswerList(moimId ?? ''); + const { mutate } = usePostAnswerList({ handlePageChange }); useEffect(() => { if (isSuccess && questionData) { @@ -72,23 +68,11 @@ const ClassApplyQuestion = () => { } }, [isSuccess, questionData]); - // answerList의 값을 업데이트하는 함수 - const updateAnswerList = (key: string, value: string) => { - setAnswer((prevState) => ({ - ...prevState, - answerList: { - ...prevState.answerList, - [key]: value, - }, - })); - }; - - // accountList의 값을 업데이트하는 함수 - const updateAccountList = (key: string, value: string) => { + const updateAnswer = (list: 'answerList' | 'accountList', key: string, value: string) => { setAnswer((prevState) => ({ ...prevState, - accountList: { - ...prevState.accountList, + [list]: { + ...prevState[list], [key]: value, }, })); @@ -109,12 +93,12 @@ const ClassApplyQuestion = () => { setIsButtonDisabled(!(allAnswersFilled && allAccountsFilled)); }, [answer, questionList]); - const requestData = { - moimId: Number(moimId), - body: answer, - }; + const handleButtonClick = async () => { + const requestData = { + moimId: Number(moimId), + body: answer, + }; - const handleButtonClick = () => { mutate(requestData); }; @@ -128,95 +112,90 @@ const ClassApplyQuestion = () => { return ( <> - -
    - - -
    -
    -
    - 클래스 모임 신청 -

    - 호스트의 질문에
    답변을 작성해 주세요! -

    -
    - -
    - {questionList.map((question, index) => ( -
    - {question && ( - <> - {question} -