From 748842cf37f0e450ed32e419088968b64128942b Mon Sep 17 00:00:00 2001 From: Ashley Heo Date: Sat, 2 Sep 2023 01:11:55 +0900 Subject: [PATCH 01/15] =?UTF-8?q?fix:=20TripEditPage=20=EB=8D=B0=EC=9D=B4?= =?UTF-8?q?=ED=84=B0=20=ED=8C=A8=EC=B9=AD=20waterfall=20=EB=AC=B8=EC=A0=9C?= =?UTF-8?q?=20=ED=95=B4=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/hooks/api/useTripEditPageQueries.ts | 15 +++++++++++++++ frontend/src/pages/TripEditPage/TripEditPage.tsx | 6 ++---- 2 files changed, 17 insertions(+), 4 deletions(-) create mode 100644 frontend/src/hooks/api/useTripEditPageQueries.ts diff --git a/frontend/src/hooks/api/useTripEditPageQueries.ts b/frontend/src/hooks/api/useTripEditPageQueries.ts new file mode 100644 index 000000000..cd5881f0a --- /dev/null +++ b/frontend/src/hooks/api/useTripEditPageQueries.ts @@ -0,0 +1,15 @@ +import { useQueries } from '@tanstack/react-query'; + +import { getExpenseCategory } from '@api/expense/getExpenseCategory'; +import { getTrip } from '@api/trip/getTrip'; + +export const useTripEditPageQueries = (tripId: number) => { + const [tripQuery, expenseCategoryQuery] = useQueries({ + queries: [ + { queryKey: ['trip', tripId], queryFn: () => getTrip(tripId) }, + { queryKey: ['expenseCategory'], queryFn: getExpenseCategory, staleTime: Infinity }, + ], + }); + + return { tripData: tripQuery.data!, expenseCategoryData: expenseCategoryQuery.data! }; +}; diff --git a/frontend/src/pages/TripEditPage/TripEditPage.tsx b/frontend/src/pages/TripEditPage/TripEditPage.tsx index 8dcc9aa5d..3f39eb206 100644 --- a/frontend/src/pages/TripEditPage/TripEditPage.tsx +++ b/frontend/src/pages/TripEditPage/TripEditPage.tsx @@ -17,8 +17,7 @@ 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 { useTripEditPageQueries } from '@hooks/api/useTripEditPageQueries'; import { mediaQueryMobileState } from '@store/mediaQuery'; @@ -29,8 +28,7 @@ const TripEditPage = () => { const isMobile = useRecoilValue(mediaQueryMobileState); - const { tripData } = useTripQuery(Number(tripId)); - useExpenseCategoryQuery(); + const { tripData } = useTripEditPageQueries(Number(tripId)); const { isOpen: isAddModalOpen, open: openAddModal, close: closeAddModal } = useOverlay(); const { selected: selectedDayLogId, handleSelectClick: handleDayLogIdSelectClick } = useSelect( From 4d19824aeeab75a67fd73df35669cece1c9ed4e4 Mon Sep 17 00:00:00 2001 From: Ashley Heo Date: Sat, 2 Sep 2023 01:14:07 +0900 Subject: [PATCH 02/15] =?UTF-8?q?refactor:=20useQuery=20=EC=98=B5=EC=85=98?= =?UTF-8?q?=20defaultOptions=EB=A1=9C=20=EC=98=AE=EA=B8=B0=EA=B8=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/.storybook/preview.tsx | 13 ++++++++++--- frontend/src/hooks/api/useCityQuery.ts | 8 +------- frontend/src/hooks/api/useExpenseCategoryQuery.ts | 10 +--------- frontend/src/hooks/api/useExpenseQuery.ts | 12 +----------- frontend/src/hooks/api/useSharedTripQuery.ts | 12 ++---------- frontend/src/hooks/api/useTripQuery.ts | 8 +------- frontend/src/hooks/api/useTripsQuery.ts | 8 +------- frontend/src/hooks/api/useUserInfoQuery.ts | 8 +------- frontend/src/index.tsx | 12 +++++++++++- 9 files changed, 29 insertions(+), 62 deletions(-) diff --git a/frontend/.storybook/preview.tsx b/frontend/.storybook/preview.tsx index 705be9df7..5e9b01c90 100644 --- a/frontend/.storybook/preview.tsx +++ b/frontend/.storybook/preview.tsx @@ -11,8 +11,7 @@ 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 { ACCESS_TOKEN_KEY, NETWORK } from '../src/constants/api'; import { handlers } from '../src/mocks/handlers'; initialize(); @@ -48,7 +47,15 @@ const preview: Preview = { export default preview; -const queryClient = new QueryClient(); +const queryClient = new QueryClient({ + defaultOptions: { + queries: { + retry: NETWORK.RETRY_COUNT, + suspense: true, + useErrorBoundary: true, + }, + }, +}); const localStorageResetDecorator = (Story) => { window.localStorage.clear(); diff --git a/frontend/src/hooks/api/useCityQuery.ts b/frontend/src/hooks/api/useCityQuery.ts index a3d29a631..40f320863 100644 --- a/frontend/src/hooks/api/useCityQuery.ts +++ b/frontend/src/hooks/api/useCityQuery.ts @@ -6,14 +6,8 @@ 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, - suspense: true, - useErrorBoundary: true, - }); + const { data } = useQuery(['city'], getCity); return { cityData: data! }; }; diff --git a/frontend/src/hooks/api/useExpenseCategoryQuery.ts b/frontend/src/hooks/api/useExpenseCategoryQuery.ts index 3e3aecffb..787a86eca 100644 --- a/frontend/src/hooks/api/useExpenseCategoryQuery.ts +++ b/frontend/src/hooks/api/useExpenseCategoryQuery.ts @@ -6,18 +6,10 @@ import { getExpenseCategory } from '@api/expense/getExpenseCategory'; import type { ExpenseCategoryData } from '@type/expense'; -import { NETWORK } from '@constants/api'; - export const useExpenseCategoryQuery = () => { const { data } = useQuery( ['expenseCategory'], - getExpenseCategory, - { - retry: NETWORK.RETRY_COUNT, - suspense: true, - useErrorBoundary: true, - cacheTime: Infinity, - } + getExpenseCategory ); return { expenseCategoryData: data! }; diff --git a/frontend/src/hooks/api/useExpenseQuery.ts b/frontend/src/hooks/api/useExpenseQuery.ts index c2e2d5e0d..35e3d0a5b 100644 --- a/frontend/src/hooks/api/useExpenseQuery.ts +++ b/frontend/src/hooks/api/useExpenseQuery.ts @@ -6,18 +6,8 @@ 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], - () => getExpense(tripId), - { - retry: NETWORK.RETRY_COUNT, - suspense: true, - useErrorBoundary: true, - } - ); + const { data } = useQuery(['expense', tripId], () => getExpense(tripId)); return { expenseData: data! }; }; diff --git a/frontend/src/hooks/api/useSharedTripQuery.ts b/frontend/src/hooks/api/useSharedTripQuery.ts index cac24607c..fd2f69053 100644 --- a/frontend/src/hooks/api/useSharedTripQuery.ts +++ b/frontend/src/hooks/api/useSharedTripQuery.ts @@ -6,17 +6,9 @@ import { getSharedTrip } from '@api/trip/getSharedTrip'; import type { TripData } from '@type/trip'; -import { NETWORK } from '@constants/api'; - export const useSharedQuery = (code: string) => { - const { data } = useQuery( - ['trip', Number(code)], - () => getSharedTrip(code), - { - retry: NETWORK.RETRY_COUNT, - suspense: true, - useErrorBoundary: true, - } + const { data } = useQuery(['trip', Number(code)], () => + getSharedTrip(code) ); return { tripData: data! }; diff --git a/frontend/src/hooks/api/useTripQuery.ts b/frontend/src/hooks/api/useTripQuery.ts index 3e629f037..d1412faa5 100644 --- a/frontend/src/hooks/api/useTripQuery.ts +++ b/frontend/src/hooks/api/useTripQuery.ts @@ -6,14 +6,8 @@ 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, - suspense: true, - useErrorBoundary: true, - }); + const { data } = useQuery(['trip', tripId], () => getTrip(tripId)); return { tripData: data! }; }; diff --git a/frontend/src/hooks/api/useTripsQuery.ts b/frontend/src/hooks/api/useTripsQuery.ts index ffcbaba91..be9a3a867 100644 --- a/frontend/src/hooks/api/useTripsQuery.ts +++ b/frontend/src/hooks/api/useTripsQuery.ts @@ -6,14 +6,8 @@ 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, - suspense: true, - useErrorBoundary: true, - }); + const { data } = useQuery(['trips'], getTrips); return { tripsData: data! }; }; diff --git a/frontend/src/hooks/api/useUserInfoQuery.ts b/frontend/src/hooks/api/useUserInfoQuery.ts index ab3ac2c7a..791e648d0 100644 --- a/frontend/src/hooks/api/useUserInfoQuery.ts +++ b/frontend/src/hooks/api/useUserInfoQuery.ts @@ -6,14 +6,8 @@ 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, - suspense: true, - useErrorBoundary: true, - }); + const { data } = useQuery(['userInfo'], getUserInfo); return { userInfoData: data! }; }; diff --git a/frontend/src/index.tsx b/frontend/src/index.tsx index c51df6396..679d76b43 100644 --- a/frontend/src/index.tsx +++ b/frontend/src/index.tsx @@ -14,6 +14,8 @@ import HttpsRedirect from '@components/utils/HttpsRedirect'; import AppRouter from '@router/AppRouter'; +import { NETWORK } from '@constants/api'; + import { GlobalStyle } from '@styles/index'; import { worker } from '@mocks/browser'; @@ -30,7 +32,15 @@ const main = async () => { const root = createRoot(document.querySelector('#root') as Element); - const queryClient = new QueryClient(); + const queryClient = new QueryClient({ + defaultOptions: { + queries: { + retry: NETWORK.RETRY_COUNT, + suspense: true, + useErrorBoundary: true, + }, + }, + }); root.render( From a0e97724da51e670bfb7f9d90c1c135b97e603f3 Mon Sep 17 00:00:00 2001 From: Ashley Heo Date: Sat, 2 Sep 2023 02:43:05 +0900 Subject: [PATCH 03/15] =?UTF-8?q?fix:=20Header=20cursor=20pointer=20?= =?UTF-8?q?=EB=AC=B8=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 --- .../components/layout/Header/Header.style.ts | 28 ++----------------- .../Header/LoggedInMenu/LoggedInMenu.style.ts | 2 ++ 2 files changed, 4 insertions(+), 26 deletions(-) diff --git a/frontend/src/components/layout/Header/Header.style.ts b/frontend/src/components/layout/Header/Header.style.ts index 8fd3635a2..b2165d8e6 100644 --- a/frontend/src/components/layout/Header/Header.style.ts +++ b/frontend/src/components/layout/Header/Header.style.ts @@ -17,37 +17,13 @@ export const headerStyling = css({ height: '65px', padding: `${Theme.spacer.spacing3} ${Theme.spacer.spacing4}`, }, - - '& > *': { - cursor: 'pointer', - }, -}); - -export const imageStyling = css({ - minWidth: '32px', - minHeight: '32px', - maxWidth: '32px', - maxHeight: '32px', - border: 'none', - outline: 0, - borderRadius: '50%', - - backgroundColor: Theme.color.gray200, - - objectFit: 'cover', -}); - -export const menuListStyling = css({ - transform: 'translateY(36px)', - - '& > li': { - padding: `${Theme.spacer.spacing2} ${Theme.spacer.spacing3}`, - }, }); export const getItemStyling = (isLoggedIn: boolean) => { return css({ position: 'relative', top: !isLoggedIn ? '-2px' : 'undefined', + + cursor: 'pointer', }); }; diff --git a/frontend/src/components/layout/Header/LoggedInMenu/LoggedInMenu.style.ts b/frontend/src/components/layout/Header/LoggedInMenu/LoggedInMenu.style.ts index 9c3fe6229..80ae45cff 100644 --- a/frontend/src/components/layout/Header/LoggedInMenu/LoggedInMenu.style.ts +++ b/frontend/src/components/layout/Header/LoggedInMenu/LoggedInMenu.style.ts @@ -14,6 +14,8 @@ export const imageStyling = css({ backgroundColor: Theme.color.gray200, objectFit: 'cover', + + cursor: 'pointer', }); export const menuListStyling = css({ From 9c66f094eb290cf5e95786cdcd3ed8304bf9b987 Mon Sep 17 00:00:00 2001 From: Ashley Heo Date: Sat, 2 Sep 2023 02:43:16 +0900 Subject: [PATCH 04/15] =?UTF-8?q?refactor:=20Footer=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/components/layout/Footer/Footer.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/frontend/src/components/layout/Footer/Footer.tsx b/frontend/src/components/layout/Footer/Footer.tsx index 4c85168c3..47e405f2d 100644 --- a/frontend/src/components/layout/Footer/Footer.tsx +++ b/frontend/src/components/layout/Footer/Footer.tsx @@ -5,7 +5,9 @@ import { containerStyling } from '@components/layout/Footer/Footer.style'; const Footer = () => { return ( ); From 6ec3410e0b53a987eeb062739654fb505c75b3d9 Mon Sep 17 00:00:00 2001 From: Ashley Heo Date: Sat, 2 Sep 2023 02:45:58 +0900 Subject: [PATCH 05/15] =?UTF-8?q?refactor:=20=ED=9A=8C=EC=9B=90=EA=B0=80?= =?UTF-8?q?=EC=9E=85,=20=EB=A1=9C=EA=B7=B8=EC=9D=B8=20=EB=B2=84=ED=8A=BC?= =?UTF-8?q?=20=ED=95=98=EB=82=98=EB=A1=9C=20=ED=95=A9=EC=B9=98=EA=B8=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/cypress/e2e/login.cy.ts | 5 -- .../Header/LoggedOutMenu/LoggedOutMenu.tsx | 15 ++---- frontend/src/constants/path.ts | 1 - frontend/src/pages/IntroPage/IntroPage.tsx | 2 +- .../LogInPage.style.ts} | 0 frontend/src/pages/LogInPage/LogInPage.tsx | 2 +- frontend/src/pages/SignUpPage/SignUpPage.tsx | 50 ------------------- 7 files changed, 6 insertions(+), 69 deletions(-) rename frontend/src/pages/{SignUpPage/SignUpPage.style.ts => LogInPage/LogInPage.style.ts} (100%) delete mode 100644 frontend/src/pages/SignUpPage/SignUpPage.tsx diff --git a/frontend/cypress/e2e/login.cy.ts b/frontend/cypress/e2e/login.cy.ts index dd564cbcd..11b91ef7b 100644 --- a/frontend/cypress/e2e/login.cy.ts +++ b/frontend/cypress/e2e/login.cy.ts @@ -25,11 +25,6 @@ describe('로그인', () => { cy.location('pathname').should('eq', PATH.LOGIN); }); - it('회원가입 버튼을 클릭하면 회원가입 페이지로 이동한다.', () => { - cy.findByText('회원가입').click(); - cy.location('pathname').should('eq', PATH.SIGN_UP); - }); - it('로그인하면 메인 페이지 화면이 여행 목록 페이지로 변경된다.', () => { cy.findByText('로그인').click(); diff --git a/frontend/src/components/layout/Header/LoggedOutMenu/LoggedOutMenu.tsx b/frontend/src/components/layout/Header/LoggedOutMenu/LoggedOutMenu.tsx index 5169c8e3d..9211a5a5f 100644 --- a/frontend/src/components/layout/Header/LoggedOutMenu/LoggedOutMenu.tsx +++ b/frontend/src/components/layout/Header/LoggedOutMenu/LoggedOutMenu.tsx @@ -1,8 +1,6 @@ import { useNavigate } from 'react-router-dom'; -import { Button, Flex, Theme } from 'hang-log-design-system'; - -import { getItemStyling } from '@components/layout/Header/Header.style'; +import { Button } from 'hang-log-design-system'; import { PATH } from '@constants/path'; @@ -10,14 +8,9 @@ const LoggedOutMenu = () => { const navigate = useNavigate(); return ( - - - - + ); }; diff --git a/frontend/src/constants/path.ts b/frontend/src/constants/path.ts index 3710ed88d..d5889c68a 100644 --- a/frontend/src/constants/path.ts +++ b/frontend/src/constants/path.ts @@ -6,7 +6,6 @@ export const PATH = { EXPENSE: (tripId: number | string) => `/trip/${tripId}/expense`, SHARE: (shareCode: string) => `/trip/share/${shareCode}`, LOGIN: '/login', - SIGN_UP: '/sign-up', MY_PAGE: '/my-page', REDIRECT: '/auth/:provider', RELOAD: 0, diff --git a/frontend/src/pages/IntroPage/IntroPage.tsx b/frontend/src/pages/IntroPage/IntroPage.tsx index 6e3ab94f6..5cbe9f5f6 100644 --- a/frontend/src/pages/IntroPage/IntroPage.tsx +++ b/frontend/src/pages/IntroPage/IntroPage.tsx @@ -35,7 +35,7 @@ const IntroPage = () => { 여행과 관련된 모든 정보를
한곳에서 기록해 보세요. - { - const isLoggedIn = useRecoilValue(isLoggedInState); - - if (isLoggedIn) return ; - - return ( - - - - 나만의 여행을 기록해 보세요 - - - 카카오로 바로 시작하기 - 구글로 바로 시작하기 - - - - ); -}; - -export default SignUpPage; From 7e6645e3dd598c25b35ba3458e505571293603b8 Mon Sep 17 00:00:00 2001 From: Ashley Heo Date: Sat, 2 Sep 2023 02:48:46 +0900 Subject: [PATCH 06/15] =?UTF-8?q?refactor:=20props=EB=A1=9C=20=EB=84=98?= =?UTF-8?q?=EA=B2=A8=EC=A3=BC=EB=8A=94=20=EB=8C=80=EC=8B=A0=20TripInformat?= =?UTF-8?q?ion=EC=97=90=EC=84=9C=20=EC=A7=81=EC=A0=91=20=EB=8D=B0=EC=9D=B4?= =?UTF-8?q?=ED=84=B0=20=EA=B0=80=EC=A0=B8=EC=98=A4=EA=B8=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../common/DayLogList/DayLogList.tsx | 4 +-- .../TripInformation/TripInformation.tsx | 31 +++++++++---------- .../TripItemAddModal/DateInput/DateInput.tsx | 4 +-- .../trip/{useTripDates.ts => useTrip.ts} | 4 +-- frontend/src/pages/SharedPage/SharedPage.tsx | 2 +- .../src/pages/TripEditPage/TripEditPage.tsx | 2 +- frontend/src/pages/TripPage/TripPage.tsx | 2 +- frontend/src/router/AppRouter.tsx | 5 --- .../common/TripInformation.stories.tsx | 11 +++++-- 9 files changed, 33 insertions(+), 32 deletions(-) rename frontend/src/hooks/trip/{useTripDates.ts => useTrip.ts} (80%) diff --git a/frontend/src/components/common/DayLogList/DayLogList.tsx b/frontend/src/components/common/DayLogList/DayLogList.tsx index 90bdbd7af..fce658536 100644 --- a/frontend/src/components/common/DayLogList/DayLogList.tsx +++ b/frontend/src/components/common/DayLogList/DayLogList.tsx @@ -3,7 +3,7 @@ import { Tab, Tabs } from 'hang-log-design-system'; import DayLogItem from '@components/common/DayLogItem/DayLogItem'; import { containerStyling } from '@components/common/DayLogList/DayLogList.style'; -import { useTripDates } from '@hooks/trip/useTripDates'; +import { useTrip } from '@hooks/trip/useTrip'; import { formatMonthDate } from '@utils/formatter'; @@ -26,7 +26,7 @@ const DayLogList = ({ onTabChange, openAddModal, }: DayLogListProps) => { - const { dates } = useTripDates(tripId); + const { dates } = useTrip(tripId); return (
diff --git a/frontend/src/components/common/TripInformation/TripInformation.tsx b/frontend/src/components/common/TripInformation/TripInformation.tsx index 18fdabb12..bb21d1d22 100644 --- a/frontend/src/components/common/TripInformation/TripInformation.tsx +++ b/frontend/src/components/common/TripInformation/TripInformation.tsx @@ -17,63 +17,62 @@ import { } from '@components/common/TripInformation/TripInformation.style'; import TripInfoEditModal from '@components/trip/TripInfoEditModal/TripInfoEditModal'; +import { useTrip } from '@hooks/trip/useTrip'; + 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 { +interface TripInformationProps { + tripId: number; isEditable?: boolean; isShared?: boolean; } -const TripInformation = ({ - isEditable = true, - isShared = false, - ...information -}: TripInformationProps) => { +const TripInformation = ({ isEditable = true, isShared = false, tripId }: TripInformationProps) => { const isMobile = useRecoilValue(mediaQueryMobileState); const { isOpen: isEditModalOpen, close: closeEditModal, open: openEditModal } = useOverlay(); + const { tripData } = useTrip(tripId); + return ( <>
- 여행 대표 이미지 + 여행 대표 이미지 - {information.cities.map(({ id, name }) => ( + {tripData.cities.map(({ id, name }) => ( {name} ))} - {information.title} + {tripData.title} - {formatDate(information.startDate)} - {formatDate(information.endDate)} + {formatDate(tripData.startDate)} - {formatDate(tripData.endDate)} - {information.description} + {tripData.description} {isEditable ? ( - + ) : ( - !isShared && + !isShared && )}
{isEditModalOpen && ( - + )} ); diff --git a/frontend/src/components/trip/TripItemAddModal/DateInput/DateInput.tsx b/frontend/src/components/trip/TripItemAddModal/DateInput/DateInput.tsx index b2972aa9f..de4f1fe5d 100644 --- a/frontend/src/components/trip/TripItemAddModal/DateInput/DateInput.tsx +++ b/frontend/src/components/trip/TripItemAddModal/DateInput/DateInput.tsx @@ -6,7 +6,7 @@ import { Select } from 'hang-log-design-system'; import { selectStyling } from '@components/trip/TripItemAddModal/DateInput/DateInput.style'; -import { useTripDates } from '@hooks/trip/useTripDates'; +import { useTrip } from '@hooks/trip/useTrip'; import { formatMonthDate } from '@utils/formatter'; @@ -20,7 +20,7 @@ interface DateInputProps { } const DateInput = ({ currentCategory, tripId, dayLogId, updateInputValue }: DateInputProps) => { - const { dates } = useTripDates(tripId); + const { dates } = useTrip(tripId); useEffect(() => { const indexOfDayLogId = dates.findIndex((date) => date.id === dayLogId); diff --git a/frontend/src/hooks/trip/useTripDates.ts b/frontend/src/hooks/trip/useTrip.ts similarity index 80% rename from frontend/src/hooks/trip/useTripDates.ts rename to frontend/src/hooks/trip/useTrip.ts index 5a73d49ad..b99522174 100644 --- a/frontend/src/hooks/trip/useTripDates.ts +++ b/frontend/src/hooks/trip/useTrip.ts @@ -2,7 +2,7 @@ import { useQueryClient } from '@tanstack/react-query'; import type { TripData } from '@type/trip'; -export const useTripDates = (tripId: number) => { +export const useTrip = (tripId: number) => { const queryClient = useQueryClient(); const tripData = queryClient.getQueryData(['trip', tripId])!; @@ -12,5 +12,5 @@ export const useTripDates = (tripId: number) => { date: data.date, })); - return { dates }; + return { tripData, dates }; }; diff --git a/frontend/src/pages/SharedPage/SharedPage.tsx b/frontend/src/pages/SharedPage/SharedPage.tsx index 3f297468e..78d4b4caa 100644 --- a/frontend/src/pages/SharedPage/SharedPage.tsx +++ b/frontend/src/pages/SharedPage/SharedPage.tsx @@ -45,7 +45,7 @@ const SharedPage = () => { return (
- + { return (
- + { return (
- + { path: PATH.REDIRECT, element: , }, - { - path: PATH.SIGN_UP, - element: , - }, { path: PATH.LOGIN, element: , diff --git a/frontend/src/stories/common/TripInformation.stories.tsx b/frontend/src/stories/common/TripInformation.stories.tsx index 9e2b2e79c..e6666adb0 100644 --- a/frontend/src/stories/common/TripInformation.stories.tsx +++ b/frontend/src/stories/common/TripInformation.stories.tsx @@ -2,12 +2,19 @@ import type { Meta, StoryObj } from '@storybook/react'; import TripInformation from '@components/common/TripInformation/TripInformation'; -import { trip } from '@mocks/data/trip'; +import { useTripQuery } from '@hooks/api/useTripQuery'; const meta = { title: 'common/TripInformation', component: TripInformation, - args: { ...trip }, + args: { tripId: 1 }, + decorators: [ + (Story) => { + useTripQuery(1); + + return ; + }, + ], } satisfies Meta; export default meta; From 8501ae4ee1ddac6c0ee9c98f65e8c25c0dd5d3e1 Mon Sep 17 00:00:00 2001 From: Ashley Heo Date: Sat, 2 Sep 2023 02:50:51 +0900 Subject: [PATCH 07/15] =?UTF-8?q?refactor:=20TripInformation=20=EC=88=98?= =?UTF-8?q?=EC=A0=95=20=EB=B2=84=ED=8A=BC=20=EB=84=A4=EC=9D=B4=EB=B0=8D=20?= =?UTF-8?q?=EC=88=98=EC=A0=95=EC=97=90=EC=84=9C=20=EC=99=84=EB=A3=8C?= =?UTF-8?q?=EB=A1=9C=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../common/TripInformation/TripEditButtons/TripEditButtons.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/components/common/TripInformation/TripEditButtons/TripEditButtons.tsx b/frontend/src/components/common/TripInformation/TripEditButtons/TripEditButtons.tsx index ec88c2651..ecdd36013 100644 --- a/frontend/src/components/common/TripInformation/TripEditButtons/TripEditButtons.tsx +++ b/frontend/src/components/common/TripInformation/TripEditButtons/TripEditButtons.tsx @@ -18,7 +18,7 @@ const TripEditButtons = ({ tripId, openEditModal }: TripEditButtonsProps) => { 여행 정보 수정 ); From f8920c4164e222967539638eeffd04f17f10f825 Mon Sep 17 00:00:00 2001 From: Ashley Heo Date: Sat, 2 Sep 2023 02:53:13 +0900 Subject: [PATCH 08/15] =?UTF-8?q?refactor:=20TripItem=20=EC=A0=9C=EB=AA=A9?= =?UTF-8?q?=20=EC=8A=A4=ED=83=80=EC=9D=BC=EB=A7=81=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/components/common/TripItem/TripItem.style.ts | 1 + frontend/src/components/common/TripItem/TripItem.tsx | 6 +++--- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/frontend/src/components/common/TripItem/TripItem.style.ts b/frontend/src/components/common/TripItem/TripItem.style.ts index cddd74ee4..cb2909199 100644 --- a/frontend/src/components/common/TripItem/TripItem.style.ts +++ b/frontend/src/components/common/TripItem/TripItem.style.ts @@ -48,6 +48,7 @@ export const starRatingStyling = css({ }); export const titleStyling = css({ + fontWeight: '600', wordBreak: 'break-all', }); diff --git a/frontend/src/components/common/TripItem/TripItem.tsx b/frontend/src/components/common/TripItem/TripItem.tsx index 1278d6f28..1b9d2bc92 100644 --- a/frontend/src/components/common/TripItem/TripItem.tsx +++ b/frontend/src/components/common/TripItem/TripItem.tsx @@ -3,7 +3,7 @@ import { useEffect, useMemo, useRef } from 'react'; import { useRecoilValue } from 'recoil'; -import { Box, Heading, ImageCarousel, Text } from 'hang-log-design-system'; +import { Box, ImageCarousel, Text } from 'hang-log-design-system'; import StarRating from '@components/common/StarRating/StarRating'; import EditMenu from '@components/common/TripItem/EditMenu/EditMenu'; @@ -89,9 +89,9 @@ const TripItem = ({ /> )} - + {information.title} - + {information.place && ( {information.place.category.name} From 30b3d09226d9febb2d5fcec806f7b3c0b656547e Mon Sep 17 00:00:00 2001 From: Ashley Heo Date: Sat, 2 Sep 2023 17:31:55 +0900 Subject: [PATCH 09/15] =?UTF-8?q?refactor:=20=EB=AA=A8=EB=B0=94=EC=9D=BC?= =?UTF-8?q?=EC=9D=BC=EB=95=8C=20image=20carousel=20navigation=20=EB=B3=B4?= =?UTF-8?q?=EC=9D=B4=EA=B2=8C=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/components/common/TripItem/TripItem.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/frontend/src/components/common/TripItem/TripItem.tsx b/frontend/src/components/common/TripItem/TripItem.tsx index 1b9d2bc92..98064c438 100644 --- a/frontend/src/components/common/TripItem/TripItem.tsx +++ b/frontend/src/components/common/TripItem/TripItem.tsx @@ -82,9 +82,9 @@ const TripItem = ({ width={isMobile ? imageWidth : 250} height={isMobile ? imageHeight : 167} isDraggable={false} - showNavigationOnHover - showArrows - showDots + showNavigationOnHover={!isMobile} + showArrows={information.imageUrls.length > 1} + showDots={information.imageUrls.length > 1} images={information.imageUrls} /> )} From 2f0c59fdbfe595c025a6c7dff51075751f6ef093 Mon Sep 17 00:00:00 2001 From: Ashley Heo Date: Sat, 2 Sep 2023 18:05:46 +0900 Subject: [PATCH 10/15] =?UTF-8?q?refactor:=20=EC=88=98=EC=A0=95,=20?= =?UTF-8?q?=EC=82=AD=EC=A0=9C=20=EB=B2=84=ED=8A=BC=20=EB=8D=94=EB=B3=B4?= =?UTF-8?q?=EA=B8=B0=20=EB=A9=94=EB=89=B4=EC=97=90=EC=84=9C=20=EB=B3=B4?= =?UTF-8?q?=EC=97=AC=EC=A3=BC=EB=8A=94=20=EB=8C=80=EC=8B=A0=20=EC=95=84?= =?UTF-8?q?=EC=9D=B4=EC=BD=98=EC=9C=BC=EB=A1=9C=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/assets/svg/bin-icon.svg | 3 ++ frontend/src/assets/svg/edit-icon.svg | 3 ++ .../TripButtons/TripButtons.style.ts | 28 ++++++++++++++--- .../TripButtons/TripButtons.tsx | 25 +++++----------- .../TripInformation/TripInformation.style.ts | 8 +++-- .../TripShareButton/TripShareButton.style.ts | 3 +- .../TripItem/EditMenu/EditMenu.style.ts | 30 ++++++++++++++----- .../common/TripItem/EditMenu/EditMenu.tsx | 30 ++++++++----------- .../common/TripItem/TripItem.style.ts | 1 + 9 files changed, 83 insertions(+), 48 deletions(-) create mode 100644 frontend/src/assets/svg/bin-icon.svg create mode 100644 frontend/src/assets/svg/edit-icon.svg diff --git a/frontend/src/assets/svg/bin-icon.svg b/frontend/src/assets/svg/bin-icon.svg new file mode 100644 index 000000000..df454786f --- /dev/null +++ b/frontend/src/assets/svg/bin-icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/frontend/src/assets/svg/edit-icon.svg b/frontend/src/assets/svg/edit-icon.svg new file mode 100644 index 000000000..79d87e988 --- /dev/null +++ b/frontend/src/assets/svg/edit-icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/frontend/src/components/common/TripInformation/TripButtons/TripButtons.style.ts b/frontend/src/components/common/TripInformation/TripButtons/TripButtons.style.ts index efb59adab..f4c8cca34 100644 --- a/frontend/src/components/common/TripInformation/TripButtons/TripButtons.style.ts +++ b/frontend/src/components/common/TripInformation/TripButtons/TripButtons.style.ts @@ -14,10 +14,10 @@ export const moreButtonStyling = css({ width: '20px', height: '20px', - '& path': { - stroke: Theme.color.white, - strokeWidth: 1.5, - }, + // '& path': { + // stroke: Theme.color.white, + // strokeWidth: 1.5, + // }, }, }); @@ -38,3 +38,23 @@ export const moreMenuListStyling = css({ color: Theme.color.gray800, }, }); + +export const svgButtonStyling = css({ + width: '20px', + height: '20px', + marginLeft: '12px', + + cursor: 'pointer', +}); + +export const binIconStyling = css({ + '& path': { + stroke: Theme.color.white, + }, +}); + +export const editIconStyling = css({ + '& path': { + fill: Theme.color.white, + }, +}); diff --git a/frontend/src/components/common/TripInformation/TripButtons/TripButtons.tsx b/frontend/src/components/common/TripInformation/TripButtons/TripButtons.tsx index 25bc09b3a..8f1604a0a 100644 --- a/frontend/src/components/common/TripInformation/TripButtons/TripButtons.tsx +++ b/frontend/src/components/common/TripInformation/TripButtons/TripButtons.tsx @@ -1,11 +1,11 @@ import { useNavigate } from 'react-router-dom'; -import { Button, Menu, MenuItem, MenuList, useOverlay } from 'hang-log-design-system'; +import { Button } from 'hang-log-design-system'; import { - moreButtonStyling, - moreMenuListStyling, - moreMenuStyling, + binIconStyling, + editIconStyling, + svgButtonStyling, } from '@components/common/TripInformation/TripButtons/TripButtons.style'; import TripShareButton from '@components/common/TripInformation/TripShareButton/TripShareButton'; @@ -15,7 +15,8 @@ import type { TripData } from '@type/trip'; import { PATH } from '@constants/path'; -import MoreIcon from '@assets/svg/more-icon.svg'; +import BinIcon from '@assets/svg/bin-icon.svg'; +import EditIcon from '@assets/svg/edit-icon.svg'; interface TripButtonsProps { tripId: number; @@ -25,7 +26,6 @@ interface TripButtonsProps { export const TripButtons = ({ tripId, sharedCode }: TripButtonsProps) => { const navigate = useNavigate(); const deleteTripMutation = useDeleteTripMutation(); - const { isOpen: isMenuOpen, open: openMenu, close: closeMenu } = useOverlay(); const goToEditPage = () => { navigate(PATH.EDIT_TRIP(tripId)); @@ -50,17 +50,8 @@ export const TripButtons = ({ tripId, sharedCode }: TripButtonsProps) => { 가계부 - - - {isMenuOpen && ( - - 수정 - 삭제 - - )} - + + ); }; diff --git a/frontend/src/components/common/TripInformation/TripInformation.style.ts b/frontend/src/components/common/TripInformation/TripInformation.style.ts index c1c8f28db..737f27b96 100644 --- a/frontend/src/components/common/TripInformation/TripInformation.style.ts +++ b/frontend/src/components/common/TripInformation/TripInformation.style.ts @@ -56,10 +56,14 @@ export const descriptionStyling = css({ export const buttonContainerStyling = css({ position: 'absolute', top: Theme.spacer.spacing4, - right: Theme.spacer.spacing4, + right: '50px', display: 'flex', alignItems: 'center', gap: Theme.spacer.spacing1, + + '@media screen and (max-width: 600px)': { + right: Theme.spacer.spacing4, + }, }); export const badgeStyling = css({ @@ -85,6 +89,6 @@ export const badgeWrapperStyling = css({ }, '@media screen and (max-width: 600px)': { - width: 'calc(100vw - 220px)', + width: 'calc(100vw - 232px)', }, }); diff --git a/frontend/src/components/common/TripInformation/TripShareButton/TripShareButton.style.ts b/frontend/src/components/common/TripInformation/TripShareButton/TripShareButton.style.ts index 54380021b..b57dc2e9e 100644 --- a/frontend/src/components/common/TripInformation/TripShareButton/TripShareButton.style.ts +++ b/frontend/src/components/common/TripInformation/TripShareButton/TripShareButton.style.ts @@ -3,7 +3,8 @@ import { css } from '@emotion/react'; import { Theme } from 'hang-log-design-system'; export const shareButtonStyling = css({ - marginLeft: Theme.spacer.spacing3, + height: '20px', + marginLeft: '12px', border: 'none', backgroundColor: 'transparent', diff --git a/frontend/src/components/common/TripItem/EditMenu/EditMenu.style.ts b/frontend/src/components/common/TripItem/EditMenu/EditMenu.style.ts index f8e09ea0e..7233b6b19 100644 --- a/frontend/src/components/common/TripItem/EditMenu/EditMenu.style.ts +++ b/frontend/src/components/common/TripItem/EditMenu/EditMenu.style.ts @@ -20,25 +20,41 @@ export const moreButtonStyling = css({ }, }); -export const getMoreMenuStyling = (hasImage: boolean, imageHeight: number) => { +export const getEditMenuStyling = (hasImage: boolean, imageHeight: number) => { return css({ position: 'absolute', top: 0, right: 0, + cursor: 'pointer', + '@media screen and (max-width: 600px)': { top: hasImage ? `calc(${imageHeight}px + ${Theme.spacer.spacing3})` : 0, }, + + '& svg': { + width: '18px', + height: '18px', + }, }); }; -export const moreMenuListStyling = css({ - minWidth: 'unset', - width: 'max-content', +export const binIconStyling = css({ + '& path': { + stroke: Theme.color.gray600, + }, + + '&:hover path': { + stroke: Theme.color.red300, + }, +}); - transform: 'translateY(16px)', +export const editIconStyling = css({ + '& path': { + fill: Theme.color.gray600, + }, - '& > li': { - padding: `${Theme.spacer.spacing2} ${Theme.spacer.spacing3}`, + '&:hover path': { + fill: Theme.color.blue600, }, }); diff --git a/frontend/src/components/common/TripItem/EditMenu/EditMenu.tsx b/frontend/src/components/common/TripItem/EditMenu/EditMenu.tsx index 41d9046cf..2f95f33d7 100644 --- a/frontend/src/components/common/TripItem/EditMenu/EditMenu.tsx +++ b/frontend/src/components/common/TripItem/EditMenu/EditMenu.tsx @@ -1,9 +1,9 @@ -import { Menu, MenuItem, MenuList, useOverlay } from 'hang-log-design-system'; +import { Flex, useOverlay } from 'hang-log-design-system'; import { - getMoreMenuStyling, - moreButtonStyling, - moreMenuListStyling, + binIconStyling, + editIconStyling, + getEditMenuStyling, } from '@components/common/TripItem/EditMenu/EditMenu.style'; import TripItemAddModal from '@components/trip/TripItemAddModal/TripItemAddModal'; @@ -11,7 +11,8 @@ import { useDeleteTripItemMutation } from '@hooks/api/useDeleteTripItemMutation' import type { TripItemData } from '@type/tripItem'; -import MoreIcon from '@assets/svg/more-icon.svg'; +import BinIcon from '@assets/svg/bin-icon.svg'; +import EditIcon from '@assets/svg/edit-icon.svg'; interface EditMenuProps extends TripItemData { tripId: number; @@ -23,7 +24,6 @@ interface EditMenuProps extends TripItemData { const EditMenu = ({ tripId, dayLogId, hasImage, imageHeight, ...information }: EditMenuProps) => { const deleteTripItemMutation = useDeleteTripItemMutation(); - const { isOpen: isMenuOpen, open: openMenu, close: closeMenu } = useOverlay(); const { isOpen: isEditModalOpen, open: openEditModal, close: closeEditModal } = useOverlay(); const handleTripItemDelete = () => { @@ -32,17 +32,13 @@ const EditMenu = ({ tripId, dayLogId, hasImage, imageHeight, ...information }: E return ( <> - - - {isMenuOpen && ( - - 수정 - 삭제 - - )} - + + + + {isEditModalOpen && ( Date: Sat, 2 Sep 2023 18:12:23 +0900 Subject: [PATCH 11/15] =?UTF-8?q?refactor:=20=EA=B8=B0=ED=83=80=20?= =?UTF-8?q?=ED=83=AD=EC=97=90=EC=84=9C=20=EC=95=84=EC=9D=B4=ED=85=9C=20?= =?UTF-8?q?=EC=83=9D=EC=84=B1=20=EC=8B=9C=20=EB=94=94=ED=8F=B4=ED=8A=B8=20?= =?UTF-8?q?=EC=B9=B4=ED=85=8C=EA=B3=A0=EB=A6=AC=20=EA=B8=B0=ED=83=80?= =?UTF-8?q?=EB=A1=9C=20=EC=84=A4=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/hooks/trip/useAddTripItemForm.ts | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/frontend/src/hooks/trip/useAddTripItemForm.ts b/frontend/src/hooks/trip/useAddTripItemForm.ts index 0fbf26f8a..93c29785f 100644 --- a/frontend/src/hooks/trip/useAddTripItemForm.ts +++ b/frontend/src/hooks/trip/useAddTripItemForm.ts @@ -3,6 +3,7 @@ import { useCallback, useState } from 'react'; import { useAddTripItemMutation } from '@hooks/api/useAddTripItemMutation'; import { useUpdateTripItemMutation } from '@hooks/api/useUpdateTripItemMutation'; +import { useTrip } from '@hooks/trip/useTrip'; import { isEmptyString } from '@utils/validator'; @@ -25,11 +26,15 @@ export const useAddTripItemForm = ({ onSuccess, onError, }: UseAddTripItemFormParams) => { + const { dates } = useTrip(tripId); + + const dayLogIndex = dates.findIndex((date) => date.id === initialDayLogId)!; + const addTripItemMutation = useAddTripItemMutation(); const updateTripItemMutation = useUpdateTripItemMutation(); const [tripItemInformation, setTripItemInformation] = useState( initialData ?? { - itemType: true, + itemType: dayLogIndex !== dates.length - 1, dayLogId: initialDayLogId, title: '', place: null, From 540f4897ea96ab21bd6e9bbc6fa4888e9d8eb203 Mon Sep 17 00:00:00 2001 From: Ashley Heo Date: Sat, 2 Sep 2023 18:25:11 +0900 Subject: [PATCH 12/15] =?UTF-8?q?refactor:=20=EC=9D=B4=EB=AF=B8=EC=A7=80?= =?UTF-8?q?=20=EC=9A=A9=EB=9F=89=2010mb=20=EC=9D=B4=EC=83=81=EC=9C=BC?= =?UTF-8?q?=EB=A1=9C=20=EC=9D=B8=ED=95=9C=20=EC=97=90=EB=9F=AC=20=EB=B0=9C?= =?UTF-8?q?=EC=83=9D=20=EC=8B=9C=20=EC=83=81=ED=99=A9=EC=97=90=20=EB=A7=9E?= =?UTF-8?q?=EB=8A=94=20=EC=97=90=EB=9F=AC=20=EB=A9=94=EC=84=B8=EC=A7=80=20?= =?UTF-8?q?=EB=B3=B4=EC=97=AC=EC=A3=BC=EA=B8=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/constants/api.ts | 2 ++ frontend/src/hooks/api/useImageMutation.ts | 13 ++++++++++++- 2 files changed, 14 insertions(+), 1 deletion(-) diff --git a/frontend/src/constants/api.ts b/frontend/src/constants/api.ts index 2ec84cafb..b6a5e29f3 100644 --- a/frontend/src/constants/api.ts +++ b/frontend/src/constants/api.ts @@ -40,10 +40,12 @@ export const HTTP_STATUS_CODE = { BAD_REQUEST: 400, UNAUTHORIZED: 401, NOT_FOUND: 404, + CONTENT_TOO_LARGE: 413, INTERNAL_SERVER_ERROR: 500, } as const; export const ERROR_CODE = { + LARGE_IMAGE_FILE: 5001, TOKEN_ERROR_RANGE: 9000, INVALID_REFRESH_TOKEN: 9101, INVALID_ACCESS_TOKEN: 9102, diff --git a/frontend/src/hooks/api/useImageMutation.ts b/frontend/src/hooks/api/useImageMutation.ts index 08c5154e4..3296075ba 100644 --- a/frontend/src/hooks/api/useImageMutation.ts +++ b/frontend/src/hooks/api/useImageMutation.ts @@ -6,7 +6,7 @@ import { useTokenError } from '@hooks/member/useTokenError'; import { postImage } from '@api/image/postImage'; import type { ErrorResponseData } from '@api/interceptors'; -import { ERROR_CODE } from '@constants/api'; +import { ERROR_CODE, HTTP_STATUS_CODE } from '@constants/api'; export const useImageMutation = () => { const { createToast } = useToast(); @@ -21,6 +21,17 @@ export const useImageMutation = () => { return; } + if ( + (error.code && error.code === ERROR_CODE.LARGE_IMAGE_FILE) || + error.statusCode === HTTP_STATUS_CODE.CONTENT_TOO_LARGE + ) { + createToast( + '이미지 용량이 커서 업로드에 실패했습니다. 10mb 이하의 파일을 업로드해 주세요.' + ); + + return; + } + createToast('이미지 업로드에 실패했습니다. 잠시 후 다시 시도해 주세요.'); }, }); From 1f6d1fbf442d29a00b7fdaae217b11dc24da825f Mon Sep 17 00:00:00 2001 From: Ashley Heo Date: Sat, 2 Sep 2023 18:29:42 +0900 Subject: [PATCH 13/15] =?UTF-8?q?refactor:=20=EC=95=84=EC=9D=B4=ED=85=9C?= =?UTF-8?q?=20=EC=B6=94=EA=B0=80=ED=95=A0=20=EB=95=8C=20=EC=A0=9C=EB=AA=A9?= =?UTF-8?q?=EC=97=90=20=EA=B3=B5=EB=B0=B1=20=EC=9E=85=EB=A0=A5=20=ED=9B=84?= =?UTF-8?q?=20=EC=95=84=EC=9D=B4=ED=85=9C=20=EC=B6=94=EA=B0=80=20=EC=8B=9C?= =?UTF-8?q?=20=EC=97=90=EB=9F=AC=20=EB=A9=94=EC=84=B8=EC=A7=80=20=EB=B3=B4?= =?UTF-8?q?=EC=97=AC=EC=A3=BC=EA=B8=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/hooks/trip/useAddTripItemForm.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/hooks/trip/useAddTripItemForm.ts b/frontend/src/hooks/trip/useAddTripItemForm.ts index 93c29785f..434cb3f33 100644 --- a/frontend/src/hooks/trip/useAddTripItemForm.ts +++ b/frontend/src/hooks/trip/useAddTripItemForm.ts @@ -61,7 +61,7 @@ export const useAddTripItemForm = ({ ); const isFormError = () => { - if (isEmptyString(tripItemInformation.title)) { + if (isEmptyString(tripItemInformation.title.trim())) { return true; } From 808f97709b543104b81a39832207f1fce0ea61b0 Mon Sep 17 00:00:00 2001 From: Ashley Heo Date: Sat, 2 Sep 2023 18:42:08 +0900 Subject: [PATCH 14/15] =?UTF-8?q?refactor:=20TripItemList=20=EC=BB=B4?= =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/components/common/TripItemList/TripItemList.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/frontend/src/components/common/TripItemList/TripItemList.tsx b/frontend/src/components/common/TripItemList/TripItemList.tsx index 62ac075ba..d084a690f 100644 --- a/frontend/src/components/common/TripItemList/TripItemList.tsx +++ b/frontend/src/components/common/TripItemList/TripItemList.tsx @@ -32,10 +32,13 @@ interface TripItemListProps { const TripItemList = ({ tripId, dayLogId, tripItems, isEditable = true }: TripItemListProps) => { const dayLogOrderMutation = useDayLogOrderMutation(); - const { observer } = useScrollFocus(); + const listRef = useRef(null); const itemRef = useRef(null); + + const { observer } = useScrollFocus(); const { scrollToCenter } = useAutoScroll(listRef, itemRef); + const clickedMarkerId = useRecoilValue(clickedMarkerIdState); useEffect(() => { From cad43cf60593e29a1efdbda2f9f291d96437ad04 Mon Sep 17 00:00:00 2001 From: Ashley Heo Date: Mon, 4 Sep 2023 13:48:15 +0900 Subject: [PATCH 15/15] =?UTF-8?q?fix:=20=ED=85=8C=EC=8A=A4=ED=8A=B8=20?= =?UTF-8?q?=EC=BD=94=EB=93=9C=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/cypress/e2e/login.cy.ts | 1 - frontend/cypress/e2e/trip.cy.ts | 25 ++++++++----------- .../TripButtons/TripButtons.style.ts | 5 ---- .../common/TripItem/EditMenu/EditMenu.tsx | 9 +++++-- 4 files changed, 18 insertions(+), 22 deletions(-) diff --git a/frontend/cypress/e2e/login.cy.ts b/frontend/cypress/e2e/login.cy.ts index 11b91ef7b..9164c4263 100644 --- a/frontend/cypress/e2e/login.cy.ts +++ b/frontend/cypress/e2e/login.cy.ts @@ -16,7 +16,6 @@ describe('로그인', () => { it('웹 사이트 처음 방문 시 서비스 소개 페이지를 볼 수 있다.', () => { cy.findByText('로그인'); - cy.findByText('회원가입'); cy.findByText('시작하기'); }); diff --git a/frontend/cypress/e2e/trip.cy.ts b/frontend/cypress/e2e/trip.cy.ts index 1f93c3ac1..c2c2b1e6f 100644 --- a/frontend/cypress/e2e/trip.cy.ts +++ b/frontend/cypress/e2e/trip.cy.ts @@ -39,10 +39,10 @@ describe('여행 수정 페이지', () => { }); }); - it('여행 수정 페이지에서 "여행 정보 수정" 버튼과 "저장" 버튼을 볼 수 있다.', () => { + it('여행 수정 페이지에서 "여행 정보 수정" 버튼과 "완료" 버튼을 볼 수 있다.', () => { cy.findByText('여행 정보 수정'); - cy.findByText('저장'); + cy.findByText('완료'); }); it('여행 수정 페이지에서 선택 된 날짜 길이 만큼 데이로그 탭이 만들어져 있다.', () => { @@ -62,7 +62,7 @@ describe('여행 수정 페이지', () => { cy.findByPlaceholderText('소제목').should('have.value', title); items.forEach((item: TripItemData) => { - cy.get('h6').contains(item.title); + cy.get('p').contains(item.title); }); }); }); @@ -74,7 +74,7 @@ describe('여행 수정 페이지', () => { const { items } = expectedData.dayLogs[1]; items.forEach((item: TripItemData) => { - cy.get('h6').contains(item.title); + cy.get('p').contains(item.title); }); }); }); @@ -289,7 +289,7 @@ describe('여행 아이템 추가', () => { cy.findByRole('dialog').should('not.exist'); - cy.get('h6').contains('샹젤리제 거리 -> 에펠탑 지하철').should('exist'); + cy.get('p').contains('샹젤리제 거리 -> 에펠탑 지하철').should('exist'); }); it('여행 아이템 추가 모달에서 필수 정보 외에도 입력하고 아이템을 추가한 후에 여행 아이템 목록에서 볼 수 있다.', () => { @@ -310,7 +310,7 @@ describe('여행 아이템 추가', () => { cy.findByRole('dialog').should('not.exist'); - cy.get('h6').contains('샹젤리제 거리 -> 에펠탑 지하철').should('exist'); + cy.get('p').contains('샹젤리제 거리 -> 에펠탑 지하철').should('exist'); cy.findByText('샹젤리제 거리 -> 에펠탑 지하철').parent().find('svg').should('have.length', 6); cy.findByText('샹젤리제 거리 -> 에펠탑 지하철') @@ -339,16 +339,14 @@ describe('여행 아이템 수정', () => { cy.wait(4000); }); - it('여행 아이템의 더 보기 버튼을 클릭해서 여행 아이템을 수정할 수 있다.', () => { - cy.get('button[aria-label="더 보기 메뉴"]').first().click({ force: true }); - cy.findByText('수정').click(); + it('여행 아이템의 수정 버튼을 클릭해서 여행 아이템을 수정할 수 있다.', () => { + cy.get('svg[aria-label="수정"]').first().click({ force: true }); cy.findByRole('dialog').should('be.visible'); }); it.skip('여행 아이템 수정 모달을 열면 여행 아이템 정보가 입력되어 있다.', () => { - cy.get('button[aria-label="더 보기 메뉴"]').first().click({ force: true }); - cy.findByText('수정').click(); + cy.get('svg[aria-label="수정"]').first().click({ force: true }); cy.fixture('trip.json').then((expectedData) => { const { items } = expectedData.dayLogs[0]; @@ -365,8 +363,7 @@ describe('여행 아이템 수정', () => { }); it.skip('여행 아이템 수정 모달에서 여행 아이템 정보를 수정하면 여행 아이템 목록에서 변경된 정보를 볼 수 있다.', () => { - cy.get('button[aria-label="더 보기 메뉴"]').first().click({ force: true }); - cy.findByText('수정').click(); + cy.get('svg[aria-label="수정"]').first().click({ force: true }); cy.findByRole('radio', { name: /기타/ }).click(); cy.get('#title').type(' 택시'); @@ -383,7 +380,7 @@ describe('여행 아이템 수정', () => { const { items } = expectedData.dayLogs[0]; const firstItem: TripItemData = items[0]; - cy.get('h6').contains(`${firstItem.title} 택시`).should('exist'); + cy.get('p').contains(`${firstItem.title} 택시`).should('exist'); cy.findByText(`${firstItem.title} 택시`) .parent() diff --git a/frontend/src/components/common/TripInformation/TripButtons/TripButtons.style.ts b/frontend/src/components/common/TripInformation/TripButtons/TripButtons.style.ts index f4c8cca34..dbfafc355 100644 --- a/frontend/src/components/common/TripInformation/TripButtons/TripButtons.style.ts +++ b/frontend/src/components/common/TripInformation/TripButtons/TripButtons.style.ts @@ -13,11 +13,6 @@ export const moreButtonStyling = css({ '& svg': { width: '20px', height: '20px', - - // '& path': { - // stroke: Theme.color.white, - // strokeWidth: 1.5, - // }, }, }); diff --git a/frontend/src/components/common/TripItem/EditMenu/EditMenu.tsx b/frontend/src/components/common/TripItem/EditMenu/EditMenu.tsx index 2f95f33d7..23945118a 100644 --- a/frontend/src/components/common/TripItem/EditMenu/EditMenu.tsx +++ b/frontend/src/components/common/TripItem/EditMenu/EditMenu.tsx @@ -36,8 +36,13 @@ const EditMenu = ({ tripId, dayLogId, hasImage, imageHeight, ...information }: E styles={{ direction: 'column', gap: '12px' }} css={getEditMenuStyling(hasImage, imageHeight)} > - - + + {isEditModalOpen && (