UI 변경사항 적용

frontend/cypress/e2e/trip.cy.ts

@@ -165,7 +165,6 @@ describe('여행 정보 수정', () => {
     });
   });
 
-  // 로컬에서는 잘 돌아가는데, github action으로는 안 됨....
   it.skip('여행 정보 수정 모달에서 여행 정보를 수정하면 변경된 여행 정보를 여행 정보 수정 페이지에서 볼 수 있다.', () => {
     cy.findByText('여행 정보 수정').click();
 

frontend/cypress/fixtures/recommendedTrips.json

@@ -18,7 +18,7 @@
       ],
       "startDate": "2023-06-13",
       "endDate": "2023-06-20",
-      "description": "어쩌구 저쩌구 좌충우돌좌충우돌좌충우돌좌충우돌좌충우돌좌충우돌 라곤의 런던 여행기",
+      "description": "어쩌구 저쩌구",
       "likeCount": 123,
       "isLike": true
     },

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 = ({
       <Button type="button" variant="primary" size="small" onClick={goToExpensePage}>
         가계부
       </Button>
-      {!isShared && (
+      {isPersonal && (
         <>
           <TripShareButton tripId={tripId} sharedCode={sharedCode} publishState={publishState} />
           <EditIcon css={[svgButtonStyling, editIconStyling]} onClick={goToEditPage} />
@@ -97,6 +99,11 @@ export const TripButtons = ({
           </Modal>
         </>
       )}
+      {isPublished && isWriter && (
+        <Button type="button" variant="primary" size="small" onClick={goToEditPage}>
+          수정하기
+        </Button>
+      )}
     </>
   );
 };

frontend/src/components/common/TripInformation/TripInformation.tsx

@@ -25,30 +25,32 @@ 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';
 
 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 = ({
               <Flex styles={{ align: 'center', gap: Theme.spacer.spacing2 }}>
                 <img
                   alt="작성자 이미지"
-                  src={tripData.writer.imageUrl || ''}
+                  src={tripData.writer.imageUrl ?? ''}
                   css={writerImageStyling}
                 />
                 <Text size="small">{tripData.writer.nickname}</Text>
@@ -114,10 +116,9 @@ const TripInformation = ({
             <TripEditButtons tripId={tripId} openEditModal={openEditModal} />
           ) : (
             <TripButtons
+              tripType={tripType}
               tripId={tripId}
               sharedCode={tripData.sharedCode}
-              isShared={isShared}
-              isPublished={isPublished}
               publishState={tripData.isPublished}
             />
           )}

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) => {
           </Flex>
         </>
       ) : (
-        <ExpenseList.Empty tripId={tripId} isShared={isShared} />
+        <ExpenseList.Empty tripId={tripId} isShared={tripType !== TRIP_TYPE.PERSONAL} />
       )}
     </>
   );

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 (
     <ul css={containerStyling}>

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) => {
           </Flex>
         </>
       ) : (
-        <ExpenseList.Empty tripId={tripId} isShared={isShared} />
+        <ExpenseList.Empty tripId={tripId} isShared={tripType !== TRIP_TYPE.PERSONAL} />
       )}
     </>
   );

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;
     }

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) => {
         </ToggleGroup>
       </Flex>
       {selectedFilter === EXPENSE_LIST_FILTERS.DAY_LOG ? (
-        <ExpenseDates tripId={tripId} isShared={isShared} />
+        <ExpenseDates tripId={tripId} tripType={tripType} />
       ) : (
-        <ExpenseCategories tripId={tripId} isShared={isShared} />
+        <ExpenseCategories tripId={tripId} tripType={tripType} />
       )}
     </section>
   );

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 (
     <section css={containerStyling}>
-      <ExpenseInformation tripId={tripId} isShared={isShared} isPublished={isPublished} />
+      <ExpenseInformation tripId={tripId} tripType={tripType} />
       <Heading size={isMobile ? 'xSmall' : 'small'} css={totalAmountStyling}>
         총 경비 :{' '}
         <span>
@@ -52,7 +53,7 @@ const TotalExpenseSection = ({ tripId, isShared, isPublished }: TotalExpenseSect
           strokeWidth={EXPENSE_CATEGORY_CHART_STROKE_WIDTH}
         />
       </Box>
-      <ExpenseCategoryInformation tripId={tripId} />
+      <ExpenseCategoryInformation tripId={tripId} tripType={tripType} />
     </section>
   );
 };

frontend/src/components/layout/Header/Header.tsx

@@ -29,7 +29,7 @@ const Header = () => {
   return (
     <header css={headerStyling}>
       <Flex styles={{ justify: 'space-between', align: 'center' }}>
-        <Flex styles={{ align: 'center', gap: Theme.spacer.spacing5 }}>
+        <Flex styles={{ align: 'center', gap: Theme.spacer.spacing4 }}>
           <LogoHorizontal
             css={getItemStyling(isLoggedIn)}
             tabIndex={0}
@@ -44,7 +44,6 @@ const Header = () => {
           >
             커뮤니티
           </Text>
-
           <Text
             css={getTapNavigateButtonStyling(isLoggedIn, location === PATH.MY_TRIPS)}
             tabIndex={2}