From 542ff60a9d359fab695ee6b5659e212c483a3705 Mon Sep 17 00:00:00 2001 From: hwinkr Date: Wed, 16 Oct 2024 16:48:11 +0900 Subject: [PATCH 1/2] =?UTF-8?q?chore:=20aws=EC=99=80=20=EB=8F=99=EA=B8=B0?= =?UTF-8?q?=ED=99=94=ED=95=98=EA=B8=B0=20=EC=A0=84=20EC2=20=EC=9D=B8?= =?UTF-8?q?=EC=8A=A4=ED=84=B4=EC=8A=A4=EC=9D=98=20=EC=9D=B4=EC=A0=84=20?= =?UTF-8?q?=ED=8C=8C=EC=9D=BC=EB=93=A4=EC=9D=84=20=EC=82=AD=EC=A0=9C?= =?UTF-8?q?=ED=95=98=EB=8A=94=20=EC=8A=A4=ED=85=9D=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .github/workflows/frontend-dev-cd.yml | 6 ++++++ .github/workflows/frontend-prod-cd.yml | 6 ++++++ 2 files changed, 12 insertions(+) diff --git a/.github/workflows/frontend-dev-cd.yml b/.github/workflows/frontend-dev-cd.yml index c53b658b6..af0f7d7cd 100644 --- a/.github/workflows/frontend-dev-cd.yml +++ b/.github/workflows/frontend-dev-cd.yml @@ -80,11 +80,17 @@ jobs: env: CLOUDFRONT_DISTRIBUTION_ID_DEV: ${{ secrets.CLOUDFRONT_DISTRIBUTION_ID_DEV}} steps: + - name: 기존 dist 폴더 내부에 있던 이전 버젼의 dist 폴더 내부 모든 파일을 삭제해요 + working-directory: ./frontend/ + run: | + rm -rf dist/* + - name: 모모 깃허브 레파지토리 artifacts로 부터 빌드 결과물을 다운받아요 :) uses: actions/download-artifact@v4 with: name: momoResources path: ./frontend/dist + - name: aws에 배포하고 cloudfront 캐싱을 무효화해요 working-directory: ./frontend/dist/ run: | diff --git a/.github/workflows/frontend-prod-cd.yml b/.github/workflows/frontend-prod-cd.yml index b274f01df..be8421ba6 100644 --- a/.github/workflows/frontend-prod-cd.yml +++ b/.github/workflows/frontend-prod-cd.yml @@ -84,11 +84,17 @@ jobs: env: CLOUDFRONT_DISTRIBUTION_ID_PROD: ${{ secrets.CLOUDFRONT_DISTRIBUTION_ID_PROD}} steps: + - name: 기존 dist 폴더 내부에 있던 이전 버젼의 dist 폴더 내부 모든 파일을 삭제해요 + working-directory: ./frontend/ + run: | + rm -rf dist/* + - name: 모모 깃허브 레파지토리 artifacts로 부터 빌드 결과물을 다운받아요 :) uses: actions/download-artifact@v4 with: name: momoResources path: ./frontend/dist + - name: aws에 배포하고 cloudfront 캐싱을 무효화해요 working-directory: ./frontend/dist/ run: | From 50c327f9f6cfb86cb87c65a2bd6a92c87409e6d4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Yoonkyoung=20=28=EB=B9=99=EB=B4=89=29?= Date: Fri, 18 Oct 2024 10:40:52 +0900 Subject: [PATCH 2/2] =?UTF-8?q?[FE]=20=EC=95=BD=EC=86=8D=20=EC=83=9D?= =?UTF-8?q?=EC=84=B1=20=ED=99=95=EC=9D=B8=20=EB=AA=A8=EB=8B=AC=20=EB=B3=B5?= =?UTF-8?q?=EA=B5=AC=20(#414)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat(MeetingCreationConfirmModal): 약속 생성 확인 모달 구현 * feat(CreateMeetingPage): 퍼널에서 입력된 정보를 모달과 연결하여 약속 생성 정보 확인 기능 추가 * refactor(MeetingCreationConfirmModal): p 태그로 변경 --- .../MeetingCreationConfirmModal.styles.ts | 32 ++++++++ .../MeetingCreationConfirmModal/index.tsx | 73 +++++++++++++++++++ .../src/pages/CreateMeetingPage/index.tsx | 71 +++++++++++------- 3 files changed, 150 insertions(+), 26 deletions(-) create mode 100644 frontend/src/pages/CreateMeetingPage/components/MeetingCreationConfirmModal/MeetingCreationConfirmModal.styles.ts create mode 100644 frontend/src/pages/CreateMeetingPage/components/MeetingCreationConfirmModal/index.tsx diff --git a/frontend/src/pages/CreateMeetingPage/components/MeetingCreationConfirmModal/MeetingCreationConfirmModal.styles.ts b/frontend/src/pages/CreateMeetingPage/components/MeetingCreationConfirmModal/MeetingCreationConfirmModal.styles.ts new file mode 100644 index 000000000..630536d23 --- /dev/null +++ b/frontend/src/pages/CreateMeetingPage/components/MeetingCreationConfirmModal/MeetingCreationConfirmModal.styles.ts @@ -0,0 +1,32 @@ +import { css } from '@emotion/react'; + +import theme from '@styles/theme'; + +export const s_descriptionContainer = css` + display: flex; + flex-direction: column; + gap: 0.8rem; + + strong { + ${theme.typography.captionBold} + color: ${theme.colors.primary} + } +`; + +export const s_description = css` + ${theme.typography.captionMedium} + display: flex; + gap: 0.8rem; +`; + +export const s_availableDateDescription = css` + display: flex; + flex-direction: column; + gap: 1rem; +`; + +export const s_availableDatesContainer = css` + ${theme.typography.captionMedium} + display: grid; + grid-template-columns: 2fr 5fr; +`; diff --git a/frontend/src/pages/CreateMeetingPage/components/MeetingCreationConfirmModal/index.tsx b/frontend/src/pages/CreateMeetingPage/components/MeetingCreationConfirmModal/index.tsx new file mode 100644 index 000000000..e86ce0f7b --- /dev/null +++ b/frontend/src/pages/CreateMeetingPage/components/MeetingCreationConfirmModal/index.tsx @@ -0,0 +1,73 @@ +import ConfirmModal from '@components/_common/Modal/ConfirmModal'; + +import groupDates from '@utils/groupDates'; + +import { + s_availableDateDescription, + s_availableDatesContainer, + s_description, + s_descriptionContainer, +} from './MeetingCreationConfirmModal.styles'; + +interface MeetingCreationConfirmModalProps { + isModalOpen: boolean; + onModalClose: () => void; + onModalConfirmButtonClick: () => void; + meetingName: string; + hostName: string; + selectedDates: string[]; + startTime: string; + endTime: string; + isOnlyDaysOptionChecked: boolean; +} + +export default function MeetingCreationConfirmModal({ + isModalOpen, + onModalClose, + onModalConfirmButtonClick, + meetingName, + hostName, + selectedDates, + startTime, + endTime, + isOnlyDaysOptionChecked, +}: MeetingCreationConfirmModalProps) { + return ( + +
+

+ 약속명 {meetingName} +

+

+ 주최자 {hostName} +

+ {!isOnlyDaysOptionChecked && ( +

+ 약속 시간 {startTime} ~ {endTime} +

+ )} +
+ 가능 날짜 + {groupDates(selectedDates).map(([monthYear, dates]) => { + const [year, month] = monthYear.split('-'); + return ( +
+

+ {year}년 {month}월 +

+

{dates.join(', ')}

+
+ ); + })} +
+
+ + ); +} diff --git a/frontend/src/pages/CreateMeetingPage/index.tsx b/frontend/src/pages/CreateMeetingPage/index.tsx index 397c4a295..1510a6a55 100644 --- a/frontend/src/pages/CreateMeetingPage/index.tsx +++ b/frontend/src/pages/CreateMeetingPage/index.tsx @@ -2,15 +2,21 @@ import MeetingDateTime from '@pages/CreateMeetingPage/components/MeetingDateTime import MeetingHostInfo from '@pages/CreateMeetingPage/components/MeetingHostInfo'; import MeetingName from '@pages/CreateMeetingPage/components/MeetingName'; +import useConfirmModal from '@hooks/useConfirmModal/useConfirmModal'; import useCreateMeeting from '@hooks/useCreateMeeting/useCreateMeeting'; import useFunnel from '@hooks/useFunnel/useFunnel'; import { CREATE_MEETING_STEPS, meetingStepValues } from '@constants/meeting'; +import MeetingCreationConfirmModal from './components/MeetingCreationConfirmModal'; + type Steps = typeof meetingStepValues; export default function CreateMeetingPage() { + const { isConfirmModalOpen, onToggleConfirmModal } = useConfirmModal(); + const [setStep, Funnel] = useFunnel(meetingStepValues, '약속이름'); + const { meetingNameInput, isMeetingNameInvalid, @@ -25,31 +31,44 @@ export default function CreateMeetingPage() { } = useCreateMeeting(); return ( - - - setStep(CREATE_MEETING_STEPS.meetingHostInfo)} - /> - - - setStep(CREATE_MEETING_STEPS.meetingDateTime)} - /> - - - - - + <> + + + setStep(CREATE_MEETING_STEPS.meetingHostInfo)} + /> + + + setStep(CREATE_MEETING_STEPS.meetingDateTime)} + /> + + + + + + + ); }