woowacourse-teams · dladncks1217 · Jan 11, 2024 · Jan 11, 2024 · Jan 11, 2024 · Jan 11, 2024
diff --git a/frontend/cypress/e2e/createTrip.cy.ts b/frontend/cypress/e2e/createTrip.cy.ts
@@ -44,13 +44,17 @@ describe('여행 생성 페이지', () => {
     cy.get('#date').click();
 
     const currentMonth = String(new Date().getMonth() + 1).padStart(2, '0');
+    const currentYear = String(new Date().getFullYear());
 
-    cy.get(`span[aria-label="2023년 ${currentMonth}월 1일"]`).click();
-    cy.get(`span[aria-label="2023년 ${currentMonth}월 12일"]`).click();
+    cy.get(`span[aria-label="${currentYear}년 ${currentMonth}월 1일"]`).click();
+    cy.get(`span[aria-label="${currentYear}년 ${currentMonth}월 12일"]`).click();
 
     cy.get('#date').click();
 
-    cy.get('#date').should('have.value', `2023.${currentMonth}.01 - 2023.${currentMonth}.12`);
+    cy.get('#date').should(
+      'have.value',
+      `${currentYear}.${currentMonth}.01 - ${currentYear}.${currentMonth}.12`
+    );
   });
 
   it('도시와 기간이 채워졌을 때만 기록하기 버튼을 누를 수 있다.', () => {
@@ -64,9 +68,10 @@ describe('여행 생성 페이지', () => {
     cy.get('#date').click();
 
     const currentMonth = String(new Date().getMonth() + 1).padStart(2, '0');
+    const currentYear = String(new Date().getFullYear());
 
-    cy.get(`span[aria-label="2023년 ${currentMonth}월 1일"]`).click();
-    cy.get(`span[aria-label="2023년 ${currentMonth}월 12일"]`).click();
+    cy.get(`span[aria-label="${currentYear}년 ${currentMonth}월 1일"]`).click();
+    cy.get(`span[aria-label="${currentYear}년 ${currentMonth}월 12일"]`).click();
 
     cy.get('#date').click();
 
@@ -85,9 +90,10 @@ describe('여행 생성 페이지', () => {
     cy.get('#date').click();
 
     const currentMonth = String(new Date().getMonth() + 1).padStart(2, '0');
+    const currentYear = String(new Date().getFullYear());
 
-    cy.get(`span[aria-label="2023년 ${currentMonth}월 1일"]`).click();
-    cy.get(`span[aria-label="2023년 ${currentMonth}월 12일"]`).click();
+    cy.get(`span[aria-label="${currentYear}년 ${currentMonth}월 1일"]`).click();
+    cy.get(`span[aria-label="${currentYear}년 ${currentMonth}월 12일"]`).click();
 
     cy.get('#date').click();
 

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -44,7 +44,7 @@
     "axios": "^1.4.0",
     "browser-image-compression": "^2.0.2",
     "dotenv": "^16.3.1",
-    "hang-log-design-system": "^1.3.4",
+    "hang-log-design-system": "^1.3.8",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.14.1",

diff --git a/frontend/src/components/common/TripItem/TripItem.tsx b/frontend/src/components/common/TripItem/TripItem.tsx
@@ -3,7 +3,7 @@ import { useEffect, useRef } from 'react';
 
 import { useRecoilValue } from 'recoil';
 
-import { Box, Carousel, ImageCarousel, Modal, Text, useOverlay } from 'hang-log-design-system';
+import { Box, GeneralCarousel, Modal, Text, useOverlay } from 'hang-log-design-system';
 
 import StarRating from '@components/common/StarRating/StarRating';
 import EditMenu from '@components/common/TripItem/EditMenu/EditMenu';
@@ -26,7 +26,7 @@ import useResizeImage from '@hooks/trip/useResizeImage';
 
 import { mediaQueryMobileState } from '@store/mediaQuery';
 
-import { convertToImageUrl, convertToImageUrls } from '@utils/convertImage';
+import { convertToImageUrl } from '@utils/convertImage';
 import { formatNumberToMoney } from '@utils/formatter';
 
 import type { TripItemData } from '@type/tripItem';
@@ -93,15 +93,20 @@ const TripItem = ({
                 }
               }}
             >
-              <ImageCarousel
+              <GeneralCarousel
                 width={isMobile ? width : TRIP_ITEM_IMAGE_WIDTH}
                 height={isMobile ? height : TRIP_ITEM_IMAGE_HEIGHT}
-                isDraggable={false}
                 showNavigationOnHover={!isMobile}
                 showArrows={information.imageNames.length > 1}
                 showDots={information.imageNames.length > 1}
-                images={convertToImageUrls(information.imageNames)}
-              />
+                length={information.imageNames.length}
+              >
+                {information.imageNames.map((imageName, index) => (
+                  <GeneralCarousel.Item index={index}>
+                    <img src={convertToImageUrl(imageName)} alt={imageName} />
+                  </GeneralCarousel.Item>
+                ))}
+              </GeneralCarousel>
             </div>
           )}
           <Box tag="section" css={informationContainerStyling}>
@@ -139,21 +144,22 @@ const TripItem = ({
       </li>
       {!isMobile && (
         <Modal isOpen={isImageModalOpen} closeModal={closeImageModal} css={imageModalStyling}>
-          <Carousel
+          <GeneralCarousel
             width={800}
             height={500}
-            isDraggable={false}
             showNavigationOnHover={!isMobile}
             showArrows={information.imageNames.length > 1}
             showDots={information.imageNames.length > 1}
-            images={convertToImageUrls(information.imageNames)}
+            length={information.imageNames.length}
           >
-            {information.imageNames.map((imageName) => (
-              <div css={expandedImageContainer}>
-                <img src={convertToImageUrl(imageName)} alt="이미지" css={expandedImage} />
-              </div>
+            {information.imageNames.map((imageName, index) => (
+              <GeneralCarousel.Item index={index}>
+                <div css={expandedImageContainer}>
+                  <img src={convertToImageUrl(imageName)} alt="이미지" css={expandedImage} />
+                </div>
+              </GeneralCarousel.Item>
             ))}
-          </Carousel>
+          </GeneralCarousel>
         </Modal>
       )}
     </>

diff --git a/frontend/src/components/trips/TutorialModal/TutorialModal.style.ts b/frontend/src/components/trips/TutorialModal/TutorialModal.style.ts
@@ -2,33 +2,25 @@ import { css } from '@emotion/react';
 
 import { Theme } from 'hang-log-design-system';
 
-export const boxStyling = css({
-  display: 'flex',
-  flexDirection: 'column',
-  alignItems: 'center',
-
-  width: '450px',
-  height: '500px',
-  marginTop: '30px',
-
-  '@media screen and (max-width: 600px)': {
-    width: '346px',
-    marginBottom: Theme.spacer.spacing6,
-  },
-});
-
 export const modalStyling = css({
+  paddingTop: Theme.spacer.spacing5,
+
   '@media screen and (max-width: 600px)': {
     width: `calc(100vw - ${Theme.spacer.spacing5})`,
-    height: `calc(100vh - ${Theme.spacer.spacing9})`,
   },
 });
 
-export const carouselStyling = css({
-  width: '385px',
-  height: '412px',
-});
+export const buttonStyling = (isMobile: boolean) =>
+  css({
+    width: '100%',
 
-export const buttonStyling = css({
-  width: '100%',
-});
+    marginTop: isMobile ? 0 : 48,
+  });
+
+export const ItemStyling = (width: number, height: number) =>
+  css({
+    '& > svg': {
+      width,
+      height,
+    },
+  });
diff --git a/frontend/src/components/trips/TutorialModal/TutorialModal.tsx b/frontend/src/components/trips/TutorialModal/TutorialModal.tsx
@@ -2,7 +2,13 @@ import { useEffect } from 'react';
 
 import { useRecoilValue } from 'recoil';
 
-import { SVGCarouselModal, useOverlay } from 'hang-log-design-system';
+import { Button, GeneralCarousel, Modal, useOverlay } from 'hang-log-design-system';
+
+import {
+  ItemStyling,
+  buttonStyling,
+  modalStyling,
+} from '@components/trips/TutorialModal/TutorialModal.style';
 
 import { mediaQueryMobileState } from '@store/mediaQuery';
 
@@ -14,24 +20,37 @@ import Tutorial4SVG from '@assets/svg/tutorial4.svg';
 const TutorialModal = () => {
   const { isOpen: isTutorialOpen, open: openTutorial, close: closeTutorial } = useOverlay();
   const isMobile = useRecoilValue(mediaQueryMobileState);
+  const carouselImages = [Tutorial1SVG, Tutorial2SVG, Tutorial3SVG, Tutorial4SVG];
 
   useEffect(() => {
     openTutorial();
   }, [openTutorial]);
 
   return (
-    <SVGCarouselModal
-      modalWidth={isMobile ? window.innerWidth - 32 - 48 : 385}
-      modalHeight={isMobile ? window.innerWidth : 412}
-      isOpen={isTutorialOpen}
-      closeModal={closeTutorial}
-      carouselWidth={isMobile ? window.innerWidth - 32 - 48 : 385}
-      carouselHeight={isMobile ? window.innerWidth : 412}
-      carouselImages={[Tutorial1SVG, Tutorial2SVG, Tutorial3SVG, Tutorial4SVG]}
-      showArrows
-      showDots
-      buttonGap={isMobile ? 0 : 48}
-    />
+    <Modal css={modalStyling} isOpen={isTutorialOpen} closeModal={closeTutorial}>
+      <GeneralCarousel
+        showNavigationOnHover={false}
+        width={isMobile ? window.innerWidth - 32 - 48 : 385}
+        height={isMobile ? window.innerWidth : 412}
+        length={4}
+      >
+        {carouselImages.map((Svg, index) => (
+          <GeneralCarousel.Item index={index} key={crypto.randomUUID()}>
+            <div
+              css={ItemStyling(
+                isMobile ? window.innerWidth - 32 - 48 : 385,
+                isMobile ? window.innerWidth : 412
+              )}
+            >
+              <Svg />
+            </div>
+          </GeneralCarousel.Item>
+        ))}
+      </GeneralCarousel>
+      <Button type="button" variant="primary" css={buttonStyling(isMobile)} onClick={closeTutorial}>
+        닫기
+      </Button>
+    </Modal>
   );
 };
 

diff --git a/frontend/src/hooks/api/useSharedTripQuery.ts b/frontend/src/hooks/api/useSharedTripQuery.ts
@@ -1,3 +1,5 @@
+import { TRIP_TYPE } from '@/constants/trip';
+
 import { useSuspenseQuery } from '@tanstack/react-query';
 
 import type { AxiosError } from 'axios';
@@ -8,7 +10,7 @@ import type { TripData } from '@type/trip';
 
 export const useSharedTripQuery = (tripId: string) => {
   const { data: sharedTripData } = useSuspenseQuery<TripData, AxiosError>({
-    queryKey: ['shared', tripId],
+    queryKey: [TRIP_TYPE.SHARED, 'trip', tripId],
     queryFn: () => getSharedTrip(tripId),
   });