diff --git a/frontend/cypress/e2e/trip.cy.ts b/frontend/cypress/e2e/trip.cy.ts index c2c2b1e6f..c82295fe0 100644 --- a/frontend/cypress/e2e/trip.cy.ts +++ b/frontend/cypress/e2e/trip.cy.ts @@ -165,7 +165,6 @@ describe('여행 정보 수정', () => { }); }); - // 로컬에서는 잘 돌아가는데, github action으로는 안 됨.... it.skip('여행 정보 수정 모달에서 여행 정보를 수정하면 변경된 여행 정보를 여행 정보 수정 페이지에서 볼 수 있다.', () => { cy.findByText('여행 정보 수정').click(); diff --git a/frontend/cypress/fixtures/recommendedTrips.json b/frontend/cypress/fixtures/recommendedTrips.json index 1dcdb614d..31ad92680 100644 --- a/frontend/cypress/fixtures/recommendedTrips.json +++ b/frontend/cypress/fixtures/recommendedTrips.json @@ -18,7 +18,7 @@ ], "startDate": "2023-06-13", "endDate": "2023-06-20", - "description": "어쩌구 저쩌구 좌충우돌좌충우돌좌충우돌좌충우돌좌충우돌좌충우돌 라곤의 런던 여행기", + "description": "어쩌구 저쩌구", "likeCount": 123, "isLike": true }, diff --git a/frontend/src/components/common/TripInformation/TripButtons/TripButtons.tsx b/frontend/src/components/common/TripInformation/TripButtons/TripButtons.tsx index 82e023614..c198f20e9 100644 --- a/frontend/src/components/common/TripInformation/TripButtons/TripButtons.tsx +++ b/frontend/src/components/common/TripInformation/TripButtons/TripButtons.tsx @@ -12,32 +12,34 @@ import { import TripShareButton from '@components/common/TripInformation/TripShareButton/TripShareButton'; import { useDeleteTripMutation } from '@hooks/api/useDeleteTripMutation'; +import { useTrip } from '@hooks/trip/useTrip'; -import type { TripData } from '@type/trip'; +import type { TripData, TripTypeData } from '@type/trip'; import { PATH } from '@constants/path'; +import { TRIP_TYPE } from '@constants/trip'; import BinIcon from '@assets/svg/bin-icon.svg'; import EditIcon from '@assets/svg/edit-icon.svg'; interface TripButtonsProps { + tripType: TripTypeData; tripId: string; sharedCode: TripData['sharedCode']; - isShared: boolean; - isPublished?: boolean; publishState: boolean; } -export const TripButtons = ({ - tripId, - sharedCode, - isShared, - isPublished = false, - publishState, -}: TripButtonsProps) => { +export const TripButtons = ({ tripType, tripId, sharedCode, publishState }: TripButtonsProps) => { + const isPersonal = tripType === TRIP_TYPE.PERSONAL; + const isPublished = tripType === TRIP_TYPE.PUBLISHED; + const navigate = useNavigate(); const deleteTripMutation = useDeleteTripMutation(); + const { + tripData: { isWriter }, + } = useTrip(tripType, tripId); + const { isOpen: isDeleteModalOpen, close: closeDeleteModal, @@ -49,12 +51,12 @@ export const TripButtons = ({ }; const goToExpensePage = () => { - if (isPublished) { + if (tripType === TRIP_TYPE.PUBLISHED) { navigate(PATH.COMMUNITY_EXPENSE(tripId)); return; } - if (isShared) { + if (tripType === TRIP_TYPE.SHARED) { navigate(PATH.SHARE_EXPENSE(tripId)); return; } @@ -76,7 +78,7 @@ export const TripButtons = ({ - {!isShared && ( + {isPersonal && ( <> @@ -97,6 +99,11 @@ export const TripButtons = ({ )} + {isPublished && isWriter && ( + + )} ); }; diff --git a/frontend/src/components/common/TripInformation/TripInformation.tsx b/frontend/src/components/common/TripInformation/TripInformation.tsx index 880d7aad1..c886ceea6 100644 --- a/frontend/src/components/common/TripInformation/TripInformation.tsx +++ b/frontend/src/components/common/TripInformation/TripInformation.tsx @@ -25,7 +25,9 @@ import { mediaQueryMobileState } from '@store/mediaQuery'; import { formatDate } from '@utils/formatter'; -import type { TripTypeData } from '@type/trip'; +import type { TripData, TripTypeData } from '@type/trip'; + +import { TRIP_TYPE } from '@constants/trip'; import DefaultThumbnail from '@assets/png/trip-information_default-thumbnail.png'; @@ -33,22 +35,22 @@ interface TripInformationProps { tripType: TripTypeData; tripId: string; isEditable?: boolean; - isShared?: boolean; - isPublished?: boolean; + initialTripData?: TripData; } const TripInformation = ({ isEditable = true, - isShared = false, - isPublished = false, tripId, tripType, + initialTripData, }: TripInformationProps) => { const isMobile = useRecoilValue(mediaQueryMobileState); + const isPublished = tripType === TRIP_TYPE.PUBLISHED; + const { tripData: savedTripData } = useTrip(tripType, tripId); - const { isOpen: isEditModalOpen, close: closeEditModal, open: openEditModal } = useOverlay(); + const tripData = initialTripData || savedTripData; - const { tripData } = useTrip(tripType, tripId); + const { isOpen: isEditModalOpen, close: closeEditModal, open: openEditModal } = useOverlay(); const [likeCount, setLikeCount] = useState(tripData.likeCount); @@ -91,7 +93,7 @@ const TripInformation = ({ 작성자 이미지 {tripData.writer.nickname} @@ -114,10 +116,9 @@ const TripInformation = ({ ) : ( )} diff --git a/frontend/src/components/expense/ExpenseCategories/ExpenseCategories.tsx b/frontend/src/components/expense/ExpenseCategories/ExpenseCategories.tsx index 70b1ab0dd..cd7547009 100644 --- a/frontend/src/components/expense/ExpenseCategories/ExpenseCategories.tsx +++ b/frontend/src/components/expense/ExpenseCategories/ExpenseCategories.tsx @@ -7,15 +7,17 @@ import { useExpense } from '@hooks/expense/useExpense'; import { formatDate, formatNumberToMoney } from '@utils/formatter'; -import { CURRENCY_ICON, DEFAULT_CURRENCY } from '@constants/trip'; +import type { TripTypeData } from '@type/trip'; + +import { CURRENCY_ICON, DEFAULT_CURRENCY, TRIP_TYPE } from '@constants/trip'; interface ExpenseCategoriesProps { tripId: string; - isShared: boolean; + tripType: TripTypeData; } -const ExpenseCategories = ({ tripId, isShared }: ExpenseCategoriesProps) => { - const { categoryExpenseData } = useExpense(tripId); +const ExpenseCategories = ({ tripId, tripType }: ExpenseCategoriesProps) => { + const { categoryExpenseData } = useExpense(tripId, tripType); const { selected: selectedCategoryId, handleSelectClick: handleCategoryIdSelectClick } = useSelect(categoryExpenseData.categoryItems[0].category.id); @@ -57,7 +59,7 @@ const ExpenseCategories = ({ tripId, isShared }: ExpenseCategoriesProps) => { ) : ( - + )} ); diff --git a/frontend/src/components/expense/ExpenseCategoryInformation/ExpenseCategoryInformation.tsx b/frontend/src/components/expense/ExpenseCategoryInformation/ExpenseCategoryInformation.tsx index 2f8b31e46..5c8ed6cee 100644 --- a/frontend/src/components/expense/ExpenseCategoryInformation/ExpenseCategoryInformation.tsx +++ b/frontend/src/components/expense/ExpenseCategoryInformation/ExpenseCategoryInformation.tsx @@ -11,14 +11,17 @@ import { useExpense } from '@hooks/expense/useExpense'; import { formatNumberToMoney } from '@utils/formatter'; +import type { TripTypeData } from '@type/trip'; + import { CURRENCY_ICON, DEFAULT_CURRENCY } from '@constants/trip'; interface ExpenseCategoryInformationProps { tripId: string; + tripType: TripTypeData; } -const ExpenseCategoryInformation = ({ tripId }: ExpenseCategoryInformationProps) => { - const { expenseData } = useExpense(tripId); +const ExpenseCategoryInformation = ({ tripId, tripType }: ExpenseCategoryInformationProps) => { + const { expenseData } = useExpense(tripId, tripType); return (
    diff --git a/frontend/src/components/expense/ExpenseDates/ExpenseDates.tsx b/frontend/src/components/expense/ExpenseDates/ExpenseDates.tsx index 8140d6c93..0d0442824 100644 --- a/frontend/src/components/expense/ExpenseDates/ExpenseDates.tsx +++ b/frontend/src/components/expense/ExpenseDates/ExpenseDates.tsx @@ -7,15 +7,17 @@ import { useExpense } from '@hooks/expense/useExpense'; import { formatDate, formatMonthDate, formatNumberToMoney } from '@utils/formatter'; -import { CURRENCY_ICON, DEFAULT_CURRENCY } from '@constants/trip'; +import type { TripTypeData } from '@type/trip'; + +import { CURRENCY_ICON, DEFAULT_CURRENCY, TRIP_TYPE } from '@constants/trip'; interface ExpenseDatesProps { tripId: string; - isShared: boolean; + tripType: TripTypeData; } -const ExpenseDates = ({ tripId, isShared }: ExpenseDatesProps) => { - const { expenseData, dates } = useExpense(tripId); +const ExpenseDates = ({ tripId, tripType }: ExpenseDatesProps) => { + const { expenseData, dates } = useExpense(tripId, tripType); const { selected: selectedDayLogId, handleSelectClick: handleDayLogIdSelectClick } = useSelect( expenseData.dayLogs[0].id @@ -75,7 +77,7 @@ const ExpenseDates = ({ tripId, isShared }: ExpenseDatesProps) => { ) : ( - + )} ); diff --git a/frontend/src/components/expense/ExpenseInformation/ExpenseInformation.tsx b/frontend/src/components/expense/ExpenseInformation/ExpenseInformation.tsx index ea8477eb6..57645c036 100644 --- a/frontend/src/components/expense/ExpenseInformation/ExpenseInformation.tsx +++ b/frontend/src/components/expense/ExpenseInformation/ExpenseInformation.tsx @@ -17,28 +17,30 @@ import { mediaQueryMobileState } from '@store/mediaQuery'; import { formatDate } from '@utils/formatter'; +import type { TripTypeData } from '@type/trip'; + import { PATH } from '@constants/path'; +import { TRIP_TYPE } from '@constants/trip'; interface ExpenseInformationProps { tripId: string; - isShared: boolean; - isPublished: boolean; + tripType: TripTypeData; } -const ExpenseInformation = ({ tripId, isShared, isPublished }: ExpenseInformationProps) => { +const ExpenseInformation = ({ tripId, tripType }: ExpenseInformationProps) => { const navigate = useNavigate(); const isMobile = useRecoilValue(mediaQueryMobileState); - const { expenseData } = useExpense(tripId); + const { expenseData } = useExpense(tripId, tripType); const goToTripPage = () => { - if (isPublished) { + if (tripType === TRIP_TYPE.PUBLISHED) { navigate(PATH.COMMUNITY_TRIP(tripId)); return; } - if (isShared) { + if (tripType === TRIP_TYPE.SHARED) { navigate(PATH.SHARE_TRIP(tripId)); return; } diff --git a/frontend/src/components/expense/ExpenseListSection/ExpenseListSection.tsx b/frontend/src/components/expense/ExpenseListSection/ExpenseListSection.tsx index 71fd9d03c..43b57a3d3 100644 --- a/frontend/src/components/expense/ExpenseListSection/ExpenseListSection.tsx +++ b/frontend/src/components/expense/ExpenseListSection/ExpenseListSection.tsx @@ -11,14 +11,16 @@ import { import { mediaQueryMobileState } from '@store/mediaQuery'; +import type { TripTypeData } from '@type/trip'; + import { EXPENSE_LIST_FILTERS } from '@constants/expense'; interface ExpenseListProps { tripId: string; - isShared: boolean; + tripType: TripTypeData; } -const ExpenseListSection = ({ tripId, isShared }: ExpenseListProps) => { +const ExpenseListSection = ({ tripId, tripType }: ExpenseListProps) => { const isMobile = useRecoilValue(mediaQueryMobileState); const { selected: selectedFilter, handleSelectClick: handleFilterSelectClick } = useSelect( @@ -47,9 +49,9 @@ const ExpenseListSection = ({ tripId, isShared }: ExpenseListProps) => { {selectedFilter === EXPENSE_LIST_FILTERS.DAY_LOG ? ( - + ) : ( - + )} ); diff --git a/frontend/src/components/expense/TotalExpenseSection/TotalExpenseSection.tsx b/frontend/src/components/expense/TotalExpenseSection/TotalExpenseSection.tsx index 909c6808a..28f027d00 100644 --- a/frontend/src/components/expense/TotalExpenseSection/TotalExpenseSection.tsx +++ b/frontend/src/components/expense/TotalExpenseSection/TotalExpenseSection.tsx @@ -16,23 +16,24 @@ import { mediaQueryMobileState } from '@store/mediaQuery'; import { formatNumberToMoney } from '@utils/formatter'; +import type { TripTypeData } from '@type/trip'; + import { CURRENCY_ICON, DEFAULT_CURRENCY } from '@constants/trip'; import { EXPENSE_CATEGORY_CHART_SIZE, EXPENSE_CATEGORY_CHART_STROKE_WIDTH } from '@constants/ui'; interface TotalExpenseSectionProps { tripId: string; - isShared: boolean; - isPublished: boolean; + tripType: TripTypeData; } -const TotalExpenseSection = ({ tripId, isShared, isPublished }: TotalExpenseSectionProps) => { +const TotalExpenseSection = ({ tripId, tripType }: TotalExpenseSectionProps) => { const isMobile = useRecoilValue(mediaQueryMobileState); - const { expenseData, categoryChartData } = useExpense(tripId); + const { expenseData, categoryChartData } = useExpense(tripId, tripType); return (
    - + 총 경비 :{' '} @@ -52,7 +53,7 @@ const TotalExpenseSection = ({ tripId, isShared, isPublished }: TotalExpenseSect strokeWidth={EXPENSE_CATEGORY_CHART_STROKE_WIDTH} /> - +
    ); }; diff --git a/frontend/src/components/layout/Header/Header.tsx b/frontend/src/components/layout/Header/Header.tsx index 26c5bd798..475bca759 100644 --- a/frontend/src/components/layout/Header/Header.tsx +++ b/frontend/src/components/layout/Header/Header.tsx @@ -29,7 +29,7 @@ const Header = () => { return (
    - + { > 커뮤니티 - void; -} - -const ImageInput = ({ initialImage, updateCoverImage }: ImageInputProps) => { - const handleImageUrlsChange = useCallback( - (imageUrls: string[]) => { - updateCoverImage(imageUrls[0]); - }, - [updateCoverImage] - ); - - const { - uploadedImageUrls: uploadedImageUrl, - handleImageUpload, - handleImageRemoval, - } = useMultipleImageUpload({ - initialImageUrls: initialImage === null ? [] : [initialImage], - onSuccess: handleImageUrlsChange, - }); - - return ( - - ); -}; - -export default ImageInput; diff --git a/frontend/src/components/trip/TripInfoEditModal/TripInfoEditModal.style.ts b/frontend/src/components/trip/TripInfoEditModal/TripInfoEditModal.style.ts index a2bca61af..7822709be 100644 --- a/frontend/src/components/trip/TripInfoEditModal/TripInfoEditModal.style.ts +++ b/frontend/src/components/trip/TripInfoEditModal/TripInfoEditModal.style.ts @@ -7,7 +7,7 @@ export const wrapperStyling = css({ '@media screen and (max-width: 600px)': { width: `calc(100vw - ${Theme.spacer.spacing4})`, - height: `calc(100vh - ${Theme.spacer.spacing9})`, + height: '80vh', }, }); @@ -17,12 +17,9 @@ export const formStyling = css({ flexDirection: 'column', gap: Theme.spacer.spacing3, - '> button': { - width: '100%', - }, - '@media screen and (max-width: 600px)': { width: `calc(100vw - ${Theme.spacer.spacing7})`, + marginBottom: Theme.spacer.spacing6, overflowY: 'auto', '-ms-overflow-style': 'none', @@ -54,3 +51,13 @@ export const textareaStyling = css({ resize: 'none', fontFamily: 'none', }); + +export const buttonStyling = css({ + width: '100%', + + '@media screen and (max-width: 600px)': { + position: 'absolute', + width: '89%', + bottom: Theme.spacer.spacing3, + }, +}); diff --git a/frontend/src/components/trip/TripInfoEditModal/TripInfoEditModal.tsx b/frontend/src/components/trip/TripInfoEditModal/TripInfoEditModal.tsx index fb7940c61..ad775047f 100644 --- a/frontend/src/components/trip/TripInfoEditModal/TripInfoEditModal.tsx +++ b/frontend/src/components/trip/TripInfoEditModal/TripInfoEditModal.tsx @@ -1,9 +1,21 @@ -import { Button, Flex, Input, Modal, SupportingText, Textarea } from 'hang-log-design-system'; +import { useMultipleImageUpload } from '@/hooks/common/useMultipleImageUpload'; + +import { useCallback } from 'react'; + +import { + Button, + Flex, + ImageUploadInput, + Input, + Modal, + SupportingText, + Textarea, +} from 'hang-log-design-system'; import CitySearchBar from '@components/common/CitySearchBar/CitySearchBar'; import DateInput from '@components/common/DateInput/DateInput'; -import ImageInput from '@components/trip/TripInfoEditModal/ImageInput/ImageInput'; import { + buttonStyling, dateInputSupportingText, formStyling, textareaStyling, @@ -35,6 +47,23 @@ const TripInfoEditModal = ({ isOpen, onClose, ...information }: TripInfoEditModa handleSubmit, } = useTripEditForm(information, onClose); + const handleImageUrlsChange = useCallback( + (imageUrls: string[]) => { + updateCoverImage(imageUrls[0]); + }, + [updateCoverImage] + ); + + const { + uploadedImageUrls: uploadedImageUrl, + isImageUploading, + handleImageUpload, + handleImageRemoval, + } = useMultipleImageUpload({ + initialImageUrls: information.imageUrl === null ? [] : [information.imageUrl], + onSuccess: handleImageUrlsChange, + }); + return ( - - + + ); diff --git a/frontend/src/components/trip/TripItemAddModal/TripItemAddModal.style.ts b/frontend/src/components/trip/TripItemAddModal/TripItemAddModal.style.ts index 805e26353..986d474f2 100644 --- a/frontend/src/components/trip/TripItemAddModal/TripItemAddModal.style.ts +++ b/frontend/src/components/trip/TripItemAddModal/TripItemAddModal.style.ts @@ -8,7 +8,7 @@ export const wrapperStyling = css({ '@media screen and (max-width: 600px)': { width: `calc(100vw - ${Theme.spacer.spacing4})`, - height: `calc(100vh - ${Theme.spacer.spacing9})`, + height: `80%`, }, }); @@ -17,10 +17,6 @@ export const formStyling = css({ flexDirection: 'column', gap: Theme.spacer.spacing4, - '& > button': { - width: '100%', - }, - '@media screen and (max-width: 600px)': { width: `calc(100vw - ${Theme.spacer.spacing7})`, @@ -35,3 +31,13 @@ export const formStyling = css({ }, }, }); + +export const buttonStyling = css({ + width: '100%', + + '@media screen and (max-width: 600px)': { + position: 'absolute', + width: '89%', + bottom: Theme.spacer.spacing3, + }, +}); diff --git a/frontend/src/components/trip/TripItemAddModal/TripItemAddModal.tsx b/frontend/src/components/trip/TripItemAddModal/TripItemAddModal.tsx index 04df1a7a6..fa541c7cf 100644 --- a/frontend/src/components/trip/TripItemAddModal/TripItemAddModal.tsx +++ b/frontend/src/components/trip/TripItemAddModal/TripItemAddModal.tsx @@ -13,6 +13,7 @@ import PlaceInput from '@components/trip/TripItemAddModal/PlaceInput/PlaceInput' import StarRatingInput from '@components/trip/TripItemAddModal/StarRatingInput/StarRatingInput'; import TitleInput from '@components/trip/TripItemAddModal/TitleInput/TitleInput'; import { + buttonStyling, formStyling, wrapperStyling, } from '@components/trip/TripItemAddModal/TripItemAddModal.style'; @@ -78,14 +79,26 @@ const TripItemAddModal = ({ }); return ( - +
    - + - diff --git a/frontend/src/components/trips/CommunityTripsItem/CommunityTripsItem.style.ts b/frontend/src/components/trips/CommunityTripsItem/CommunityTripsItem.style.ts index 576fe9209..475acbdc7 100644 --- a/frontend/src/components/trips/CommunityTripsItem/CommunityTripsItem.style.ts +++ b/frontend/src/components/trips/CommunityTripsItem/CommunityTripsItem.style.ts @@ -46,7 +46,7 @@ export const nameStyling = css({ export const badgeBoxStyling = css({ width: `calc((100vw - 196px) / 5)`, - minHeight: '22px', + minHeight: '24px', marginTop: Theme.spacer.spacing3, marginBottom: Theme.spacer.spacing2, @@ -68,7 +68,7 @@ export const badgeBoxStyling = css({ }, }); -export const durationAndDescriptionStyling = css({ +export const durationStyling = css({ marginBottom: Theme.spacer.spacing1, '@media screen and (max-width: 600px)': { @@ -76,19 +76,18 @@ export const durationAndDescriptionStyling = css({ }, }); -export const durationTextStyling = css({ +export const descriptionStyling = css({ display: '-webkit-box', + '-webkit-line-clamp': '2', + '-webkit-box-orient': 'vertical', marginTop: '4px', width: '100%', - color: Theme.color.gray700, - - textOverflow: 'ellipsis', overflow: 'hidden', - wordBreak: 'break-word', - '-webkit-line-clamp': '2', - '-webkit-box-orient': 'vertical', + textOverflow: 'ellipsis', + wordBreak: 'break-all', + whiteSpace: 'pre-wrap', }); export const skeletonDurationTextStyling = css({ diff --git a/frontend/src/components/trips/CommunityTripsItem/CommunityTripsItem.tsx b/frontend/src/components/trips/CommunityTripsItem/CommunityTripsItem.tsx index 0e6d61586..e450d553c 100644 --- a/frontend/src/components/trips/CommunityTripsItem/CommunityTripsItem.tsx +++ b/frontend/src/components/trips/CommunityTripsItem/CommunityTripsItem.tsx @@ -10,7 +10,8 @@ import { boxStyling, clickableLikeStyling, communityItemInfoStyling, - durationAndDescriptionStyling, + descriptionStyling, + durationStyling, imageStyling, informationStyling, likeCountBoxStyling, @@ -83,10 +84,10 @@ const CommunityTripsItem = ({ index, trip }: CommunityTripsItemProps) => { {title} - + {duration} - + {description} diff --git a/frontend/src/components/trips/TripsHeader/TripsHeader.style.ts b/frontend/src/components/trips/TripsHeader/TripsHeader.style.ts index 8a8335cf8..5287af240 100644 --- a/frontend/src/components/trips/TripsHeader/TripsHeader.style.ts +++ b/frontend/src/components/trips/TripsHeader/TripsHeader.style.ts @@ -2,6 +2,19 @@ import { css } from '@emotion/react'; import { Theme } from 'hang-log-design-system'; +export const containerStyling = css({ + width: '100%', + marginTop: Theme.spacer.spacing3, + marginBottom: Theme.spacer.spacing4, + + justifyContent: 'space-between', + alignItems: 'center', + + '@media screen and (max-width: 600px)': { + justifyContent: 'center', + }, +}); + export const imageStyling = css({ width: '854px', marginLeft: Theme.spacer.spacing6, @@ -15,16 +28,15 @@ export const imageStyling = css({ }, }); -export const headingStyling = () => - css({ - margin: `0 ${Theme.spacer.spacing9}`, +export const headingStyling = css({ + margin: `0 ${Theme.spacer.spacing9}`, - fontWeight: 400, - wordBreak: 'keep-all', + fontWeight: 400, + wordBreak: 'keep-all', - '@media screen and (max-width: 600px)': { - margin: `0 ${Theme.spacer.spacing5}`, - padding: '48px 0 16px 0', - fontSize: Theme.heading.medium.fontSize, - }, - }); + '@media screen and (max-width: 600px)': { + margin: `0 ${Theme.spacer.spacing5}`, + padding: '48px 0 16px 0', + fontSize: Theme.heading.medium.fontSize, + }, +}); diff --git a/frontend/src/components/trips/TripsItem/TripsItem.style.ts b/frontend/src/components/trips/TripsItem/TripsItem.style.ts index bb01fdb2e..a11b051e0 100644 --- a/frontend/src/components/trips/TripsItem/TripsItem.style.ts +++ b/frontend/src/components/trips/TripsItem/TripsItem.style.ts @@ -45,7 +45,7 @@ export const nameStyling = css({ export const badgeBoxStyling = css({ width: `calc((100vw - 196px) / 5)`, - minHeight: '22px', + minHeight: '24px', marginTop: Theme.spacer.spacing3, marginBottom: Theme.spacer.spacing2, @@ -81,7 +81,8 @@ export const descriptionStyling = css({ overflow: 'hidden', textOverflow: 'ellipsis', - wordBreak: 'break-word', + wordBreak: 'break-all', + whiteSpace: 'pre-wrap', }); export const skeletonDurationTextStyling = css({ diff --git a/frontend/src/hooks/api/useCityQuery.ts b/frontend/src/hooks/api/useCityQuery.ts index 40f320863..8a32d7c27 100644 --- a/frontend/src/hooks/api/useCityQuery.ts +++ b/frontend/src/hooks/api/useCityQuery.ts @@ -7,7 +7,10 @@ import { getCity } from '@api/city/getCity'; import type { CityData } from '@type/city'; export const useCityQuery = () => { - const { data } = useQuery(['city'], getCity); + const { data } = useQuery(['city'], getCity, { + cacheTime: 24 * 60 * 60 * 60 * 1000, + staleTime: Infinity, + }); return { cityData: data! }; }; diff --git a/frontend/src/hooks/api/useCommunityTripQuery.ts b/frontend/src/hooks/api/useCommunityTripQuery.ts index ed1d9bdcb..d3f49a734 100644 --- a/frontend/src/hooks/api/useCommunityTripQuery.ts +++ b/frontend/src/hooks/api/useCommunityTripQuery.ts @@ -13,12 +13,8 @@ import type { TripData } from '@type/trip'; export const useCommunityTripQuery = (tripId: string) => { const isLoggedIn = useRecoilValue(isLoggedInState); - const { data } = useQuery( - ['PUBLISHED', tripId], - () => getCommunityTrip(tripId, isLoggedIn), - { - cacheTime: 0, - } + const { data } = useQuery(['PUBLISHED', tripId], () => + getCommunityTrip(tripId, isLoggedIn) ); return { tripData: data! }; diff --git a/frontend/src/hooks/api/useExpenseQuery.ts b/frontend/src/hooks/api/useExpenseQuery.ts index 5a433ae05..e13fe7d04 100644 --- a/frontend/src/hooks/api/useExpenseQuery.ts +++ b/frontend/src/hooks/api/useExpenseQuery.ts @@ -7,24 +7,31 @@ import { getExpense } from '@api/expense/getExpense'; import { getSharedExpense } from '@api/expense/getSharedExpense'; import type { ExpenseData } from '@type/expense'; +import type { TripTypeData } from '@type/trip'; -export const useExpenseQuery = ( - tripId: string, - { isShared, isPublished }: { isShared: boolean; isPublished: boolean } -) => { +import { TRIP_TYPE } from '@constants/trip'; + +export const useExpenseQuery = (tripId: string, tripType: TripTypeData) => { const queryFn = { expense: () => getExpense(tripId), }; - if (isPublished) { + if (tripType === TRIP_TYPE.PUBLISHED) { queryFn.expense = () => getCommunityTripExpense(tripId); } - if (isShared && !isPublished) { + if (tripType === TRIP_TYPE.SHARED) { queryFn.expense = () => getSharedExpense(tripId); } - const { data } = useQuery(['expense', tripId], queryFn.expense); + const { data } = useQuery( + [`${tripType}expense`, tripId], + queryFn.expense, + { + cacheTime: 5 * 60 * 1000, + staleTime: 60 * 1000, + } + ); return { expenseData: data! }; }; diff --git a/frontend/src/hooks/api/useRecommendedTripsQuery.ts b/frontend/src/hooks/api/useRecommendedTripsQuery.ts index cfd0521a9..f678618cf 100644 --- a/frontend/src/hooks/api/useRecommendedTripsQuery.ts +++ b/frontend/src/hooks/api/useRecommendedTripsQuery.ts @@ -7,12 +7,8 @@ import { getRecommendedTrips } from '@api/trips/getRecommendedTrips'; import type { RecommendedTripsData } from '@type/trips'; export const useRecommendedTripsQuery = (isLoggedIn: boolean) => { - const { data } = useQuery( - ['recommendedTrips'], - () => getRecommendedTrips(isLoggedIn), - { - cacheTime: 0, - } + const { data } = useQuery(['recommendedTrips'], () => + getRecommendedTrips(isLoggedIn) ); return { tripsData: data! }; diff --git a/frontend/src/hooks/api/useTripEditMutation.ts b/frontend/src/hooks/api/useTripEditMutation.ts index d7902a628..6b6bd8bc2 100644 --- a/frontend/src/hooks/api/useTripEditMutation.ts +++ b/frontend/src/hooks/api/useTripEditMutation.ts @@ -7,6 +7,7 @@ import type { ErrorResponseData } from '@api/interceptors'; import { putTrip } from '@api/trip/putTrip'; import { ERROR_CODE } from '@constants/api'; +import { TRIP_TYPE } from '@constants/trip'; export const useTripEditMutation = () => { const queryClient = useQueryClient(); @@ -17,7 +18,7 @@ export const useTripEditMutation = () => { const tripMutation = useMutation({ mutationFn: putTrip, onSuccess: (_, { tripId }) => { - queryClient.invalidateQueries({ queryKey: ['PERSONAL', tripId] }); + queryClient.invalidateQueries({ queryKey: [TRIP_TYPE.PERSONAL, tripId] }); }, onError: (error: ErrorResponseData) => { if (error.code && error.code > ERROR_CODE.TOKEN_ERROR_RANGE) { diff --git a/frontend/src/hooks/api/useTripQuery.ts b/frontend/src/hooks/api/useTripQuery.ts index d93cb2bea..f05df8a50 100644 --- a/frontend/src/hooks/api/useTripQuery.ts +++ b/frontend/src/hooks/api/useTripQuery.ts @@ -30,7 +30,8 @@ export const useTripQuery = (tripType: TripTypeData, tripId: string) => { } const { data } = useQuery([tripType, tripId], queryFn.trip, { - cacheTime: 0, + cacheTime: 5 * 60 * 1000, + staleTime: 60 * 1000, }); return { tripData: data! }; diff --git a/frontend/src/hooks/api/useUserInfoQuery.ts b/frontend/src/hooks/api/useUserInfoQuery.ts index 791e648d0..8127626f4 100644 --- a/frontend/src/hooks/api/useUserInfoQuery.ts +++ b/frontend/src/hooks/api/useUserInfoQuery.ts @@ -7,7 +7,10 @@ import { getUserInfo } from '@api/member/getUserInfo'; import type { UserData } from '@type/member'; export const useUserInfoQuery = () => { - const { data } = useQuery(['userInfo'], getUserInfo); + const { data } = useQuery(['userInfo'], getUserInfo, { + cacheTime: 60 * 60 * 60 * 1000, + staleTime: 60 * 60 * 60 * 1000, + }); return { userInfoData: data! }; }; diff --git a/frontend/src/hooks/expense/useExpense.ts b/frontend/src/hooks/expense/useExpense.ts index 78f761ac1..f8d782040 100644 --- a/frontend/src/hooks/expense/useExpense.ts +++ b/frontend/src/hooks/expense/useExpense.ts @@ -5,13 +5,14 @@ import { useQueryClient } from '@tanstack/react-query'; import type { Segment } from '@components/common/DonutChart/DonutChart'; import type { ExpenseData, ExpenseItemData } from '@type/expense'; +import type { TripTypeData } from '@type/trip'; import { EXPENSE_CHART_COLORS } from '@constants/expense'; -export const useExpense = (tripId: string) => { +export const useExpense = (tripId: string, tripType: TripTypeData) => { const queryClient = useQueryClient(); - const expenseData = queryClient.getQueryData(['expense', tripId])!; + const expenseData = queryClient.getQueryData([`${tripType}expense`, tripId])!; const dates = expenseData.dayLogs.map((data) => ({ id: data.id, diff --git a/frontend/src/mocks/data/recommendedTripsData.ts b/frontend/src/mocks/data/recommendedTripsData.ts index 86327c55b..d8582da4f 100644 --- a/frontend/src/mocks/data/recommendedTripsData.ts +++ b/frontend/src/mocks/data/recommendedTripsData.ts @@ -22,8 +22,7 @@ export const recommendedTripsData = { ], startDate: '2023-06-13', endDate: '2023-06-20', - description: - '어쩌구 저쩌구 좌충우돌좌충우돌좌충우돌좌충우돌좌충우돌좌충우돌 라곤의 런던 여행기', + description: '어쩌구 저쩌구', likeCount: 123, isLike: true, }, diff --git a/frontend/src/pages/CommunityTripPage/CommunityTripPage.tsx b/frontend/src/pages/CommunityTripPage/CommunityTripPage.tsx index 62366407c..ad6c07e90 100644 --- a/frontend/src/pages/CommunityTripPage/CommunityTripPage.tsx +++ b/frontend/src/pages/CommunityTripPage/CommunityTripPage.tsx @@ -27,13 +27,7 @@ const CommunityTripPage = () => { return (
    - + { +const ExpensePage = ({ tripType = 'PERSONAL' }: ExpensePageProps) => { const { tripId } = useParams(); if (!tripId) throw new Error('존재하지 않는 tripId 입니다.'); const isMobile = useRecoilValue(mediaQueryMobileState); - useExpenseQuery(tripId, { isShared, isPublished }); + useExpenseQuery(tripId, tripType); return ( - + {isMobile && } - + ); }; diff --git a/frontend/src/pages/SharedPage/SharedTripPage.tsx b/frontend/src/pages/SharedPage/SharedTripPage.tsx index ab7e06a74..e52b70ec4 100644 --- a/frontend/src/pages/SharedPage/SharedTripPage.tsx +++ b/frontend/src/pages/SharedPage/SharedTripPage.tsx @@ -27,7 +27,7 @@ const SharedTripPage = () => { return (
    - + { return (
    - + { const [isDaylogShown, setIsDaylogShown] = useState(true); const { tripId } = useParams(); @@ -40,13 +38,7 @@ const TripMobilePage = ({ tripType }: { tripType: TripTypeData }) => { return (
    - +
    {dates.map((date, index) => { diff --git a/frontend/src/router/AppRouter.tsx b/frontend/src/router/AppRouter.tsx index 821a79eac..8acbd884c 100644 --- a/frontend/src/router/AppRouter.tsx +++ b/frontend/src/router/AppRouter.tsx @@ -118,7 +118,7 @@ const AppRouter = () => { path: PATH.SHARE_EXPENSE(':tripId'), element: ( }> - + ), }, @@ -138,7 +138,7 @@ const AppRouter = () => { path: PATH.COMMUNITY_EXPENSE(':tripId'), element: ( }> - + ), }, diff --git a/frontend/src/stories/expense/ExpenseCategories.stories.tsx b/frontend/src/stories/expense/ExpenseCategories.stories.tsx index d310f262b..74b78d027 100644 --- a/frontend/src/stories/expense/ExpenseCategories.stories.tsx +++ b/frontend/src/stories/expense/ExpenseCategories.stories.tsx @@ -9,11 +9,11 @@ const meta = { component: ExpenseCategories, args: { tripId: '1', - isShared: false, + tripType: 'PERSONAL', }, decorators: [ (Story) => { - useExpenseQuery('1', { isShared: false, isPublished: false }); + useExpenseQuery('1', 'PERSONAL'); return ; }, diff --git a/frontend/src/stories/expense/ExpenseCategoryInformation.stories.tsx b/frontend/src/stories/expense/ExpenseCategoryInformation.stories.tsx index 44856d24b..ec5552629 100644 --- a/frontend/src/stories/expense/ExpenseCategoryInformation.stories.tsx +++ b/frontend/src/stories/expense/ExpenseCategoryInformation.stories.tsx @@ -9,10 +9,11 @@ const meta = { component: ExpenseCategoryInformation, args: { tripId: '1', + tripType: 'PERSONAL', }, decorators: [ (Story) => { - useExpenseQuery('1', { isShared: false, isPublished: false }); + useExpenseQuery('1', 'PERSONAL'); return ; }, diff --git a/frontend/src/stories/expense/ExpenseDates.stories.tsx b/frontend/src/stories/expense/ExpenseDates.stories.tsx index 735f7a17e..c2b652c12 100644 --- a/frontend/src/stories/expense/ExpenseDates.stories.tsx +++ b/frontend/src/stories/expense/ExpenseDates.stories.tsx @@ -9,11 +9,11 @@ const meta = { component: ExpenseDates, args: { tripId: '1', - isShared: false, + tripType: 'PERSONAL', }, decorators: [ (Story) => { - useExpenseQuery('1', { isShared: false, isPublished: false }); + useExpenseQuery('1', 'PERSONAL'); return ; }, diff --git a/frontend/src/stories/expense/ExpenseInformation.stories.tsx b/frontend/src/stories/expense/ExpenseInformation.stories.tsx index 095448062..ec305bb08 100644 --- a/frontend/src/stories/expense/ExpenseInformation.stories.tsx +++ b/frontend/src/stories/expense/ExpenseInformation.stories.tsx @@ -9,12 +9,11 @@ const meta = { component: ExpenseInformation, args: { tripId: '1', - isShared: false, - isPublished: false, + tripType: 'PERSONAL', }, decorators: [ (Story) => { - useExpenseQuery('1', { isShared: false, isPublished: false }); + useExpenseQuery('1', 'PERSONAL'); return ; }, diff --git a/frontend/src/stories/expense/ExpenseListSection.stories.tsx b/frontend/src/stories/expense/ExpenseListSection.stories.tsx index b06d27e10..7af13be3e 100644 --- a/frontend/src/stories/expense/ExpenseListSection.stories.tsx +++ b/frontend/src/stories/expense/ExpenseListSection.stories.tsx @@ -10,7 +10,7 @@ const meta = { }, args: { tripId: '1', - isShared: false, + tripType: 'PERSONAL', }, } satisfies Meta; diff --git a/frontend/src/stories/expense/TotalExpenseSection.stories.tsx b/frontend/src/stories/expense/TotalExpenseSection.stories.tsx index 041f76b5a..71f509e21 100644 --- a/frontend/src/stories/expense/TotalExpenseSection.stories.tsx +++ b/frontend/src/stories/expense/TotalExpenseSection.stories.tsx @@ -12,12 +12,11 @@ const meta = { }, args: { tripId: '1', - isShared: false, - isPublished: false, + tripType: 'PERSONAL', }, decorators: [ (Story) => { - useExpenseQuery('1', { isShared: false, isPublished: false }); + useExpenseQuery('1', 'PERSONAL'); return ; },