From 6be956669ec039b1b14768ad5f7968cb902d32ab Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EB=B0=95=EB=AF=BC=EC=9A=B0?= Date: Mon, 5 Feb 2024 17:13:15 +0900 Subject: [PATCH 01/10] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20:=20#469=20-=20creat?= =?UTF-8?q?ePage=20=EB=B9=84=EC=A6=88=EB=8B=88=EC=8A=A4=20=EB=A1=9C?= =?UTF-8?q?=EC=A7=81=20=EB=B6=84=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/create/hooks/useCreatePage.ts | 157 ++++++++++++++++++++++++++ src/app/create/page.tsx | 156 ++++--------------------- 2 files changed, 179 insertions(+), 134 deletions(-) create mode 100644 src/app/create/hooks/useCreatePage.ts diff --git a/src/app/create/hooks/useCreatePage.ts b/src/app/create/hooks/useCreatePage.ts new file mode 100644 index 00000000..8145f806 --- /dev/null +++ b/src/app/create/hooks/useCreatePage.ts @@ -0,0 +1,157 @@ +import { ajajaToast } from '@/components/Toaster/customToast'; +import { SESSION_STORAGE_KEY } from '@/constants'; +import { canMakeNewPlanStore } from '@/stores/canMakeNewPlanStore'; +import { RemindItemType, RemindOptionType } from '@/types'; +import { decideRemindDate, getSessionStorageData } from '@/utils'; +import { useRouter } from 'next/navigation'; +import { useLayoutEffect, useState } from 'react'; +import { useRecoilValue } from 'recoil'; + +export default function useCreatePage() { + const restartCreatePlan = () => { + sessionStorage.removeItem(SESSION_STORAGE_KEY.STEP_1); + sessionStorage.removeItem(SESSION_STORAGE_KEY.STEP_2); + sessionStorage.removeItem(SESSION_STORAGE_KEY.STEP_3); + sessionStorage.removeItem(SESSION_STORAGE_KEY.STEP_4); + }; + + const router = useRouter(); + const [nowStep, setNowStep] = useState(1); + + const goToNextStep = () => { + if (nowStep < 4) { + setNowStep(nowStep + 1); + } + }; + + const goToPreviousStep = () => { + if (nowStep > 1) { + setNowStep(nowStep - 1); + } + }; + + const canMakeNewPlan = useRecoilValue(canMakeNewPlanStore); + + useLayoutEffect(() => { + if (!canMakeNewPlan) { + router.replace('/home'); + ajajaToast.error('생성할 수 있는 계획의 수가 최대입니다.'); + } + }, [canMakeNewPlan, router]); + + const [isFirstStepDataAllExist, setIsFirstStepDataAllExist] = useState(false); + const [isSecondStepDataAllExist, setIsSecondStepDataAllExist] = + useState(false); + const [isLastStepDataAllExist, setIsLastStepDataAllExist] = useState(false); + + const [fixedMonthList, setFixedMonthList] = useState([]); + const [fixedDate, setFixedDate] = useState(1); + + const isPreviousCreatePlanExist = () => { + if (typeof window !== 'undefined') { + return sessionStorage.getItem(SESSION_STORAGE_KEY.STEP_1) ? true : false; + } + }; + + const [isContinueCreatePlanModalOpen, setIsContinueCreatePlanModalOpen] = + useState(isPreviousCreatePlanExist()); + + const onClickContinueCreateModalYes = () => { + // 이어서 작성하기 - 모달만 닫기 + setIsContinueCreatePlanModalOpen(false); + }; + + const onClickContinueCreateModalNo = () => { + // 새로 작성하기 - 모든 step 세션 스토리지 값 삭제 후 모달 닫기 + restartCreatePlan(); + setIsContinueCreatePlanModalOpen(false); + }; + + const [isFixRemindDateModalOpen, setIsFixRemindDateModalOpen] = + useState(false); + + // 3 => 4단계 다음단계 버튼 클릭 시 실행되는 함수 + // 날짜 확정 모달에 렌더링 될 data들을 3단계에서 정한 주기, 범위, 날짜로 업데이트 시켜주고 모달 열기 + const goToLastStep = () => { + const remindOptions = getSessionStorageData( + 'STEP_3', + ) as RemindOptionType | null; + + if (remindOptions) { + const fixedRemindDateList = decideRemindDate( + remindOptions.TotalPeriod, + remindOptions.Term, + remindOptions.Date, + ); + + setFixedMonthList( + fixedRemindDateList!.map((item) => { + return item.month; + }), + ); + setFixedDate(remindOptions.Date); + setIsFixRemindDateModalOpen(true); + } + }; + + // 날짜 확정 모달에서 yes를 눌렀을 시 실행되는 함수 + // 3단계 data를 바탕으로 정해진 날짜와 비어있는 메세지 "" 를 4단계 session data로 저장, 모달 닫기 + const onClickRemindDateModalYes = () => { + const remindOptionsItem = sessionStorage.getItem( + SESSION_STORAGE_KEY.STEP_3, + ); + + const remindOptions = remindOptionsItem + ? (JSON.parse(remindOptionsItem) as RemindOptionType) + : null; + + if (remindOptions) { + const fixedRemindDateList = decideRemindDate( + remindOptions.TotalPeriod, + remindOptions.Term, + remindOptions.Date, + ); + + const emptyRemindMessageList: RemindItemType[] = fixedRemindDateList!.map( + (item) => { + return { + date: { + month: item.month, + day: item.day, + }, + message: '', + }; + }, + ); + + sessionStorage.setItem( + SESSION_STORAGE_KEY.STEP_4, + JSON.stringify(emptyRemindMessageList), + ); + } + + setIsFixRemindDateModalOpen(false); + goToNextStep(); + }; + + return { + nowStep, + goToPreviousStep, + goToNextStep, + isFirstStepDataAllExist, + setIsFirstStepDataAllExist, + isSecondStepDataAllExist, + setIsSecondStepDataAllExist, + isLastStepDataAllExist, + setIsLastStepDataAllExist, + fixedMonthList, + fixedDate, + isContinueCreatePlanModalOpen, + setIsFixRemindDateModalOpen, + onClickContinueCreateModalYes, + onClickContinueCreateModalNo, + isFixRemindDateModalOpen, + goToLastStep, + onClickRemindDateModalYes, + }; +} diff --git a/src/app/create/page.tsx b/src/app/create/page.tsx index 202bcf79..2bc0d19b 100644 --- a/src/app/create/page.tsx +++ b/src/app/create/page.tsx @@ -8,18 +8,11 @@ import { ModalContinueCreate, ModalFixRemindDate, } from '@/components'; -import { ajajaToast } from '@/components/Toaster/customToast'; -import { SESSION_STORAGE_KEY, STEP_NAME } from '@/constants'; -import { canMakeNewPlanStore } from '@/stores/canMakeNewPlanStore'; -import { RemindItemType, RemindOptionType } from '@/types'; -import { decideRemindDate } from '@/utils/decideRemindDate'; -import { getSessionStorageData } from '@/utils/getSessionStorageData'; +import { STEP_NAME } from '@/constants'; import classNames from 'classnames'; import dynamic from 'next/dynamic'; -import { useRouter } from 'next/navigation'; -import { useLayoutEffect, useState } from 'react'; -import { useRecoilValue } from 'recoil'; import StepButtonGroup from './_components/StepButtonGroup/StepButtonGroup'; +import useCreatePage from './hooks/useCreatePage'; import './index.scss'; const StepperComponent = dynamic( @@ -29,132 +22,27 @@ const StepperComponent = dynamic( }, ); -const restartCreatePlan = () => { - sessionStorage.removeItem(SESSION_STORAGE_KEY.STEP_1); - sessionStorage.removeItem(SESSION_STORAGE_KEY.STEP_2); - sessionStorage.removeItem(SESSION_STORAGE_KEY.STEP_3); - sessionStorage.removeItem(SESSION_STORAGE_KEY.STEP_4); -}; - export default function CreatePage() { - const router = useRouter(); - const [nowStep, setNowStep] = useState(1); - - const goToNextStep = () => { - if (nowStep < 4) { - setNowStep(nowStep + 1); - } - }; - - const goToPreviousStep = () => { - if (nowStep > 1) { - setNowStep(nowStep - 1); - } - }; - - const canMakeNewPlan = useRecoilValue(canMakeNewPlanStore); - - useLayoutEffect(() => { - if (!canMakeNewPlan) { - router.replace('/home'); - ajajaToast.error('생성할 수 있는 계획의 수가 최대입니다.'); - } - }, [canMakeNewPlan, router]); - - const [isFirstStepDataAllExist, setIsFirstStepDataAllExist] = useState(false); - const [isSecondStepDataAllExist, setIsSecondStepDataAllExist] = - useState(false); - const [isLastStepDataAllExist, setIsLastStepDataAllExist] = useState(false); - - const [fixedMonthList, setFixedMonthList] = useState([]); - const [fixedDate, setFixedDate] = useState(1); - - const isPreviousCreatePlanExist = () => { - if (typeof window !== 'undefined') { - return sessionStorage.getItem(SESSION_STORAGE_KEY.STEP_1) ? true : false; - } - }; - - const [isContinueCreatePlanModalOpen, setIsContinueCreatePlanModalOpen] = - useState(isPreviousCreatePlanExist()); - - const onClickContinueCreateModalYes = () => { - // 이어서 작성하기 - 모달만 닫기 - setIsContinueCreatePlanModalOpen(false); - }; - - const onClickContinueCreateModalNo = () => { - // 새로 작성하기 - 모든 step 세션 스토리지 값 삭제 후 모달 닫기 - restartCreatePlan(); - setIsContinueCreatePlanModalOpen(false); - }; - - const [isFixRemindDateModalOpen, setIsFixRemindDateModalOpen] = - useState(false); - - // 3 => 4단계 다음단계 버튼 클릭 시 실행되는 함수 - // 날짜 확정 모달에 렌더링 될 data들을 3단계에서 정한 주기, 범위, 날짜로 업데이트 시켜주고 모달 열기 - const goToLastStep = () => { - const remindOptions = getSessionStorageData( - 'STEP_3', - ) as RemindOptionType | null; - - if (remindOptions) { - const fixedRemindDateList = decideRemindDate( - remindOptions.TotalPeriod, - remindOptions.Term, - remindOptions.Date, - ); - - setFixedMonthList( - fixedRemindDateList!.map((item) => { - return item.month; - }), - ); - setFixedDate(remindOptions.Date); - setIsFixRemindDateModalOpen(true); - } - }; - - // 날짜 확정 모달에서 yes를 눌렀을 시 실행되는 함수 - // 3단계 data를 바탕으로 정해진 날짜와 비어있는 메세지 "" 를 4단계 session data로 저장, 모달 닫기 - const onClickRemindDateModalYes = () => { - const remindOptionsItem = sessionStorage.getItem( - SESSION_STORAGE_KEY.STEP_3, - ); - - const remindOptions = remindOptionsItem - ? (JSON.parse(remindOptionsItem) as RemindOptionType) - : null; - - if (remindOptions) { - const fixedRemindDateList = decideRemindDate( - remindOptions.TotalPeriod, - remindOptions.Term, - remindOptions.Date, - ); - - const emptyRemindMessageList: RemindItemType[] = fixedRemindDateList!.map( - (item) => { - return { - date: { - month: item.month, - day: item.day, - }, - message: '', - }; - }, - ); - - sessionStorage.setItem( - SESSION_STORAGE_KEY.STEP_4, - JSON.stringify(emptyRemindMessageList), - ); - } - - setIsFixRemindDateModalOpen(false); - goToNextStep(); - }; + const { + nowStep, + goToPreviousStep, + goToNextStep, + isFirstStepDataAllExist, + setIsFirstStepDataAllExist, + isSecondStepDataAllExist, + setIsSecondStepDataAllExist, + isLastStepDataAllExist, + setIsLastStepDataAllExist, + fixedMonthList, + fixedDate, + isContinueCreatePlanModalOpen, + setIsFixRemindDateModalOpen, + onClickContinueCreateModalYes, + onClickContinueCreateModalNo, + isFixRemindDateModalOpen, + goToLastStep, + onClickRemindDateModalYes, + } = useCreatePage(); return (
From 58258bd3071a6c1d21e56ea175041ad873b7e23b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EB=B0=95=EB=AF=BC=EC=9A=B0?= Date: Mon, 5 Feb 2024 17:18:00 +0900 Subject: [PATCH 02/10] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20:=20#469=20-=20utils?= =?UTF-8?q?=20index=20=ED=8C=8C=EC=9D=BC=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../create/_components/StepButtonGroup/StepButtonGroup.tsx | 4 ++-- src/utils/index.ts | 4 ++++ 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/src/app/create/_components/StepButtonGroup/StepButtonGroup.tsx b/src/app/create/_components/StepButtonGroup/StepButtonGroup.tsx index 49e741aa..53fd245b 100644 --- a/src/app/create/_components/StepButtonGroup/StepButtonGroup.tsx +++ b/src/app/create/_components/StepButtonGroup/StepButtonGroup.tsx @@ -3,10 +3,10 @@ import { Button } from '@/components'; import { ajajaToast } from '@/components/Toaster/customToast'; import { SESSION_STORAGE_KEY } from '@/constants'; -import { usePostNewPlanMutation } from '@/hooks/apis/usePostNewPlanMutation'; +import { usePostNewPlanMutation } from '@/hooks/apis'; import { PlanContentType, RemindItemType, RemindOptionType } from '@/types'; import { PostNewPlanRequestBody } from '@/types/apis'; -import { changeRemindTimeToString } from '@/utils/changeRemindTimeToString'; +import { changeRemindTimeToString } from '@/utils'; import classNames from 'classnames'; import { useRouter } from 'next/navigation'; import React from 'react'; diff --git a/src/utils/index.ts b/src/utils/index.ts index 86cedc6e..f25a1c96 100644 --- a/src/utils/index.ts +++ b/src/utils/index.ts @@ -1,3 +1,7 @@ +export { alertAndLogin } from '@/utils/alertAndLogin'; +export { changeRemindTimeToNumber } from '@/utils/changeRemindTimeToNumber'; +export { changeRemindTimeToString } from '@/utils/changeRemindTimeToString'; +export { checkEmailValidation } from '@/utils/checkEmailValidation'; export { checkIsMyPlan } from '@/utils/checkIsMyPlan'; export { checkIsSeason } from '@/utils/checkIsSeason'; export { checkIsTokenExpired } from '@/utils/checkIsTokenExpired'; From 113304021368f6ed76f8434ffa899a45acd59c34 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EB=B0=95=EB=AF=BC=EC=9A=B0?= Date: Mon, 5 Feb 2024 17:26:09 +0900 Subject: [PATCH 03/10] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20:=20#469=20-=20Creat?= =?UTF-8?q?ePlanIcon=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EB=B9=84?= =?UTF-8?q?=EC=A6=88=EB=8B=88=EC=8A=A4=20=EB=A1=9C=EC=A7=81=20=EB=B6=84?= =?UTF-8?q?=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../CreatePlanIcon/CreatePlanIcon.tsx | 25 +++++--------- .../CreatePlanIcon/hooks/useCreatePlanIcon.ts | 33 +++++++++++++++++++ 2 files changed, 41 insertions(+), 17 deletions(-) create mode 100644 src/components/CreatePlanIcon/hooks/useCreatePlanIcon.ts diff --git a/src/components/CreatePlanIcon/CreatePlanIcon.tsx b/src/components/CreatePlanIcon/CreatePlanIcon.tsx index f84e1a67..f70bd904 100644 --- a/src/components/CreatePlanIcon/CreatePlanIcon.tsx +++ b/src/components/CreatePlanIcon/CreatePlanIcon.tsx @@ -1,11 +1,10 @@ 'use client'; import { CreatePlanIconExample, Modal, ModalSelectIcon } from '@/components'; -import { SESSION_STORAGE_KEY, planIcons } from '@/constants'; -import { useSessionStorage } from '@/hooks/useSessionStorage'; +import { planIcons } from '@/constants'; import classNames from 'classnames'; import Image from 'next/image'; -import { useEffect, useState } from 'react'; +import useCreatePlanIcon from './hooks/useCreatePlanIcon'; import './index.scss'; interface CreatePlanIconProps { @@ -15,20 +14,12 @@ interface CreatePlanIconProps { export default function CreatePlanIcon({ setIsFirstStepDataAllExist, }: CreatePlanIconProps) { - const [iconNumber, setIconNumber] = useSessionStorage({ - key: SESSION_STORAGE_KEY.STEP_1, - initialValue: null, - }); - - useEffect(() => { - if (iconNumber) { - setIsFirstStepDataAllExist(true); - } else { - setIsFirstStepDataAllExist(false); - } - }, [iconNumber, setIsFirstStepDataAllExist]); - - const [isSelectIconModalOpen, setIsSelectIconModalOpen] = useState(false); + const { + iconNumber, + setIconNumber, + isSelectIconModalOpen, + setIsSelectIconModalOpen, + } = useCreatePlanIcon({ setIsFirstStepDataAllExist }); return (
diff --git a/src/components/CreatePlanIcon/hooks/useCreatePlanIcon.ts b/src/components/CreatePlanIcon/hooks/useCreatePlanIcon.ts new file mode 100644 index 00000000..9df132cf --- /dev/null +++ b/src/components/CreatePlanIcon/hooks/useCreatePlanIcon.ts @@ -0,0 +1,33 @@ +import { SESSION_STORAGE_KEY } from '@/constants'; +import { useSessionStorage } from '@/hooks'; +import { useEffect, useState } from 'react'; + +interface useCreatePlanIconProps { + setIsFirstStepDataAllExist: (isExist: boolean) => void; +} + +export default function useCreatePlanIcon({ + setIsFirstStepDataAllExist, +}: useCreatePlanIconProps) { + const [iconNumber, setIconNumber] = useSessionStorage({ + key: SESSION_STORAGE_KEY.STEP_1, + initialValue: null, + }); + + useEffect(() => { + if (iconNumber) { + setIsFirstStepDataAllExist(true); + } else { + setIsFirstStepDataAllExist(false); + } + }, [iconNumber, setIsFirstStepDataAllExist]); + + const [isSelectIconModalOpen, setIsSelectIconModalOpen] = useState(false); + + return { + iconNumber, + setIconNumber, + isSelectIconModalOpen, + setIsSelectIconModalOpen, + }; +} From 1f6bf4e21d1ce45e6e58bddda4a15f3f975922e1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EB=B0=95=EB=AF=BC=EC=9A=B0?= Date: Mon, 5 Feb 2024 17:43:07 +0900 Subject: [PATCH 04/10] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20:=20#469=20-=20Creat?= =?UTF-8?q?ePlanContent=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EB=B9=84?= =?UTF-8?q?=EC=A6=88=EB=8B=88=EC=8A=A4=20=EB=A1=9C=EC=A7=81=20=EB=B6=84?= =?UTF-8?q?=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../CreatePlanContent/CreatePlanContent.tsx | 78 +++-------------- .../hooks/useCreatePlanContent.ts | 86 +++++++++++++++++++ 2 files changed, 98 insertions(+), 66 deletions(-) create mode 100644 src/components/CreatePlanContent/hooks/useCreatePlanContent.ts diff --git a/src/components/CreatePlanContent/CreatePlanContent.tsx b/src/components/CreatePlanContent/CreatePlanContent.tsx index 046bc395..369fafe3 100644 --- a/src/components/CreatePlanContent/CreatePlanContent.tsx +++ b/src/components/CreatePlanContent/CreatePlanContent.tsx @@ -1,12 +1,10 @@ 'use client'; import { HelpButton } from '@/components'; -import { INPUT_MAX_LENGTH, SESSION_STORAGE_KEY } from '@/constants'; -import { useSessionStorage } from '@/hooks/useSessionStorage'; -import { PlanContentType } from '@/types'; +import { INPUT_MAX_LENGTH } from '@/constants'; import classNames from 'classnames'; -import { useEffect, useRef } from 'react'; import { DeletableTag, IconSwitchButton, PlanInput, TagInput } from '..'; +import useCreatePlanContent from './hooks/useCreatePlanContent'; import './index.scss'; interface CreatePlanContentProps { @@ -16,68 +14,16 @@ interface CreatePlanContentProps { export default function CreatePlanContent({ setIsSecondStepDataAllExist, }: CreatePlanContentProps) { - const [planContent, setPlanContent] = useSessionStorage({ - key: SESSION_STORAGE_KEY.STEP_2, - initialValue: { - title: '', - description: '', - tags: [], - isPublic: true, - canAjaja: true, - }, - }); - - // state가 바뀔 때마다 다음 단계로 갈 수 있는지 여부를 변경해주는 useEffect 훅 - useEffect(() => { - if (planContent.title.length > 0 && planContent.description.length > 0) { - setIsSecondStepDataAllExist(true); - } else { - setIsSecondStepDataAllExist(false); - } - }, [planContent, setIsSecondStepDataAllExist]); - - const nextTextAreaRef = useRef(null); - - const handleChangeTitle = (newTitle: string) => { - setPlanContent({ ...planContent, title: newTitle }); - }; - - const handleChangeDescription = (newDescription: string) => { - setPlanContent({ - ...planContent, - description: newDescription, - }); - }; - - const handleChangeTags = (newTags: string[]) => { - setPlanContent({ ...planContent, tags: newTags }); - }; - - const handleRemoveTag = (removedTag: string) => { - const filteredTags = planContent.tags.filter((tag) => tag !== removedTag); - handleChangeTags(filteredTags); - }; - - const handleAddTag = (text: string) => { - const trimedTags = text.trim(); - if ( - planContent.tags.includes(trimedTags) || - planContent.tags.length >= 5 || - trimedTags.length === 0 - ) { - return; - } - const newTagList = [...planContent.tags, trimedTags]; - handleChangeTags(newTagList); - }; - - const handleChangeIsPublic = (newIsPublic: boolean) => { - setPlanContent({ ...planContent, isPublic: newIsPublic }); - }; - - const handleChangeCanAjaja = (newCanAjaja: boolean) => { - setPlanContent({ ...planContent, canAjaja: newCanAjaja }); - }; + const { + planContent, + nextTextAreaRef, + handleChangeTitle, + handleChangeDescription, + handleRemoveTag, + handleAddTag, + handleChangeIsPublic, + handleChangeCanAjaja, + } = useCreatePlanContent({ setIsSecondStepDataAllExist }); return (
diff --git a/src/components/CreatePlanContent/hooks/useCreatePlanContent.ts b/src/components/CreatePlanContent/hooks/useCreatePlanContent.ts new file mode 100644 index 00000000..40e398db --- /dev/null +++ b/src/components/CreatePlanContent/hooks/useCreatePlanContent.ts @@ -0,0 +1,86 @@ +import { SESSION_STORAGE_KEY } from '@/constants'; +import { useSessionStorage } from '@/hooks'; +import { PlanContentType } from '@/types'; +import { useEffect, useRef } from 'react'; + +interface useCreatePlanContentProps { + setIsSecondStepDataAllExist: (isExist: boolean) => void; +} + +export default function useCreatePlanContent({ + setIsSecondStepDataAllExist, +}: useCreatePlanContentProps) { + const [planContent, setPlanContent] = useSessionStorage({ + key: SESSION_STORAGE_KEY.STEP_2, + initialValue: { + title: '', + description: '', + tags: [], + isPublic: true, + canAjaja: true, + }, + }); + + // state가 바뀔 때마다 다음 단계로 갈 수 있는지 여부를 변경해주는 useEffect 훅 + useEffect(() => { + if (planContent.title.length > 0 && planContent.description.length > 0) { + setIsSecondStepDataAllExist(true); + } else { + setIsSecondStepDataAllExist(false); + } + }, [planContent, setIsSecondStepDataAllExist]); + + const nextTextAreaRef = useRef(null); + + const handleChangeTitle = (newTitle: string) => { + setPlanContent({ ...planContent, title: newTitle }); + }; + + const handleChangeDescription = (newDescription: string) => { + setPlanContent({ + ...planContent, + description: newDescription, + }); + }; + + const handleChangeTags = (newTags: string[]) => { + setPlanContent({ ...planContent, tags: newTags }); + }; + + const handleRemoveTag = (removedTag: string) => { + const filteredTags = planContent.tags.filter((tag) => tag !== removedTag); + handleChangeTags(filteredTags); + }; + + const handleAddTag = (text: string) => { + const trimedTags = text.trim(); + if ( + planContent.tags.includes(trimedTags) || + planContent.tags.length >= 5 || + trimedTags.length === 0 + ) { + return; + } + const newTagList = [...planContent.tags, trimedTags]; + handleChangeTags(newTagList); + }; + + const handleChangeIsPublic = (newIsPublic: boolean) => { + setPlanContent({ ...planContent, isPublic: newIsPublic }); + }; + + const handleChangeCanAjaja = (newCanAjaja: boolean) => { + setPlanContent({ ...planContent, canAjaja: newCanAjaja }); + }; + + return { + planContent, + nextTextAreaRef, + handleChangeTitle, + handleChangeDescription, + handleRemoveTag, + handleAddTag, + handleChangeIsPublic, + handleChangeCanAjaja, + }; +} From 5f68044b102ddddcab4cc3b11ab532f4c5251423 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EB=B0=95=EB=AF=BC=EC=9A=B0?= Date: Mon, 5 Feb 2024 17:48:31 +0900 Subject: [PATCH 05/10] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20:=20#469=20-=20Creat?= =?UTF-8?q?ePlanRemindDate=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20?= =?UTF-8?q?=EB=B9=84=EC=A6=88=EB=8B=88=EC=8A=A4=20=EB=A1=9C=EC=A7=81=20?= =?UTF-8?q?=EB=B6=84=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../CreatePlanRemindDate.tsx | 54 +++--------------- .../hooks/useCreatePlanRemindDate.ts | 56 +++++++++++++++++++ 2 files changed, 63 insertions(+), 47 deletions(-) create mode 100644 src/components/CreatePlanRemindDate/hooks/useCreatePlanRemindDate.ts diff --git a/src/components/CreatePlanRemindDate/CreatePlanRemindDate.tsx b/src/components/CreatePlanRemindDate/CreatePlanRemindDate.tsx index f842b7a1..132d11d9 100644 --- a/src/components/CreatePlanRemindDate/CreatePlanRemindDate.tsx +++ b/src/components/CreatePlanRemindDate/CreatePlanRemindDate.tsx @@ -1,17 +1,10 @@ 'use client'; import { Dropdown } from '@/components'; -import { - DATE_OPTIONS, - SESSION_STORAGE_KEY, - TERM_OPTIONS, - TIME_OPTIONS, - TOTAL_PERIOD_OPTIONS, -} from '@/constants'; -import { useSessionStorage } from '@/hooks/useSessionStorage'; -import { RemindOptionType } from '@/types'; +import { DATE_OPTIONS, TIME_OPTIONS, TOTAL_PERIOD_OPTIONS } from '@/constants'; import classNames from 'classnames'; -import React, { useCallback, useEffect, useMemo } from 'react'; +import React from 'react'; +import useCreatePlanRemindDate from './hooks/useCreatePlanRemindDate'; import './index.scss'; interface CreatePlanRemindDateProps { @@ -21,43 +14,10 @@ interface CreatePlanRemindDateProps { export default React.memo(function CreatePlanRemindDate({ isCreateOrEditPage, }: CreatePlanRemindDateProps) { - const [remindOptions, setRemindOptions] = useSessionStorage( - { - key: - isCreateOrEditPage === 'create' - ? SESSION_STORAGE_KEY.STEP_3 - : SESSION_STORAGE_KEY.EDIT_REMIND_OPTION, - initialValue: { - TotalPeriod: 12, - Term: 1, - Date: 1, - Time: 9, - }, - setSessionValueAtFirst: true, - }, - ); - - const handleChangeRemindOption = useCallback( - (optionKey: string, newOptionValue: number) => { - setRemindOptions({ - ...remindOptions, - [optionKey]: newOptionValue, - }); - }, - [remindOptions, setRemindOptions], - ); - - const filteredTermOptions = useMemo(() => { - return TERM_OPTIONS.filter( - (option) => option.value <= remindOptions.TotalPeriod, - ); - }, [remindOptions.TotalPeriod]); - - useEffect(() => { - if (remindOptions.Term > remindOptions.TotalPeriod) { - handleChangeRemindOption('Term', 1); - } - }, [remindOptions.TotalPeriod, remindOptions.Term, handleChangeRemindOption]); + const { remindOptions, filteredTermOptions, handleChangeRemindOption } = + useCreatePlanRemindDate({ + isCreateOrEditPage, + }); return (
diff --git a/src/components/CreatePlanRemindDate/hooks/useCreatePlanRemindDate.ts b/src/components/CreatePlanRemindDate/hooks/useCreatePlanRemindDate.ts new file mode 100644 index 00000000..81e99ba6 --- /dev/null +++ b/src/components/CreatePlanRemindDate/hooks/useCreatePlanRemindDate.ts @@ -0,0 +1,56 @@ +import { SESSION_STORAGE_KEY, TERM_OPTIONS } from '@/constants'; +import { useSessionStorage } from '@/hooks'; +import { RemindOptionType } from '@/types'; +import { useCallback, useEffect, useMemo } from 'react'; + +interface useCreatePlanRemindDateProps { + isCreateOrEditPage: 'create' | 'edit'; +} + +export default function useCreatePlanRemindDate({ + isCreateOrEditPage, +}: useCreatePlanRemindDateProps) { + const [remindOptions, setRemindOptions] = useSessionStorage( + { + key: + isCreateOrEditPage === 'create' + ? SESSION_STORAGE_KEY.STEP_3 + : SESSION_STORAGE_KEY.EDIT_REMIND_OPTION, + initialValue: { + TotalPeriod: 12, + Term: 1, + Date: 1, + Time: 9, + }, + setSessionValueAtFirst: true, + }, + ); + + const handleChangeRemindOption = useCallback( + (optionKey: string, newOptionValue: number) => { + setRemindOptions({ + ...remindOptions, + [optionKey]: newOptionValue, + }); + }, + [remindOptions, setRemindOptions], + ); + + const filteredTermOptions = useMemo(() => { + return TERM_OPTIONS.filter( + (option) => option.value <= remindOptions.TotalPeriod, + ); + }, [remindOptions.TotalPeriod]); + + useEffect(() => { + if (remindOptions.Term > remindOptions.TotalPeriod) { + handleChangeRemindOption('Term', 1); + } + }, [remindOptions.TotalPeriod, remindOptions.Term, handleChangeRemindOption]); + + return { + remindOptions, + filteredTermOptions, + handleChangeRemindOption, + }; +} From bf8ea5e4cdb88296cc70c7376933d0ec197446c2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EB=B0=95=EB=AF=BC=EC=9A=B0?= Date: Mon, 5 Feb 2024 17:54:02 +0900 Subject: [PATCH 06/10] =?UTF-8?q?=E2=99=BB=20:=20#469=20-=20CreatePlanRemi?= =?UTF-8?q?ndMessage=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EB=B9=84?= =?UTF-8?q?=EC=A6=88=EB=8B=88=EC=8A=A4=20=EB=A1=9C=EC=A7=81=20=EB=B6=84?= =?UTF-8?q?=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../CreatePlanRemindMessage.tsx | 61 +++------------- .../hooks/useCreatePlanRemindMessage.ts | 70 +++++++++++++++++++ 2 files changed, 81 insertions(+), 50 deletions(-) create mode 100644 src/components/CreatePlanRemindMessage/hooks/useCreatePlanRemindMessage.ts diff --git a/src/components/CreatePlanRemindMessage/CreatePlanRemindMessage.tsx b/src/components/CreatePlanRemindMessage/CreatePlanRemindMessage.tsx index 424b766e..c46e5389 100644 --- a/src/components/CreatePlanRemindMessage/CreatePlanRemindMessage.tsx +++ b/src/components/CreatePlanRemindMessage/CreatePlanRemindMessage.tsx @@ -1,11 +1,9 @@ 'use client'; import { ModalSendRemindExample, WritableRemindItem } from '@/components'; -import { SESSION_STORAGE_KEY } from '@/constants'; -import { useSessionStorage } from '@/hooks/useSessionStorage'; -import { RemindItemType } from '@/types'; import classNames from 'classnames'; -import React, { useCallback, useEffect, useState } from 'react'; +import React from 'react'; +import useCreatePlanRemindMessage from './hooks/useCreatePlanRemindMessage'; import './index.scss'; interface CreatePlanRemindMessageProps { @@ -17,54 +15,17 @@ export default function CreatePlanRemindMessage({ setIsLastStepDataAllExist, isCreateOrEditPage, }: CreatePlanRemindMessageProps) { - const [remindMessageList, setRemindMessageList] = useSessionStorage< - RemindItemType[] - >({ - key: - isCreateOrEditPage === 'create' - ? SESSION_STORAGE_KEY.STEP_4 - : SESSION_STORAGE_KEY.EDIT_REMIND_MESSAGE, - initialValue: [], + const { + handleChangeRemindMessage, + makeAllRemindMessageSame, + remindMessageList, + isSendRemindModalOpen, + setIsSendRemindModalOpen, + } = useCreatePlanRemindMessage({ + setIsLastStepDataAllExist, + isCreateOrEditPage, }); - useEffect(() => { - if (remindMessageList) { - if ( - remindMessageList.every((remindItem) => remindItem.message.length > 0) - ) { - setIsLastStepDataAllExist(true); - } else { - setIsLastStepDataAllExist(false); - } - } - }, [remindMessageList, setIsLastStepDataAllExist]); - - const handleChangeRemindMessage = ( - month: number, - day: number, - newMessage: string, - ) => { - setRemindMessageList( - remindMessageList.map((item) => { - if (item.date.month === month && item.date.day === day) { - return { ...item, message: newMessage }; - } - return item; - }), - ); - }; - - const makeAllRemindMessageSame = useCallback(() => { - if (remindMessageList.length > 1) { - const firstMessage = remindMessageList[0].message; - setRemindMessageList( - remindMessageList.map((item) => ({ ...item, message: firstMessage })), - ); - } - }, [remindMessageList, setRemindMessageList]); - - const [isSendRemindModalOpen, setIsSendRemindModalOpen] = useState(false); - return (
diff --git a/src/components/CreatePlanRemindMessage/hooks/useCreatePlanRemindMessage.ts b/src/components/CreatePlanRemindMessage/hooks/useCreatePlanRemindMessage.ts new file mode 100644 index 00000000..f4141ed1 --- /dev/null +++ b/src/components/CreatePlanRemindMessage/hooks/useCreatePlanRemindMessage.ts @@ -0,0 +1,70 @@ +import { SESSION_STORAGE_KEY } from '@/constants'; +import { useSessionStorage } from '@/hooks'; +import { RemindItemType } from '@/types'; +import { useCallback, useEffect, useState } from 'react'; + +interface useCreatePlanRemindMessageProps { + setIsLastStepDataAllExist: (isExist: boolean) => void; + isCreateOrEditPage: 'create' | 'edit'; +} + +export default function useCreatePlanRemindMessage({ + setIsLastStepDataAllExist, + isCreateOrEditPage, +}: useCreatePlanRemindMessageProps) { + const [remindMessageList, setRemindMessageList] = useSessionStorage< + RemindItemType[] + >({ + key: + isCreateOrEditPage === 'create' + ? SESSION_STORAGE_KEY.STEP_4 + : SESSION_STORAGE_KEY.EDIT_REMIND_MESSAGE, + initialValue: [], + }); + + useEffect(() => { + if (remindMessageList) { + if ( + remindMessageList.every((remindItem) => remindItem.message.length > 0) + ) { + setIsLastStepDataAllExist(true); + } else { + setIsLastStepDataAllExist(false); + } + } + }, [remindMessageList, setIsLastStepDataAllExist]); + + const handleChangeRemindMessage = ( + month: number, + day: number, + newMessage: string, + ) => { + setRemindMessageList( + remindMessageList.map((item) => { + if (item.date.month === month && item.date.day === day) { + return { ...item, message: newMessage }; + } + return item; + }), + ); + }; + + const makeAllRemindMessageSame = useCallback(() => { + if (remindMessageList.length > 1) { + const firstMessage = remindMessageList[0].message; + setRemindMessageList( + remindMessageList.map((item) => ({ ...item, message: firstMessage })), + ); + } + }, [remindMessageList, setRemindMessageList]); + + const [isSendRemindModalOpen, setIsSendRemindModalOpen] = useState(false); + + return { + handleChangeRemindMessage, + makeAllRemindMessageSame, + remindMessageList, + isSendRemindModalOpen, + setIsSendRemindModalOpen, + }; +} From db471ebf1fcf8cef8b5df7350f91b3c926581c87 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EB=B0=95=EB=AF=BC=EC=9A=B0?= Date: Mon, 5 Feb 2024 18:18:49 +0900 Subject: [PATCH 07/10] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20:=20#469=20-=20remin?= =?UTF-8?q?d=20=EC=A1=B0=ED=9A=8C,=20=EC=88=98=EC=A0=95=20=ED=8E=98?= =?UTF-8?q?=EC=9D=B4=EC=A7=80=20=EB=B9=84=EC=A6=88=EB=8B=88=EC=8A=A4=20?= =?UTF-8?q?=EB=A1=9C=EC=A7=81=20=EB=B6=84=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../reminds/[planId]/hooks/useRemindPage.ts | 32 +++ src/app/reminds/[planId]/page.tsx | 30 +-- .../edit/[planId]/_hooks/useEditRemindPage.ts | 195 +++++++++++++++++- src/app/reminds/edit/[planId]/page.tsx | 195 ++---------------- 4 files changed, 246 insertions(+), 206 deletions(-) create mode 100644 src/app/reminds/[planId]/hooks/useRemindPage.ts diff --git a/src/app/reminds/[planId]/hooks/useRemindPage.ts b/src/app/reminds/[planId]/hooks/useRemindPage.ts new file mode 100644 index 00000000..40d69602 --- /dev/null +++ b/src/app/reminds/[planId]/hooks/useRemindPage.ts @@ -0,0 +1,32 @@ +import { useGetRemindQuery, useToggleIsRemindableMutation } from '@/hooks/apis'; +import { checkIsSeason } from '@/utils'; +import { useRouter } from 'next/navigation'; + +export default function useRemindPage(planId: string) { + const router = useRouter(); + const isSeason = checkIsSeason(); + + const { remindData } = useGetRemindQuery( + parseInt(planId, 10), + checkIsSeason(), + ); + + const { mutate: toggleIsRemindableAPI } = useToggleIsRemindableMutation( + parseInt(planId, 10), + ); + + const handleToggleIsRemindable = () => { + toggleIsRemindableAPI(parseInt(planId, 10)); + }; + + const onClickGoBackToPlanPage = () => { + router.push(`/plans/${planId}`); + }; + + return { + isSeason, + remindData, + handleToggleIsRemindable, + onClickGoBackToPlanPage, + }; +} diff --git a/src/app/reminds/[planId]/page.tsx b/src/app/reminds/[planId]/page.tsx index 465d0c08..08d0c8c9 100644 --- a/src/app/reminds/[planId]/page.tsx +++ b/src/app/reminds/[planId]/page.tsx @@ -2,36 +2,20 @@ import { Button, DebounceSwitchButton, ReadOnlyRemindItem } from '@/components'; import { REMIND_TIME_TEXT } from '@/constants'; -import { useGetRemindQuery } from '@/hooks/apis/useGetRemindQuery'; -import { useToggleIsRemindableMutation } from '@/hooks/apis/useToggleIsRemindable'; -import { checkIsSeason } from '@/utils/checkIsSeason'; import classNames from 'classnames'; import Link from 'next/link'; -import { useRouter } from 'next/navigation'; import React from 'react'; +import useRemindPage from './hooks/useRemindPage'; import './index.scss'; export default function RemindPage({ params }: { params: { planId: string } }) { const { planId } = params; - const router = useRouter(); - const isSeason = checkIsSeason(); - - const { remindData } = useGetRemindQuery( - parseInt(planId, 10), - checkIsSeason(), - ); - - const { mutate: toggleIsRemindableAPI } = useToggleIsRemindableMutation( - parseInt(planId, 10), - ); - - const handleToggleIsRemindable = () => { - toggleIsRemindableAPI(parseInt(planId, 10)); - }; - - const onClickGoBackToPlanPage = () => { - router.push(`/plans/${planId}`); - }; + const { + isSeason, + remindData, + handleToggleIsRemindable, + onClickGoBackToPlanPage, + } = useRemindPage(planId); return (
diff --git a/src/app/reminds/edit/[planId]/_hooks/useEditRemindPage.ts b/src/app/reminds/edit/[planId]/_hooks/useEditRemindPage.ts index ae55d14f..77c7378c 100644 --- a/src/app/reminds/edit/[planId]/_hooks/useEditRemindPage.ts +++ b/src/app/reminds/edit/[planId]/_hooks/useEditRemindPage.ts @@ -1,9 +1,45 @@ +import { ajajaToast } from '@/components/Toaster/customToast'; import { SESSION_STORAGE_KEY } from '@/constants'; -import { RemindData } from '@/types'; +import { useEditRemindMutation, useGetRemindQuery } from '@/hooks/apis'; +import { RemindItemType, RemindOptionType } from '@/types'; +import { EditRemindData } from '@/types/apis'; +import { + changeRemindTimeToString, + checkIsSeason, + decideRemindDate, + getSessionStorageData, +} from '@/utils'; import { changeRemindTimeToNumber } from '@/utils/changeRemindTimeToNumber'; +import { useRouter } from 'next/navigation'; import { useState } from 'react'; -export const useEditRemindPage = (remindData: RemindData) => { +export const useEditRemindPage = (planId: string) => { + const router = useRouter(); + + const { remindData } = useGetRemindQuery( + parseInt(planId, 10), + checkIsSeason(), + ); + + const [nowStep, setNowStep] = useState(1); + const goToPreviousStep = () => { + if (nowStep > 1) { + setNowStep(nowStep - 1); + } + }; + + const goToNextStep = () => { + if (nowStep < 2) { + setNowStep(nowStep + 1); + } + }; + + const [isEveryRemindDataExist, setIsEveryRemindDataExist] = useState(false); + const [fixedMonthList, setFixedMonthList] = useState([]); + const [fixedDate, setFixedDate] = useState(1); + const [isFixRemindDateModalOpen, setIsFixRemindDateModalOpen] = + useState(false); + const [originTerm, setOriginTerm] = useState(remindData.remindTerm); const [originPeriod, setOriginPeriod] = useState(remindData.totalPeriod); const [isMounted, setIsMounted] = useState(false); @@ -39,5 +75,158 @@ export const useEditRemindPage = (remindData: RemindData) => { setIsMounted(true); } - return { originTerm, setOriginTerm, originPeriod, setOriginPeriod }; + const { mutate: editRemindAPI } = useEditRemindMutation(parseInt(planId, 10)); + + // 수정 완료 버튼 클릭 시 실행되는 함수 + const handleClickEditRemind = (isEveryRemindDataExist: boolean) => { + if (isEveryRemindDataExist) { + const editRemindOptions = getSessionStorageData( + 'EDIT_REMIND_OPTION', + ) as RemindOptionType | null; + + const editRemindMessage = getSessionStorageData('EDIT_REMIND_MESSAGE') as + | RemindItemType[] + | null; + + // 세션에 리마인드 옵션, 메시지에 대한 정보가 모두 존재할 때 + if (editRemindOptions && editRemindMessage) { + const editRemindData: EditRemindData = { + remindTotalPeriod: editRemindOptions.TotalPeriod, + remindTerm: editRemindOptions.Term, + remindDate: editRemindOptions.Date, + remindTime: changeRemindTimeToString(editRemindOptions.Time), + messages: editRemindMessage.map((item) => { + return { + content: item.message, + remindMonth: item.date.month, + remindDay: item.date.day, + }; + }), + }; + + editRemindAPI({ + planId: parseInt(planId, 10), + remindData: editRemindData, + }); + } + router.push(`/reminds/${planId}`); + } else { + ajajaToast.error('모든 항목을 입력해주세요!'); + } + }; + + // 리마인드 날짜 수정 => 메세지 수정으로 넘어가기 위해 다음 단계 눌렀을 때 실행되는 함수 + const goToRemindMessageStep = () => { + const editRemindOptions = getSessionStorageData( + 'EDIT_REMIND_OPTION', + ) as RemindOptionType | null; + + if ( + // 1. 주기, 범위가 바뀌지 않았다면 => 메세지 내용은 유지, 다른 정보는 바뀌었다면 업데이트 하기 + editRemindOptions?.Term === originTerm && + editRemindOptions?.TotalPeriod === originPeriod + ) { + // 기존 4번에 대한 리마인드 메세지 리스트에 접근 + const remindMessage = getSessionStorageData('EDIT_REMIND_MESSAGE') as + | RemindItemType[] + | null; + + if (remindMessage) { + // 변경되었을 수도 있는 날짜에 대한 새로운 리마인드 메세지 리스트 만들기 + const fixedRemindDateList = decideRemindDate( + editRemindOptions.TotalPeriod, + editRemindOptions.Term, + editRemindOptions.Date, + ); + + // 새로운 메세지 리스트인데, 월과 날짜가 달라졌을 수도 있으므로 새로 만들고, 메세지는 동일하게 + const newRemindMessageList = remindMessage.map((item, index) => { + return { + date: { + month: fixedRemindDateList![index].month, + day: fixedRemindDateList![index].day, + }, + message: item.message, + }; + }); + + sessionStorage.setItem( + SESSION_STORAGE_KEY.EDIT_REMIND_MESSAGE, + JSON.stringify(newRemindMessageList), + ); + } + + goToNextStep(); + } else { + // 2. 주기, 범위가 바뀌었다면 => 메세지가 유지되지 않고 바뀐다는 모달 띄워주기 + if (editRemindOptions) { + const fixedRemindDateList = decideRemindDate( + editRemindOptions.TotalPeriod, + editRemindOptions.Term, + editRemindOptions.Date, + ); + + setFixedMonthList( + fixedRemindDateList!.map((item) => { + return item.month; + }), + ); + setFixedDate(editRemindOptions.Date); + setIsFixRemindDateModalOpen(true); + } + } + }; + + // 리마인드 날짜 확정 모달에서 yes 클릭 시 실행되는 함수 + // => 새로 설정된 리마인드 날짜에 따라 메세지를 "" 로 연결 + const onClickRemindDateModalYes = () => { + const editRemindOptions = getSessionStorageData( + 'EDIT_REMIND_OPTION', + ) as RemindOptionType | null; + + if (editRemindOptions) { + const fixedRemindDateList = decideRemindDate( + editRemindOptions.TotalPeriod, + editRemindOptions.Term, + editRemindOptions.Date, + ); + + const emptyRemindMessageList: RemindItemType[] = fixedRemindDateList!.map( + (item) => { + return { + date: { + month: item.month, + day: item.day, + }, + message: '', + }; + }, + ); + + sessionStorage.setItem( + SESSION_STORAGE_KEY.EDIT_REMIND_MESSAGE, + JSON.stringify(emptyRemindMessageList), + ); + + setOriginPeriod(editRemindOptions.TotalPeriod); + setOriginTerm(editRemindOptions.Term); + + setIsFixRemindDateModalOpen(false); + goToNextStep(); + } + }; + + return { + nowStep, + goToPreviousStep, + isEveryRemindDataExist, + setIsEveryRemindDataExist, + fixedMonthList, + fixedDate, + isFixRemindDateModalOpen, + setIsFixRemindDateModalOpen, + handleClickEditRemind, + goToRemindMessageStep, + onClickRemindDateModalYes, + }; }; diff --git a/src/app/reminds/edit/[planId]/page.tsx b/src/app/reminds/edit/[planId]/page.tsx index 88879189..6bf4a885 100644 --- a/src/app/reminds/edit/[planId]/page.tsx +++ b/src/app/reminds/edit/[planId]/page.tsx @@ -6,20 +6,10 @@ import { CreatePlanRemindMessage, ModalFixRemindDate, } from '@/components'; -import { ajajaToast } from '@/components/Toaster/customToast'; -import { EDIT_REMIND_STEP_TITLE, SESSION_STORAGE_KEY } from '@/constants'; -import { useEditRemindMutation } from '@/hooks/apis/useEditRemindMutation'; -import { useGetRemindQuery } from '@/hooks/apis/useGetRemindQuery'; -import { RemindItemType, RemindOptionType } from '@/types'; -import { EditRemindData } from '@/types/apis'; -import { changeRemindTimeToString } from '@/utils/changeRemindTimeToString'; -import { checkIsSeason } from '@/utils/checkIsSeason'; -import { decideRemindDate } from '@/utils/decideRemindDate'; -import { getSessionStorageData } from '@/utils/getSessionStorageData'; +import { EDIT_REMIND_STEP_TITLE } from '@/constants'; import classNames from 'classnames'; import Link from 'next/link'; -import { useRouter } from 'next/navigation'; -import React, { useState } from 'react'; +import React from 'react'; import { useEditRemindPage } from './_hooks/useEditRemindPage'; import './index.scss'; @@ -29,175 +19,20 @@ export default function EditRemindPage({ params: { planId: string }; }) { const { planId } = params; - const router = useRouter(); - const { remindData } = useGetRemindQuery( - parseInt(planId, 10), - checkIsSeason(), - ); - - const { originTerm, setOriginTerm, originPeriod, setOriginPeriod } = - useEditRemindPage(remindData); - - const [nowStep, setNowStep] = useState(1); - const [isEveryRemindDataExist, setIsEveryRemindDataExist] = useState(false); - const [fixedMonthList, setFixedMonthList] = useState([]); - const [fixedDate, setFixedDate] = useState(1); - const [isFixRemindDateModalOpen, setIsFixRemindDateModalOpen] = - useState(false); - - const goToPreviousStep = () => { - if (nowStep > 1) { - setNowStep(nowStep - 1); - } - }; - - const goToNextStep = () => { - if (nowStep < 2) { - setNowStep(nowStep + 1); - } - }; - - const { mutate: editRemindAPI } = useEditRemindMutation(parseInt(planId, 10)); - - // 수정 완료 버튼 클릭 시 실행되는 함수 - const handleClickEditRemind = (isEveryRemindDataExist: boolean) => { - if (isEveryRemindDataExist) { - const editRemindOptions = getSessionStorageData( - 'EDIT_REMIND_OPTION', - ) as RemindOptionType | null; - - const editRemindMessage = getSessionStorageData('EDIT_REMIND_MESSAGE') as - | RemindItemType[] - | null; - - // 세션에 리마인드 옵션, 메시지에 대한 정보가 모두 존재할 때 - if (editRemindOptions && editRemindMessage) { - const editRemindData: EditRemindData = { - remindTotalPeriod: editRemindOptions.TotalPeriod, - remindTerm: editRemindOptions.Term, - remindDate: editRemindOptions.Date, - remindTime: changeRemindTimeToString(editRemindOptions.Time), - messages: editRemindMessage.map((item) => { - return { - content: item.message, - remindMonth: item.date.month, - remindDay: item.date.day, - }; - }), - }; - - editRemindAPI({ - planId: parseInt(planId, 10), - remindData: editRemindData, - }); - } - router.push(`/reminds/${planId}`); - } else { - ajajaToast.error('모든 항목을 입력해주세요!'); - } - }; - - // 리마인드 날짜 수정 => 메세지 수정으로 넘어가기 위해 다음 단계 눌렀을 때 실행되는 함수 - const goToRemindMessageStep = () => { - const editRemindOptions = getSessionStorageData( - 'EDIT_REMIND_OPTION', - ) as RemindOptionType | null; - - if ( - // 1. 주기, 범위가 바뀌지 않았다면 => 메세지 내용은 유지, 다른 정보는 바뀌었다면 업데이트 하기 - editRemindOptions?.Term === originTerm && - editRemindOptions?.TotalPeriod === originPeriod - ) { - // 기존 4번에 대한 리마인드 메세지 리스트에 접근 - const remindMessage = getSessionStorageData('EDIT_REMIND_MESSAGE') as - | RemindItemType[] - | null; - - if (remindMessage) { - // 변경되었을 수도 있는 날짜에 대한 새로운 리마인드 메세지 리스트 만들기 - const fixedRemindDateList = decideRemindDate( - editRemindOptions.TotalPeriod, - editRemindOptions.Term, - editRemindOptions.Date, - ); - - // 새로운 메세지 리스트인데, 월과 날짜가 달라졌을 수도 있으므로 새로 만들고, 메세지는 동일하게 - const newRemindMessageList = remindMessage.map((item, index) => { - return { - date: { - month: fixedRemindDateList![index].month, - day: fixedRemindDateList![index].day, - }, - message: item.message, - }; - }); - - sessionStorage.setItem( - SESSION_STORAGE_KEY.EDIT_REMIND_MESSAGE, - JSON.stringify(newRemindMessageList), - ); - } - - goToNextStep(); - } else { - // 2. 주기, 범위가 바뀌었다면 => 메세지가 유지되지 않고 바뀐다는 모달 띄워주기 - if (editRemindOptions) { - const fixedRemindDateList = decideRemindDate( - editRemindOptions.TotalPeriod, - editRemindOptions.Term, - editRemindOptions.Date, - ); - - setFixedMonthList( - fixedRemindDateList!.map((item) => { - return item.month; - }), - ); - setFixedDate(editRemindOptions.Date); - setIsFixRemindDateModalOpen(true); - } - } - }; - - // 리마인드 날짜 확정 모달에서 yes 클릭 시 실행되는 함수 - // => 새로 설정된 리마인드 날짜에 따라 메세지를 "" 로 연결 - const onClickRemindDateModalYes = () => { - const editRemindOptions = getSessionStorageData( - 'EDIT_REMIND_OPTION', - ) as RemindOptionType | null; - - if (editRemindOptions) { - const fixedRemindDateList = decideRemindDate( - editRemindOptions.TotalPeriod, - editRemindOptions.Term, - editRemindOptions.Date, - ); - - const emptyRemindMessageList: RemindItemType[] = fixedRemindDateList!.map( - (item) => { - return { - date: { - month: item.month, - day: item.day, - }, - message: '', - }; - }, - ); - - sessionStorage.setItem( - SESSION_STORAGE_KEY.EDIT_REMIND_MESSAGE, - JSON.stringify(emptyRemindMessageList), - ); - - setOriginPeriod(editRemindOptions.TotalPeriod); - setOriginTerm(editRemindOptions.Term); - - setIsFixRemindDateModalOpen(false); - goToNextStep(); - } - }; + const { + nowStep, + goToPreviousStep, + isEveryRemindDataExist, + setIsEveryRemindDataExist, + fixedMonthList, + fixedDate, + isFixRemindDateModalOpen, + setIsFixRemindDateModalOpen, + handleClickEditRemind, + goToRemindMessageStep, + onClickRemindDateModalYes, + } = useEditRemindPage(planId); return (
From 666e7331395c1ec11f7d4e6d794df80b546205d2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EB=B0=95=EB=AF=BC=EC=9A=B0?= Date: Mon, 5 Feb 2024 18:21:41 +0900 Subject: [PATCH 08/10] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20:=20#469=20-=20remin?= =?UTF-8?q?d=20=EC=88=98=EC=A0=95=20=ED=8F=B4=EB=8D=94=20=5Fhooks=20=3D>?= =?UTF-8?q?=20hooks=20=ED=8F=B4=EB=8D=94=EB=AA=85=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../edit/[planId]/{_hooks => hooks}/useEditRemindPage.ts | 2 +- src/app/reminds/edit/[planId]/page.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) rename src/app/reminds/edit/[planId]/{_hooks => hooks}/useEditRemindPage.ts (98%) diff --git a/src/app/reminds/edit/[planId]/_hooks/useEditRemindPage.ts b/src/app/reminds/edit/[planId]/hooks/useEditRemindPage.ts similarity index 98% rename from src/app/reminds/edit/[planId]/_hooks/useEditRemindPage.ts rename to src/app/reminds/edit/[planId]/hooks/useEditRemindPage.ts index 77c7378c..9a2b8f9e 100644 --- a/src/app/reminds/edit/[planId]/_hooks/useEditRemindPage.ts +++ b/src/app/reminds/edit/[planId]/hooks/useEditRemindPage.ts @@ -9,7 +9,7 @@ import { decideRemindDate, getSessionStorageData, } from '@/utils'; -import { changeRemindTimeToNumber } from '@/utils/changeRemindTimeToNumber'; +import { changeRemindTimeToNumber } from '@/utils'; import { useRouter } from 'next/navigation'; import { useState } from 'react'; diff --git a/src/app/reminds/edit/[planId]/page.tsx b/src/app/reminds/edit/[planId]/page.tsx index 6bf4a885..2d6afd78 100644 --- a/src/app/reminds/edit/[planId]/page.tsx +++ b/src/app/reminds/edit/[planId]/page.tsx @@ -10,7 +10,7 @@ import { EDIT_REMIND_STEP_TITLE } from '@/constants'; import classNames from 'classnames'; import Link from 'next/link'; import React from 'react'; -import { useEditRemindPage } from './_hooks/useEditRemindPage'; +import { useEditRemindPage } from './hooks/useEditRemindPage'; import './index.scss'; export default function EditRemindPage({ From c9d1fee3bd68fdf0408d8c5c966b05de399b4c4e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EB=B0=95=EB=AF=BC=EC=9A=B0?= Date: Mon, 5 Feb 2024 18:25:54 +0900 Subject: [PATCH 09/10] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20:=20#469=20-=20=20us?= =?UTF-8?q?eEditRemindPage=20=EC=BB=A4=EC=8A=A4=ED=85=80=20=ED=9B=85=20?= =?UTF-8?q?=ED=99=94=EC=82=B4=ED=91=9C=ED=95=A8=EC=88=98=20=3D>=20?= =?UTF-8?q?=ED=95=A8=EC=88=98=EC=84=A0=EC=96=B8=EC=9C=BC=EB=A1=9C=20?= =?UTF-8?q?=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/reminds/edit/[planId]/hooks/useEditRemindPage.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/app/reminds/edit/[planId]/hooks/useEditRemindPage.ts b/src/app/reminds/edit/[planId]/hooks/useEditRemindPage.ts index 9a2b8f9e..8d88fea5 100644 --- a/src/app/reminds/edit/[planId]/hooks/useEditRemindPage.ts +++ b/src/app/reminds/edit/[planId]/hooks/useEditRemindPage.ts @@ -13,7 +13,7 @@ import { changeRemindTimeToNumber } from '@/utils'; import { useRouter } from 'next/navigation'; import { useState } from 'react'; -export const useEditRemindPage = (planId: string) => { +export default function useEditRemindPage(planId: string) { const router = useRouter(); const { remindData } = useGetRemindQuery( @@ -229,4 +229,4 @@ export const useEditRemindPage = (planId: string) => { goToRemindMessageStep, onClickRemindDateModalYes, }; -}; +} From 6985a4ffddf5d8b0c996ac9d9f3e1d1147988bd7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EB=B0=95=EB=AF=BC=EC=9A=B0?= Date: Mon, 5 Feb 2024 18:36:57 +0900 Subject: [PATCH 10/10] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20:=20#469=20-=20=20us?= =?UTF-8?q?eEditRemindPage=20import=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/reminds/edit/[planId]/page.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/reminds/edit/[planId]/page.tsx b/src/app/reminds/edit/[planId]/page.tsx index 2d6afd78..e26f6d8b 100644 --- a/src/app/reminds/edit/[planId]/page.tsx +++ b/src/app/reminds/edit/[planId]/page.tsx @@ -10,7 +10,7 @@ import { EDIT_REMIND_STEP_TITLE } from '@/constants'; import classNames from 'classnames'; import Link from 'next/link'; import React from 'react'; -import { useEditRemindPage } from './hooks/useEditRemindPage'; +import useEditRemindPage from './hooks/useEditRemindPage'; import './index.scss'; export default function EditRemindPage({