From be6de58ef3c479229e99408ef555f189de62ff7b Mon Sep 17 00:00:00 2001 From: Ashley Heo Date: Fri, 11 Aug 2023 14:35:40 +0900 Subject: [PATCH 01/10] =?UTF-8?q?chore:=20package.json=EC=97=90=20reposito?= =?UTF-8?q?ry=20&=20contributors=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/package.json | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) diff --git a/frontend/package.json b/frontend/package.json index d95e9a0d9..68f8defd6 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -2,6 +2,24 @@ "name": "hang-log", "version": "0.0.1", "description": "장소 기반 여행 기록 서비스, \"행록\"", + "repository": "https://github.com/woowacourse-teams/2023-hang-log", + "contributors": [ + { + "name": "Ashley Heo", + "email": "ashleysyheo@gmail.com", + "url": "https://github.com/ashleysyheo" + }, + { + "name": "Woochan Lim", + "email": "dlaxodud1217@gmail.com", + "url": "https://github.com/dladncks1217" + }, + { + "name": "Dahye Yun", + "email": "06robin11@gmail.com", + "url": "https://github.com/Dahyeeee" + } + ], "main": "index.js", "scripts": { "start": "cross-env NODE_ENV=development webpack --mode development", From c00b496640340ae294e0253ec687526cf012eab8 Mon Sep 17 00:00:00 2001 From: Ashley Heo Date: Fri, 11 Aug 2023 15:05:18 +0900 Subject: [PATCH 02/10] =?UTF-8?q?refactor:=200=20=EB=AF=B8=EB=A7=8C=20?= =?UTF-8?q?=EC=88=AB=EC=9E=90=20=EC=9E=85=EB=A0=A5=20=EB=AA=BB=ED=95=98?= =?UTF-8?q?=EA=B2=8C=20=EB=A7=89=EA=B8=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../TripItemAddModal/ExpenseInput/ExpenseInput.tsx | 1 + frontend/src/hooks/trip/useTripItemExpenseInput.ts | 14 +++++++++++++- 2 files changed, 14 insertions(+), 1 deletion(-) diff --git a/frontend/src/components/trip/TripItemAddModal/ExpenseInput/ExpenseInput.tsx b/frontend/src/components/trip/TripItemAddModal/ExpenseInput/ExpenseInput.tsx index 77342ec68..a9061839c 100644 --- a/frontend/src/components/trip/TripItemAddModal/ExpenseInput/ExpenseInput.tsx +++ b/frontend/src/components/trip/TripItemAddModal/ExpenseInput/ExpenseInput.tsx @@ -54,6 +54,7 @@ const ExpenseInput = ({ initialExpenseValue, updateInputValue }: ExpenseInputPro type="number" placeholder="0" aria-label="비용" + min={0} value={initialExpenseValue?.amount} onChange={handleAmountChange} /> diff --git a/frontend/src/hooks/trip/useTripItemExpenseInput.ts b/frontend/src/hooks/trip/useTripItemExpenseInput.ts index 0d088f9d9..82bf880d8 100644 --- a/frontend/src/hooks/trip/useTripItemExpenseInput.ts +++ b/frontend/src/hooks/trip/useTripItemExpenseInput.ts @@ -41,6 +41,13 @@ export const useTripItemExpenseInput = ( }; const handleAmountChange = (event: ChangeEvent) => { + if (Number(event.target.value) < 0) { + // eslint-disable-next-line no-param-reassign + event.target.value = '0'; + + return; + } + setExpenseValue((prevExpenseValue) => { const newExpenseValue = { ...prevExpenseValue!, @@ -52,5 +59,10 @@ export const useTripItemExpenseInput = ( }); }; - return { expenseCategoryData, handleCategoryChange, handleCurrencyChange, handleAmountChange }; + return { + expenseCategoryData, + handleCategoryChange, + handleCurrencyChange, + handleAmountChange, + }; }; From 15dfddea0cb6b5d46a9a81434a784bf5528b04e9 Mon Sep 17 00:00:00 2001 From: Ashley Heo Date: Fri, 11 Aug 2023 15:12:08 +0900 Subject: [PATCH 03/10] =?UTF-8?q?refactor:=20=EB=AC=B8=EC=9E=90=20?= =?UTF-8?q?=EC=9E=85=EB=A0=A5=20=EB=AA=BB=ED=95=98=EA=B2=8C=20=EB=A7=89?= =?UTF-8?q?=EA=B8=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/constants/regex.ts | 3 ++- frontend/src/hooks/trip/useTripItemExpenseInput.ts | 5 +++++ frontend/src/utils/formatter.ts | 4 +--- 3 files changed, 8 insertions(+), 4 deletions(-) diff --git a/frontend/src/constants/regex.ts b/frontend/src/constants/regex.ts index ddd7fddd5..e42b6dbae 100644 --- a/frontend/src/constants/regex.ts +++ b/frontend/src/constants/regex.ts @@ -1,3 +1,4 @@ export const REGEX = { - ONLY_LETTER: '^[A-Za-z가-힣ㄱ-ㅎ]+$', + ONLY_LETTER: /^[A-Za-z가-힣ㄱ-ㅎ]+$/g, + ALPHABET_AND_KOREAN_CHARACTERS: /^[a-zA-Zㄱ-ㅎㅏ-ㅣ가-힣]*$/, }; diff --git a/frontend/src/hooks/trip/useTripItemExpenseInput.ts b/frontend/src/hooks/trip/useTripItemExpenseInput.ts index 82bf880d8..e58906e03 100644 --- a/frontend/src/hooks/trip/useTripItemExpenseInput.ts +++ b/frontend/src/hooks/trip/useTripItemExpenseInput.ts @@ -1,3 +1,4 @@ +import { REGEX } from '@constants/regex'; import { DEFAULT_CURRENCY } from '@constants/trip'; import { useQueryClient } from '@tanstack/react-query'; import type { ExpenseCategoryData } from '@type/expense'; @@ -41,6 +42,10 @@ export const useTripItemExpenseInput = ( }; const handleAmountChange = (event: ChangeEvent) => { + if (REGEX.ALPHABET_AND_KOREAN_CHARACTERS.test(event.target.value)) { + return; + } + if (Number(event.target.value) < 0) { // eslint-disable-next-line no-param-reassign event.target.value = '0'; diff --git a/frontend/src/utils/formatter.ts b/frontend/src/utils/formatter.ts index d8514c6a8..acaaab0a6 100644 --- a/frontend/src/utils/formatter.ts +++ b/frontend/src/utils/formatter.ts @@ -20,9 +20,7 @@ export const formatDateRange = ({ startDate, endDate }: DateRangeData) => { }; export const formatStringToLetter = (string: string) => { - const letterRegex = new RegExp(REGEX.ONLY_LETTER, 'g'); - - const matches = string.match(letterRegex); + const matches = string.match(REGEX.ONLY_LETTER); if (!matches) { return ''; From d0008ecc8c55b65301a985c5655dbcb5c23604da Mon Sep 17 00:00:00 2001 From: Ashley Heo Date: Fri, 11 Aug 2023 15:16:56 +0900 Subject: [PATCH 04/10] =?UTF-8?q?refactor:=20=EA=B8=88=EC=95=A1=20?= =?UTF-8?q?=EC=9E=85=EB=A0=A5=20=EC=B5=9C=EB=8C=80=20=EA=B0=92=201?= =?UTF-8?q?=EC=96=B5=EC=9C=BC=EB=A1=9C=20=EC=A7=80=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../trip/TripItemAddModal/ExpenseInput/ExpenseInput.tsx | 2 ++ frontend/src/constants/ui.ts | 2 ++ frontend/src/hooks/trip/useTripItemExpenseInput.ts | 6 +++++- 3 files changed, 9 insertions(+), 1 deletion(-) diff --git a/frontend/src/components/trip/TripItemAddModal/ExpenseInput/ExpenseInput.tsx b/frontend/src/components/trip/TripItemAddModal/ExpenseInput/ExpenseInput.tsx index a9061839c..3860614e5 100644 --- a/frontend/src/components/trip/TripItemAddModal/ExpenseInput/ExpenseInput.tsx +++ b/frontend/src/components/trip/TripItemAddModal/ExpenseInput/ExpenseInput.tsx @@ -1,4 +1,5 @@ import { CURRENCY_ICON } from '@constants/trip'; +import { AMOUNT_MAX_LIMIT } from '@constants/ui'; import type { TripItemFormData } from '@type/tripItem'; import { Flex, Input, Label, Select, Theme } from 'hang-log-design-system'; import { memo } from 'react'; @@ -55,6 +56,7 @@ const ExpenseInput = ({ initialExpenseValue, updateInputValue }: ExpenseInputPro placeholder="0" aria-label="비용" min={0} + max={AMOUNT_MAX_LIMIT} value={initialExpenseValue?.amount} onChange={handleAmountChange} /> diff --git a/frontend/src/constants/ui.ts b/frontend/src/constants/ui.ts index 2c21c571d..6a7231f77 100644 --- a/frontend/src/constants/ui.ts +++ b/frontend/src/constants/ui.ts @@ -23,3 +23,5 @@ export const TRIP_ITEM_MEMO_MAX_LENGTH = 255; export const NICKNAME_MAX_LENGTH = 15; export const MOBILE_MEDIA_QUERY_SIZE = '(max-width: 600px)'; + +export const AMOUNT_MAX_LIMIT = 100_000_000; diff --git a/frontend/src/hooks/trip/useTripItemExpenseInput.ts b/frontend/src/hooks/trip/useTripItemExpenseInput.ts index e58906e03..b78b6e826 100644 --- a/frontend/src/hooks/trip/useTripItemExpenseInput.ts +++ b/frontend/src/hooks/trip/useTripItemExpenseInput.ts @@ -1,5 +1,6 @@ import { REGEX } from '@constants/regex'; import { DEFAULT_CURRENCY } from '@constants/trip'; +import { AMOUNT_MAX_LIMIT } from '@constants/ui'; import { useQueryClient } from '@tanstack/react-query'; import type { ExpenseCategoryData } from '@type/expense'; import type { TripItemFormData } from '@type/tripItem'; @@ -49,8 +50,11 @@ export const useTripItemExpenseInput = ( if (Number(event.target.value) < 0) { // eslint-disable-next-line no-param-reassign event.target.value = '0'; + } - return; + if (Number(event.target.value) > AMOUNT_MAX_LIMIT) { + // eslint-disable-next-line no-param-reassign + event.target.value = String(AMOUNT_MAX_LIMIT); } setExpenseValue((prevExpenseValue) => { From ad0376e2fd28f9a4c34c14c388e13a0ffb8dc784 Mon Sep 17 00:00:00 2001 From: Ashley Heo Date: Fri, 11 Aug 2023 15:48:55 +0900 Subject: [PATCH 05/10] =?UTF-8?q?refactor:=20=EC=9E=84=ED=8F=AC=ED=8A=B8?= =?UTF-8?q?=20=EC=88=9C=EC=84=9C=20=EC=84=A4=EC=A0=95=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/.prettierrc | 19 ++++++++++++++++--- 1 file changed, 16 insertions(+), 3 deletions(-) diff --git a/frontend/.prettierrc b/frontend/.prettierrc index 4531a5b82..aeb611e27 100644 --- a/frontend/.prettierrc +++ b/frontend/.prettierrc @@ -5,12 +5,25 @@ "printWidth": 100, "semi": true, "importOrder": [ - "^@utils/(.*)$", - "^@api/(.*)$", - "^@hooks/(.*)$", + "^react(.*)", + "^@tanstack/(.*)$", + "^recoil(.*)", + "^axios(.*)", + "^msw(.*)", + "^hang-log-design-system(.*)", "^@pages/(.*)$", "^@components/(.*)$", + "^@hooks/(.*)$", + "^@store/(.*)$", + "^@api/(.*)$", + "^@utils/(.*)$", + "^@router/(.*)$", + "^@type/(.*)$", + "^@constants/(.*)$", + "^@assets/(.*)$", "^@styles/(.*)$", + "^@stories/(.*)$", + "^@mocks/(.*)$", "^[./]" ], "importOrderSeparation": true, From 5c3bed5ed4bbbe445b64caf5396059110898790a Mon Sep 17 00:00:00 2001 From: Ashley Heo Date: Fri, 11 Aug 2023 15:49:07 +0900 Subject: [PATCH 06/10] =?UTF-8?q?refactor:=20=EC=9E=84=ED=8F=AC=ED=8A=B8?= =?UTF-8?q?=20=EC=88=9C=EC=84=9C=20=EC=84=A4=EC=A0=95=20=EB=B3=80=EA=B2=BD?= =?UTF-8?q?=20=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/cypress/e2e/createTrip.cy.ts | 1 + frontend/cypress/e2e/login.cy.ts | 4 ++- frontend/cypress/e2e/trip.cy.ts | 6 +++-- frontend/cypress/e2e/trips.cy.ts | 6 +++-- frontend/src/App.tsx | 13 ++++++---- frontend/src/api/axiosInstance.ts | 3 ++- frontend/src/api/city/getCity.ts | 5 ++-- .../src/api/dayLog/patchDayLogItemOrder.ts | 4 +-- frontend/src/api/dayLog/patchDayLogTitle.ts | 4 +-- frontend/src/api/expense/getExpense.ts | 5 ++-- .../src/api/expense/getExpenseCategory.ts | 5 ++-- frontend/src/api/image/postImage.ts | 5 ++-- frontend/src/api/interceptors.ts | 5 ++-- frontend/src/api/member/getUserInfo.ts | 5 ++-- frontend/src/api/member/postLogIn.ts | 6 +++-- frontend/src/api/member/postLogOut.ts | 5 ++-- frontend/src/api/member/postNewToken.ts | 5 ++-- frontend/src/api/member/putUserInfo.ts | 5 ++-- frontend/src/api/trip/deleteTrip.ts | 4 +-- frontend/src/api/trip/getTrip.ts | 5 ++-- frontend/src/api/trip/postTrip.ts | 5 ++-- frontend/src/api/trip/putTrip.ts | 5 ++-- frontend/src/api/tripItem/deleteTripItem.ts | 4 +-- frontend/src/api/tripItem/postTripItem.ts | 5 ++-- frontend/src/api/tripItem/putTripItem.ts | 5 ++-- frontend/src/api/trips/getTrips.ts | 5 ++-- .../CitySearchBar/CitySearchBar.style.ts | 1 + .../common/CitySearchBar/CitySearchBar.tsx | 17 +++++++------ .../CitySuggestion/CitySuggestion.style.ts | 1 + .../common/CitySuggestion/CitySuggestion.tsx | 12 +++++---- .../common/DateInput/DateInput.style.ts | 1 + .../components/common/DateInput/DateInput.tsx | 11 +++++--- .../common/DayLogItem/DayLogItem.style.ts | 1 + .../common/DayLogItem/DayLogItem.tsx | 9 ++++--- .../common/DayLogItem/DayLogItemSkeleton.tsx | 6 +++-- .../DayLogItem/TitleInput/TitleInput.style.ts | 1 + .../DayLogItem/TitleInput/TitleInput.tsx | 5 ++-- .../common/DayLogList/DayLogList.style.ts | 1 + .../common/DayLogList/DayLogList.tsx | 9 ++++--- .../common/DonutChart/DonutChart.tsx | 2 -- .../components/common/Error/Error.style.ts | 1 + .../src/components/common/Error/Error.tsx | 18 +++++++------ .../common/ErrorBoundary/ErrorBoundary.tsx | 4 +-- .../common/GoogleButton/GoogleButton.style.ts | 1 + .../common/GoogleButton/GoogleButton.tsx | 3 ++- .../GoogleMapWrapper/GoogleMapWrapper.tsx | 4 ++- .../common/KakaoButton/KakaoButton.style.ts | 1 + .../common/KakaoButton/KakaoButton.tsx | 3 ++- .../common/MapDashedLine/MapDashedLine.tsx | 3 ++- .../common/StarRating/StarRating.tsx | 6 +++-- .../common/ToastContainer/ToastContainer.tsx | 7 ++++-- .../TripButtons/TripButtons.style.ts | 1 + .../TripButtons/TripButtons.tsx | 13 ++++++---- .../TripEditButtons/TripEditButtons.style.ts | 1 + .../TripEditButtons/TripEditButtons.tsx | 3 ++- .../TripInformation/TripInformation.style.ts | 1 + .../TripInformation/TripInformation.tsx | 15 +++++++---- .../TripItem/EditMenu/EditMenu.style.ts | 1 + .../common/TripItem/EditMenu/EditMenu.tsx | 10 +++++--- .../common/TripItem/TripItem.style.ts | 1 + .../components/common/TripItem/TripItem.tsx | 19 ++++++++------ .../common/TripItem/TripItemSkeleton.tsx | 7 ++++-- .../common/TripItemList/TripItemList.style.ts | 1 + .../common/TripItemList/TripItemList.tsx | 25 +++++++++++-------- .../TripItemList/TripItemListSkeleton.tsx | 6 +++-- .../TripItemMarker/TripItemMarker.style.ts | 1 + .../common/TripItemMarker/TripItemMarker.tsx | 12 ++++++--- .../TripItemMarkerContainer.tsx | 10 +++++--- .../src/components/common/TripMap/TripMap.tsx | 6 +++-- .../ExpenseCategories.style.ts | 1 + .../ExpenseCategories/ExpenseCategories.tsx | 9 ++++--- .../ExpenseCategoryInformation.style.ts | 7 ++++-- .../ExpenseCategoryInformation.tsx | 11 ++++---- .../ExpenseCategoryInformationSkeleton.tsx | 3 ++- .../ExpenseDates/ExpenseDates.style.ts | 1 + .../expense/ExpenseDates/ExpenseDates.tsx | 11 ++++---- .../ExpenseInformation.style.ts | 1 + .../ExpenseInformation/ExpenseInformation.tsx | 11 +++++--- .../expense/ExpenseItem/ExpenseItem.style.ts | 1 + .../expense/ExpenseItem/ExpenseItem.tsx | 8 +++--- .../expense/ExpenseList/ExpenseList.style.ts | 1 + .../expense/ExpenseList/ExpenseList.tsx | 9 ++++--- .../ExpenseList/ExpenseListSkeleton.tsx | 6 +++-- .../ExpenseListSection.style.ts | 1 + .../ExpenseListSection/ExpenseListSection.tsx | 9 ++++--- .../ExpenseListSectionSkeleton.tsx | 6 +++-- .../TotalExpenseSection.style.ts | 1 + .../TotalExpenseSection.tsx | 17 +++++++------ .../components/layout/Footer/Footer.style.ts | 1 + .../components/layout/Header/Header.style.ts | 1 + .../src/components/layout/Header/Header.tsx | 13 +++++++--- .../Header/LoggedInMenu/LoggedInMenu.style.ts | 1 + .../Header/LoggedInMenu/LoggedInMenu.tsx | 12 +++++---- .../Header/LoggedOutMenu/LoggedOutMenu.tsx | 6 +++-- .../EditUserProfileForm.style.ts | 1 + .../EditUserProfileForm.tsx | 8 +++--- .../NicknameInput/NicknameInput.style.ts | 1 + .../NicknameInput/NicknameInput.tsx | 9 ++++--- .../ProfileImageInput.style.ts | 1 + .../ProfileImageInput/ProfileImageInput.tsx | 8 +++--- .../TripCreateForm/TripCreateForm.style.ts | 1 + .../trip/TripCreateForm/TripCreateForm.tsx | 10 +++++--- .../ImageInput/ImageInput.tsx | 3 ++- .../TripInfoEditModal.style.ts | 1 + .../TripInfoEditModal/TripInfoEditModal.tsx | 13 ++++++---- .../CategoryInput/CategoryInput.tsx | 9 ++++--- .../TripItemAddModal/DateInput/DateInput.tsx | 10 +++++--- .../ExpenseInput/ExpenseInput.style.ts | 1 + .../ExpenseInput/ExpenseInput.tsx | 11 +++++--- .../ImageInput/ImageInput.tsx | 15 +++++++---- .../TripItemAddModal/MemoInput/MemoInput.tsx | 9 ++++--- .../PlaceInput/PlaceInput.style.ts | 1 + .../PlaceInput/PlaceInput.tsx | 8 +++--- .../StarRatingInput/StarRatingInput.tsx | 6 +++-- .../TitleInput/TitleInput.tsx | 9 ++++--- .../TripItemAddModal.style.ts | 1 + .../TripItemAddModal/TripItemAddModal.tsx | 11 +++++--- .../trips/TripsHeader/TripsHeader.style.ts | 1 + .../trips/TripsHeader/TripsHeader.tsx | 5 ++-- .../trips/TripsHeader/TripsHeaderSkeleton.tsx | 3 ++- .../trips/TripsItem/TripsItem.style.ts | 1 + .../components/trips/TripsItem/TripsItem.tsx | 9 ++++--- .../TripsItemList/TripsItemList.style.ts | 1 + .../trips/TripsItemList/TripsItemList.tsx | 13 ++++++---- .../TripsItemList/TripsItemListSkeleton.tsx | 3 ++- .../TutorialModal/TutorialModal.style.ts | 1 + .../trips/TutorialModal/TutorialModal.tsx | 16 +++++++----- .../src/hooks/api/useAddTripItemMutation.ts | 11 +++++--- frontend/src/hooks/api/useCityQuery.ts | 7 ++++-- .../src/hooks/api/useCreateTripMutation.ts | 11 +++++--- .../src/hooks/api/useDayLogOrderMutation.ts | 11 +++++--- .../src/hooks/api/useDayLogTitleMutation.ts | 11 +++++--- .../hooks/api/useDeleteTripItemMutation.ts | 14 +++++++---- .../src/hooks/api/useDeleteTripMutation.ts | 11 +++++--- .../src/hooks/api/useExpenseCategoryQuery.ts | 7 ++++-- frontend/src/hooks/api/useExpenseQuery.ts | 7 ++++-- frontend/src/hooks/api/useImageMutation.ts | 11 +++++--- frontend/src/hooks/api/useLogInMutation.ts | 16 +++++++----- frontend/src/hooks/api/useLogOutMutation.ts | 16 +++++++----- frontend/src/hooks/api/useTripEditMutation.ts | 11 +++++--- frontend/src/hooks/api/useTripQuery.ts | 7 ++++-- frontend/src/hooks/api/useTripsQuery.ts | 7 ++++-- .../hooks/api/useUpdateTripItemMutation.ts | 11 +++++--- frontend/src/hooks/api/useUserInfoMutation.ts | 11 +++++--- frontend/src/hooks/api/useUserInfoQuery.ts | 7 ++++-- frontend/src/hooks/common/useAutoScroll.ts | 2 +- frontend/src/hooks/common/useCityDateForm.ts | 3 ++- .../src/hooks/common/useCitySuggestion.ts | 6 +++-- frontend/src/hooks/common/useCityTags.ts | 6 +++-- frontend/src/hooks/common/useImageUpload.ts | 3 ++- frontend/src/hooks/common/useMediaQuery.ts | 7 ++++-- frontend/src/hooks/common/useResetError.ts | 5 ++-- frontend/src/hooks/common/useScrollFocus.ts | 4 ++- frontend/src/hooks/expense/useExpense.ts | 4 ++- .../hooks/member/useEditUserProfileForm.ts | 5 ++-- frontend/src/hooks/member/useTokenError.ts | 11 +++++--- frontend/src/hooks/trip/useAddTripItemForm.ts | 7 +++--- frontend/src/hooks/trip/useTripDates.ts | 1 + frontend/src/hooks/trip/useTripEditForm.ts | 7 +++--- .../src/hooks/trip/useTripItemExpenseInput.ts | 9 ++++--- .../src/hooks/trip/useTripItemPlaceInput.ts | 3 ++- frontend/src/index.tsx | 16 ++++++++---- frontend/src/mocks/browser.ts | 3 ++- frontend/src/mocks/handlers/city.ts | 4 ++- frontend/src/mocks/handlers/dayLog.ts | 6 +++-- frontend/src/mocks/handlers/expense.ts | 4 ++- frontend/src/mocks/handlers/image.ts | 4 ++- frontend/src/mocks/handlers/member.ts | 7 ++++-- frontend/src/mocks/handlers/tripItem.ts | 7 ++++-- frontend/src/mocks/handlers/trips.ts | 7 ++++-- .../pages/ExpensePage/ExpensePage.style.ts | 1 + .../src/pages/ExpensePage/ExpensePage.tsx | 9 ++++--- .../pages/ExpensePage/ExpensePageSkeleton.tsx | 6 +++-- .../src/pages/IntroPage/IntroPage.style.ts | 1 + frontend/src/pages/IntroPage/IntroPage.tsx | 15 +++++++---- frontend/src/pages/LogInPage/LogInPage.tsx | 5 ++-- frontend/src/pages/MyPage/MyPage.style.ts | 1 + frontend/src/pages/MyPage/MyPage.tsx | 8 +++--- .../src/pages/NotFoundPage/NotFoundPage.tsx | 5 ++-- .../src/pages/RedirectPage/RedirectPage.tsx | 7 +++--- .../src/pages/SignUpPage/SignUpPage.style.ts | 1 + frontend/src/pages/SignUpPage/SignUpPage.tsx | 5 ++-- .../TripCreatePage/TripCreatePage.style.ts | 1 + .../pages/TripCreatePage/TripCreatePage.tsx | 9 ++++--- .../pages/TripEditPage/TripEditPage.style.ts | 1 + .../src/pages/TripEditPage/TripEditPage.tsx | 11 +++++--- frontend/src/pages/TripPage/TripPage.tsx | 9 ++++--- .../src/pages/TripsPage/TripsPage.style.ts | 1 + frontend/src/pages/TripsPage/TripsPage.tsx | 14 ++++++----- .../src/pages/TripsPage/TripsPageSkeleton.tsx | 3 ++- frontend/src/router/AppRouter.tsx | 8 ++++-- frontend/src/store/toast.ts | 3 ++- .../stories/common/CitySearchBar.stories.tsx | 3 ++- .../src/stories/common/DayLogItem.stories.tsx | 3 ++- .../src/stories/common/DayLogList.stories.tsx | 6 +++-- .../common/TripInformation.stories.tsx | 3 ++- .../src/stories/common/TripItem.stories.tsx | 3 ++- .../stories/common/TripItemList.stories.tsx | 3 ++- .../src/stories/common/TripMap.stories.tsx | 3 ++- .../myPage/EditUserProfileForm.stories.tsx | 3 ++- .../stories/myPage/NicknameInput.stories.tsx | 4 ++- .../myPage/ProfileImageInput.stories.tsx | 3 ++- .../stories/trip/CategoryInput.stories.tsx | 4 ++- .../src/stories/trip/DateInput.stories.tsx | 4 +-- .../src/stories/trip/ExpenseInput.stories.tsx | 6 +++-- .../src/stories/trip/MemoInput.stories.tsx | 4 ++- .../src/stories/trip/PlaceInput.stories.tsx | 4 ++- .../stories/trip/StarRatingInput.stories.tsx | 4 ++- .../src/stories/trip/TitleInput.stories.tsx | 4 ++- .../trip/TripInfoEditModal.stories.tsx | 3 ++- .../stories/trip/TripItemAddModal.stories.tsx | 5 ++-- .../src/stories/trips/TripsItem.stories.tsx | 5 ++-- .../stories/trips/TripsItemList.stories.tsx | 5 ++-- frontend/src/styles/index.ts | 1 + frontend/src/types/dayLog.ts | 3 ++- frontend/src/types/expense.ts | 3 ++- frontend/src/utils/formatter.ts | 3 ++- 217 files changed, 838 insertions(+), 445 deletions(-) diff --git a/frontend/cypress/e2e/createTrip.cy.ts b/frontend/cypress/e2e/createTrip.cy.ts index 8d7990779..f555bc2a7 100644 --- a/frontend/cypress/e2e/createTrip.cy.ts +++ b/frontend/cypress/e2e/createTrip.cy.ts @@ -1,4 +1,5 @@ import { ACCESS_TOKEN_KEY } from '@constants/api'; + import { accessToken } from '@mocks/data/member'; const TEST_URL = 'http://localhost:3000'; diff --git a/frontend/cypress/e2e/login.cy.ts b/frontend/cypress/e2e/login.cy.ts index b8677da2c..dd564cbcd 100644 --- a/frontend/cypress/e2e/login.cy.ts +++ b/frontend/cypress/e2e/login.cy.ts @@ -1,7 +1,9 @@ +import type { TripsData } from '@type/trips'; + import { ACCESS_TOKEN_KEY } from '@constants/api'; import { PATH } from '@constants/path'; + import { accessToken } from '@mocks/data/member'; -import type { TripsData } from '@type/trips'; const TEST_URL = 'http://localhost:3000'; diff --git a/frontend/cypress/e2e/trip.cy.ts b/frontend/cypress/e2e/trip.cy.ts index 80370a805..1fc5c8d44 100644 --- a/frontend/cypress/e2e/trip.cy.ts +++ b/frontend/cypress/e2e/trip.cy.ts @@ -1,8 +1,10 @@ -import { ACCESS_TOKEN_KEY } from '@constants/api'; -import { accessToken } from '@mocks/data/member'; import type { CityData } from '@type/city'; import type { TripItemData } from '@type/tripItem'; +import { ACCESS_TOKEN_KEY } from '@constants/api'; + +import { accessToken } from '@mocks/data/member'; + const TEST_URL = 'http://localhost:3000'; describe('여행 수정 페이지', () => { diff --git a/frontend/cypress/e2e/trips.cy.ts b/frontend/cypress/e2e/trips.cy.ts index 506896e10..823826526 100644 --- a/frontend/cypress/e2e/trips.cy.ts +++ b/frontend/cypress/e2e/trips.cy.ts @@ -1,8 +1,10 @@ -import { ACCESS_TOKEN_KEY } from '@constants/api'; -import { accessToken } from '@mocks/data/member'; import type { CityData } from '@type/city'; import type { TripsData } from '@type/trips'; +import { ACCESS_TOKEN_KEY } from '@constants/api'; + +import { accessToken } from '@mocks/data/member'; + const TEST_URL = 'http://localhost:3000'; describe('여행 목록 페이지', () => { diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index 0e29bf69a..76831a839 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -1,11 +1,7 @@ -import { ACCESS_TOKEN_KEY } from '@constants/api'; -import { isLoggedInState } from '@store/auth'; import { useLayoutEffect } from 'react'; import { Outlet } from 'react-router-dom'; -import { useSetRecoilState } from 'recoil'; -import { useMediaQuery } from '@hooks/common/useMediaQuery'; -import { useResetError } from '@hooks/common/useResetError'; +import { useSetRecoilState } from 'recoil'; import Error from '@components/common/Error/Error'; import ErrorBoundary from '@components/common/ErrorBoundary/ErrorBoundary'; @@ -13,6 +9,13 @@ import ToastContainer from '@components/common/ToastContainer/ToastContainer'; import Footer from '@components/layout/Footer/Footer'; import Header from '@components/layout/Header/Header'; +import { useMediaQuery } from '@hooks/common/useMediaQuery'; +import { useResetError } from '@hooks/common/useResetError'; + +import { isLoggedInState } from '@store/auth'; + +import { ACCESS_TOKEN_KEY } from '@constants/api'; + const App = () => { const { handleErrorReset } = useResetError(); useMediaQuery(); diff --git a/frontend/src/api/axiosInstance.ts b/frontend/src/api/axiosInstance.ts index e0214d566..d36c3acce 100644 --- a/frontend/src/api/axiosInstance.ts +++ b/frontend/src/api/axiosInstance.ts @@ -1,8 +1,9 @@ -import { BASE_URL, NETWORK } from '@constants/api'; import axios from 'axios'; import { checkAndSetToken, handleAPIError, handleTokenError } from '@api/interceptors'; +import { BASE_URL, NETWORK } from '@constants/api'; + export const axiosInstance = axios.create({ baseURL: BASE_URL, timeout: NETWORK.TIMEOUT, diff --git a/frontend/src/api/city/getCity.ts b/frontend/src/api/city/getCity.ts index eea962970..6ee451ae1 100644 --- a/frontend/src/api/city/getCity.ts +++ b/frontend/src/api/city/getCity.ts @@ -1,7 +1,8 @@ -import { END_POINTS } from '@constants/api'; +import { axiosInstance } from '@api/axiosInstance'; + import type { CityData } from '@type/city'; -import { axiosInstance } from '@api/axiosInstance'; +import { END_POINTS } from '@constants/api'; export const getCity = async () => { const { data } = await axiosInstance.get(END_POINTS.CITY); diff --git a/frontend/src/api/dayLog/patchDayLogItemOrder.ts b/frontend/src/api/dayLog/patchDayLogItemOrder.ts index 9df58854c..becfe40cf 100644 --- a/frontend/src/api/dayLog/patchDayLogItemOrder.ts +++ b/frontend/src/api/dayLog/patchDayLogItemOrder.ts @@ -1,7 +1,7 @@ -import { END_POINTS } from '@constants/api'; - import { axiosInstance } from '@api/axiosInstance'; +import { END_POINTS } from '@constants/api'; + export interface PatchDayLogItemOrderParams { tripId: number; dayLogId: number; diff --git a/frontend/src/api/dayLog/patchDayLogTitle.ts b/frontend/src/api/dayLog/patchDayLogTitle.ts index b2116e336..fe5985921 100644 --- a/frontend/src/api/dayLog/patchDayLogTitle.ts +++ b/frontend/src/api/dayLog/patchDayLogTitle.ts @@ -1,7 +1,7 @@ -import { END_POINTS } from '@constants/api'; - import { axiosInstance } from '@api/axiosInstance'; +import { END_POINTS } from '@constants/api'; + export interface PatchDayLogTitleRequestBody { title: string; } diff --git a/frontend/src/api/expense/getExpense.ts b/frontend/src/api/expense/getExpense.ts index c14bcc81f..632dafdf3 100644 --- a/frontend/src/api/expense/getExpense.ts +++ b/frontend/src/api/expense/getExpense.ts @@ -1,7 +1,8 @@ -import { END_POINTS } from '@constants/api'; +import { axiosInstance } from '@api/axiosInstance'; + import type { ExpenseData } from '@type/expense'; -import { axiosInstance } from '@api/axiosInstance'; +import { END_POINTS } from '@constants/api'; export const getExpense = async (tripId: number) => { const { data } = await axiosInstance.get(END_POINTS.EXPENSE(tripId)); diff --git a/frontend/src/api/expense/getExpenseCategory.ts b/frontend/src/api/expense/getExpenseCategory.ts index 29169919c..598136519 100644 --- a/frontend/src/api/expense/getExpenseCategory.ts +++ b/frontend/src/api/expense/getExpenseCategory.ts @@ -1,7 +1,8 @@ -import { END_POINTS } from '@constants/api'; +import { axiosInstance } from '@api/axiosInstance'; + import type { ExpenseCategoryData } from '@type/expense'; -import { axiosInstance } from '@api/axiosInstance'; +import { END_POINTS } from '@constants/api'; export const getExpenseCategory = async () => { const { data } = await axiosInstance.get(END_POINTS.EXPENSE_CATEGORY); diff --git a/frontend/src/api/image/postImage.ts b/frontend/src/api/image/postImage.ts index c90ff237e..1c8ba204b 100644 --- a/frontend/src/api/image/postImage.ts +++ b/frontend/src/api/image/postImage.ts @@ -1,7 +1,8 @@ -import { END_POINTS } from '@constants/api'; +import { axiosInstance } from '@api/axiosInstance'; + import type { ImageData } from '@type/image'; -import { axiosInstance } from '@api/axiosInstance'; +import { END_POINTS } from '@constants/api'; interface PostImageRequestBody { images: FormData; diff --git a/frontend/src/api/interceptors.ts b/frontend/src/api/interceptors.ts index 3d310cd02..fb66e1b65 100644 --- a/frontend/src/api/interceptors.ts +++ b/frontend/src/api/interceptors.ts @@ -1,11 +1,12 @@ -import { ACCESS_TOKEN_KEY, ERROR_CODE, HTTP_STATUS_CODE } from '@constants/api'; -import { PATH } from '@constants/path'; import type { AxiosError, InternalAxiosRequestConfig } from 'axios'; import { HTTPError } from '@api/HTTPError'; import { axiosInstance } from '@api/axiosInstance'; import { postNewToken } from '@api/member/postNewToken'; +import { ACCESS_TOKEN_KEY, ERROR_CODE, HTTP_STATUS_CODE } from '@constants/api'; +import { PATH } from '@constants/path'; + export interface ErrorResponseData { statusCode?: number; message?: string; diff --git a/frontend/src/api/member/getUserInfo.ts b/frontend/src/api/member/getUserInfo.ts index 91bff9219..dfb2e86af 100644 --- a/frontend/src/api/member/getUserInfo.ts +++ b/frontend/src/api/member/getUserInfo.ts @@ -1,7 +1,8 @@ -import { END_POINTS } from '@constants/api'; +import { axiosInstance } from '@api/axiosInstance'; + import type { UserData } from '@type/member'; -import { axiosInstance } from '@api/axiosInstance'; +import { END_POINTS } from '@constants/api'; export const getUserInfo = async () => { const { data } = await axiosInstance.get(END_POINTS.MY_PAGE); diff --git a/frontend/src/api/member/postLogIn.ts b/frontend/src/api/member/postLogIn.ts index e10248a42..9b6498bb8 100644 --- a/frontend/src/api/member/postLogIn.ts +++ b/frontend/src/api/member/postLogIn.ts @@ -1,9 +1,11 @@ -import { END_POINTS } from '@constants/api'; -import type { TokenData } from '@type/member'; import type { AxiosResponse } from 'axios'; import { axiosInstance } from '@api/axiosInstance'; +import type { TokenData } from '@type/member'; + +import { END_POINTS } from '@constants/api'; + interface PostLogInRequestBody { code: string; } diff --git a/frontend/src/api/member/postLogOut.ts b/frontend/src/api/member/postLogOut.ts index 7e22a0b34..73cde3f7c 100644 --- a/frontend/src/api/member/postLogOut.ts +++ b/frontend/src/api/member/postLogOut.ts @@ -1,7 +1,8 @@ -import { END_POINTS } from '@constants/api'; +import { axiosInstance } from '@api/axiosInstance'; + import type { TokenData } from '@type/member'; -import { axiosInstance } from '@api/axiosInstance'; +import { END_POINTS } from '@constants/api'; export const postLogout = (data: TokenData) => { return axiosInstance.post(END_POINTS.LOGOUT, data); diff --git a/frontend/src/api/member/postNewToken.ts b/frontend/src/api/member/postNewToken.ts index 5b1a06b0b..49b672d97 100644 --- a/frontend/src/api/member/postNewToken.ts +++ b/frontend/src/api/member/postNewToken.ts @@ -1,7 +1,8 @@ -import { END_POINTS } from '@constants/api'; +import { axiosInstance } from '@api/axiosInstance'; + import type { TokenData } from '@type/member'; -import { axiosInstance } from '@api/axiosInstance'; +import { END_POINTS } from '@constants/api'; export const postNewToken = async () => { const { data } = await axiosInstance.post(END_POINTS.TOKEN); diff --git a/frontend/src/api/member/putUserInfo.ts b/frontend/src/api/member/putUserInfo.ts index 40d6e9a37..a0fcc466e 100644 --- a/frontend/src/api/member/putUserInfo.ts +++ b/frontend/src/api/member/putUserInfo.ts @@ -1,7 +1,8 @@ -import { END_POINTS } from '@constants/api'; +import { axiosInstance } from '@api/axiosInstance'; + import type { UserData } from '@type/member'; -import { axiosInstance } from '@api/axiosInstance'; +import { END_POINTS } from '@constants/api'; export const putUserInfo = (data: UserData) => { return axiosInstance.put(END_POINTS.MY_PAGE, { ...data }); diff --git a/frontend/src/api/trip/deleteTrip.ts b/frontend/src/api/trip/deleteTrip.ts index b065f54f4..7b9c3dc5c 100644 --- a/frontend/src/api/trip/deleteTrip.ts +++ b/frontend/src/api/trip/deleteTrip.ts @@ -1,7 +1,7 @@ -import { END_POINTS } from '@constants/api'; - import { axiosInstance } from '@api/axiosInstance'; +import { END_POINTS } from '@constants/api'; + interface DeleteTripParams { tripId: number; } diff --git a/frontend/src/api/trip/getTrip.ts b/frontend/src/api/trip/getTrip.ts index d9c75e0dc..35270be3b 100644 --- a/frontend/src/api/trip/getTrip.ts +++ b/frontend/src/api/trip/getTrip.ts @@ -1,7 +1,8 @@ -import { END_POINTS } from '@constants/api'; +import { axiosInstance } from '@api/axiosInstance'; + import type { TripData } from '@type/trip'; -import { axiosInstance } from '@api/axiosInstance'; +import { END_POINTS } from '@constants/api'; export const getTrip = async (tripId: number) => { const { data } = await axiosInstance.get(END_POINTS.TRIP(tripId)); diff --git a/frontend/src/api/trip/postTrip.ts b/frontend/src/api/trip/postTrip.ts index 750a6793e..9e45edd64 100644 --- a/frontend/src/api/trip/postTrip.ts +++ b/frontend/src/api/trip/postTrip.ts @@ -1,7 +1,8 @@ -import { END_POINTS } from '@constants/api'; +import { axiosInstance } from '@api/axiosInstance'; + import type { NewTripData } from '@type/trips'; -import { axiosInstance } from '@api/axiosInstance'; +import { END_POINTS } from '@constants/api'; export const postTrip = async (newTripData: NewTripData) => { const response = await axiosInstance.post(END_POINTS.TRIPS, newTripData); diff --git a/frontend/src/api/trip/putTrip.ts b/frontend/src/api/trip/putTrip.ts index 5e719e3c1..b9b642a6d 100644 --- a/frontend/src/api/trip/putTrip.ts +++ b/frontend/src/api/trip/putTrip.ts @@ -1,7 +1,8 @@ -import { END_POINTS } from '@constants/api'; +import { axiosInstance } from '@api/axiosInstance'; + import type { TripFormData } from '@type/trip'; -import { axiosInstance } from '@api/axiosInstance'; +import { END_POINTS } from '@constants/api'; export interface PutTripParams extends TripFormData { tripId: number; diff --git a/frontend/src/api/tripItem/deleteTripItem.ts b/frontend/src/api/tripItem/deleteTripItem.ts index c6670e7ad..9f2fc5b14 100644 --- a/frontend/src/api/tripItem/deleteTripItem.ts +++ b/frontend/src/api/tripItem/deleteTripItem.ts @@ -1,7 +1,7 @@ -import { END_POINTS } from '@constants/api'; - import { axiosInstance } from '@api/axiosInstance'; +import { END_POINTS } from '@constants/api'; + interface DeleteTripItemParams { tripId: number; itemId: number; diff --git a/frontend/src/api/tripItem/postTripItem.ts b/frontend/src/api/tripItem/postTripItem.ts index ba5519fdb..9172b16e4 100644 --- a/frontend/src/api/tripItem/postTripItem.ts +++ b/frontend/src/api/tripItem/postTripItem.ts @@ -1,7 +1,8 @@ -import { END_POINTS } from '@constants/api'; +import { axiosInstance } from '@api/axiosInstance'; + import type { TripItemFormData } from '@type/tripItem'; -import { axiosInstance } from '@api/axiosInstance'; +import { END_POINTS } from '@constants/api'; export interface PostTripItemParams extends TripItemFormData { tripId: number; diff --git a/frontend/src/api/tripItem/putTripItem.ts b/frontend/src/api/tripItem/putTripItem.ts index d13cc6621..5e995a2c3 100644 --- a/frontend/src/api/tripItem/putTripItem.ts +++ b/frontend/src/api/tripItem/putTripItem.ts @@ -1,7 +1,8 @@ -import { END_POINTS } from '@constants/api'; +import { axiosInstance } from '@api/axiosInstance'; + import type { TripItemFormData } from '@type/tripItem'; -import { axiosInstance } from '@api/axiosInstance'; +import { END_POINTS } from '@constants/api'; interface PutTripItemParams extends TripItemFormData { tripId: number; diff --git a/frontend/src/api/trips/getTrips.ts b/frontend/src/api/trips/getTrips.ts index 9daac45a2..1b6be605c 100644 --- a/frontend/src/api/trips/getTrips.ts +++ b/frontend/src/api/trips/getTrips.ts @@ -1,7 +1,8 @@ -import { END_POINTS } from '@constants/api'; +import { axiosInstance } from '@api/axiosInstance'; + import type { TripsData } from '@type/trips'; -import { axiosInstance } from '@api/axiosInstance'; +import { END_POINTS } from '@constants/api'; export const getTrips = async () => { const { data } = await axiosInstance.get(END_POINTS.TRIPS); diff --git a/frontend/src/components/common/CitySearchBar/CitySearchBar.style.ts b/frontend/src/components/common/CitySearchBar/CitySearchBar.style.ts index 086fb54c5..f1b05726b 100644 --- a/frontend/src/components/common/CitySearchBar/CitySearchBar.style.ts +++ b/frontend/src/components/common/CitySearchBar/CitySearchBar.style.ts @@ -1,4 +1,5 @@ import { css } from '@emotion/react'; + import { Theme } from 'hang-log-design-system'; export const containerStyling = css({ diff --git a/frontend/src/components/common/CitySearchBar/CitySearchBar.tsx b/frontend/src/components/common/CitySearchBar/CitySearchBar.tsx index a05d074d8..f3fae717f 100644 --- a/frontend/src/components/common/CitySearchBar/CitySearchBar.tsx +++ b/frontend/src/components/common/CitySearchBar/CitySearchBar.tsx @@ -1,13 +1,7 @@ -import CloseIcon from '@assets/svg/close-icon.svg'; -import SearchPinIcon from '@assets/svg/search-pin-icon.svg'; -import type { CityData } from '@type/city'; -import { Badge, Box, Input, Label, Menu, useOverlay } from 'hang-log-design-system'; import type { FormEvent, KeyboardEvent } from 'react'; import { useEffect, useRef, useState } from 'react'; -import { useCityQuery } from '@hooks/api/useCityQuery'; -import { useCityTags } from '@hooks/common/useCityTags'; -import { useDebounce } from '@hooks/common/useDebounce'; +import { Badge, Box, Input, Label, Menu, useOverlay } from 'hang-log-design-system'; import { badgeStyling, @@ -20,6 +14,15 @@ import { } from '@components/common/CitySearchBar/CitySearchBar.style'; import CitySuggestion from '@components/common/CitySuggestion/CitySuggestion'; +import { useCityQuery } from '@hooks/api/useCityQuery'; +import { useCityTags } from '@hooks/common/useCityTags'; +import { useDebounce } from '@hooks/common/useDebounce'; + +import type { CityData } from '@type/city'; + +import CloseIcon from '@assets/svg/close-icon.svg'; +import SearchPinIcon from '@assets/svg/search-pin-icon.svg'; + interface CitySearchBarProps { initialCities?: CityData[]; updateCityInfo: (cities: CityData[]) => void; diff --git a/frontend/src/components/common/CitySuggestion/CitySuggestion.style.ts b/frontend/src/components/common/CitySuggestion/CitySuggestion.style.ts index ed4bfb97d..5df4a60ab 100644 --- a/frontend/src/components/common/CitySuggestion/CitySuggestion.style.ts +++ b/frontend/src/components/common/CitySuggestion/CitySuggestion.style.ts @@ -1,4 +1,5 @@ import { css } from '@emotion/react'; + import { Theme } from 'hang-log-design-system'; export const containerStyling = css({ diff --git a/frontend/src/components/common/CitySuggestion/CitySuggestion.tsx b/frontend/src/components/common/CitySuggestion/CitySuggestion.tsx index c8412606e..c5d2cd262 100644 --- a/frontend/src/components/common/CitySuggestion/CitySuggestion.tsx +++ b/frontend/src/components/common/CitySuggestion/CitySuggestion.tsx @@ -1,13 +1,10 @@ -import type { CityData } from '@type/city'; +import { useEffect, useRef } from 'react'; + import { MenuList as SuggestionList, MenuItem as SuggestionsItem, Text, } from 'hang-log-design-system'; -import { useEffect, useRef } from 'react'; - -import { useAutoScroll } from '@hooks/common/useAutoScroll'; -import { useCitySuggestion } from '@hooks/common/useCitySuggestion'; import { containerStyling, @@ -15,6 +12,11 @@ import { getItemStyling, } from '@components/common/CitySuggestion/CitySuggestion.style'; +import { useAutoScroll } from '@hooks/common/useAutoScroll'; +import { useCitySuggestion } from '@hooks/common/useCitySuggestion'; + +import type { CityData } from '@type/city'; + interface SuggestionProps { queryWord: string; onItemSelect: (city: CityData) => void; diff --git a/frontend/src/components/common/DateInput/DateInput.style.ts b/frontend/src/components/common/DateInput/DateInput.style.ts index a3bd8442e..858d074f0 100644 --- a/frontend/src/components/common/DateInput/DateInput.style.ts +++ b/frontend/src/components/common/DateInput/DateInput.style.ts @@ -1,4 +1,5 @@ import { css } from '@emotion/react'; + import { Theme } from 'hang-log-design-system'; export const containerStyling = css({ diff --git a/frontend/src/components/common/DateInput/DateInput.tsx b/frontend/src/components/common/DateInput/DateInput.tsx index 060786158..211cd2f3a 100644 --- a/frontend/src/components/common/DateInput/DateInput.tsx +++ b/frontend/src/components/common/DateInput/DateInput.tsx @@ -1,10 +1,7 @@ -import CalendarIcon from '@assets/svg/calendar-icon.svg'; -import type { DateRangeData } from '@type/trips'; -import { Box, DateRangePicker, Flex, Input, Label, Menu, useOverlay } from 'hang-log-design-system'; import { useState } from 'react'; import type { KeyboardEvent } from 'react'; -import { formatDateRange } from '@utils/formatter'; +import { Box, DateRangePicker, Flex, Input, Label, Menu, useOverlay } from 'hang-log-design-system'; import { calendarStyling, @@ -12,6 +9,12 @@ import { getInputStyling, } from '@components/common/DateInput/DateInput.style'; +import { formatDateRange } from '@utils/formatter'; + +import type { DateRangeData } from '@type/trips'; + +import CalendarIcon from '@assets/svg/calendar-icon.svg'; + interface DateInputProps { initialDateRange?: DateRangeData; updateDateInfo: (dateRange: DateRangeData) => void; diff --git a/frontend/src/components/common/DayLogItem/DayLogItem.style.ts b/frontend/src/components/common/DayLogItem/DayLogItem.style.ts index d724601fb..21e5058ec 100644 --- a/frontend/src/components/common/DayLogItem/DayLogItem.style.ts +++ b/frontend/src/components/common/DayLogItem/DayLogItem.style.ts @@ -1,4 +1,5 @@ import { css } from '@emotion/react'; + import { Theme } from 'hang-log-design-system'; export const containerStyling = css({ diff --git a/frontend/src/components/common/DayLogItem/DayLogItem.tsx b/frontend/src/components/common/DayLogItem/DayLogItem.tsx index bd439ce5e..82cd7de7d 100644 --- a/frontend/src/components/common/DayLogItem/DayLogItem.tsx +++ b/frontend/src/components/common/DayLogItem/DayLogItem.tsx @@ -1,12 +1,15 @@ -import { DAY_LOG_ITEM_FILTERS } from '@constants/trip'; -import type { DayLogData } from '@type/dayLog'; -import { Box, Flex, Heading, Toggle, ToggleGroup, useSelect } from 'hang-log-design-system'; import { useEffect } from 'react'; +import { Box, Flex, Heading, Toggle, ToggleGroup, useSelect } from 'hang-log-design-system'; + import { containerStyling, headerStyling } from '@components/common/DayLogItem/DayLogItem.style'; import TitleInput from '@components/common/DayLogItem/TitleInput/TitleInput'; import TripItemList from '@components/common/TripItemList/TripItemList'; +import type { DayLogData } from '@type/dayLog'; + +import { DAY_LOG_ITEM_FILTERS } from '@constants/trip'; + interface DayLogItemProps extends DayLogData { tripId: number; isEditable?: boolean; diff --git a/frontend/src/components/common/DayLogItem/DayLogItemSkeleton.tsx b/frontend/src/components/common/DayLogItem/DayLogItemSkeleton.tsx index c1c5566ef..5d6adbe9b 100644 --- a/frontend/src/components/common/DayLogItem/DayLogItemSkeleton.tsx +++ b/frontend/src/components/common/DayLogItem/DayLogItemSkeleton.tsx @@ -1,10 +1,12 @@ -import { mediaQueryMobileState } from '@store/mediaQuery'; -import { Box, Flex, Skeleton } from 'hang-log-design-system'; import { useRecoilValue } from 'recoil'; +import { Box, Flex, Skeleton } from 'hang-log-design-system'; + import { containerStyling, headerStyling } from '@components/common/DayLogItem/DayLogItem.style'; import TripItemListSkeleton from '@components/common/TripItemList/TripItemListSkeleton'; +import { mediaQueryMobileState } from '@store/mediaQuery'; + const DayLogItemSkeleton = () => { const isMobile = useRecoilValue(mediaQueryMobileState); diff --git a/frontend/src/components/common/DayLogItem/TitleInput/TitleInput.style.ts b/frontend/src/components/common/DayLogItem/TitleInput/TitleInput.style.ts index 3d0a37e1b..dce308a54 100644 --- a/frontend/src/components/common/DayLogItem/TitleInput/TitleInput.style.ts +++ b/frontend/src/components/common/DayLogItem/TitleInput/TitleInput.style.ts @@ -1,4 +1,5 @@ import { css } from '@emotion/react'; + import { Theme } from 'hang-log-design-system'; export const inputStyling = css({ diff --git a/frontend/src/components/common/DayLogItem/TitleInput/TitleInput.tsx b/frontend/src/components/common/DayLogItem/TitleInput/TitleInput.tsx index 4dfbaff7d..a70c2ca43 100644 --- a/frontend/src/components/common/DayLogItem/TitleInput/TitleInput.tsx +++ b/frontend/src/components/common/DayLogItem/TitleInput/TitleInput.tsx @@ -1,10 +1,11 @@ -import { DAYLOG_TITLE_MAX_LENGTH } from '@constants/ui'; import type { ChangeEvent } from 'react'; import { useEffect, useState } from 'react'; +import { inputStyling } from '@components/common/DayLogItem/TitleInput/TitleInput.style'; + import { useDayLogTitleMutation } from '@hooks/api/useDayLogTitleMutation'; -import { inputStyling } from '@components/common/DayLogItem/TitleInput/TitleInput.style'; +import { DAYLOG_TITLE_MAX_LENGTH } from '@constants/ui'; interface TitleInputProps { tripId: number; diff --git a/frontend/src/components/common/DayLogList/DayLogList.style.ts b/frontend/src/components/common/DayLogList/DayLogList.style.ts index 0dba5720e..0e842c4d7 100644 --- a/frontend/src/components/common/DayLogList/DayLogList.style.ts +++ b/frontend/src/components/common/DayLogList/DayLogList.style.ts @@ -1,4 +1,5 @@ import { css } from '@emotion/react'; + import { Theme } from 'hang-log-design-system'; export const containerStyling = css({ diff --git a/frontend/src/components/common/DayLogList/DayLogList.tsx b/frontend/src/components/common/DayLogList/DayLogList.tsx index 80a96a9bd..69750e509 100644 --- a/frontend/src/components/common/DayLogList/DayLogList.tsx +++ b/frontend/src/components/common/DayLogList/DayLogList.tsx @@ -1,12 +1,13 @@ -import type { DayLogData } from '@type/dayLog'; import { Tab, Tabs } from 'hang-log-design-system'; -import { formatMonthDate } from '@utils/formatter'; +import DayLogItem from '@components/common/DayLogItem/DayLogItem'; +import { containerStyling } from '@components/common/DayLogList/DayLogList.style'; import { useTripDates } from '@hooks/trip/useTripDates'; -import DayLogItem from '@components/common/DayLogItem/DayLogItem'; -import { containerStyling } from '@components/common/DayLogList/DayLogList.style'; +import { formatMonthDate } from '@utils/formatter'; + +import type { DayLogData } from '@type/dayLog'; interface DayLogListProps { tripId: number; diff --git a/frontend/src/components/common/DonutChart/DonutChart.tsx b/frontend/src/components/common/DonutChart/DonutChart.tsx index f5146e070..7965c1f18 100644 --- a/frontend/src/components/common/DonutChart/DonutChart.tsx +++ b/frontend/src/components/common/DonutChart/DonutChart.tsx @@ -2,8 +2,6 @@ import { Theme } from 'hang-log-design-system'; import { calculateDonutChartSegmentData, calculateTotalPercentage } from '@utils/chart'; -// import WholeDonut from '@components/common/DonutChart/WholeDonut/WholeDonut'; - export interface Segment { id: number; percentage: number; diff --git a/frontend/src/components/common/Error/Error.style.ts b/frontend/src/components/common/Error/Error.style.ts index 1b5d0e399..987afc4fe 100644 --- a/frontend/src/components/common/Error/Error.style.ts +++ b/frontend/src/components/common/Error/Error.style.ts @@ -1,4 +1,5 @@ import { css } from '@emotion/react'; + import { Theme } from 'hang-log-design-system'; export const containerStyling = css({ diff --git a/frontend/src/components/common/Error/Error.tsx b/frontend/src/components/common/Error/Error.tsx index bc0b2888e..80cbe5a07 100644 --- a/frontend/src/components/common/Error/Error.tsx +++ b/frontend/src/components/common/Error/Error.tsx @@ -1,12 +1,6 @@ -import ErrorImage from '@assets/svg/error-image.svg'; -import { ERROR_CODE, HTTP_ERROR_MESSAGE, HTTP_STATUS_CODE } from '@constants/api'; -import { mediaQueryMobileState } from '@store/mediaQuery'; -import { Box, Button, Flex, Heading, Text } from 'hang-log-design-system'; import { useRecoilValue } from 'recoil'; -import { hasKeyInObject } from '@utils/typeGuard'; - -import { useTokenError } from '@hooks/member/useTokenError'; +import { Box, Button, Flex, Heading, Text } from 'hang-log-design-system'; import { buttonStyling, @@ -15,6 +9,16 @@ import { textStyling, } from '@components/common/Error/Error.style'; +import { useTokenError } from '@hooks/member/useTokenError'; + +import { mediaQueryMobileState } from '@store/mediaQuery'; + +import { hasKeyInObject } from '@utils/typeGuard'; + +import { ERROR_CODE, HTTP_ERROR_MESSAGE, HTTP_STATUS_CODE } from '@constants/api'; + +import ErrorImage from '@assets/svg/error-image.svg'; + export interface ErrorProps { statusCode?: number; errorCode?: number; diff --git a/frontend/src/components/common/ErrorBoundary/ErrorBoundary.tsx b/frontend/src/components/common/ErrorBoundary/ErrorBoundary.tsx index 3e7a2a59e..478693848 100644 --- a/frontend/src/components/common/ErrorBoundary/ErrorBoundary.tsx +++ b/frontend/src/components/common/ErrorBoundary/ErrorBoundary.tsx @@ -1,10 +1,10 @@ import type { ComponentType, PropsWithChildren } from 'react'; import { Component } from 'react'; -import { HTTPError } from '@api/HTTPError'; - import type { ErrorProps } from '@components/common/Error/Error'; +import { HTTPError } from '@api/HTTPError'; + interface ErrorBoundaryProps { Fallback: ComponentType; onReset?: (error: Error | HTTPError) => void; diff --git a/frontend/src/components/common/GoogleButton/GoogleButton.style.ts b/frontend/src/components/common/GoogleButton/GoogleButton.style.ts index 8947fde75..2e70b2534 100644 --- a/frontend/src/components/common/GoogleButton/GoogleButton.style.ts +++ b/frontend/src/components/common/GoogleButton/GoogleButton.style.ts @@ -1,4 +1,5 @@ import { css } from '@emotion/react'; + import { Theme } from 'hang-log-design-system'; export const buttonStyling = css({ diff --git a/frontend/src/components/common/GoogleButton/GoogleButton.tsx b/frontend/src/components/common/GoogleButton/GoogleButton.tsx index 463553363..50836e02d 100644 --- a/frontend/src/components/common/GoogleButton/GoogleButton.tsx +++ b/frontend/src/components/common/GoogleButton/GoogleButton.tsx @@ -1,9 +1,10 @@ -import { GOOGLE_AUTH_API_URL } from '@constants/api'; import type { ComponentPropsWithoutRef, ReactNode } from 'react'; import { Link } from 'react-router-dom'; import { buttonStyling } from '@components/common/GoogleButton/GoogleButton.style'; +import { GOOGLE_AUTH_API_URL } from '@constants/api'; + interface GoogleButtonProps extends ComponentPropsWithoutRef<'a'> { children: ReactNode; } diff --git a/frontend/src/components/common/GoogleMapWrapper/GoogleMapWrapper.tsx b/frontend/src/components/common/GoogleMapWrapper/GoogleMapWrapper.tsx index 11efea54d..0c39cbf82 100644 --- a/frontend/src/components/common/GoogleMapWrapper/GoogleMapWrapper.tsx +++ b/frontend/src/components/common/GoogleMapWrapper/GoogleMapWrapper.tsx @@ -1,7 +1,9 @@ import { Status, Wrapper } from '@googlemaps/react-wrapper'; -import { Spinner } from 'hang-log-design-system'; + import type { PropsWithChildren } from 'react'; +import { Spinner } from 'hang-log-design-system'; + type GoogleMapWrapperProps = PropsWithChildren; const render = (status: Status) => { diff --git a/frontend/src/components/common/KakaoButton/KakaoButton.style.ts b/frontend/src/components/common/KakaoButton/KakaoButton.style.ts index b5364ac38..973478826 100644 --- a/frontend/src/components/common/KakaoButton/KakaoButton.style.ts +++ b/frontend/src/components/common/KakaoButton/KakaoButton.style.ts @@ -1,4 +1,5 @@ import { css } from '@emotion/react'; + import { Theme } from 'hang-log-design-system'; export const buttonStyling = css({ diff --git a/frontend/src/components/common/KakaoButton/KakaoButton.tsx b/frontend/src/components/common/KakaoButton/KakaoButton.tsx index 856bd4a60..d7939321c 100644 --- a/frontend/src/components/common/KakaoButton/KakaoButton.tsx +++ b/frontend/src/components/common/KakaoButton/KakaoButton.tsx @@ -1,9 +1,10 @@ -import { KAKAO_AUTH_API_URL } from '@constants/api'; import type { ComponentPropsWithoutRef, ReactNode } from 'react'; import { Link } from 'react-router-dom'; import { buttonStyling } from '@components/common/KakaoButton/KakaoButton.style'; +import { KAKAO_AUTH_API_URL } from '@constants/api'; + interface KakaoButtonProps extends ComponentPropsWithoutRef<'a'> { children: ReactNode; } diff --git a/frontend/src/components/common/MapDashedLine/MapDashedLine.tsx b/frontend/src/components/common/MapDashedLine/MapDashedLine.tsx index 608a11c86..a59d72db2 100644 --- a/frontend/src/components/common/MapDashedLine/MapDashedLine.tsx +++ b/frontend/src/components/common/MapDashedLine/MapDashedLine.tsx @@ -1,6 +1,7 @@ -import { Theme } from 'hang-log-design-system'; import { useEffect } from 'react'; +import { Theme } from 'hang-log-design-system'; + interface MapPolylineProps { coordinates: { lat: number; lng: number }[]; map: google.maps.Map; diff --git a/frontend/src/components/common/StarRating/StarRating.tsx b/frontend/src/components/common/StarRating/StarRating.tsx index 499c5b033..f4577b197 100644 --- a/frontend/src/components/common/StarRating/StarRating.tsx +++ b/frontend/src/components/common/StarRating/StarRating.tsx @@ -1,10 +1,12 @@ -import { STAR_RATING_LENGTH } from '@constants/ui'; -import { Flex } from 'hang-log-design-system'; import type { ComponentPropsWithoutRef } from 'react'; +import { Flex } from 'hang-log-design-system'; + import Star from '@components/common/StarRating/Star/Star'; import { containerStyling } from '@components/common/StarRating/StarRating.style'; +import { STAR_RATING_LENGTH } from '@constants/ui'; + interface StarRatingProps extends ComponentPropsWithoutRef<'div'> { rate: 0 | 0.5 | 1 | 1.5 | 2 | 2.5 | 3 | 3.5 | 4 | 4.5 | 5; } diff --git a/frontend/src/components/common/ToastContainer/ToastContainer.tsx b/frontend/src/components/common/ToastContainer/ToastContainer.tsx index 3e153f6da..8be6393e5 100644 --- a/frontend/src/components/common/ToastContainer/ToastContainer.tsx +++ b/frontend/src/components/common/ToastContainer/ToastContainer.tsx @@ -1,8 +1,11 @@ -import { toastListState } from '@store/toast'; -import { Toast } from 'hang-log-design-system'; import { useCallback } from 'react'; + import { useRecoilState } from 'recoil'; +import { Toast } from 'hang-log-design-system'; + +import { toastListState } from '@store/toast'; + const ToastContainer = () => { const [toastList, setToastList] = useRecoilState(toastListState); diff --git a/frontend/src/components/common/TripInformation/TripButtons/TripButtons.style.ts b/frontend/src/components/common/TripInformation/TripButtons/TripButtons.style.ts index 69ae19357..ca334c3ee 100644 --- a/frontend/src/components/common/TripInformation/TripButtons/TripButtons.style.ts +++ b/frontend/src/components/common/TripInformation/TripButtons/TripButtons.style.ts @@ -1,4 +1,5 @@ import { css } from '@emotion/react'; + import { Theme } from 'hang-log-design-system'; export const iconButtonStyling = css({ diff --git a/frontend/src/components/common/TripInformation/TripButtons/TripButtons.tsx b/frontend/src/components/common/TripInformation/TripButtons/TripButtons.tsx index ea79bb103..9fb2de774 100644 --- a/frontend/src/components/common/TripInformation/TripButtons/TripButtons.tsx +++ b/frontend/src/components/common/TripInformation/TripButtons/TripButtons.tsx @@ -1,10 +1,6 @@ -import MoreIcon from '@assets/svg/more-icon.svg'; -import ShareIcon from '@assets/svg/share-icon.svg'; -import { PATH } from '@constants/path'; -import { Button, Menu, MenuItem, MenuList, useOverlay } from 'hang-log-design-system'; import { useNavigate } from 'react-router-dom'; -import { useDeleteTripMutation } from '@hooks/api/useDeleteTripMutation'; +import { Button, Menu, MenuItem, MenuList, useOverlay } from 'hang-log-design-system'; import { iconButtonStyling, @@ -13,6 +9,13 @@ import { moreMenuStyling, } from '@components/common/TripInformation/TripButtons/TripButtons.style'; +import { useDeleteTripMutation } from '@hooks/api/useDeleteTripMutation'; + +import { PATH } from '@constants/path'; + +import MoreIcon from '@assets/svg/more-icon.svg'; +import ShareIcon from '@assets/svg/share-icon.svg'; + interface TripButtonsProps { tripId: number; } diff --git a/frontend/src/components/common/TripInformation/TripEditButtons/TripEditButtons.style.ts b/frontend/src/components/common/TripInformation/TripEditButtons/TripEditButtons.style.ts index afd41e11a..ea41cb3f3 100644 --- a/frontend/src/components/common/TripInformation/TripEditButtons/TripEditButtons.style.ts +++ b/frontend/src/components/common/TripInformation/TripEditButtons/TripEditButtons.style.ts @@ -1,4 +1,5 @@ import { css } from '@emotion/react'; + import { Theme } from 'hang-log-design-system'; export const editButtonStyling = css({ diff --git a/frontend/src/components/common/TripInformation/TripEditButtons/TripEditButtons.tsx b/frontend/src/components/common/TripInformation/TripEditButtons/TripEditButtons.tsx index f7e8917ec..ec88c2651 100644 --- a/frontend/src/components/common/TripInformation/TripEditButtons/TripEditButtons.tsx +++ b/frontend/src/components/common/TripInformation/TripEditButtons/TripEditButtons.tsx @@ -1,6 +1,7 @@ -import { Button } from 'hang-log-design-system'; import { useNavigate } from 'react-router-dom'; +import { Button } from 'hang-log-design-system'; + import { editButtonStyling } from '@components/common/TripInformation/TripEditButtons/TripEditButtons.style'; interface TripEditButtonsProps { diff --git a/frontend/src/components/common/TripInformation/TripInformation.style.ts b/frontend/src/components/common/TripInformation/TripInformation.style.ts index b962a87ea..3ce942ee7 100644 --- a/frontend/src/components/common/TripInformation/TripInformation.style.ts +++ b/frontend/src/components/common/TripInformation/TripInformation.style.ts @@ -1,4 +1,5 @@ import { css } from '@emotion/react'; + import { Theme } from 'hang-log-design-system'; export const sectionStyling = css({ diff --git a/frontend/src/components/common/TripInformation/TripInformation.tsx b/frontend/src/components/common/TripInformation/TripInformation.tsx index 92134c67f..7b6b1e030 100644 --- a/frontend/src/components/common/TripInformation/TripInformation.tsx +++ b/frontend/src/components/common/TripInformation/TripInformation.tsx @@ -1,11 +1,8 @@ -import DefaultThumbnail from '@assets/png/trip-information_default-thumbnail.png'; -import { mediaQueryMobileState } from '@store/mediaQuery'; -import type { TripData } from '@type/trip'; -import { Badge, Box, Heading, Text, useOverlay } from 'hang-log-design-system'; import { memo } from 'react'; + import { useRecoilValue } from 'recoil'; -import { formatDate } from '@utils/formatter'; +import { Badge, Box, Heading, Text, useOverlay } from 'hang-log-design-system'; import TripButtons from '@components/common/TripInformation/TripButtons/TripButtons'; import TripEditButtons from '@components/common/TripInformation/TripEditButtons/TripEditButtons'; @@ -20,6 +17,14 @@ import { } from '@components/common/TripInformation/TripInformation.style'; import TripInfoEditModal from '@components/trip/TripInfoEditModal/TripInfoEditModal'; +import { mediaQueryMobileState } from '@store/mediaQuery'; + +import { formatDate } from '@utils/formatter'; + +import type { TripData } from '@type/trip'; + +import DefaultThumbnail from '@assets/png/trip-information_default-thumbnail.png'; + interface TripInformationProps extends Omit { isEditable?: boolean; } diff --git a/frontend/src/components/common/TripItem/EditMenu/EditMenu.style.ts b/frontend/src/components/common/TripItem/EditMenu/EditMenu.style.ts index b73423a4a..f8e09ea0e 100644 --- a/frontend/src/components/common/TripItem/EditMenu/EditMenu.style.ts +++ b/frontend/src/components/common/TripItem/EditMenu/EditMenu.style.ts @@ -1,4 +1,5 @@ import { css } from '@emotion/react'; + import { Theme } from 'hang-log-design-system'; export const moreButtonStyling = css({ diff --git a/frontend/src/components/common/TripItem/EditMenu/EditMenu.tsx b/frontend/src/components/common/TripItem/EditMenu/EditMenu.tsx index 356e4bfd8..41d9046cf 100644 --- a/frontend/src/components/common/TripItem/EditMenu/EditMenu.tsx +++ b/frontend/src/components/common/TripItem/EditMenu/EditMenu.tsx @@ -1,9 +1,5 @@ -import MoreIcon from '@assets/svg/more-icon.svg'; -import type { TripItemData } from '@type/tripItem'; import { Menu, MenuItem, MenuList, useOverlay } from 'hang-log-design-system'; -import { useDeleteTripItemMutation } from '@hooks/api/useDeleteTripItemMutation'; - import { getMoreMenuStyling, moreButtonStyling, @@ -11,6 +7,12 @@ import { } from '@components/common/TripItem/EditMenu/EditMenu.style'; import TripItemAddModal from '@components/trip/TripItemAddModal/TripItemAddModal'; +import { useDeleteTripItemMutation } from '@hooks/api/useDeleteTripItemMutation'; + +import type { TripItemData } from '@type/tripItem'; + +import MoreIcon from '@assets/svg/more-icon.svg'; + interface EditMenuProps extends TripItemData { tripId: number; dayLogId: number; diff --git a/frontend/src/components/common/TripItem/TripItem.style.ts b/frontend/src/components/common/TripItem/TripItem.style.ts index 02a6d62ed..3eb331d9c 100644 --- a/frontend/src/components/common/TripItem/TripItem.style.ts +++ b/frontend/src/components/common/TripItem/TripItem.style.ts @@ -1,4 +1,5 @@ import { css } from '@emotion/react'; + import { Theme } from 'hang-log-design-system'; export const getContainerStyling = ({ diff --git a/frontend/src/components/common/TripItem/TripItem.tsx b/frontend/src/components/common/TripItem/TripItem.tsx index 64d219ebd..857172344 100644 --- a/frontend/src/components/common/TripItem/TripItem.tsx +++ b/frontend/src/components/common/TripItem/TripItem.tsx @@ -1,14 +1,9 @@ -import { CURRENCY_ICON } from '@constants/trip'; -import { mediaQueryMobileState, viewportWidthState } from '@store/mediaQuery'; -import type { TripItemData } from '@type/tripItem'; -import { Box, Heading, ImageCarousel, Text } from 'hang-log-design-system'; import type { ForwardedRef } from 'react'; import { useEffect, useMemo, useRef } from 'react'; -import { useRecoilValue } from 'recoil'; -import { formatNumberToMoney } from '@utils/formatter'; +import { useRecoilValue } from 'recoil'; -import { useDraggedItem } from '@hooks/common/useDraggedItem'; +import { Box, Heading, ImageCarousel, Text } from 'hang-log-design-system'; import StarRating from '@components/common/StarRating/StarRating'; import EditMenu from '@components/common/TripItem/EditMenu/EditMenu'; @@ -22,6 +17,16 @@ import { subInformationStyling, } from '@components/common/TripItem/TripItem.style'; +import { useDraggedItem } from '@hooks/common/useDraggedItem'; + +import { mediaQueryMobileState, viewportWidthState } from '@store/mediaQuery'; + +import { formatNumberToMoney } from '@utils/formatter'; + +import type { TripItemData } from '@type/tripItem'; + +import { CURRENCY_ICON } from '@constants/trip'; + interface TripListItemProps extends TripItemData { tripId: number; dayLogId: number; diff --git a/frontend/src/components/common/TripItem/TripItemSkeleton.tsx b/frontend/src/components/common/TripItem/TripItemSkeleton.tsx index 9be5bcdb9..96574b490 100644 --- a/frontend/src/components/common/TripItem/TripItemSkeleton.tsx +++ b/frontend/src/components/common/TripItem/TripItemSkeleton.tsx @@ -1,14 +1,17 @@ -import { mediaQueryMobileState, viewportWidthState } from '@store/mediaQuery'; -import { Box, Skeleton } from 'hang-log-design-system'; import { useMemo } from 'react'; + import { useRecoilValue } from 'recoil'; +import { Box, Skeleton } from 'hang-log-design-system'; + import { contentContainerStyling, getContainerStyling, informationContainerStyling, } from '@components/common/TripItem/TripItem.style'; +import { mediaQueryMobileState, viewportWidthState } from '@store/mediaQuery'; + const TripItemSkeleton = () => { const isMobile = useRecoilValue(mediaQueryMobileState); const viewportWidth = useRecoilValue(viewportWidthState); diff --git a/frontend/src/components/common/TripItemList/TripItemList.style.ts b/frontend/src/components/common/TripItemList/TripItemList.style.ts index 5390d94b1..c06725ae0 100644 --- a/frontend/src/components/common/TripItemList/TripItemList.style.ts +++ b/frontend/src/components/common/TripItemList/TripItemList.style.ts @@ -1,4 +1,5 @@ import { css } from '@emotion/react'; + import { Theme } from 'hang-log-design-system'; export const containerStyling = css({ diff --git a/frontend/src/components/common/TripItemList/TripItemList.tsx b/frontend/src/components/common/TripItemList/TripItemList.tsx index ec01dd55d..7c1bb0fc5 100644 --- a/frontend/src/components/common/TripItemList/TripItemList.tsx +++ b/frontend/src/components/common/TripItemList/TripItemList.tsx @@ -1,17 +1,9 @@ -import { PATH } from '@constants/path'; -import { clickedMarkerIdState } from '@store/scrollFocus'; -import type { TripItemData } from '@type/tripItem'; -import { Button, Divider, Heading, Text } from 'hang-log-design-system'; import { Fragment, useEffect, useRef } from 'react'; import { useNavigate } from 'react-router-dom'; -import { useRecoilValue } from 'recoil'; -import { sortByOrdinal } from '@utils/sort'; +import { useRecoilValue } from 'recoil'; -import { useDayLogOrderMutation } from '@hooks/api/useDayLogOrderMutation'; -import { useAutoScroll } from '@hooks/common/useAutoScroll'; -import { useDragAndDrop } from '@hooks/common/useDragAndDrop'; -import { useScrollFocus } from '@hooks/common/useScrollFocus'; +import { Button, Divider, Heading, Text } from 'hang-log-design-system'; import TripItem from '@components/common/TripItem/TripItem'; import { @@ -20,6 +12,19 @@ import { emptyTextStyling, } from '@components/common/TripItemList/TripItemList.style'; +import { useDayLogOrderMutation } from '@hooks/api/useDayLogOrderMutation'; +import { useAutoScroll } from '@hooks/common/useAutoScroll'; +import { useDragAndDrop } from '@hooks/common/useDragAndDrop'; +import { useScrollFocus } from '@hooks/common/useScrollFocus'; + +import { clickedMarkerIdState } from '@store/scrollFocus'; + +import { sortByOrdinal } from '@utils/sort'; + +import type { TripItemData } from '@type/tripItem'; + +import { PATH } from '@constants/path'; + interface TripItemListProps { tripId: number; dayLogId: number; diff --git a/frontend/src/components/common/TripItemList/TripItemListSkeleton.tsx b/frontend/src/components/common/TripItemList/TripItemListSkeleton.tsx index f2cc51292..00d12c1af 100644 --- a/frontend/src/components/common/TripItemList/TripItemListSkeleton.tsx +++ b/frontend/src/components/common/TripItemList/TripItemListSkeleton.tsx @@ -1,10 +1,12 @@ -import { TRIP_ITEM_LIST_SKELETON_LENGTH } from '@constants/ui'; -import { Divider } from 'hang-log-design-system'; import { Fragment } from 'react'; +import { Divider } from 'hang-log-design-system'; + import TripItemSkeleton from '@components/common/TripItem/TripItemSkeleton'; import { containerStyling } from '@components/common/TripItemList/TripItemList.style'; +import { TRIP_ITEM_LIST_SKELETON_LENGTH } from '@constants/ui'; + const TripItemListSkeleton = () => { return (
    diff --git a/frontend/src/components/common/TripItemMarker/TripItemMarker.style.ts b/frontend/src/components/common/TripItemMarker/TripItemMarker.style.ts index ebd3ccab7..23eb65ac0 100644 --- a/frontend/src/components/common/TripItemMarker/TripItemMarker.style.ts +++ b/frontend/src/components/common/TripItemMarker/TripItemMarker.style.ts @@ -1,4 +1,5 @@ import { css } from '@emotion/react'; + import { Theme } from 'hang-log-design-system'; export const getMarkerContainerStyling = (isZoomedOut: boolean) => { diff --git a/frontend/src/components/common/TripItemMarker/TripItemMarker.tsx b/frontend/src/components/common/TripItemMarker/TripItemMarker.tsx index 7dc555769..462a4f2ca 100644 --- a/frontend/src/components/common/TripItemMarker/TripItemMarker.tsx +++ b/frontend/src/components/common/TripItemMarker/TripItemMarker.tsx @@ -1,17 +1,21 @@ -import PinIcon from '@assets/svg/pin-icon.svg'; -import SelectedPinIcon from '@assets/svg/selected-pin-icon.svg'; -import { clickedMarkerIdState } from '@store/scrollFocus'; -import { Flex, Text } from 'hang-log-design-system'; import { useEffect, useRef } from 'react'; import type { Root } from 'react-dom/client'; import { createRoot } from 'react-dom/client'; + import { useSetRecoilState } from 'recoil'; +import { Flex, Text } from 'hang-log-design-system'; + import { getLabelStyling, getMarkerContainerStyling, } from '@components/common/TripItemMarker/TripItemMarker.style'; +import { clickedMarkerIdState } from '@store/scrollFocus'; + +import PinIcon from '@assets/svg/pin-icon.svg'; +import SelectedPinIcon from '@assets/svg/selected-pin-icon.svg'; + interface TripItemMarkerProps { map: google.maps.Map; id: number; diff --git a/frontend/src/components/common/TripItemMarkerContainer/TripItemMarkerContainer.tsx b/frontend/src/components/common/TripItemMarkerContainer/TripItemMarkerContainer.tsx index 71b9d6e52..57cc5b704 100644 --- a/frontend/src/components/common/TripItemMarkerContainer/TripItemMarkerContainer.tsx +++ b/frontend/src/components/common/TripItemMarkerContainer/TripItemMarkerContainer.tsx @@ -1,11 +1,15 @@ -import { MAP_ZOOM_OUT_LABEL_LIMIT } from '@constants/map'; -import { focusedIdState } from '@store/scrollFocus'; -import type { TripPlaceType } from '@type/trip'; import { useEffect, useState } from 'react'; + import { useRecoilValue } from 'recoil'; import TripItemMarker from '@components/common/TripItemMarker/TripItemMarker'; +import { focusedIdState } from '@store/scrollFocus'; + +import type { TripPlaceType } from '@type/trip'; + +import { MAP_ZOOM_OUT_LABEL_LIMIT } from '@constants/map'; + interface TripItemMarkerContainerProps { map: google.maps.Map; places: TripPlaceType[]; diff --git a/frontend/src/components/common/TripMap/TripMap.tsx b/frontend/src/components/common/TripMap/TripMap.tsx index ad77a9486..47b51d089 100644 --- a/frontend/src/components/common/TripMap/TripMap.tsx +++ b/frontend/src/components/common/TripMap/TripMap.tsx @@ -1,10 +1,12 @@ -import { MAP_INITIAL_ZOOM_SIZE, MAP_MAX_ZOOM_SIZE, MAP_MIN_ZOOM_SIZE } from '@constants/map'; -import type { TripPlaceType } from '@type/trip'; import { useEffect, useRef, useState } from 'react'; import MapDashedLine from '@components/common/MapDashedLine/MapDashedLine'; import TripItemMarkerContainer from '@components/common/TripItemMarkerContainer/TripItemMarkerContainer'; +import type { TripPlaceType } from '@type/trip'; + +import { MAP_INITIAL_ZOOM_SIZE, MAP_MAX_ZOOM_SIZE, MAP_MIN_ZOOM_SIZE } from '@constants/map'; + interface TripMapProps { centerLat: number; centerLng: number; diff --git a/frontend/src/components/expense/ExpenseCategories/ExpenseCategories.style.ts b/frontend/src/components/expense/ExpenseCategories/ExpenseCategories.style.ts index d90510adc..09a0a72f5 100644 --- a/frontend/src/components/expense/ExpenseCategories/ExpenseCategories.style.ts +++ b/frontend/src/components/expense/ExpenseCategories/ExpenseCategories.style.ts @@ -1,4 +1,5 @@ import { css } from '@emotion/react'; + import { Theme } from 'hang-log-design-system'; export const totalAmountContainerStyling = css({ diff --git a/frontend/src/components/expense/ExpenseCategories/ExpenseCategories.tsx b/frontend/src/components/expense/ExpenseCategories/ExpenseCategories.tsx index da83bafad..d519a7472 100644 --- a/frontend/src/components/expense/ExpenseCategories/ExpenseCategories.tsx +++ b/frontend/src/components/expense/ExpenseCategories/ExpenseCategories.tsx @@ -1,12 +1,13 @@ -import { CURRENCY_ICON, DEFAULT_CURRENCY } from '@constants/trip'; import { Flex, Heading, Tab, Tabs, Text, Theme, useSelect } from 'hang-log-design-system'; -import { formatDate, formatNumberToMoney } from '@utils/formatter'; +import { totalAmountContainerStyling } from '@components/expense/ExpenseCategories/ExpenseCategories.style'; +import ExpenseList from '@components/expense/ExpenseList/ExpenseList'; import { useExpense } from '@hooks/expense/useExpense'; -import { totalAmountContainerStyling } from '@components/expense/ExpenseCategories/ExpenseCategories.style'; -import ExpenseList from '@components/expense/ExpenseList/ExpenseList'; +import { formatDate, formatNumberToMoney } from '@utils/formatter'; + +import { CURRENCY_ICON, DEFAULT_CURRENCY } from '@constants/trip'; interface ExpenseCategoriesProps { tripId: number; diff --git a/frontend/src/components/expense/ExpenseCategoryInformation/ExpenseCategoryInformation.style.ts b/frontend/src/components/expense/ExpenseCategoryInformation/ExpenseCategoryInformation.style.ts index c693c8c62..999adc51c 100644 --- a/frontend/src/components/expense/ExpenseCategoryInformation/ExpenseCategoryInformation.style.ts +++ b/frontend/src/components/expense/ExpenseCategoryInformation/ExpenseCategoryInformation.style.ts @@ -1,8 +1,11 @@ -import { EXPENSE_CHART_COLORS } from '@constants/expense'; import { css } from '@emotion/react'; -import type { ExpenseCategoryNameType } from '@type/expense'; + import { Theme } from 'hang-log-design-system'; +import type { ExpenseCategoryNameType } from '@type/expense'; + +import { EXPENSE_CHART_COLORS } from '@constants/expense'; + export const containerStyling = css({ display: 'flex', flexDirection: 'column', diff --git a/frontend/src/components/expense/ExpenseCategoryInformation/ExpenseCategoryInformation.tsx b/frontend/src/components/expense/ExpenseCategoryInformation/ExpenseCategoryInformation.tsx index 0c4b80740..5ac1519ed 100644 --- a/frontend/src/components/expense/ExpenseCategoryInformation/ExpenseCategoryInformation.tsx +++ b/frontend/src/components/expense/ExpenseCategoryInformation/ExpenseCategoryInformation.tsx @@ -1,10 +1,5 @@ -import { CURRENCY_ICON, DEFAULT_CURRENCY } from '@constants/trip'; import { Flex, Text, Theme } from 'hang-log-design-system'; -import { formatNumberToMoney } from '@utils/formatter'; - -import { useExpense } from '@hooks/expense/useExpense'; - import { categoryNameStyling, containerStyling, @@ -12,6 +7,12 @@ import { wrapperStyling, } from '@components/expense/ExpenseCategoryInformation/ExpenseCategoryInformation.style'; +import { useExpense } from '@hooks/expense/useExpense'; + +import { formatNumberToMoney } from '@utils/formatter'; + +import { CURRENCY_ICON, DEFAULT_CURRENCY } from '@constants/trip'; + interface ExpenseCategoryInformationProps { tripId: number; } diff --git a/frontend/src/components/expense/ExpenseCategoryInformation/ExpenseCategoryInformationSkeleton.tsx b/frontend/src/components/expense/ExpenseCategoryInformation/ExpenseCategoryInformationSkeleton.tsx index 93e7ee1a6..1378793bf 100644 --- a/frontend/src/components/expense/ExpenseCategoryInformation/ExpenseCategoryInformationSkeleton.tsx +++ b/frontend/src/components/expense/ExpenseCategoryInformation/ExpenseCategoryInformationSkeleton.tsx @@ -1,8 +1,9 @@ -import { EXPENSE_CATEGORY_INFORMATION_SKELETON_LENGTH } from '@constants/ui'; import { Skeleton } from 'hang-log-design-system'; import { containerStyling } from '@components/expense/ExpenseCategoryInformation/ExpenseCategoryInformation.style'; +import { EXPENSE_CATEGORY_INFORMATION_SKELETON_LENGTH } from '@constants/ui'; + const ExpenseCategoryInformationSkeleton = () => { return (
    diff --git a/frontend/src/components/expense/ExpenseDates/ExpenseDates.style.ts b/frontend/src/components/expense/ExpenseDates/ExpenseDates.style.ts index d90510adc..09a0a72f5 100644 --- a/frontend/src/components/expense/ExpenseDates/ExpenseDates.style.ts +++ b/frontend/src/components/expense/ExpenseDates/ExpenseDates.style.ts @@ -1,4 +1,5 @@ import { css } from '@emotion/react'; + import { Theme } from 'hang-log-design-system'; export const totalAmountContainerStyling = css({ diff --git a/frontend/src/components/expense/ExpenseDates/ExpenseDates.tsx b/frontend/src/components/expense/ExpenseDates/ExpenseDates.tsx index 3e0cf9e65..8ca6e7ed4 100644 --- a/frontend/src/components/expense/ExpenseDates/ExpenseDates.tsx +++ b/frontend/src/components/expense/ExpenseDates/ExpenseDates.tsx @@ -1,13 +1,14 @@ -import { CURRENCY_ICON, DEFAULT_CURRENCY } from '@constants/trip'; import { Flex, Heading, Tab, Tabs, Text, Theme, useSelect } from 'hang-log-design-system'; -import { formatDate, formatMonthDate, formatNumberToMoney } from '@utils/formatter'; -import { sortByOrdinal } from '@utils/sort'; +import { totalAmountContainerStyling } from '@components/expense/ExpenseDates/ExpenseDates.style'; +import ExpenseList from '@components/expense/ExpenseList/ExpenseList'; import { useExpense } from '@hooks/expense/useExpense'; -import { totalAmountContainerStyling } from '@components/expense/ExpenseDates/ExpenseDates.style'; -import ExpenseList from '@components/expense/ExpenseList/ExpenseList'; +import { formatDate, formatMonthDate, formatNumberToMoney } from '@utils/formatter'; +import { sortByOrdinal } from '@utils/sort'; + +import { CURRENCY_ICON, DEFAULT_CURRENCY } from '@constants/trip'; interface ExpenseDatesProps { tripId: number; diff --git a/frontend/src/components/expense/ExpenseInformation/ExpenseInformation.style.ts b/frontend/src/components/expense/ExpenseInformation/ExpenseInformation.style.ts index 9bdc9c573..1b424c2b8 100644 --- a/frontend/src/components/expense/ExpenseInformation/ExpenseInformation.style.ts +++ b/frontend/src/components/expense/ExpenseInformation/ExpenseInformation.style.ts @@ -1,4 +1,5 @@ import { css } from '@emotion/react'; + import { Theme } from 'hang-log-design-system'; export const sectionStyling = css({ diff --git a/frontend/src/components/expense/ExpenseInformation/ExpenseInformation.tsx b/frontend/src/components/expense/ExpenseInformation/ExpenseInformation.tsx index 35bb361dc..23ca43da5 100644 --- a/frontend/src/components/expense/ExpenseInformation/ExpenseInformation.tsx +++ b/frontend/src/components/expense/ExpenseInformation/ExpenseInformation.tsx @@ -1,9 +1,6 @@ -import { mediaQueryMobileState } from '@store/mediaQuery'; -import type { ExpenseData } from '@type/expense'; -import { Badge, Box, Heading, Text } from 'hang-log-design-system'; import { useRecoilValue } from 'recoil'; -import { formatDate } from '@utils/formatter'; +import { Badge, Box, Heading, Text } from 'hang-log-design-system'; import { badgeWrapperStyling, @@ -11,6 +8,12 @@ import { titleStyling, } from '@components/expense/ExpenseInformation/ExpenseInformation.style'; +import { mediaQueryMobileState } from '@store/mediaQuery'; + +import { formatDate } from '@utils/formatter'; + +import type { ExpenseData } from '@type/expense'; + interface ExpenseInformationProps extends Pick { tripId: number; diff --git a/frontend/src/components/expense/ExpenseItem/ExpenseItem.style.ts b/frontend/src/components/expense/ExpenseItem/ExpenseItem.style.ts index 3e234ff10..d20b25de1 100644 --- a/frontend/src/components/expense/ExpenseItem/ExpenseItem.style.ts +++ b/frontend/src/components/expense/ExpenseItem/ExpenseItem.style.ts @@ -1,4 +1,5 @@ import { css } from '@emotion/react'; + import { Theme } from 'hang-log-design-system'; export const containerStyling = css({ diff --git a/frontend/src/components/expense/ExpenseItem/ExpenseItem.tsx b/frontend/src/components/expense/ExpenseItem/ExpenseItem.tsx index 02fde7c19..ad945b495 100644 --- a/frontend/src/components/expense/ExpenseItem/ExpenseItem.tsx +++ b/frontend/src/components/expense/ExpenseItem/ExpenseItem.tsx @@ -1,10 +1,12 @@ -import { CURRENCY_ICON } from '@constants/trip'; -import type { ExpenseItemData } from '@type/expense'; import { Flex, Heading, Text, Theme } from 'hang-log-design-system'; +import { amountStyling, containerStyling } from '@components/expense/ExpenseItem/ExpenseItem.style'; + import { formatNumberToMoney } from '@utils/formatter'; -import { amountStyling, containerStyling } from '@components/expense/ExpenseItem/ExpenseItem.style'; +import type { ExpenseItemData } from '@type/expense'; + +import { CURRENCY_ICON } from '@constants/trip'; type ExpenseItemProps = ExpenseItemData; diff --git a/frontend/src/components/expense/ExpenseList/ExpenseList.style.ts b/frontend/src/components/expense/ExpenseList/ExpenseList.style.ts index c33285e3e..c8bb9a6d6 100644 --- a/frontend/src/components/expense/ExpenseList/ExpenseList.style.ts +++ b/frontend/src/components/expense/ExpenseList/ExpenseList.style.ts @@ -1,4 +1,5 @@ import { css } from '@emotion/react'; + import { Theme } from 'hang-log-design-system'; export const containerStyling = css({ diff --git a/frontend/src/components/expense/ExpenseList/ExpenseList.tsx b/frontend/src/components/expense/ExpenseList/ExpenseList.tsx index 1ee250b19..84a84cc7e 100644 --- a/frontend/src/components/expense/ExpenseList/ExpenseList.tsx +++ b/frontend/src/components/expense/ExpenseList/ExpenseList.tsx @@ -1,9 +1,8 @@ -import { PATH } from '@constants/path'; -import type { ExpenseItemData } from '@type/expense'; -import { Box, Button, Divider, Flex, Heading, Text, Theme } from 'hang-log-design-system'; import { Fragment } from 'react'; import { useNavigate } from 'react-router-dom'; +import { Box, Button, Divider, Flex, Heading, Text, Theme } from 'hang-log-design-system'; + import ExpenseItem from '@components/expense/ExpenseItem/ExpenseItem'; import { addItemButtonStyling, @@ -11,6 +10,10 @@ import { emptyTextStyling, } from '@components/expense/ExpenseList/ExpenseList.style'; +import type { ExpenseItemData } from '@type/expense'; + +import { PATH } from '@constants/path'; + interface ExpenseListProps { items: ExpenseItemData[]; } diff --git a/frontend/src/components/expense/ExpenseList/ExpenseListSkeleton.tsx b/frontend/src/components/expense/ExpenseList/ExpenseListSkeleton.tsx index d7397e4eb..8916f785e 100644 --- a/frontend/src/components/expense/ExpenseList/ExpenseListSkeleton.tsx +++ b/frontend/src/components/expense/ExpenseList/ExpenseListSkeleton.tsx @@ -1,10 +1,12 @@ -import { EXPENSE_LIST_SKELETON_LENGTH } from '@constants/ui'; -import { Divider, Flex, Theme } from 'hang-log-design-system'; import { Fragment } from 'react'; +import { Divider, Flex, Theme } from 'hang-log-design-system'; + import ExpenseItemSkeleton from '@components/expense/ExpenseItem/ExpenseItemSkeleton'; import { containerStyling } from '@components/expense/ExpenseList/ExpenseList.style'; +import { EXPENSE_LIST_SKELETON_LENGTH } from '@constants/ui'; + const ExpenseListSkeleton = () => { return ( { const isMobile = useRecoilValue(mediaQueryMobileState); diff --git a/frontend/src/components/expense/TotalExpenseSection/TotalExpenseSection.style.ts b/frontend/src/components/expense/TotalExpenseSection/TotalExpenseSection.style.ts index 736ba39e8..225993970 100644 --- a/frontend/src/components/expense/TotalExpenseSection/TotalExpenseSection.style.ts +++ b/frontend/src/components/expense/TotalExpenseSection/TotalExpenseSection.style.ts @@ -1,4 +1,5 @@ import { css } from '@emotion/react'; + import { Theme } from 'hang-log-design-system'; export const containerStyling = css({ diff --git a/frontend/src/components/expense/TotalExpenseSection/TotalExpenseSection.tsx b/frontend/src/components/expense/TotalExpenseSection/TotalExpenseSection.tsx index 1d73f874a..d45e831a2 100644 --- a/frontend/src/components/expense/TotalExpenseSection/TotalExpenseSection.tsx +++ b/frontend/src/components/expense/TotalExpenseSection/TotalExpenseSection.tsx @@ -1,12 +1,6 @@ -import { EXPENSE_CHART_COLORS } from '@constants/expense'; -import { CURRENCY_ICON, DEFAULT_CURRENCY } from '@constants/trip'; -import { mediaQueryMobileState } from '@store/mediaQuery'; -import { Box, Heading } from 'hang-log-design-system'; import { useRecoilValue } from 'recoil'; -import { formatNumberToMoney } from '@utils/formatter'; - -import { useExpense } from '@hooks/expense/useExpense'; +import { Box, Heading } from 'hang-log-design-system'; import type { Segment } from '@components/common/DonutChart/DonutChart'; import DonutChart from '@components/common/DonutChart/DonutChart'; @@ -17,6 +11,15 @@ import { totalAmountStyling, } from '@components/expense/TotalExpenseSection/TotalExpenseSection.style'; +import { useExpense } from '@hooks/expense/useExpense'; + +import { mediaQueryMobileState } from '@store/mediaQuery'; + +import { formatNumberToMoney } from '@utils/formatter'; + +import { EXPENSE_CHART_COLORS } from '@constants/expense'; +import { CURRENCY_ICON, DEFAULT_CURRENCY } from '@constants/trip'; + interface TotalExpenseSectionProps { tripId: number; } diff --git a/frontend/src/components/layout/Footer/Footer.style.ts b/frontend/src/components/layout/Footer/Footer.style.ts index 5ad321131..47b8b5edc 100644 --- a/frontend/src/components/layout/Footer/Footer.style.ts +++ b/frontend/src/components/layout/Footer/Footer.style.ts @@ -1,4 +1,5 @@ import { css } from '@emotion/react'; + import { Theme } from 'hang-log-design-system'; export const containerStyling = css({ diff --git a/frontend/src/components/layout/Header/Header.style.ts b/frontend/src/components/layout/Header/Header.style.ts index 3ac642ebe..8fd3635a2 100644 --- a/frontend/src/components/layout/Header/Header.style.ts +++ b/frontend/src/components/layout/Header/Header.style.ts @@ -1,4 +1,5 @@ import { css } from '@emotion/react'; + import { Theme } from 'hang-log-design-system'; export const headerStyling = css({ diff --git a/frontend/src/components/layout/Header/Header.tsx b/frontend/src/components/layout/Header/Header.tsx index 437646719..d9a4636b7 100644 --- a/frontend/src/components/layout/Header/Header.tsx +++ b/frontend/src/components/layout/Header/Header.tsx @@ -1,15 +1,20 @@ -import LogoHorizontal from '@assets/svg/logo-horizontal.svg'; -import { PATH } from '@constants/path'; -import { isLoggedInState } from '@store/auth'; -import { Flex } from 'hang-log-design-system'; import { Suspense } from 'react'; import { useNavigate } from 'react-router-dom'; + import { useRecoilValue } from 'recoil'; +import { Flex } from 'hang-log-design-system'; + import { getItemStyling, headerStyling } from '@components/layout/Header/Header.style'; import LoggedInOption from '@components/layout/Header/LoggedInMenu/LoggedInMenu'; import LoggedOutOption from '@components/layout/Header/LoggedOutMenu/LoggedOutMenu'; +import { isLoggedInState } from '@store/auth'; + +import { PATH } from '@constants/path'; + +import LogoHorizontal from '@assets/svg/logo-horizontal.svg'; + const Header = () => { const navigate = useNavigate(); diff --git a/frontend/src/components/layout/Header/LoggedInMenu/LoggedInMenu.style.ts b/frontend/src/components/layout/Header/LoggedInMenu/LoggedInMenu.style.ts index 5f2289122..9c3fe6229 100644 --- a/frontend/src/components/layout/Header/LoggedInMenu/LoggedInMenu.style.ts +++ b/frontend/src/components/layout/Header/LoggedInMenu/LoggedInMenu.style.ts @@ -1,4 +1,5 @@ import { css } from '@emotion/react'; + import { Theme } from 'hang-log-design-system'; export const imageStyling = css({ diff --git a/frontend/src/components/layout/Header/LoggedInMenu/LoggedInMenu.tsx b/frontend/src/components/layout/Header/LoggedInMenu/LoggedInMenu.tsx index 0a02be722..c86600af8 100644 --- a/frontend/src/components/layout/Header/LoggedInMenu/LoggedInMenu.tsx +++ b/frontend/src/components/layout/Header/LoggedInMenu/LoggedInMenu.tsx @@ -1,18 +1,20 @@ /* eslint-disable jsx-a11y/no-noninteractive-element-interactions */ -import { ACCESS_TOKEN_KEY } from '@constants/api'; -import { PATH } from '@constants/path'; -import { Menu, MenuItem, MenuList, useOverlay } from 'hang-log-design-system'; import type { KeyboardEvent } from 'react'; import { useNavigate } from 'react-router-dom'; -import { useLogOutMutation } from '@hooks/api/useLogOutMutation'; -import { useUserInfoQuery } from '@hooks/api/useUserInfoQuery'; +import { Menu, MenuItem, MenuList, useOverlay } from 'hang-log-design-system'; import { imageStyling, menuListStyling, } from '@components/layout/Header/LoggedInMenu/LoggedInMenu.style'; +import { useLogOutMutation } from '@hooks/api/useLogOutMutation'; +import { useUserInfoQuery } from '@hooks/api/useUserInfoQuery'; + +import { ACCESS_TOKEN_KEY } from '@constants/api'; +import { PATH } from '@constants/path'; + const LoggedInMenu = () => { const navigate = useNavigate(); diff --git a/frontend/src/components/layout/Header/LoggedOutMenu/LoggedOutMenu.tsx b/frontend/src/components/layout/Header/LoggedOutMenu/LoggedOutMenu.tsx index c9bd4a1f3..5169c8e3d 100644 --- a/frontend/src/components/layout/Header/LoggedOutMenu/LoggedOutMenu.tsx +++ b/frontend/src/components/layout/Header/LoggedOutMenu/LoggedOutMenu.tsx @@ -1,9 +1,11 @@ -import { PATH } from '@constants/path'; -import { Button, Flex, Theme } from 'hang-log-design-system'; import { useNavigate } from 'react-router-dom'; +import { Button, Flex, Theme } from 'hang-log-design-system'; + import { getItemStyling } from '@components/layout/Header/Header.style'; +import { PATH } from '@constants/path'; + const LoggedOutMenu = () => { const navigate = useNavigate(); diff --git a/frontend/src/components/myPage/EditUserProfileForm/EditUserProfileForm.style.ts b/frontend/src/components/myPage/EditUserProfileForm/EditUserProfileForm.style.ts index fa23954d8..6d67f1352 100644 --- a/frontend/src/components/myPage/EditUserProfileForm/EditUserProfileForm.style.ts +++ b/frontend/src/components/myPage/EditUserProfileForm/EditUserProfileForm.style.ts @@ -1,4 +1,5 @@ import { css } from '@emotion/react'; + import { Theme } from 'hang-log-design-system'; export const formStyling = css({ diff --git a/frontend/src/components/myPage/EditUserProfileForm/EditUserProfileForm.tsx b/frontend/src/components/myPage/EditUserProfileForm/EditUserProfileForm.tsx index 911150994..41162e8b0 100644 --- a/frontend/src/components/myPage/EditUserProfileForm/EditUserProfileForm.tsx +++ b/frontend/src/components/myPage/EditUserProfileForm/EditUserProfileForm.tsx @@ -1,8 +1,6 @@ -import type { UserData } from '@type/member'; -import { Button } from 'hang-log-design-system'; import { Link } from 'react-router-dom'; -import { useEditUserProfileForm } from '@hooks/member/useEditUserProfileForm'; +import { Button } from 'hang-log-design-system'; import { buttonStyling, @@ -13,6 +11,10 @@ import { import NicknameInput from '@components/myPage/EditUserProfileForm/NicknameInput/NicknameInput'; import ProfileImageInput from '@components/myPage/EditUserProfileForm/ProfileImageInput/ProfileImageInput'; +import { useEditUserProfileForm } from '@hooks/member/useEditUserProfileForm'; + +import type { UserData } from '@type/member'; + interface EditUserProfileForm { initialData: UserData; } diff --git a/frontend/src/components/myPage/EditUserProfileForm/NicknameInput/NicknameInput.style.ts b/frontend/src/components/myPage/EditUserProfileForm/NicknameInput/NicknameInput.style.ts index d8cb3de50..0a0edf9c0 100644 --- a/frontend/src/components/myPage/EditUserProfileForm/NicknameInput/NicknameInput.style.ts +++ b/frontend/src/components/myPage/EditUserProfileForm/NicknameInput/NicknameInput.style.ts @@ -1,4 +1,5 @@ import { css } from '@emotion/react'; + import { Theme } from 'hang-log-design-system'; export const inputStyling = css({ diff --git a/frontend/src/components/myPage/EditUserProfileForm/NicknameInput/NicknameInput.tsx b/frontend/src/components/myPage/EditUserProfileForm/NicknameInput/NicknameInput.tsx index f420c8aca..77fc75113 100644 --- a/frontend/src/components/myPage/EditUserProfileForm/NicknameInput/NicknameInput.tsx +++ b/frontend/src/components/myPage/EditUserProfileForm/NicknameInput/NicknameInput.tsx @@ -1,10 +1,13 @@ -import { NICKNAME_MAX_LENGTH } from '@constants/ui'; -import type { UserData } from '@type/member'; -import { Input } from 'hang-log-design-system'; import { type ChangeEvent, useCallback } from 'react'; +import { Input } from 'hang-log-design-system'; + import { inputStyling } from '@components/myPage/EditUserProfileForm/NicknameInput/NicknameInput.style'; +import type { UserData } from '@type/member'; + +import { NICKNAME_MAX_LENGTH } from '@constants/ui'; + interface NicknameInputProps { value: string; isError: boolean; diff --git a/frontend/src/components/myPage/EditUserProfileForm/ProfileImageInput/ProfileImageInput.style.ts b/frontend/src/components/myPage/EditUserProfileForm/ProfileImageInput/ProfileImageInput.style.ts index 6051649d0..295eea483 100644 --- a/frontend/src/components/myPage/EditUserProfileForm/ProfileImageInput/ProfileImageInput.style.ts +++ b/frontend/src/components/myPage/EditUserProfileForm/ProfileImageInput/ProfileImageInput.style.ts @@ -1,4 +1,5 @@ import { css } from '@emotion/react'; + import { Theme } from 'hang-log-design-system'; export const wrapperStyling = css({ diff --git a/frontend/src/components/myPage/EditUserProfileForm/ProfileImageInput/ProfileImageInput.tsx b/frontend/src/components/myPage/EditUserProfileForm/ProfileImageInput/ProfileImageInput.tsx index 3e09fe353..39f7b3d41 100644 --- a/frontend/src/components/myPage/EditUserProfileForm/ProfileImageInput/ProfileImageInput.tsx +++ b/frontend/src/components/myPage/EditUserProfileForm/ProfileImageInput/ProfileImageInput.tsx @@ -1,9 +1,7 @@ -import type { UserData } from '@type/member'; -import { Box, Button } from 'hang-log-design-system'; import type { ComponentPropsWithoutRef } from 'react'; import { memo, useCallback, useRef } from 'react'; -import { useImageUpload } from '@hooks/common/useImageUpload'; +import { Box, Button } from 'hang-log-design-system'; import { imageStyling, @@ -12,6 +10,10 @@ import { wrapperStyling, } from '@components/myPage/EditUserProfileForm/ProfileImageInput/ProfileImageInput.style'; +import { useImageUpload } from '@hooks/common/useImageUpload'; + +import type { UserData } from '@type/member'; + interface ProfileImageInputProps extends ComponentPropsWithoutRef<'div'> { initialImageUrl: string; updateInputValue: (key: K, value: UserData[K]) => void; diff --git a/frontend/src/components/trip/TripCreateForm/TripCreateForm.style.ts b/frontend/src/components/trip/TripCreateForm/TripCreateForm.style.ts index c712f4bd3..1cab8c612 100644 --- a/frontend/src/components/trip/TripCreateForm/TripCreateForm.style.ts +++ b/frontend/src/components/trip/TripCreateForm/TripCreateForm.style.ts @@ -1,4 +1,5 @@ import { css } from '@emotion/react'; + import { Theme } from 'hang-log-design-system'; export const formStyling = css({ diff --git a/frontend/src/components/trip/TripCreateForm/TripCreateForm.tsx b/frontend/src/components/trip/TripCreateForm/TripCreateForm.tsx index 54cfe026b..3d5a7719c 100644 --- a/frontend/src/components/trip/TripCreateForm/TripCreateForm.tsx +++ b/frontend/src/components/trip/TripCreateForm/TripCreateForm.tsx @@ -1,15 +1,17 @@ -import { PATH } from '@constants/path'; -import { Button } from 'hang-log-design-system'; import type { FormEvent } from 'react'; import { useNavigate } from 'react-router-dom'; -import { useCreateTripMutation } from '@hooks/api/useCreateTripMutation'; -import { useCityDateForm } from '@hooks/common/useCityDateForm'; +import { Button } from 'hang-log-design-system'; import CitySearchBar from '@components/common/CitySearchBar/CitySearchBar'; import DateInput from '@components/common/DateInput/DateInput'; import { formStyling } from '@components/trip/TripCreateForm/TripCreateForm.style'; +import { useCreateTripMutation } from '@hooks/api/useCreateTripMutation'; +import { useCityDateForm } from '@hooks/common/useCityDateForm'; + +import { PATH } from '@constants/path'; + const TripCreateForm = () => { const { cityDateInfo, updateCityInfo, updateDateInfo, isCityDateValid } = useCityDateForm(); const createTripMutation = useCreateTripMutation(); diff --git a/frontend/src/components/trip/TripInfoEditModal/ImageInput/ImageInput.tsx b/frontend/src/components/trip/TripInfoEditModal/ImageInput/ImageInput.tsx index 30e079964..ac8695d07 100644 --- a/frontend/src/components/trip/TripInfoEditModal/ImageInput/ImageInput.tsx +++ b/frontend/src/components/trip/TripInfoEditModal/ImageInput/ImageInput.tsx @@ -1,6 +1,7 @@ -import { ImageUploadInput } from 'hang-log-design-system'; import { useCallback } from 'react'; +import { ImageUploadInput } from 'hang-log-design-system'; + import { useImageUpload } from '@hooks/common/useImageUpload'; interface ImageInputProps { diff --git a/frontend/src/components/trip/TripInfoEditModal/TripInfoEditModal.style.ts b/frontend/src/components/trip/TripInfoEditModal/TripInfoEditModal.style.ts index 1776649de..a2bca61af 100644 --- a/frontend/src/components/trip/TripInfoEditModal/TripInfoEditModal.style.ts +++ b/frontend/src/components/trip/TripInfoEditModal/TripInfoEditModal.style.ts @@ -1,4 +1,5 @@ import { css } from '@emotion/react'; + import { Theme } from 'hang-log-design-system'; export const wrapperStyling = css({ diff --git a/frontend/src/components/trip/TripInfoEditModal/TripInfoEditModal.tsx b/frontend/src/components/trip/TripInfoEditModal/TripInfoEditModal.tsx index 56713628a..943dc3ad1 100644 --- a/frontend/src/components/trip/TripInfoEditModal/TripInfoEditModal.tsx +++ b/frontend/src/components/trip/TripInfoEditModal/TripInfoEditModal.tsx @@ -1,10 +1,5 @@ -import WarningIcon from '@assets/svg/warning-icon.svg'; -import { TRIP_DESCRIPTION_MAX_LENGTH, TRIP_TITLE_MAX_LENGTH } from '@constants/ui'; -import type { TripData } from '@type/trip'; import { Button, Flex, Input, Modal, SupportingText, Textarea } from 'hang-log-design-system'; -import { useTripEditForm } from '@hooks/trip/useTripEditForm'; - import CitySearchBar from '@components/common/CitySearchBar/CitySearchBar'; import DateInput from '@components/common/DateInput/DateInput'; import ImageInput from '@components/trip/TripInfoEditModal/ImageInput/ImageInput'; @@ -15,6 +10,14 @@ import { wrapperStyling, } from '@components/trip/TripInfoEditModal/TripInfoEditModal.style'; +import { useTripEditForm } from '@hooks/trip/useTripEditForm'; + +import type { TripData } from '@type/trip'; + +import { TRIP_DESCRIPTION_MAX_LENGTH, TRIP_TITLE_MAX_LENGTH } from '@constants/ui'; + +import WarningIcon from '@assets/svg/warning-icon.svg'; + interface TripInfoEditModalProps extends Omit { isOpen: boolean; onClose: () => void; diff --git a/frontend/src/components/trip/TripItemAddModal/CategoryInput/CategoryInput.tsx b/frontend/src/components/trip/TripItemAddModal/CategoryInput/CategoryInput.tsx index 5447bff76..0b61fe0c5 100644 --- a/frontend/src/components/trip/TripItemAddModal/CategoryInput/CategoryInput.tsx +++ b/frontend/src/components/trip/TripItemAddModal/CategoryInput/CategoryInput.tsx @@ -1,9 +1,12 @@ -import { TRIP_ITEM_ADD_CATEGORIES } from '@constants/trip'; -import type { TripItemFormData } from '@type/tripItem'; -import { RadioButton } from 'hang-log-design-system'; import type { ChangeEvent } from 'react'; import { memo } from 'react'; +import { RadioButton } from 'hang-log-design-system'; + +import type { TripItemFormData } from '@type/tripItem'; + +import { TRIP_ITEM_ADD_CATEGORIES } from '@constants/trip'; + interface CategoryInputProps { itemType: TripItemFormData['itemType']; updateInputValue: (key: K, value: TripItemFormData[K]) => void; diff --git a/frontend/src/components/trip/TripItemAddModal/DateInput/DateInput.tsx b/frontend/src/components/trip/TripItemAddModal/DateInput/DateInput.tsx index c912b4ca6..cc49bfad0 100644 --- a/frontend/src/components/trip/TripItemAddModal/DateInput/DateInput.tsx +++ b/frontend/src/components/trip/TripItemAddModal/DateInput/DateInput.tsx @@ -1,14 +1,16 @@ /* eslint-disable react/jsx-no-useless-fragment */ -import type { TripItemFormData } from '@type/tripItem'; -import { Select } from 'hang-log-design-system'; import type { ChangeEvent } from 'react'; import { memo } from 'react'; -import { formatMonthDate } from '@utils/formatter'; +import { Select } from 'hang-log-design-system'; + +import { selectStyling } from '@components/trip/TripItemAddModal/DateInput/DateInput.style'; import { useTripDates } from '@hooks/trip/useTripDates'; -import { selectStyling } from '@components/trip/TripItemAddModal/DateInput/DateInput.style'; +import { formatMonthDate } from '@utils/formatter'; + +import type { TripItemFormData } from '@type/tripItem'; interface DateInputProps { currentCategory: TripItemFormData['itemType']; diff --git a/frontend/src/components/trip/TripItemAddModal/ExpenseInput/ExpenseInput.style.ts b/frontend/src/components/trip/TripItemAddModal/ExpenseInput/ExpenseInput.style.ts index d047fa4b0..dfaf992a2 100644 --- a/frontend/src/components/trip/TripItemAddModal/ExpenseInput/ExpenseInput.style.ts +++ b/frontend/src/components/trip/TripItemAddModal/ExpenseInput/ExpenseInput.style.ts @@ -1,4 +1,5 @@ import { css } from '@emotion/react'; + import { Theme } from 'hang-log-design-system'; export const leftContainerStyling = css({ diff --git a/frontend/src/components/trip/TripItemAddModal/ExpenseInput/ExpenseInput.tsx b/frontend/src/components/trip/TripItemAddModal/ExpenseInput/ExpenseInput.tsx index 77342ec68..dd3c6da49 100644 --- a/frontend/src/components/trip/TripItemAddModal/ExpenseInput/ExpenseInput.tsx +++ b/frontend/src/components/trip/TripItemAddModal/ExpenseInput/ExpenseInput.tsx @@ -1,9 +1,6 @@ -import { CURRENCY_ICON } from '@constants/trip'; -import type { TripItemFormData } from '@type/tripItem'; -import { Flex, Input, Label, Select, Theme } from 'hang-log-design-system'; import { memo } from 'react'; -import { useTripItemExpenseInput } from '@hooks/trip/useTripItemExpenseInput'; +import { Flex, Input, Label, Select, Theme } from 'hang-log-design-system'; import { categorySelectStyling, @@ -11,6 +8,12 @@ import { leftContainerStyling, } from '@components/trip/TripItemAddModal/ExpenseInput/ExpenseInput.style'; +import { useTripItemExpenseInput } from '@hooks/trip/useTripItemExpenseInput'; + +import type { TripItemFormData } from '@type/tripItem'; + +import { CURRENCY_ICON } from '@constants/trip'; + interface ExpenseInputProps { initialExpenseValue: TripItemFormData['expense']; updateInputValue: (key: K, value: TripItemFormData[K]) => void; diff --git a/frontend/src/components/trip/TripItemAddModal/ImageInput/ImageInput.tsx b/frontend/src/components/trip/TripItemAddModal/ImageInput/ImageInput.tsx index dfaecad97..e04cc1007 100644 --- a/frontend/src/components/trip/TripItemAddModal/ImageInput/ImageInput.tsx +++ b/frontend/src/components/trip/TripItemAddModal/ImageInput/ImageInput.tsx @@ -1,14 +1,19 @@ -import { TRIP_ITEM_ADD_MAX_IMAGE_UPLOAD_COUNT } from '@constants/ui'; -import { toastListState } from '@store/toast'; -import type { TripItemFormData } from '@type/tripItem'; -import { ImageUploadInput } from 'hang-log-design-system'; import { useCallback } from 'react'; + import { useSetRecoilState } from 'recoil'; -import { generateUniqueId } from '@utils/uniqueId'; +import { ImageUploadInput } from 'hang-log-design-system'; import { useImageUpload } from '@hooks/common/useImageUpload'; +import { toastListState } from '@store/toast'; + +import { generateUniqueId } from '@utils/uniqueId'; + +import type { TripItemFormData } from '@type/tripItem'; + +import { TRIP_ITEM_ADD_MAX_IMAGE_UPLOAD_COUNT } from '@constants/ui'; + interface ImageInputProps { initialImageUrls: string[]; updateInputValue: (key: K, value: TripItemFormData[K]) => void; diff --git a/frontend/src/components/trip/TripItemAddModal/MemoInput/MemoInput.tsx b/frontend/src/components/trip/TripItemAddModal/MemoInput/MemoInput.tsx index 89d82ee24..47f49f4f0 100644 --- a/frontend/src/components/trip/TripItemAddModal/MemoInput/MemoInput.tsx +++ b/frontend/src/components/trip/TripItemAddModal/MemoInput/MemoInput.tsx @@ -1,11 +1,14 @@ -import { TRIP_ITEM_MEMO_MAX_LENGTH } from '@constants/ui'; -import type { TripItemFormData } from '@type/tripItem'; -import { Textarea } from 'hang-log-design-system'; import type { ChangeEvent } from 'react'; import { memo } from 'react'; +import { Textarea } from 'hang-log-design-system'; + import { textareaStyling } from '@components/trip/TripItemAddModal/MemoInput/MemoInput.style'; +import type { TripItemFormData } from '@type/tripItem'; + +import { TRIP_ITEM_MEMO_MAX_LENGTH } from '@constants/ui'; + interface MemoInputProps { value: TripItemFormData['memo']; updateInputValue: (key: K, value: TripItemFormData[K]) => void; diff --git a/frontend/src/components/trip/TripItemAddModal/PlaceInput/PlaceInput.style.ts b/frontend/src/components/trip/TripItemAddModal/PlaceInput/PlaceInput.style.ts index 216629a7a..2eeacad28 100644 --- a/frontend/src/components/trip/TripItemAddModal/PlaceInput/PlaceInput.style.ts +++ b/frontend/src/components/trip/TripItemAddModal/PlaceInput/PlaceInput.style.ts @@ -1,4 +1,5 @@ import { css } from '@emotion/react'; + import { Theme } from 'hang-log-design-system'; export const wrapperStyling = css({ diff --git a/frontend/src/components/trip/TripItemAddModal/PlaceInput/PlaceInput.tsx b/frontend/src/components/trip/TripItemAddModal/PlaceInput/PlaceInput.tsx index c332c9828..6a412bfee 100644 --- a/frontend/src/components/trip/TripItemAddModal/PlaceInput/PlaceInput.tsx +++ b/frontend/src/components/trip/TripItemAddModal/PlaceInput/PlaceInput.tsx @@ -1,11 +1,13 @@ -import type { TripItemFormData } from '@type/tripItem'; -import { Box, Input } from 'hang-log-design-system'; import { memo } from 'react'; -import { useTripItemPlaceInput } from '@hooks/trip/useTripItemPlaceInput'; +import { Box, Input } from 'hang-log-design-system'; import { wrapperStyling } from '@components/trip/TripItemAddModal/PlaceInput/PlaceInput.style'; +import { useTripItemPlaceInput } from '@hooks/trip/useTripItemPlaceInput'; + +import type { TripItemFormData } from '@type/tripItem'; + interface PlaceInputProps { value: string; isError: boolean; diff --git a/frontend/src/components/trip/TripItemAddModal/StarRatingInput/StarRatingInput.tsx b/frontend/src/components/trip/TripItemAddModal/StarRatingInput/StarRatingInput.tsx index 1088ff5d6..e1f44f3aa 100644 --- a/frontend/src/components/trip/TripItemAddModal/StarRatingInput/StarRatingInput.tsx +++ b/frontend/src/components/trip/TripItemAddModal/StarRatingInput/StarRatingInput.tsx @@ -1,7 +1,9 @@ -import type { StarRatingData, TripItemFormData } from '@type/tripItem'; -import { StarRatingInput as StarRating, useStarRatingInput } from 'hang-log-design-system'; import { memo } from 'react'; +import { StarRatingInput as StarRating, useStarRatingInput } from 'hang-log-design-system'; + +import type { StarRatingData, TripItemFormData } from '@type/tripItem'; + interface StarRatingInputProps { rating: StarRatingData | null; updateInputValue: (key: K, value: TripItemFormData[K]) => void; diff --git a/frontend/src/components/trip/TripItemAddModal/TitleInput/TitleInput.tsx b/frontend/src/components/trip/TripItemAddModal/TitleInput/TitleInput.tsx index 5fd79831f..aca2f3270 100644 --- a/frontend/src/components/trip/TripItemAddModal/TitleInput/TitleInput.tsx +++ b/frontend/src/components/trip/TripItemAddModal/TitleInput/TitleInput.tsx @@ -1,9 +1,12 @@ -import { TRIP_ITEM_TITLE_MAX_LENGTH } from '@constants/ui'; -import type { TripItemFormData } from '@type/tripItem'; -import { Input } from 'hang-log-design-system'; import type { ChangeEvent } from 'react'; import { memo } from 'react'; +import { Input } from 'hang-log-design-system'; + +import type { TripItemFormData } from '@type/tripItem'; + +import { TRIP_ITEM_TITLE_MAX_LENGTH } from '@constants/ui'; + interface TitleInputProps { value: string; isError: boolean; diff --git a/frontend/src/components/trip/TripItemAddModal/TripItemAddModal.style.ts b/frontend/src/components/trip/TripItemAddModal/TripItemAddModal.style.ts index 643508205..805e26353 100644 --- a/frontend/src/components/trip/TripItemAddModal/TripItemAddModal.style.ts +++ b/frontend/src/components/trip/TripItemAddModal/TripItemAddModal.style.ts @@ -1,4 +1,5 @@ import { css } from '@emotion/react'; + import { Theme } from 'hang-log-design-system'; export const wrapperStyling = css({ diff --git a/frontend/src/components/trip/TripItemAddModal/TripItemAddModal.tsx b/frontend/src/components/trip/TripItemAddModal/TripItemAddModal.tsx index 4b46518ba..85e3d3316 100644 --- a/frontend/src/components/trip/TripItemAddModal/TripItemAddModal.tsx +++ b/frontend/src/components/trip/TripItemAddModal/TripItemAddModal.tsx @@ -1,9 +1,6 @@ -import { mediaQueryMobileState } from '@store/mediaQuery'; -import type { TripItemFormData } from '@type/tripItem'; -import { Button, Flex, Modal, Theme } from 'hang-log-design-system'; import { useRecoilValue } from 'recoil'; -import { useAddTripItemForm } from '@hooks/trip/useAddTripItemForm'; +import { Button, Flex, Modal, Theme } from 'hang-log-design-system'; import GoogleMapWrapper from '@components/common/GoogleMapWrapper/GoogleMapWrapper'; import CategoryInput from '@components/trip/TripItemAddModal/CategoryInput/CategoryInput'; @@ -19,6 +16,12 @@ import { wrapperStyling, } from '@components/trip/TripItemAddModal/TripItemAddModal.style'; +import { useAddTripItemForm } from '@hooks/trip/useAddTripItemForm'; + +import { mediaQueryMobileState } from '@store/mediaQuery'; + +import type { TripItemFormData } from '@type/tripItem'; + interface TripItemAddModalProps { tripId: number; dayLogId: number; diff --git a/frontend/src/components/trips/TripsHeader/TripsHeader.style.ts b/frontend/src/components/trips/TripsHeader/TripsHeader.style.ts index 3ad36750a..a010ef320 100644 --- a/frontend/src/components/trips/TripsHeader/TripsHeader.style.ts +++ b/frontend/src/components/trips/TripsHeader/TripsHeader.style.ts @@ -1,4 +1,5 @@ import { css } from '@emotion/react'; + import { Theme } from 'hang-log-design-system'; export const imageStyling = css({ diff --git a/frontend/src/components/trips/TripsHeader/TripsHeader.tsx b/frontend/src/components/trips/TripsHeader/TripsHeader.tsx index df3499319..6fb80c41c 100644 --- a/frontend/src/components/trips/TripsHeader/TripsHeader.tsx +++ b/frontend/src/components/trips/TripsHeader/TripsHeader.tsx @@ -1,9 +1,10 @@ -import TripsHeaderImage from '@assets/svg/TripsHeader.svg'; import { Flex, Heading, Theme } from 'hang-log-design-system'; +import { headingStyling, imageStyling } from '@components/trips/TripsHeader/TripsHeader.style'; + import { useUserInfoQuery } from '@hooks/api/useUserInfoQuery'; -import { headingStyling, imageStyling } from '@components/trips/TripsHeader/TripsHeader.style'; +import TripsHeaderImage from '@assets/svg/TripsHeader.svg'; const TripsHeader = () => { const { userInfoData } = useUserInfoQuery(); diff --git a/frontend/src/components/trips/TripsHeader/TripsHeaderSkeleton.tsx b/frontend/src/components/trips/TripsHeader/TripsHeaderSkeleton.tsx index db1afbe6b..ac60843db 100644 --- a/frontend/src/components/trips/TripsHeader/TripsHeaderSkeleton.tsx +++ b/frontend/src/components/trips/TripsHeader/TripsHeaderSkeleton.tsx @@ -1,8 +1,9 @@ -import TripsHeaderImage from '@assets/svg/TripsHeader.svg'; import { Flex, Skeleton, Theme } from 'hang-log-design-system'; import { headingStyling, imageStyling } from '@components/trips/TripsHeader/TripsHeader.style'; +import TripsHeaderImage from '@assets/svg/TripsHeader.svg'; + const TripsHeaderSkeleton = () => { return ( { return ( <> diff --git a/frontend/src/components/trips/TutorialModal/TutorialModal.style.ts b/frontend/src/components/trips/TutorialModal/TutorialModal.style.ts index c9c64636e..3bfe13949 100644 --- a/frontend/src/components/trips/TutorialModal/TutorialModal.style.ts +++ b/frontend/src/components/trips/TutorialModal/TutorialModal.style.ts @@ -1,4 +1,5 @@ import { css } from '@emotion/react'; + import { Theme } from 'hang-log-design-system'; export const boxStyling = css({ diff --git a/frontend/src/components/trips/TutorialModal/TutorialModal.tsx b/frontend/src/components/trips/TutorialModal/TutorialModal.tsx index 267fbc447..f17bbadf5 100644 --- a/frontend/src/components/trips/TutorialModal/TutorialModal.tsx +++ b/frontend/src/components/trips/TutorialModal/TutorialModal.tsx @@ -1,18 +1,22 @@ -import Tutorial1SVG from '@assets/svg/tutorial1.svg'; -import Tutorial2SVG from '@assets/svg/tutorial2.svg'; -import Tutorial3SVG from '@assets/svg/tutorial3.svg'; -import Tutorial4SVG from '@assets/svg/tutorial4.svg'; -import { mediaQueryMobileState } from '@store/mediaQuery'; -import { Button, Flex, Modal, SVGCarousel, useOverlay } from 'hang-log-design-system'; import { useEffect } from 'react'; + import { useRecoilValue } from 'recoil'; +import { Button, Flex, Modal, SVGCarousel, useOverlay } from 'hang-log-design-system'; + import { boxStyling, buttonStyling, modalStyling, } from '@components/trips/TutorialModal/TutorialModal.style'; +import { mediaQueryMobileState } from '@store/mediaQuery'; + +import Tutorial1SVG from '@assets/svg/tutorial1.svg'; +import Tutorial2SVG from '@assets/svg/tutorial2.svg'; +import Tutorial3SVG from '@assets/svg/tutorial3.svg'; +import Tutorial4SVG from '@assets/svg/tutorial4.svg'; + const TutorialModal = () => { const { isOpen: isTutorialOpen, open: openTutorial, close: closeTutorial } = useOverlay(); const isMobile = useRecoilValue(mediaQueryMobileState); diff --git a/frontend/src/hooks/api/useAddTripItemMutation.ts b/frontend/src/hooks/api/useAddTripItemMutation.ts index 171e25907..b89b7e59d 100644 --- a/frontend/src/hooks/api/useAddTripItemMutation.ts +++ b/frontend/src/hooks/api/useAddTripItemMutation.ts @@ -1,14 +1,17 @@ -import { ERROR_CODE } from '@constants/api'; -import { toastListState } from '@store/toast'; import { useMutation, useQueryClient } from '@tanstack/react-query'; + import { useSetRecoilState } from 'recoil'; -import { generateUniqueId } from '@utils/uniqueId'; +import { useTokenError } from '@hooks/member/useTokenError'; + +import { toastListState } from '@store/toast'; import type { ErrorResponseData } from '@api/interceptors'; import { postTripItem } from '@api/tripItem/postTripItem'; -import { useTokenError } from '@hooks/member/useTokenError'; +import { generateUniqueId } from '@utils/uniqueId'; + +import { ERROR_CODE } from '@constants/api'; export const useAddTripItemMutation = () => { const queryClient = useQueryClient(); diff --git a/frontend/src/hooks/api/useCityQuery.ts b/frontend/src/hooks/api/useCityQuery.ts index c77dc00ed..a3d29a631 100644 --- a/frontend/src/hooks/api/useCityQuery.ts +++ b/frontend/src/hooks/api/useCityQuery.ts @@ -1,10 +1,13 @@ -import { NETWORK } from '@constants/api'; import { useQuery } from '@tanstack/react-query'; -import type { CityData } from '@type/city'; + import type { AxiosError } from 'axios'; import { getCity } from '@api/city/getCity'; +import type { CityData } from '@type/city'; + +import { NETWORK } from '@constants/api'; + export const useCityQuery = () => { const { data } = useQuery(['city'], getCity, { retry: NETWORK.RETRY_COUNT, diff --git a/frontend/src/hooks/api/useCreateTripMutation.ts b/frontend/src/hooks/api/useCreateTripMutation.ts index c1bcf3f62..6b3eb0901 100644 --- a/frontend/src/hooks/api/useCreateTripMutation.ts +++ b/frontend/src/hooks/api/useCreateTripMutation.ts @@ -1,14 +1,17 @@ -import { ERROR_CODE } from '@constants/api'; -import { toastListState } from '@store/toast'; import { useMutation } from '@tanstack/react-query'; + import { useSetRecoilState } from 'recoil'; -import { generateUniqueId } from '@utils/uniqueId'; +import { useTokenError } from '@hooks/member/useTokenError'; + +import { toastListState } from '@store/toast'; import type { ErrorResponseData } from '@api/interceptors'; import { postTrip } from '@api/trip/postTrip'; -import { useTokenError } from '@hooks/member/useTokenError'; +import { generateUniqueId } from '@utils/uniqueId'; + +import { ERROR_CODE } from '@constants/api'; export const useCreateTripMutation = () => { const setToastList = useSetRecoilState(toastListState); diff --git a/frontend/src/hooks/api/useDayLogOrderMutation.ts b/frontend/src/hooks/api/useDayLogOrderMutation.ts index 1e88ea850..a9a8f29b0 100644 --- a/frontend/src/hooks/api/useDayLogOrderMutation.ts +++ b/frontend/src/hooks/api/useDayLogOrderMutation.ts @@ -1,14 +1,17 @@ -import { ERROR_CODE } from '@constants/api'; -import { toastListState } from '@store/toast'; import { useMutation, useQueryClient } from '@tanstack/react-query'; + import { useSetRecoilState } from 'recoil'; -import { generateUniqueId } from '@utils/uniqueId'; +import { useTokenError } from '@hooks/member/useTokenError'; + +import { toastListState } from '@store/toast'; import { patchDayLogItemOrder } from '@api/dayLog/patchDayLogItemOrder'; import type { ErrorResponseData } from '@api/interceptors'; -import { useTokenError } from '@hooks/member/useTokenError'; +import { generateUniqueId } from '@utils/uniqueId'; + +import { ERROR_CODE } from '@constants/api'; export const useDayLogOrderMutation = () => { const queryClient = useQueryClient(); diff --git a/frontend/src/hooks/api/useDayLogTitleMutation.ts b/frontend/src/hooks/api/useDayLogTitleMutation.ts index 8e58a696c..0aa500751 100644 --- a/frontend/src/hooks/api/useDayLogTitleMutation.ts +++ b/frontend/src/hooks/api/useDayLogTitleMutation.ts @@ -1,14 +1,17 @@ -import { ERROR_CODE } from '@constants/api'; -import { toastListState } from '@store/toast'; import { useMutation, useQueryClient } from '@tanstack/react-query'; + import { useSetRecoilState } from 'recoil'; -import { generateUniqueId } from '@utils/uniqueId'; +import { useTokenError } from '@hooks/member/useTokenError'; + +import { toastListState } from '@store/toast'; import { patchDayLogTitle } from '@api/dayLog/patchDayLogTitle'; import type { ErrorResponseData } from '@api/interceptors'; -import { useTokenError } from '@hooks/member/useTokenError'; +import { generateUniqueId } from '@utils/uniqueId'; + +import { ERROR_CODE } from '@constants/api'; export const useDayLogTitleMutation = () => { const queryClient = useQueryClient(); diff --git a/frontend/src/hooks/api/useDeleteTripItemMutation.ts b/frontend/src/hooks/api/useDeleteTripItemMutation.ts index a4abd268b..73f102cbb 100644 --- a/frontend/src/hooks/api/useDeleteTripItemMutation.ts +++ b/frontend/src/hooks/api/useDeleteTripItemMutation.ts @@ -1,15 +1,19 @@ -import { ERROR_CODE } from '@constants/api'; -import { toastListState } from '@store/toast'; import { useMutation, useQueryClient } from '@tanstack/react-query'; -import type { TripData } from '@type/trip'; + import { useSetRecoilState } from 'recoil'; -import { generateUniqueId } from '@utils/uniqueId'; +import { useTokenError } from '@hooks/member/useTokenError'; + +import { toastListState } from '@store/toast'; import type { ErrorResponseData } from '@api/interceptors'; import { deleteTripItem } from '@api/tripItem/deleteTripItem'; -import { useTokenError } from '@hooks/member/useTokenError'; +import { generateUniqueId } from '@utils/uniqueId'; + +import type { TripData } from '@type/trip'; + +import { ERROR_CODE } from '@constants/api'; export const useDeleteTripItemMutation = () => { const queryClient = useQueryClient(); diff --git a/frontend/src/hooks/api/useDeleteTripMutation.ts b/frontend/src/hooks/api/useDeleteTripMutation.ts index 7788f8495..df12da2f7 100644 --- a/frontend/src/hooks/api/useDeleteTripMutation.ts +++ b/frontend/src/hooks/api/useDeleteTripMutation.ts @@ -1,14 +1,17 @@ -import { ERROR_CODE } from '@constants/api'; -import { toastListState } from '@store/toast'; import { useMutation, useQueryClient } from '@tanstack/react-query'; + import { useSetRecoilState } from 'recoil'; -import { generateUniqueId } from '@utils/uniqueId'; +import { useTokenError } from '@hooks/member/useTokenError'; + +import { toastListState } from '@store/toast'; import type { ErrorResponseData } from '@api/interceptors'; import { deleteTrip } from '@api/trip/deleteTrip'; -import { useTokenError } from '@hooks/member/useTokenError'; +import { generateUniqueId } from '@utils/uniqueId'; + +import { ERROR_CODE } from '@constants/api'; export const useDeleteTripMutation = () => { const queryClient = useQueryClient(); diff --git a/frontend/src/hooks/api/useExpenseCategoryQuery.ts b/frontend/src/hooks/api/useExpenseCategoryQuery.ts index 5d0a44a34..3e3aecffb 100644 --- a/frontend/src/hooks/api/useExpenseCategoryQuery.ts +++ b/frontend/src/hooks/api/useExpenseCategoryQuery.ts @@ -1,10 +1,13 @@ -import { NETWORK } from '@constants/api'; import { useQuery } from '@tanstack/react-query'; -import type { ExpenseCategoryData } from '@type/expense'; + import type { AxiosError } from 'axios'; import { getExpenseCategory } from '@api/expense/getExpenseCategory'; +import type { ExpenseCategoryData } from '@type/expense'; + +import { NETWORK } from '@constants/api'; + export const useExpenseCategoryQuery = () => { const { data } = useQuery( ['expenseCategory'], diff --git a/frontend/src/hooks/api/useExpenseQuery.ts b/frontend/src/hooks/api/useExpenseQuery.ts index 84adfc5f6..c2e2d5e0d 100644 --- a/frontend/src/hooks/api/useExpenseQuery.ts +++ b/frontend/src/hooks/api/useExpenseQuery.ts @@ -1,10 +1,13 @@ -import { NETWORK } from '@constants/api'; import { useQuery } from '@tanstack/react-query'; -import type { ExpenseData } from '@type/expense'; + import type { AxiosError } from 'axios'; import { getExpense } from '@api/expense/getExpense'; +import type { ExpenseData } from '@type/expense'; + +import { NETWORK } from '@constants/api'; + export const useExpenseQuery = (tripId: number) => { const { data } = useQuery( ['expense', tripId], diff --git a/frontend/src/hooks/api/useImageMutation.ts b/frontend/src/hooks/api/useImageMutation.ts index cb2c1048a..002e25ff6 100644 --- a/frontend/src/hooks/api/useImageMutation.ts +++ b/frontend/src/hooks/api/useImageMutation.ts @@ -1,14 +1,17 @@ -import { ERROR_CODE } from '@constants/api'; -import { toastListState } from '@store/toast'; import { useMutation } from '@tanstack/react-query'; + import { useSetRecoilState } from 'recoil'; -import { generateUniqueId } from '@utils/uniqueId'; +import { useTokenError } from '@hooks/member/useTokenError'; + +import { toastListState } from '@store/toast'; import { postImage } from '@api/image/postImage'; import type { ErrorResponseData } from '@api/interceptors'; -import { useTokenError } from '@hooks/member/useTokenError'; +import { generateUniqueId } from '@utils/uniqueId'; + +import { ERROR_CODE } from '@constants/api'; export const useImageMutation = () => { const setToastList = useSetRecoilState(toastListState); diff --git a/frontend/src/hooks/api/useLogInMutation.ts b/frontend/src/hooks/api/useLogInMutation.ts index f58a3e7c1..cbc308de9 100644 --- a/frontend/src/hooks/api/useLogInMutation.ts +++ b/frontend/src/hooks/api/useLogInMutation.ts @@ -1,16 +1,20 @@ -import { ACCESS_TOKEN_KEY } from '@constants/api'; -import { PATH } from '@constants/path'; -import { isLoggedInState } from '@store/auth'; -import { toastListState } from '@store/toast'; -import { useMutation } from '@tanstack/react-query'; import { useNavigate } from 'react-router-dom'; + +import { useMutation } from '@tanstack/react-query'; + import { useSetRecoilState } from 'recoil'; -import { generateUniqueId } from '@utils/uniqueId'; +import { isLoggedInState } from '@store/auth'; +import { toastListState } from '@store/toast'; import { axiosInstance } from '@api/axiosInstance'; import { postLogIn } from '@api/member/postLogIn'; +import { generateUniqueId } from '@utils/uniqueId'; + +import { ACCESS_TOKEN_KEY } from '@constants/api'; +import { PATH } from '@constants/path'; + export const useLogInMutation = () => { const navigate = useNavigate(); diff --git a/frontend/src/hooks/api/useLogOutMutation.ts b/frontend/src/hooks/api/useLogOutMutation.ts index 3060930d3..b8aa20fc5 100644 --- a/frontend/src/hooks/api/useLogOutMutation.ts +++ b/frontend/src/hooks/api/useLogOutMutation.ts @@ -1,15 +1,19 @@ -import { ACCESS_TOKEN_KEY } from '@constants/api'; -import { PATH } from '@constants/path'; -import { isLoggedInState } from '@store/auth'; -import { toastListState } from '@store/toast'; -import { useMutation, useQueryClient } from '@tanstack/react-query'; import { useNavigate } from 'react-router-dom'; + +import { useMutation, useQueryClient } from '@tanstack/react-query'; + import { useSetRecoilState } from 'recoil'; -import { generateUniqueId } from '@utils/uniqueId'; +import { isLoggedInState } from '@store/auth'; +import { toastListState } from '@store/toast'; import { postLogout } from '@api/member/postLogOut'; +import { generateUniqueId } from '@utils/uniqueId'; + +import { ACCESS_TOKEN_KEY } from '@constants/api'; +import { PATH } from '@constants/path'; + export const useLogOutMutation = () => { const navigate = useNavigate(); diff --git a/frontend/src/hooks/api/useTripEditMutation.ts b/frontend/src/hooks/api/useTripEditMutation.ts index 763726bf1..5d30158ec 100644 --- a/frontend/src/hooks/api/useTripEditMutation.ts +++ b/frontend/src/hooks/api/useTripEditMutation.ts @@ -1,14 +1,17 @@ -import { ERROR_CODE } from '@constants/api'; -import { toastListState } from '@store/toast'; import { useMutation, useQueryClient } from '@tanstack/react-query'; + import { useSetRecoilState } from 'recoil'; -import { generateUniqueId } from '@utils/uniqueId'; +import { useTokenError } from '@hooks/member/useTokenError'; + +import { toastListState } from '@store/toast'; import type { ErrorResponseData } from '@api/interceptors'; import { putTrip } from '@api/trip/putTrip'; -import { useTokenError } from '@hooks/member/useTokenError'; +import { generateUniqueId } from '@utils/uniqueId'; + +import { ERROR_CODE } from '@constants/api'; export const useTripEditMutation = () => { const queryClient = useQueryClient(); diff --git a/frontend/src/hooks/api/useTripQuery.ts b/frontend/src/hooks/api/useTripQuery.ts index 9aa013526..3e629f037 100644 --- a/frontend/src/hooks/api/useTripQuery.ts +++ b/frontend/src/hooks/api/useTripQuery.ts @@ -1,10 +1,13 @@ -import { NETWORK } from '@constants/api'; import { useQuery } from '@tanstack/react-query'; -import type { TripData } from '@type/trip'; + import type { AxiosError } from 'axios'; import { getTrip } from '@api/trip/getTrip'; +import type { TripData } from '@type/trip'; + +import { NETWORK } from '@constants/api'; + export const useTripQuery = (tripId: number) => { const { data } = useQuery(['trip', tripId], () => getTrip(tripId), { retry: NETWORK.RETRY_COUNT, diff --git a/frontend/src/hooks/api/useTripsQuery.ts b/frontend/src/hooks/api/useTripsQuery.ts index e353a0afb..ffcbaba91 100644 --- a/frontend/src/hooks/api/useTripsQuery.ts +++ b/frontend/src/hooks/api/useTripsQuery.ts @@ -1,10 +1,13 @@ -import { NETWORK } from '@constants/api'; import { useQuery } from '@tanstack/react-query'; -import type { TripsData } from '@type/trips'; + import type { AxiosError } from 'axios'; import { getTrips } from '@api/trips/getTrips'; +import type { TripsData } from '@type/trips'; + +import { NETWORK } from '@constants/api'; + export const useTripsQuery = () => { const { data } = useQuery(['trips'], getTrips, { retry: NETWORK.RETRY_COUNT, diff --git a/frontend/src/hooks/api/useUpdateTripItemMutation.ts b/frontend/src/hooks/api/useUpdateTripItemMutation.ts index 284e1188e..2bcf95e0a 100644 --- a/frontend/src/hooks/api/useUpdateTripItemMutation.ts +++ b/frontend/src/hooks/api/useUpdateTripItemMutation.ts @@ -1,14 +1,17 @@ -import { ERROR_CODE } from '@constants/api'; -import { toastListState } from '@store/toast'; import { useMutation, useQueryClient } from '@tanstack/react-query'; + import { useSetRecoilState } from 'recoil'; -import { generateUniqueId } from '@utils/uniqueId'; +import { useTokenError } from '@hooks/member/useTokenError'; + +import { toastListState } from '@store/toast'; import type { ErrorResponseData } from '@api/interceptors'; import { putTripItem } from '@api/tripItem/putTripItem'; -import { useTokenError } from '@hooks/member/useTokenError'; +import { generateUniqueId } from '@utils/uniqueId'; + +import { ERROR_CODE } from '@constants/api'; export const useUpdateTripItemMutation = () => { const queryClient = useQueryClient(); diff --git a/frontend/src/hooks/api/useUserInfoMutation.ts b/frontend/src/hooks/api/useUserInfoMutation.ts index 16324a163..80d699dad 100644 --- a/frontend/src/hooks/api/useUserInfoMutation.ts +++ b/frontend/src/hooks/api/useUserInfoMutation.ts @@ -1,14 +1,17 @@ -import { ERROR_CODE } from '@constants/api'; -import { toastListState } from '@store/toast'; import { useMutation, useQueryClient } from '@tanstack/react-query'; + import { useSetRecoilState } from 'recoil'; -import { generateUniqueId } from '@utils/uniqueId'; +import { useTokenError } from '@hooks/member/useTokenError'; + +import { toastListState } from '@store/toast'; import type { ErrorResponseData } from '@api/interceptors'; import { putUserInfo } from '@api/member/putUserInfo'; -import { useTokenError } from '@hooks/member/useTokenError'; +import { generateUniqueId } from '@utils/uniqueId'; + +import { ERROR_CODE } from '@constants/api'; export const useUserInfoMutation = () => { const queryClient = useQueryClient(); diff --git a/frontend/src/hooks/api/useUserInfoQuery.ts b/frontend/src/hooks/api/useUserInfoQuery.ts index 1b1fd1ff8..ab3ac2c7a 100644 --- a/frontend/src/hooks/api/useUserInfoQuery.ts +++ b/frontend/src/hooks/api/useUserInfoQuery.ts @@ -1,10 +1,13 @@ -import { NETWORK } from '@constants/api'; import { useQuery } from '@tanstack/react-query'; -import type { UserData } from '@type/member'; + import type { AxiosError } from 'axios'; import { getUserInfo } from '@api/member/getUserInfo'; +import type { UserData } from '@type/member'; + +import { NETWORK } from '@constants/api'; + export const useUserInfoQuery = () => { const { data } = useQuery(['userInfo'], getUserInfo, { retry: NETWORK.RETRY_COUNT, diff --git a/frontend/src/hooks/common/useAutoScroll.ts b/frontend/src/hooks/common/useAutoScroll.ts index 6d3874081..1022e0e26 100644 --- a/frontend/src/hooks/common/useAutoScroll.ts +++ b/frontend/src/hooks/common/useAutoScroll.ts @@ -1,5 +1,5 @@ -import { useCallback } from 'react'; import type { RefObject } from 'react'; +import { useCallback } from 'react'; export const useAutoScroll = ( listRef: RefObject, diff --git a/frontend/src/hooks/common/useCityDateForm.ts b/frontend/src/hooks/common/useCityDateForm.ts index 3c47cf804..9e0b112c0 100644 --- a/frontend/src/hooks/common/useCityDateForm.ts +++ b/frontend/src/hooks/common/useCityDateForm.ts @@ -1,6 +1,7 @@ +import { useCallback, useEffect, useState } from 'react'; + import type { CityData } from '@type/city'; import type { DateRangeData, NewTripData } from '@type/trips'; -import { useCallback, useEffect, useState } from 'react'; const defaultTripData = { startDate: null, diff --git a/frontend/src/hooks/common/useCitySuggestion.ts b/frontend/src/hooks/common/useCitySuggestion.ts index 5bccec133..4f326938d 100644 --- a/frontend/src/hooks/common/useCitySuggestion.ts +++ b/frontend/src/hooks/common/useCitySuggestion.ts @@ -1,10 +1,12 @@ -import { useQueryClient } from '@tanstack/react-query'; -import type { CityData } from '@type/city'; import { useCallback, useEffect, useState } from 'react'; +import { useQueryClient } from '@tanstack/react-query'; + import { makeRegexByCho } from '@utils/cityFilter'; import { formatStringToLetter } from '@utils/formatter'; +import type { CityData } from '@type/city'; + interface useCitySuggestionPrams { onItemSelect: (city: CityData) => void; } diff --git a/frontend/src/hooks/common/useCityTags.ts b/frontend/src/hooks/common/useCityTags.ts index a8e33b2e2..4591a6e25 100644 --- a/frontend/src/hooks/common/useCityTags.ts +++ b/frontend/src/hooks/common/useCityTags.ts @@ -1,7 +1,9 @@ -import { CITY_TAG_MAX_LENGTH } from '@constants/ui'; -import type { CityData } from '@type/city'; import { useState } from 'react'; +import type { CityData } from '@type/city'; + +import { CITY_TAG_MAX_LENGTH } from '@constants/ui'; + export const useCityTags = (initialCityTags: CityData[]) => { const [cityTags, setCityTags] = useState(initialCityTags); diff --git a/frontend/src/hooks/common/useImageUpload.ts b/frontend/src/hooks/common/useImageUpload.ts index 5e8985a56..c390df3fe 100644 --- a/frontend/src/hooks/common/useImageUpload.ts +++ b/frontend/src/hooks/common/useImageUpload.ts @@ -1,9 +1,10 @@ -import { TRIP_ITEM_ADD_MAX_IMAGE_UPLOAD_COUNT } from '@constants/ui'; import type { ChangeEvent } from 'react'; import { useState } from 'react'; import { useImageMutation } from '@hooks/api/useImageMutation'; +import { TRIP_ITEM_ADD_MAX_IMAGE_UPLOAD_COUNT } from '@constants/ui'; + interface UseImageUploadParams { initialImageUrls: string[]; maxUploadCount?: number; diff --git a/frontend/src/hooks/common/useMediaQuery.ts b/frontend/src/hooks/common/useMediaQuery.ts index e3c6f53d4..efdd3e0ad 100644 --- a/frontend/src/hooks/common/useMediaQuery.ts +++ b/frontend/src/hooks/common/useMediaQuery.ts @@ -1,8 +1,11 @@ -import { MOBILE_MEDIA_QUERY_SIZE } from '@constants/ui'; -import { mediaQueryMobileState, viewportWidthState } from '@store/mediaQuery'; import { useCallback, useEffect, useRef } from 'react'; + import { useSetRecoilState } from 'recoil'; +import { mediaQueryMobileState, viewportWidthState } from '@store/mediaQuery'; + +import { MOBILE_MEDIA_QUERY_SIZE } from '@constants/ui'; + export const useMediaQuery = () => { const setViewportWidth = useSetRecoilState(viewportWidthState); const setIsMobile = useSetRecoilState(mediaQueryMobileState); diff --git a/frontend/src/hooks/common/useResetError.ts b/frontend/src/hooks/common/useResetError.ts index 14b7b12b5..f05d56133 100644 --- a/frontend/src/hooks/common/useResetError.ts +++ b/frontend/src/hooks/common/useResetError.ts @@ -1,10 +1,11 @@ -import { HTTP_STATUS_CODE } from '@constants/api'; -import { PATH } from '@constants/path'; import { useCallback } from 'react'; import { useNavigate } from 'react-router-dom'; import { HTTPError } from '@api/HTTPError'; +import { HTTP_STATUS_CODE } from '@constants/api'; +import { PATH } from '@constants/path'; + export const useResetError = () => { const navigate = useNavigate(); diff --git a/frontend/src/hooks/common/useScrollFocus.ts b/frontend/src/hooks/common/useScrollFocus.ts index 61f0f5ac5..926ba3a54 100644 --- a/frontend/src/hooks/common/useScrollFocus.ts +++ b/frontend/src/hooks/common/useScrollFocus.ts @@ -1,7 +1,9 @@ -import { focusedIdState } from '@store/scrollFocus'; import { useCallback, useEffect, useState } from 'react'; + import { useSetRecoilState } from 'recoil'; +import { focusedIdState } from '@store/scrollFocus'; + const initialOption = { root: null, rootMargin: '-56% 0px -44% 0px', diff --git a/frontend/src/hooks/expense/useExpense.ts b/frontend/src/hooks/expense/useExpense.ts index 259969ce2..6edf69498 100644 --- a/frontend/src/hooks/expense/useExpense.ts +++ b/frontend/src/hooks/expense/useExpense.ts @@ -1,6 +1,8 @@ +import { useCallback, useMemo } from 'react'; + import { useQueryClient } from '@tanstack/react-query'; + import type { ExpenseData, ExpenseItemData } from '@type/expense'; -import { useCallback, useMemo } from 'react'; export const useExpense = (tripId: number) => { const queryClient = useQueryClient(); diff --git a/frontend/src/hooks/member/useEditUserProfileForm.ts b/frontend/src/hooks/member/useEditUserProfileForm.ts index fca697061..3dcd8e8bc 100644 --- a/frontend/src/hooks/member/useEditUserProfileForm.ts +++ b/frontend/src/hooks/member/useEditUserProfileForm.ts @@ -1,10 +1,11 @@ -import type { UserData } from '@type/member'; import type { FormEvent } from 'react'; import { useCallback, useState } from 'react'; +import { useUserInfoMutation } from '@hooks/api/useUserInfoMutation'; + import { isEmptyString } from '@utils/validator'; -import { useUserInfoMutation } from '@hooks/api/useUserInfoMutation'; +import type { UserData } from '@type/member'; export const useEditUserProfileForm = (initialData: UserData) => { const userInfoMutation = useUserInfoMutation(); diff --git a/frontend/src/hooks/member/useTokenError.ts b/frontend/src/hooks/member/useTokenError.ts index fdb47cb01..5b01b9786 100644 --- a/frontend/src/hooks/member/useTokenError.ts +++ b/frontend/src/hooks/member/useTokenError.ts @@ -1,12 +1,15 @@ -import { ACCESS_TOKEN_KEY } from '@constants/api'; -import { PATH } from '@constants/path'; -import { isLoggedInState } from '@store/auth'; -import { toastListState } from '@store/toast'; import { useNavigate } from 'react-router-dom'; + import { useSetRecoilState } from 'recoil'; +import { isLoggedInState } from '@store/auth'; +import { toastListState } from '@store/toast'; + import { generateUniqueId } from '@utils/uniqueId'; +import { ACCESS_TOKEN_KEY } from '@constants/api'; +import { PATH } from '@constants/path'; + export const useTokenError = () => { const navigate = useNavigate(); diff --git a/frontend/src/hooks/trip/useAddTripItemForm.ts b/frontend/src/hooks/trip/useAddTripItemForm.ts index 65326561e..0fbf26f8a 100644 --- a/frontend/src/hooks/trip/useAddTripItemForm.ts +++ b/frontend/src/hooks/trip/useAddTripItemForm.ts @@ -1,12 +1,13 @@ -import type { TripItemFormData } from '@type/tripItem'; import type { FormEvent } from 'react'; import { useCallback, useState } from 'react'; -import { isEmptyString } from '@utils/validator'; - import { useAddTripItemMutation } from '@hooks/api/useAddTripItemMutation'; import { useUpdateTripItemMutation } from '@hooks/api/useUpdateTripItemMutation'; +import { isEmptyString } from '@utils/validator'; + +import type { TripItemFormData } from '@type/tripItem'; + interface UseAddTripItemFormParams { tripId: number; initialDayLogId: number; diff --git a/frontend/src/hooks/trip/useTripDates.ts b/frontend/src/hooks/trip/useTripDates.ts index b56ae79e4..5a73d49ad 100644 --- a/frontend/src/hooks/trip/useTripDates.ts +++ b/frontend/src/hooks/trip/useTripDates.ts @@ -1,4 +1,5 @@ import { useQueryClient } from '@tanstack/react-query'; + import type { TripData } from '@type/trip'; export const useTripDates = (tripId: number) => { diff --git a/frontend/src/hooks/trip/useTripEditForm.ts b/frontend/src/hooks/trip/useTripEditForm.ts index 0b88690ac..7e883e2b7 100644 --- a/frontend/src/hooks/trip/useTripEditForm.ts +++ b/frontend/src/hooks/trip/useTripEditForm.ts @@ -1,12 +1,13 @@ -import type { TripData } from '@type/trip'; import { useEffect, useState } from 'react'; import type { ChangeEvent, FormEvent } from 'react'; -import { isEmptyString } from '@utils/validator'; - import { useTripEditMutation } from '@hooks/api/useTripEditMutation'; import { useCityDateForm } from '@hooks/common/useCityDateForm'; +import { isEmptyString } from '@utils/validator'; + +import type { TripData } from '@type/trip'; + export const useTripEditForm = ( { id: tripId, diff --git a/frontend/src/hooks/trip/useTripItemExpenseInput.ts b/frontend/src/hooks/trip/useTripItemExpenseInput.ts index 0d088f9d9..216c4ad43 100644 --- a/frontend/src/hooks/trip/useTripItemExpenseInput.ts +++ b/frontend/src/hooks/trip/useTripItemExpenseInput.ts @@ -1,9 +1,12 @@ -import { DEFAULT_CURRENCY } from '@constants/trip'; +import type { ChangeEvent } from 'react'; +import { useState } from 'react'; + import { useQueryClient } from '@tanstack/react-query'; + import type { ExpenseCategoryData } from '@type/expense'; import type { TripItemFormData } from '@type/tripItem'; -import type { ChangeEvent } from 'react'; -import { useState } from 'react'; + +import { DEFAULT_CURRENCY } from '@constants/trip'; export const useTripItemExpenseInput = ( updateInputValue: (key: K, value: TripItemFormData[K]) => void, diff --git a/frontend/src/hooks/trip/useTripItemPlaceInput.ts b/frontend/src/hooks/trip/useTripItemPlaceInput.ts index c0b8a0304..344907105 100644 --- a/frontend/src/hooks/trip/useTripItemPlaceInput.ts +++ b/frontend/src/hooks/trip/useTripItemPlaceInput.ts @@ -1,7 +1,8 @@ -import type { TripItemFormData } from '@type/tripItem'; import type { ChangeEvent, KeyboardEvent } from 'react'; import { useCallback, useEffect, useRef, useState } from 'react'; +import type { TripItemFormData } from '@type/tripItem'; + export const useTripItemPlaceInput = ( updateInputValue: (key: K, value: TripItemFormData[K]) => void, disableError: () => void, diff --git a/frontend/src/index.tsx b/frontend/src/index.tsx index cc85909fd..e8704c84f 100644 --- a/frontend/src/index.tsx +++ b/frontend/src/index.tsx @@ -1,15 +1,21 @@ import { Global } from '@emotion/react'; -import { worker } from '@mocks/browser'; -import AppRouter from '@router/AppRouter'; -import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; -import { ReactQueryDevtools } from '@tanstack/react-query-devtools'; -import { HangLogProvider } from 'hang-log-design-system'; + import { StrictMode } from 'react'; import { createRoot } from 'react-dom/client'; + +import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; +import { ReactQueryDevtools } from '@tanstack/react-query-devtools'; + import { RecoilRoot } from 'recoil'; +import { HangLogProvider } from 'hang-log-design-system'; + +import AppRouter from '@router/AppRouter'; + import { GlobalStyle } from '@styles/index'; +import { worker } from '@mocks/browser'; + const main = async () => { if (process.env.NODE_ENV === 'development') { await worker.start({ diff --git a/frontend/src/mocks/browser.ts b/frontend/src/mocks/browser.ts index 3dbefcec5..6047020d0 100644 --- a/frontend/src/mocks/browser.ts +++ b/frontend/src/mocks/browser.ts @@ -1,4 +1,5 @@ -import { handlers } from '@mocks/handlers'; import { setupWorker } from 'msw'; +import { handlers } from '@mocks/handlers'; + export const worker = setupWorker(...handlers); diff --git a/frontend/src/mocks/handlers/city.ts b/frontend/src/mocks/handlers/city.ts index 2e402832e..f57d57a94 100644 --- a/frontend/src/mocks/handlers/city.ts +++ b/frontend/src/mocks/handlers/city.ts @@ -1,6 +1,8 @@ +import { rest } from 'msw'; + import { END_POINTS, HTTP_STATUS_CODE } from '@constants/api'; + import { cities } from '@mocks/data/city'; -import { rest } from 'msw'; export const cityHandlers = [ rest.get(END_POINTS.CITY, (_, res, ctx) => { diff --git a/frontend/src/mocks/handlers/dayLog.ts b/frontend/src/mocks/handlers/dayLog.ts index 8c31f20fa..cab0b2160 100644 --- a/frontend/src/mocks/handlers/dayLog.ts +++ b/frontend/src/mocks/handlers/dayLog.ts @@ -1,9 +1,11 @@ -import { HTTP_STATUS_CODE } from '@constants/api'; -import { trip } from '@mocks/data/trip'; import { rest } from 'msw'; import type { PatchDayLogTitleRequestBody } from '@api/dayLog/patchDayLogTitle'; +import { HTTP_STATUS_CODE } from '@constants/api'; + +import { trip } from '@mocks/data/trip'; + export const dayLogHandlers = [ rest.patch('/trips/:tripId/daylogs/:dayLogId/order', async (req, res, ctx) => { return res(ctx.status(HTTP_STATUS_CODE.NO_CONTENT)); diff --git a/frontend/src/mocks/handlers/expense.ts b/frontend/src/mocks/handlers/expense.ts index 56f56a5c7..e47b8109e 100644 --- a/frontend/src/mocks/handlers/expense.ts +++ b/frontend/src/mocks/handlers/expense.ts @@ -1,6 +1,8 @@ +import { rest } from 'msw'; + import { END_POINTS, HTTP_STATUS_CODE } from '@constants/api'; + import { expense, expenseCategories } from '@mocks/data/expense'; -import { rest } from 'msw'; export const expenseHandlers = [ rest.get(END_POINTS.EXPENSE(':tripId'), (_, res, ctx) => { diff --git a/frontend/src/mocks/handlers/image.ts b/frontend/src/mocks/handlers/image.ts index 4c26b063c..d61c3a61b 100644 --- a/frontend/src/mocks/handlers/image.ts +++ b/frontend/src/mocks/handlers/image.ts @@ -1,6 +1,8 @@ +import { rest } from 'msw'; + import { END_POINTS, HTTP_STATUS_CODE } from '@constants/api'; + import { images } from '@mocks/data/image'; -import { rest } from 'msw'; export const imageHandlers = [ rest.post(END_POINTS.IMAGES, (_, res, ctx) => { diff --git a/frontend/src/mocks/handlers/member.ts b/frontend/src/mocks/handlers/member.ts index dc94fac65..cf0ec1548 100644 --- a/frontend/src/mocks/handlers/member.ts +++ b/frontend/src/mocks/handlers/member.ts @@ -1,7 +1,10 @@ +import { rest } from 'msw'; + +import type { UserData } from '@type/member'; + import { END_POINTS } from '@constants/api'; + import { accessToken, refreshToken, userInfo } from '@mocks/data/member'; -import type { UserData } from '@type/member'; -import { rest } from 'msw'; export const memberHandlers = [ rest.post(END_POINTS.LOGIN(':provider'), (_, res, ctx) => { diff --git a/frontend/src/mocks/handlers/tripItem.ts b/frontend/src/mocks/handlers/tripItem.ts index 1ac2571d0..4ceda5c73 100644 --- a/frontend/src/mocks/handlers/tripItem.ts +++ b/frontend/src/mocks/handlers/tripItem.ts @@ -1,8 +1,11 @@ /* eslint-disable no-nested-ternary */ +import { rest } from 'msw'; + +import type { CurrencyType, TripItemFormData } from '@type/tripItem'; + import { HTTP_STATUS_CODE } from '@constants/api'; + import { trip } from '@mocks/data/trip'; -import type { CurrencyType, TripItemFormData } from '@type/tripItem'; -import { rest } from 'msw'; export const tripItemHandlers = [ rest.post('/trips/:tripId/items', async (req, res, ctx) => { diff --git a/frontend/src/mocks/handlers/trips.ts b/frontend/src/mocks/handlers/trips.ts index ac895e832..acd50a263 100644 --- a/frontend/src/mocks/handlers/trips.ts +++ b/frontend/src/mocks/handlers/trips.ts @@ -1,8 +1,11 @@ +import { rest } from 'msw'; + +import type { TripFormData } from '@type/trip'; + import { END_POINTS, HTTP_STATUS_CODE } from '@constants/api'; + import { trip } from '@mocks/data/trip'; import { trips } from '@mocks/data/trips'; -import type { TripFormData } from '@type/trip'; -import { rest } from 'msw'; export const tripsHandlers = [ rest.get(`${END_POINTS.TRIPS}`, (_, res, ctx) => { diff --git a/frontend/src/pages/ExpensePage/ExpensePage.style.ts b/frontend/src/pages/ExpensePage/ExpensePage.style.ts index 8ba1f603c..0f10fe9a5 100644 --- a/frontend/src/pages/ExpensePage/ExpensePage.style.ts +++ b/frontend/src/pages/ExpensePage/ExpensePage.style.ts @@ -1,4 +1,5 @@ import { css } from '@emotion/react'; + import { Theme } from 'hang-log-design-system'; export const containerStyling = css({ diff --git a/frontend/src/pages/ExpensePage/ExpensePage.tsx b/frontend/src/pages/ExpensePage/ExpensePage.tsx index 4d876916f..5b8066a63 100644 --- a/frontend/src/pages/ExpensePage/ExpensePage.tsx +++ b/frontend/src/pages/ExpensePage/ExpensePage.tsx @@ -1,15 +1,18 @@ -import { mediaQueryMobileState } from '@store/mediaQuery'; -import { Divider, Flex } from 'hang-log-design-system'; import { useParams } from 'react-router-dom'; + import { useRecoilValue } from 'recoil'; -import { useExpenseQuery } from '@hooks/api/useExpenseQuery'; +import { Divider, Flex } from 'hang-log-design-system'; import { containerStyling, dividerStyling } from '@pages/ExpensePage/ExpensePage.style'; import ExpenseListSection from '@components/expense/ExpenseListSection/ExpenseListSection'; import TotalExpenseSection from '@components/expense/TotalExpenseSection/TotalExpenseSection'; +import { useExpenseQuery } from '@hooks/api/useExpenseQuery'; + +import { mediaQueryMobileState } from '@store/mediaQuery'; + const ExpensePage = () => { const { tripId } = useParams(); diff --git a/frontend/src/pages/ExpensePage/ExpensePageSkeleton.tsx b/frontend/src/pages/ExpensePage/ExpensePageSkeleton.tsx index 06f8ec426..83678068b 100644 --- a/frontend/src/pages/ExpensePage/ExpensePageSkeleton.tsx +++ b/frontend/src/pages/ExpensePage/ExpensePageSkeleton.tsx @@ -1,12 +1,14 @@ -import { mediaQueryMobileState } from '@store/mediaQuery'; -import { Divider, Flex } from 'hang-log-design-system'; import { useRecoilValue } from 'recoil'; +import { Divider, Flex } from 'hang-log-design-system'; + import { containerStyling, dividerStyling } from '@pages/ExpensePage/ExpensePage.style'; import ExpenseListSectionSkeleton from '@components/expense/ExpenseListSection/ExpenseListSectionSkeleton'; import TotalExpenseSectionSkeleton from '@components/expense/TotalExpenseSection/TotalExpenseSectionSkeleton'; +import { mediaQueryMobileState } from '@store/mediaQuery'; + const ExpensePageSkeleton = () => { const isMobile = useRecoilValue(mediaQueryMobileState); diff --git a/frontend/src/pages/IntroPage/IntroPage.style.ts b/frontend/src/pages/IntroPage/IntroPage.style.ts index a6cf6a9fa..de6d1cf50 100644 --- a/frontend/src/pages/IntroPage/IntroPage.style.ts +++ b/frontend/src/pages/IntroPage/IntroPage.style.ts @@ -1,4 +1,5 @@ import { css } from '@emotion/react'; + import { Theme } from 'hang-log-design-system'; export const containerStyling = css({ diff --git a/frontend/src/pages/IntroPage/IntroPage.tsx b/frontend/src/pages/IntroPage/IntroPage.tsx index 7be865997..6e3ab94f6 100644 --- a/frontend/src/pages/IntroPage/IntroPage.tsx +++ b/frontend/src/pages/IntroPage/IntroPage.tsx @@ -1,11 +1,9 @@ -import SampleTripImage from '@assets/png/sample-trip-image.png'; -import SampleTripImageMobile from '@assets/png/sample-trip-image_mobile.png'; -import { PATH } from '@constants/path'; -import { mediaQueryMobileState } from '@store/mediaQuery'; -import { Button, Flex, Heading, Theme } from 'hang-log-design-system'; import { useNavigate } from 'react-router-dom'; + import { useRecoilValue } from 'recoil'; +import { Button, Flex, Heading, Theme } from 'hang-log-design-system'; + import { containerStyling, headingStyling, @@ -13,6 +11,13 @@ import { titleStyling, } from '@pages/IntroPage/IntroPage.style'; +import { mediaQueryMobileState } from '@store/mediaQuery'; + +import { PATH } from '@constants/path'; + +import SampleTripImage from '@assets/png/sample-trip-image.png'; +import SampleTripImageMobile from '@assets/png/sample-trip-image_mobile.png'; + const IntroPage = () => { const navigate = useNavigate(); diff --git a/frontend/src/pages/LogInPage/LogInPage.tsx b/frontend/src/pages/LogInPage/LogInPage.tsx index c5a2d9044..2aeeb3f5d 100644 --- a/frontend/src/pages/LogInPage/LogInPage.tsx +++ b/frontend/src/pages/LogInPage/LogInPage.tsx @@ -1,5 +1,3 @@ -import AuthImage from '@assets/svg/auth-image.svg'; -import LogoVertical from '@assets/svg/logo-vertical.svg'; import { Flex, Heading, Theme } from 'hang-log-design-system'; import { @@ -12,6 +10,9 @@ import { import GoogleButton from '@components/common/GoogleButton/GoogleButton'; import KakaoButton from '@components/common/KakaoButton/KakaoButton'; +import AuthImage from '@assets/svg/auth-image.svg'; +import LogoVertical from '@assets/svg/logo-vertical.svg'; + const LogInPage = () => { return ( { const isMobile = useRecoilValue(mediaQueryMobileState); diff --git a/frontend/src/pages/NotFoundPage/NotFoundPage.tsx b/frontend/src/pages/NotFoundPage/NotFoundPage.tsx index 1d4c7703f..484f938f4 100644 --- a/frontend/src/pages/NotFoundPage/NotFoundPage.tsx +++ b/frontend/src/pages/NotFoundPage/NotFoundPage.tsx @@ -1,9 +1,10 @@ -import { PATH } from '@constants/path'; import { useNavigate } from 'react-router-dom'; +import Error from '@components/common/Error/Error'; + import { useMediaQuery } from '@hooks/common/useMediaQuery'; -import Error from '@components/common/Error/Error'; +import { PATH } from '@constants/path'; const NotFoundPage = () => { const navigate = useNavigate(); diff --git a/frontend/src/pages/RedirectPage/RedirectPage.tsx b/frontend/src/pages/RedirectPage/RedirectPage.tsx index efccdc148..2ad0cb4a7 100644 --- a/frontend/src/pages/RedirectPage/RedirectPage.tsx +++ b/frontend/src/pages/RedirectPage/RedirectPage.tsx @@ -1,12 +1,13 @@ -import { Flex, Heading, Spinner, Theme } from 'hang-log-design-system'; import { useEffect } from 'react'; import { useParams, useSearchParams } from 'react-router-dom'; -import { isAuthProvider } from '@utils/auth'; +import { Flex, Heading, Spinner, Theme } from 'hang-log-design-system'; + +import { containerStyling } from '@pages/RedirectPage/RedirectPage.style'; import { useLogInMutation } from '@hooks/api/useLogInMutation'; -import { containerStyling } from '@pages/RedirectPage/RedirectPage.style'; +import { isAuthProvider } from '@utils/auth'; const RedirectPage = () => { const { provider } = useParams(); diff --git a/frontend/src/pages/SignUpPage/SignUpPage.style.ts b/frontend/src/pages/SignUpPage/SignUpPage.style.ts index 5653bdd70..1a6ae42ec 100644 --- a/frontend/src/pages/SignUpPage/SignUpPage.style.ts +++ b/frontend/src/pages/SignUpPage/SignUpPage.style.ts @@ -1,4 +1,5 @@ import { css } from '@emotion/react'; + import { Theme } from 'hang-log-design-system'; export const containerStyling = css({ diff --git a/frontend/src/pages/SignUpPage/SignUpPage.tsx b/frontend/src/pages/SignUpPage/SignUpPage.tsx index 69d96ca60..a62c8a602 100644 --- a/frontend/src/pages/SignUpPage/SignUpPage.tsx +++ b/frontend/src/pages/SignUpPage/SignUpPage.tsx @@ -1,5 +1,3 @@ -import AuthImage from '@assets/svg/auth-image.svg'; -import LogoVertical from '@assets/svg/logo-vertical.svg'; import { Flex, Heading, Theme } from 'hang-log-design-system'; import { @@ -12,6 +10,9 @@ import { import GoogleButton from '@components/common/GoogleButton/GoogleButton'; import KakaoButton from '@components/common/KakaoButton/KakaoButton'; +import AuthImage from '@assets/svg/auth-image.svg'; +import LogoVertical from '@assets/svg/logo-vertical.svg'; + const SignUpPage = () => { return ( { const isMobile = useRecoilValue(mediaQueryMobileState); diff --git a/frontend/src/pages/TripEditPage/TripEditPage.style.ts b/frontend/src/pages/TripEditPage/TripEditPage.style.ts index 345760fdd..f994f0f42 100644 --- a/frontend/src/pages/TripEditPage/TripEditPage.style.ts +++ b/frontend/src/pages/TripEditPage/TripEditPage.style.ts @@ -1,4 +1,5 @@ import { css } from '@emotion/react'; + import { Theme } from 'hang-log-design-system'; export const containerStyling = css({ diff --git a/frontend/src/pages/TripEditPage/TripEditPage.tsx b/frontend/src/pages/TripEditPage/TripEditPage.tsx index 5da5cdaaf..8dcc9aa5d 100644 --- a/frontend/src/pages/TripEditPage/TripEditPage.tsx +++ b/frontend/src/pages/TripEditPage/TripEditPage.tsx @@ -1,11 +1,9 @@ -import { mediaQueryMobileState } from '@store/mediaQuery'; -import { Flex, FloatingButton, useOverlay, useSelect } from 'hang-log-design-system'; import { useMemo } from 'react'; import { useParams } from 'react-router-dom'; + import { useRecoilValue } from 'recoil'; -import { useExpenseCategoryQuery } from '@hooks/api/useExpenseCategoryQuery'; -import { useTripQuery } from '@hooks/api/useTripQuery'; +import { Flex, FloatingButton, useOverlay, useSelect } from 'hang-log-design-system'; import { addButtonStyling, @@ -19,6 +17,11 @@ import TripInformation from '@components/common/TripInformation/TripInformation' import TripMap from '@components/common/TripMap/TripMap'; import TripItemAddModal from '@components/trip/TripItemAddModal/TripItemAddModal'; +import { useExpenseCategoryQuery } from '@hooks/api/useExpenseCategoryQuery'; +import { useTripQuery } from '@hooks/api/useTripQuery'; + +import { mediaQueryMobileState } from '@store/mediaQuery'; + const TripEditPage = () => { const { tripId } = useParams(); diff --git a/frontend/src/pages/TripPage/TripPage.tsx b/frontend/src/pages/TripPage/TripPage.tsx index a382162c9..afda548a3 100644 --- a/frontend/src/pages/TripPage/TripPage.tsx +++ b/frontend/src/pages/TripPage/TripPage.tsx @@ -1,10 +1,9 @@ -import { mediaQueryMobileState } from '@store/mediaQuery'; -import { Flex, useSelect } from 'hang-log-design-system'; import { useMemo } from 'react'; import { useParams } from 'react-router-dom'; + import { useRecoilValue } from 'recoil'; -import { useTripQuery } from '@hooks/api/useTripQuery'; +import { Flex, useSelect } from 'hang-log-design-system'; import { containerStyling, mapContainerStyling } from '@pages/TripPage/TripPage.style'; @@ -13,6 +12,10 @@ import GoogleMapWrapper from '@components/common/GoogleMapWrapper/GoogleMapWrapp import TripInformation from '@components/common/TripInformation/TripInformation'; import TripMap from '@components/common/TripMap/TripMap'; +import { useTripQuery } from '@hooks/api/useTripQuery'; + +import { mediaQueryMobileState } from '@store/mediaQuery'; + const TripPage = () => { const { tripId } = useParams(); diff --git a/frontend/src/pages/TripsPage/TripsPage.style.ts b/frontend/src/pages/TripsPage/TripsPage.style.ts index 77d52b7ab..3876bdda1 100644 --- a/frontend/src/pages/TripsPage/TripsPage.style.ts +++ b/frontend/src/pages/TripsPage/TripsPage.style.ts @@ -1,4 +1,5 @@ import { css } from '@emotion/react'; + import { Theme } from 'hang-log-design-system'; export const addButtonStyling = css({ diff --git a/frontend/src/pages/TripsPage/TripsPage.tsx b/frontend/src/pages/TripsPage/TripsPage.tsx index de30882e9..2682943f4 100644 --- a/frontend/src/pages/TripsPage/TripsPage.tsx +++ b/frontend/src/pages/TripsPage/TripsPage.tsx @@ -1,17 +1,19 @@ -import { ORDER_BY_DATE, ORDER_BY_REGISTRATION } from '@constants/order'; -import { PATH } from '@constants/path'; -import { FloatingButton, useSelect } from 'hang-log-design-system'; import { useNavigate } from 'react-router-dom'; -import { sortByStartDate } from '@utils/sort'; - -import { useTripsQuery } from '@hooks/api/useTripsQuery'; +import { FloatingButton, useSelect } from 'hang-log-design-system'; import { addButtonStyling } from '@pages/TripsPage/TripsPage.style'; import TripsHeader from '@components/trips/TripsHeader/TripsHeader'; import TripsItemList from '@components/trips/TripsItemList/TripsItemList'; +import { useTripsQuery } from '@hooks/api/useTripsQuery'; + +import { sortByStartDate } from '@utils/sort'; + +import { ORDER_BY_DATE, ORDER_BY_REGISTRATION } from '@constants/order'; +import { PATH } from '@constants/path'; + const TripsPage = () => { const navigate = useNavigate(); const { tripsData } = useTripsQuery(); diff --git a/frontend/src/pages/TripsPage/TripsPageSkeleton.tsx b/frontend/src/pages/TripsPage/TripsPageSkeleton.tsx index 118c40758..035818902 100644 --- a/frontend/src/pages/TripsPage/TripsPageSkeleton.tsx +++ b/frontend/src/pages/TripsPage/TripsPageSkeleton.tsx @@ -1,6 +1,7 @@ -import { FloatingButton } from 'hang-log-design-system'; import { Suspense } from 'react'; +import { FloatingButton } from 'hang-log-design-system'; + import { addButtonStyling } from '@pages/TripsPage/TripsPage.style'; import TripsHeader from '@components/trips/TripsHeader/TripsHeader'; diff --git a/frontend/src/router/AppRouter.tsx b/frontend/src/router/AppRouter.tsx index bc158a5fa..754bf661b 100644 --- a/frontend/src/router/AppRouter.tsx +++ b/frontend/src/router/AppRouter.tsx @@ -1,8 +1,8 @@ import App from '@/App'; -import { PATH } from '@constants/path'; -import { isLoggedInState } from '@store/auth'; + import { Suspense } from 'react'; import { RouterProvider, createBrowserRouter } from 'react-router-dom'; + import { useRecoilValue } from 'recoil'; import ExpensePage from '@pages/ExpensePage/ExpensePage'; @@ -20,6 +20,10 @@ import TripPageSkeleton from '@pages/TripPage/TripPageSkeleton'; import TripsPage from '@pages/TripsPage/TripsPage'; import TripsPageSkeleton from '@pages/TripsPage/TripsPageSkeleton'; +import { isLoggedInState } from '@store/auth'; + +import { PATH } from '@constants/path'; + const AppRouter = () => { const isLoggedIn = useRecoilValue(isLoggedInState); diff --git a/frontend/src/store/toast.ts b/frontend/src/store/toast.ts index d3871ab82..4fb9727ca 100644 --- a/frontend/src/store/toast.ts +++ b/frontend/src/store/toast.ts @@ -1,6 +1,7 @@ -import type { ToastType } from '@type/toast'; import { atom } from 'recoil'; +import type { ToastType } from '@type/toast'; + export const toastListState = atom({ key: 'toastList', default: [], diff --git a/frontend/src/stories/common/CitySearchBar.stories.tsx b/frontend/src/stories/common/CitySearchBar.stories.tsx index a9cd78131..56cf4a82c 100644 --- a/frontend/src/stories/common/CitySearchBar.stories.tsx +++ b/frontend/src/stories/common/CitySearchBar.stories.tsx @@ -1,8 +1,9 @@ -import { cities } from '@mocks/data/city'; import type { Meta, StoryObj } from '@storybook/react'; import CitySearchBar from '@components/common/CitySearchBar/CitySearchBar'; +import { cities } from '@mocks/data/city'; + const meta = { title: 'common/CitySearchBar', component: CitySearchBar, diff --git a/frontend/src/stories/common/DayLogItem.stories.tsx b/frontend/src/stories/common/DayLogItem.stories.tsx index 5f951119f..114a82bd4 100644 --- a/frontend/src/stories/common/DayLogItem.stories.tsx +++ b/frontend/src/stories/common/DayLogItem.stories.tsx @@ -1,8 +1,9 @@ -import { trip } from '@mocks/data/trip'; import type { Meta, StoryObj } from '@storybook/react'; import DayLogItem from '@components/common/DayLogItem/DayLogItem'; +import { trip } from '@mocks/data/trip'; + const meta = { title: 'common/DayLogItem', component: DayLogItem, diff --git a/frontend/src/stories/common/DayLogList.stories.tsx b/frontend/src/stories/common/DayLogList.stories.tsx index cb197c150..fb8378ecd 100644 --- a/frontend/src/stories/common/DayLogList.stories.tsx +++ b/frontend/src/stories/common/DayLogList.stories.tsx @@ -1,10 +1,12 @@ -import { trip } from '@mocks/data/trip'; import type { Meta, StoryObj } from '@storybook/react'; + import { useSelect } from 'hang-log-design-system'; +import DayLogList from '@components/common/DayLogList/DayLogList'; + import { useTripQuery } from '@hooks/api/useTripQuery'; -import DayLogList from '@components/common/DayLogList/DayLogList'; +import { trip } from '@mocks/data/trip'; const meta = { title: 'common/DayLogList', diff --git a/frontend/src/stories/common/TripInformation.stories.tsx b/frontend/src/stories/common/TripInformation.stories.tsx index de798baad..9e2b2e79c 100644 --- a/frontend/src/stories/common/TripInformation.stories.tsx +++ b/frontend/src/stories/common/TripInformation.stories.tsx @@ -1,8 +1,9 @@ -import { trip } from '@mocks/data/trip'; import type { Meta, StoryObj } from '@storybook/react'; import TripInformation from '@components/common/TripInformation/TripInformation'; +import { trip } from '@mocks/data/trip'; + const meta = { title: 'common/TripInformation', component: TripInformation, diff --git a/frontend/src/stories/common/TripItem.stories.tsx b/frontend/src/stories/common/TripItem.stories.tsx index 949825780..be7633c4e 100644 --- a/frontend/src/stories/common/TripItem.stories.tsx +++ b/frontend/src/stories/common/TripItem.stories.tsx @@ -1,8 +1,9 @@ -import { trip } from '@mocks/data/trip'; import type { Meta, StoryObj } from '@storybook/react'; import TripItem from '@components/common/TripItem/TripItem'; +import { trip } from '@mocks/data/trip'; + const meta = { title: 'common/TripItem', component: TripItem, diff --git a/frontend/src/stories/common/TripItemList.stories.tsx b/frontend/src/stories/common/TripItemList.stories.tsx index 30223141c..3b33aa7cb 100644 --- a/frontend/src/stories/common/TripItemList.stories.tsx +++ b/frontend/src/stories/common/TripItemList.stories.tsx @@ -1,8 +1,9 @@ -import { trip } from '@mocks/data/trip'; import type { Meta, StoryObj } from '@storybook/react'; import TripItemList from '@components/common/TripItemList/TripItemList'; +import { trip } from '@mocks/data/trip'; + const meta = { title: 'common/TripItemList', component: TripItemList, diff --git a/frontend/src/stories/common/TripMap.stories.tsx b/frontend/src/stories/common/TripMap.stories.tsx index 5abe079ee..2670a9f05 100644 --- a/frontend/src/stories/common/TripMap.stories.tsx +++ b/frontend/src/stories/common/TripMap.stories.tsx @@ -1,9 +1,10 @@ -import { trip } from '@mocks/data/trip'; import type { Meta, StoryObj } from '@storybook/react'; import GoogleMapWrapper from '@components/common/GoogleMapWrapper/GoogleMapWrapper'; import TripMap from '@components/common/TripMap/TripMap'; +import { trip } from '@mocks/data/trip'; + const places = trip.dayLogs[0].items .filter((item) => item.itemType) .map((item) => ({ diff --git a/frontend/src/stories/myPage/EditUserProfileForm.stories.tsx b/frontend/src/stories/myPage/EditUserProfileForm.stories.tsx index 5686313f7..6cb3d4b0d 100644 --- a/frontend/src/stories/myPage/EditUserProfileForm.stories.tsx +++ b/frontend/src/stories/myPage/EditUserProfileForm.stories.tsx @@ -1,8 +1,9 @@ -import { userInfo } from '@mocks/data/member'; import type { Meta, StoryObj } from '@storybook/react'; import EditUserProfileForm from '@components/myPage/EditUserProfileForm/EditUserProfileForm'; +import { userInfo } from '@mocks/data/member'; + const meta = { title: 'myPage/EditUserProfileForm', component: EditUserProfileForm, diff --git a/frontend/src/stories/myPage/NicknameInput.stories.tsx b/frontend/src/stories/myPage/NicknameInput.stories.tsx index a89bdb6ef..1a63a0b71 100644 --- a/frontend/src/stories/myPage/NicknameInput.stories.tsx +++ b/frontend/src/stories/myPage/NicknameInput.stories.tsx @@ -1,9 +1,11 @@ import type { Meta, StoryObj } from '@storybook/react'; -import type { UserData } from '@type/member'; + import { useState } from 'react'; import NicknameInput from '@components/myPage/EditUserProfileForm/NicknameInput/NicknameInput'; +import type { UserData } from '@type/member'; + const meta = { title: 'myPage/NicknameInput', component: NicknameInput, diff --git a/frontend/src/stories/myPage/ProfileImageInput.stories.tsx b/frontend/src/stories/myPage/ProfileImageInput.stories.tsx index acdd58c17..d97904e1d 100644 --- a/frontend/src/stories/myPage/ProfileImageInput.stories.tsx +++ b/frontend/src/stories/myPage/ProfileImageInput.stories.tsx @@ -1,8 +1,9 @@ -import { images } from '@mocks/data/image'; import type { Meta, StoryObj } from '@storybook/react'; import ProfileImageInput from '@components/myPage/EditUserProfileForm/ProfileImageInput/ProfileImageInput'; +import { images } from '@mocks/data/image'; + const meta = { title: 'myPage/ProfileImageInput', component: ProfileImageInput, diff --git a/frontend/src/stories/trip/CategoryInput.stories.tsx b/frontend/src/stories/trip/CategoryInput.stories.tsx index ce39f2949..b88e05984 100644 --- a/frontend/src/stories/trip/CategoryInput.stories.tsx +++ b/frontend/src/stories/trip/CategoryInput.stories.tsx @@ -1,9 +1,11 @@ import type { Meta, StoryObj } from '@storybook/react'; -import type { TripItemFormData } from '@type/tripItem'; + import { useState } from 'react'; import CategoryInput from '@components/trip/TripItemAddModal/CategoryInput/CategoryInput'; +import type { TripItemFormData } from '@type/tripItem'; + const meta = { title: 'trip/TripItemAddModal/CategoryInput', component: CategoryInput, diff --git a/frontend/src/stories/trip/DateInput.stories.tsx b/frontend/src/stories/trip/DateInput.stories.tsx index 0e76d57a5..a6746e73c 100644 --- a/frontend/src/stories/trip/DateInput.stories.tsx +++ b/frontend/src/stories/trip/DateInput.stories.tsx @@ -1,9 +1,9 @@ import type { Meta, StoryObj } from '@storybook/react'; -import { useTripQuery } from '@hooks/api/useTripQuery'; - import DateInput from '@components/trip/TripItemAddModal/DateInput/DateInput'; +import { useTripQuery } from '@hooks/api/useTripQuery'; + const meta = { title: 'trip/TripItemAddModal/DateInput', component: DateInput, diff --git a/frontend/src/stories/trip/ExpenseInput.stories.tsx b/frontend/src/stories/trip/ExpenseInput.stories.tsx index 121adeb4c..d0d51a650 100644 --- a/frontend/src/stories/trip/ExpenseInput.stories.tsx +++ b/frontend/src/stories/trip/ExpenseInput.stories.tsx @@ -1,10 +1,12 @@ import type { Meta, StoryObj } from '@storybook/react'; -import type { TripItemFormData } from '@type/tripItem'; + import { useState } from 'react'; +import ExpenseInput from '@components/trip/TripItemAddModal/ExpenseInput/ExpenseInput'; + import { useExpenseCategoryQuery } from '@hooks/api/useExpenseCategoryQuery'; -import ExpenseInput from '@components/trip/TripItemAddModal/ExpenseInput/ExpenseInput'; +import type { TripItemFormData } from '@type/tripItem'; const meta = { title: 'trip/TripItemAddModal/ExpenseInput', diff --git a/frontend/src/stories/trip/MemoInput.stories.tsx b/frontend/src/stories/trip/MemoInput.stories.tsx index a9622a1fe..29051b26a 100644 --- a/frontend/src/stories/trip/MemoInput.stories.tsx +++ b/frontend/src/stories/trip/MemoInput.stories.tsx @@ -1,9 +1,11 @@ import type { Meta, StoryObj } from '@storybook/react'; -import type { TripItemFormData } from '@type/tripItem'; + import { useState } from 'react'; import MemoInput from '@components/trip/TripItemAddModal/MemoInput/MemoInput'; +import type { TripItemFormData } from '@type/tripItem'; + const meta = { title: 'trip/TripItemAddModal/MemoInput', component: MemoInput, diff --git a/frontend/src/stories/trip/PlaceInput.stories.tsx b/frontend/src/stories/trip/PlaceInput.stories.tsx index a5b4cb410..4d0a9c9cf 100644 --- a/frontend/src/stories/trip/PlaceInput.stories.tsx +++ b/frontend/src/stories/trip/PlaceInput.stories.tsx @@ -1,10 +1,12 @@ import type { Meta, StoryObj } from '@storybook/react'; -import type { TripItemFormData } from '@type/tripItem'; + import { useState } from 'react'; import GoogleMapWrapper from '@components/common/GoogleMapWrapper/GoogleMapWrapper'; import PlaceInput from '@components/trip/TripItemAddModal/PlaceInput/PlaceInput'; +import type { TripItemFormData } from '@type/tripItem'; + const meta = { title: 'trip/TripItemAddModal/PlaceInput', component: PlaceInput, diff --git a/frontend/src/stories/trip/StarRatingInput.stories.tsx b/frontend/src/stories/trip/StarRatingInput.stories.tsx index 6189dd4cf..750ae01ec 100644 --- a/frontend/src/stories/trip/StarRatingInput.stories.tsx +++ b/frontend/src/stories/trip/StarRatingInput.stories.tsx @@ -1,9 +1,11 @@ import type { Meta, StoryObj } from '@storybook/react'; -import type { StarRatingData, TripItemFormData } from '@type/tripItem'; + import { useState } from 'react'; import StarRatingInput from '@components/trip/TripItemAddModal/StarRatingInput/StarRatingInput'; +import type { StarRatingData, TripItemFormData } from '@type/tripItem'; + const meta = { title: 'trip/TripItemAddModal/StarRatingInput', component: StarRatingInput, diff --git a/frontend/src/stories/trip/TitleInput.stories.tsx b/frontend/src/stories/trip/TitleInput.stories.tsx index b42626842..f993550da 100644 --- a/frontend/src/stories/trip/TitleInput.stories.tsx +++ b/frontend/src/stories/trip/TitleInput.stories.tsx @@ -1,9 +1,11 @@ import type { Meta, StoryObj } from '@storybook/react'; -import type { TripItemFormData } from '@type/tripItem'; + import { useState } from 'react'; import TitleInput from '@components/trip/TripItemAddModal/TitleInput/TitleInput'; +import type { TripItemFormData } from '@type/tripItem'; + const meta = { title: 'trip/TripItemAddModal/TitleInput', component: TitleInput, diff --git a/frontend/src/stories/trip/TripInfoEditModal.stories.tsx b/frontend/src/stories/trip/TripInfoEditModal.stories.tsx index e41a72616..4e668f39b 100644 --- a/frontend/src/stories/trip/TripInfoEditModal.stories.tsx +++ b/frontend/src/stories/trip/TripInfoEditModal.stories.tsx @@ -1,8 +1,9 @@ -import { trip } from '@mocks/data/trip'; import type { Meta, StoryObj } from '@storybook/react'; import TripInfoEditModal from '@components/trip/TripInfoEditModal/TripInfoEditModal'; +import { trip } from '@mocks/data/trip'; + // eslint-disable-next-line @typescript-eslint/no-unused-vars const { dayLogs, ...information } = trip; diff --git a/frontend/src/stories/trip/TripItemAddModal.stories.tsx b/frontend/src/stories/trip/TripItemAddModal.stories.tsx index af9580f3c..890f99727 100644 --- a/frontend/src/stories/trip/TripItemAddModal.stories.tsx +++ b/frontend/src/stories/trip/TripItemAddModal.stories.tsx @@ -1,10 +1,11 @@ -import { trip } from '@mocks/data/trip'; import type { Meta, StoryObj } from '@storybook/react'; +import TripItemAddModal from '@components/trip/TripItemAddModal/TripItemAddModal'; + import { useExpenseCategoryQuery } from '@hooks/api/useExpenseCategoryQuery'; import { useTripQuery } from '@hooks/api/useTripQuery'; -import TripItemAddModal from '@components/trip/TripItemAddModal/TripItemAddModal'; +import { trip } from '@mocks/data/trip'; const meta = { title: 'trip/TripItemAddModal', diff --git a/frontend/src/stories/trips/TripsItem.stories.tsx b/frontend/src/stories/trips/TripsItem.stories.tsx index e0bbf2368..52c07dcc3 100644 --- a/frontend/src/stories/trips/TripsItem.stories.tsx +++ b/frontend/src/stories/trips/TripsItem.stories.tsx @@ -1,9 +1,10 @@ -import { trips } from '@mocks/data/trips'; import type { Meta, StoryObj } from '@storybook/react'; +import TripsItem from '@components/trips/TripsItem/TripsItem'; + import { formatDate } from '@utils/formatter'; -import TripsItem from '@components/trips/TripsItem/TripsItem'; +import { trips } from '@mocks/data/trips'; const meta = { title: 'trips/TripsItem', diff --git a/frontend/src/stories/trips/TripsItemList.stories.tsx b/frontend/src/stories/trips/TripsItemList.stories.tsx index 3f7bd47b4..e804dd1d9 100644 --- a/frontend/src/stories/trips/TripsItemList.stories.tsx +++ b/frontend/src/stories/trips/TripsItemList.stories.tsx @@ -1,9 +1,10 @@ -import { trips } from '@mocks/data/trips'; import type { Meta, StoryObj } from '@storybook/react'; +import TripsItemList from '@components/trips/TripsItemList/TripsItemList'; + import { sortByStartDate } from '@utils/sort'; -import TripsItemList from '@components/trips/TripsItemList/TripsItemList'; +import { trips } from '@mocks/data/trips'; const meta = { title: 'trips/TripsItemList', diff --git a/frontend/src/styles/index.ts b/frontend/src/styles/index.ts index e29483eac..4fbd22333 100644 --- a/frontend/src/styles/index.ts +++ b/frontend/src/styles/index.ts @@ -1,4 +1,5 @@ import { css } from '@emotion/react'; + import { Theme } from 'hang-log-design-system'; export const GlobalStyle = css({ diff --git a/frontend/src/types/dayLog.ts b/frontend/src/types/dayLog.ts index 4b55d0ecb..a477b5ff5 100644 --- a/frontend/src/types/dayLog.ts +++ b/frontend/src/types/dayLog.ts @@ -1,6 +1,7 @@ -import type { DAY_LOG_ITEM_FILTERS } from '@constants/trip'; import type { TripItemData } from '@type/tripItem'; +import type { DAY_LOG_ITEM_FILTERS } from '@constants/trip'; + export interface DayLogData { id: number; title: string; diff --git a/frontend/src/types/expense.ts b/frontend/src/types/expense.ts index faa139d7c..625d19def 100644 --- a/frontend/src/types/expense.ts +++ b/frontend/src/types/expense.ts @@ -1,6 +1,7 @@ -import type { EXPENSE_CATEGORY_NAMES } from '@constants/expense'; import type { CurrencyType } from '@type/tripItem'; +import type { EXPENSE_CATEGORY_NAMES } from '@constants/expense'; + export type ExpenseCategoryNameType = (typeof EXPENSE_CATEGORY_NAMES)[number]; export interface ExpenseCategoryData { diff --git a/frontend/src/utils/formatter.ts b/frontend/src/utils/formatter.ts index d8514c6a8..29015468e 100644 --- a/frontend/src/utils/formatter.ts +++ b/frontend/src/utils/formatter.ts @@ -1,6 +1,7 @@ -import { REGEX } from '@constants/regex'; import type { DateRangeData } from '@type/trips'; +import { REGEX } from '@constants/regex'; + export const formatDate = (date: string) => { return date.replace(/-/g, '.'); }; From 04103c1d0916b7b3fe9e591c01c73b98234ce0a7 Mon Sep 17 00:00:00 2001 From: Ashley Heo <51967731+ashleysyheo@users.noreply.github.com> Date: Fri, 11 Aug 2023 16:13:12 +0900 Subject: [PATCH 07/10] Create LICENSE --- LICENSE | 21 +++++++++++++++++++++ 1 file changed, 21 insertions(+) create mode 100644 LICENSE diff --git a/LICENSE b/LICENSE new file mode 100644 index 000000000..73349be1f --- /dev/null +++ b/LICENSE @@ -0,0 +1,21 @@ +MIT License + +Copyright (c) 2023 hang-log + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. From 14aaa2d563202f3198398aab04f66b0b641db34f Mon Sep 17 00:00:00 2001 From: Ashley Heo Date: Fri, 11 Aug 2023 16:15:16 +0900 Subject: [PATCH 08/10] =?UTF-8?q?chore:=20license=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/package-lock.json | 2 +- frontend/package.json | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/frontend/package-lock.json b/frontend/package-lock.json index 349e0cce4..ecd270c1f 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -7,7 +7,7 @@ "": { "name": "hang-log", "version": "0.0.1", - "license": "ISC", + "license": "MIT", "dependencies": { "@emotion/react": "^11.11.1", "@emotion/styled": "^11.11.0", diff --git a/frontend/package.json b/frontend/package.json index 68f8defd6..5b3c24ca4 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -33,7 +33,7 @@ }, "keywords": [], "author": "", - "license": "ISC", + "license": "MIT", "dependencies": { "@emotion/react": "^11.11.1", "@emotion/styled": "^11.11.0", From 32fabdc33b199f560174f6138e3efb6bb642eab8 Mon Sep 17 00:00:00 2001 From: Ashley Heo <51967731+ashleysyheo@users.noreply.github.com> Date: Fri, 11 Aug 2023 16:16:11 +0900 Subject: [PATCH 09/10] =?UTF-8?q?refactor:=20=EC=A1=B0=EA=B1=B4=EB=AC=B8?= =?UTF-8?q?=20=EB=A6=AC=ED=84=B4=20=EC=9C=84=EC=B9=98=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Dahye Yun <102305630+Dahyeeee@users.noreply.github.com> --- frontend/src/hooks/trip/useTripItemExpenseInput.ts | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/frontend/src/hooks/trip/useTripItemExpenseInput.ts b/frontend/src/hooks/trip/useTripItemExpenseInput.ts index b78b6e826..5c3101df2 100644 --- a/frontend/src/hooks/trip/useTripItemExpenseInput.ts +++ b/frontend/src/hooks/trip/useTripItemExpenseInput.ts @@ -43,9 +43,7 @@ export const useTripItemExpenseInput = ( }; const handleAmountChange = (event: ChangeEvent) => { - if (REGEX.ALPHABET_AND_KOREAN_CHARACTERS.test(event.target.value)) { - return; - } + if (REGEX.ALPHABET_AND_KOREAN_CHARACTERS.test(event.target.value)) return; if (Number(event.target.value) < 0) { // eslint-disable-next-line no-param-reassign From a13fcfea32963b24ce6a1b523fcf79dcc747d56d Mon Sep 17 00:00:00 2001 From: Ashley Heo Date: Fri, 11 Aug 2023 17:02:17 +0900 Subject: [PATCH 10/10] =?UTF-8?q?fix:=20=EC=8A=A4=ED=86=A0=EB=A6=AC?= =?UTF-8?q?=EB=B6=81=20=EB=AC=B4=ED=95=9C=20=EC=83=9D=EC=84=B1=20=EB=AC=B8?= =?UTF-8?q?=EC=A0=9C=20=ED=95=B4=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/.storybook/preview.tsx | 21 ++++++++++++++++++--- frontend/src/api/axiosInstance.ts | 4 ++-- frontend/src/constants/api.ts | 4 ++++ 3 files changed, 24 insertions(+), 5 deletions(-) diff --git a/frontend/.storybook/preview.tsx b/frontend/.storybook/preview.tsx index 63f5aaba0..705be9df7 100644 --- a/frontend/.storybook/preview.tsx +++ b/frontend/.storybook/preview.tsx @@ -1,11 +1,18 @@ import type { Preview } from '@storybook/react'; -import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; -import { HangLogProvider, Spinner } from 'hang-log-design-system'; -import { initialize, mswDecorator } from 'msw-storybook-addon'; + import React, { Suspense } from 'react'; import { MemoryRouter } from 'react-router-dom'; + +import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; + import { RecoilRoot } from 'recoil'; +import { initialize, mswDecorator } from 'msw-storybook-addon'; + +import { HangLogProvider, Spinner } from 'hang-log-design-system'; + +import { axiosInstance } from '../src/api/axiosInstance'; +import { ACCESS_TOKEN_KEY } from '../src/constants/api'; import { handlers } from '../src/mocks/handlers'; initialize(); @@ -43,6 +50,13 @@ export default preview; const queryClient = new QueryClient(); +const localStorageResetDecorator = (Story) => { + window.localStorage.clear(); + window.localStorage.setItem(ACCESS_TOKEN_KEY, 'hanglogAccessToken'); + + return ; +}; + export const decorators = [ (Story) => ( @@ -57,5 +71,6 @@ export const decorators = [ ), + localStorageResetDecorator, mswDecorator, ]; diff --git a/frontend/src/api/axiosInstance.ts b/frontend/src/api/axiosInstance.ts index d36c3acce..93db3a8e1 100644 --- a/frontend/src/api/axiosInstance.ts +++ b/frontend/src/api/axiosInstance.ts @@ -2,10 +2,10 @@ import axios from 'axios'; import { checkAndSetToken, handleAPIError, handleTokenError } from '@api/interceptors'; -import { BASE_URL, NETWORK } from '@constants/api'; +import { AXIOS_BASE_URL, NETWORK } from '@constants/api'; export const axiosInstance = axios.create({ - baseURL: BASE_URL, + baseURL: AXIOS_BASE_URL, timeout: NETWORK.TIMEOUT, withCredentials: true, useAuth: true, diff --git a/frontend/src/constants/api.ts b/frontend/src/constants/api.ts index 11fd6e82c..dcf767eed 100644 --- a/frontend/src/constants/api.ts +++ b/frontend/src/constants/api.ts @@ -4,6 +4,10 @@ export const BASE_URL = PROD ? `${window.location.protocol}//${process.env.PROD_BASE_URL}/api` : 'http://localhost:3000'; +export const AXIOS_BASE_URL = PROD + ? `${window.location.protocol}//${process.env.PROD_BASE_URL}/api` + : '/'; + export const END_POINTS = { TRIPS: '/trips', TRIP: (tripId: number) => `/trips/${tripId}`,