diff --git a/frontend/cypress/e2e/createTrip.cy.ts b/frontend/cypress/e2e/createTrip.cy.ts
index 2721de73d..09f76e925 100644
--- 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/src/components/trips/TutorialModal/TutorialModal.style.ts b/frontend/src/components/trips/TutorialModal/TutorialModal.style.ts
index 53a414d9d..cb5995c5b 100644
--- 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
index 2b73c5dde..3a791e5b7 100644
--- 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 (
-
+
+
+ {carouselImages.map((Svg, index) => (
+
+
+
+
+
+ ))}
+
+
+
);
};