From 24537ee3e63750e3076f69f9027c1214aa246ad9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=9E=84=EC=B1=84=EB=AF=BC?= <87525734+cmlim0070@users.noreply.github.com> Date: Wed, 6 Nov 2024 17:11:29 +0900 Subject: [PATCH] =?UTF-8?q?feat=20:=20=EC=9D=BC=EA=B8=B0=20=EC=88=98?= =?UTF-8?q?=EC=A0=95=20=EB=A1=9C=EC=A7=81=20=EC=B6=94=EA=B0=80=20(#222)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat : 일기 수정 기능 추가 * feat : 일기 수정 로직 작성 --- src/app/router.tsx | 13 +- src/entities/diary/diaryService.ts | 47 +++++- src/entities/music/model/type.ts | 8 +- .../emotion/ui/EmotionButtonGroup.tsx | 7 +- .../DiaryWritePage/hooks/useDiaryForm.ts | 6 +- src/pages/DiaryWritePage/model/type.ts | 5 + .../DiaryWritePage/ui/DiaryWritePage.tsx | 138 ++++++++++++++++-- src/shared/api/diary.ts | 35 ++++- src/shared/hooks/usePostDiary.ts | 0 src/shared/model/conditionTypes.ts | 3 +- src/shared/model/diaryType.ts | 23 ++- src/widgets/select-emotion/model/type.ts | 9 +- .../ui/SelectEmotionContainer.tsx | 74 +++++++--- src/widgets/select-music/model/type.ts | 1 + .../select-music/ui/SelectMusicContainer.tsx | 18 ++- src/widgets/write-diary/model/type.ts | 14 +- .../write-diary/ui/WriteDiaryContainer.tsx | 20 ++- 17 files changed, 349 insertions(+), 72 deletions(-) delete mode 100644 src/shared/hooks/usePostDiary.ts diff --git a/src/app/router.tsx b/src/app/router.tsx index 3283b72..5c2d3ac 100644 --- a/src/app/router.tsx +++ b/src/app/router.tsx @@ -8,6 +8,9 @@ import SignPage from '@/pages/SignPage/SignPage'; import MyPage from '@/pages/MyPage/MyPage'; import { DetailPage } from '@/pages/DetailPage'; import AccountPage from '@/pages/AccountPage/AccountPage'; +import defaultApi from '@/shared/api/api'; + +const api = defaultApi(); const router = createBrowserRouter([ { @@ -28,7 +31,15 @@ const router = createBrowserRouter([ }, { path: '/diaryWrite/:date', - element: + element: + }, + { + path: '/diaryWrite/:id/edit', + element: , + loader: async ({ params }) => { + const preLoadDiary = await api.get(`/diary/${params.id}`); + return preLoadDiary.data; + } }, { path: '/join', diff --git a/src/entities/diary/diaryService.ts b/src/entities/diary/diaryService.ts index 6a33740..ade83db 100644 --- a/src/entities/diary/diaryService.ts +++ b/src/entities/diary/diaryService.ts @@ -1,5 +1,9 @@ -import { postDiaryApi } from '@/shared/api/diary'; -import { DiaryDescDataType, PostDiaryType } from '@/shared/model/diaryType'; +import { postDiaryApi, putDiaryApi } from '@/shared/api/diary'; +import { + DiaryDescDataType, + PostDiaryType, + putDiaryType +} from '@/shared/model/diaryType'; import { MoodDataType, MusicItem } from '../music/model/type'; export const diaryService = { @@ -12,6 +16,15 @@ export const diaryService = { } }, + async editDiary(diary: putDiaryType) { + try { + await putDiaryApi(diary); + return { success: true }; + } catch (error) { + return { success: false, error }; + } + }, + formatDiaryData( userDiaryState: DiaryDescDataType, userEmotionState: MoodDataType, @@ -40,5 +53,35 @@ export const diaryService = { artist: selectedMusic?.artist || '', music_id: selectedMusic?.youtubeId || '' }; + }, + + formatDiaryEditData( + userDiaryState: DiaryDescDataType, + userEmotionState: MoodDataType, + selectedMusic: MusicItem, + userEmail: string, + id: string + ): putDiaryType { + return { + title: userDiaryState?.title || '', + content: userDiaryState?.content || '', + is_public: userDiaryState?.isPublic ?? false, + music_url: selectedMusic?.youtubeId || '', + author_email: userEmail, + mood: userEmotionState?.mood || '', + emotion: userEmotionState?.emotion || '', + sub_emotion: userEmotionState?.subEmotions + ? JSON.stringify( + userEmotionState.subEmotions.filter( + (emotion) => emotion !== null && emotion.trim() !== '' + ) + ) + : '', + id: id || '', + music_title: selectedMusic?.title || '', + music_imgurl: selectedMusic?.thumbnailUrl || '', + artist: selectedMusic?.artist || '', + music_id: selectedMusic?.youtubeId || '' + }; } }; diff --git a/src/entities/music/model/type.ts b/src/entities/music/model/type.ts index 9a723b6..3d03726 100644 --- a/src/entities/music/model/type.ts +++ b/src/entities/music/model/type.ts @@ -50,10 +50,12 @@ export interface gptQueryParamsType { } export type gptAnswerType = string[]; + +// TODO - 이 타입 삭제 export interface MoodDataType { - mood: ConditionType; - emotion: string | null; - subEmotions: (string | null)[]; + mood: ConditionType | undefined; + emotion: string | null | undefined; + subEmotions: (string | null)[] | undefined; } export interface ReRecommendGptButtonProps { diff --git a/src/features/diary-write/emotion/ui/EmotionButtonGroup.tsx b/src/features/diary-write/emotion/ui/EmotionButtonGroup.tsx index 667b863..2f60624 100644 --- a/src/features/diary-write/emotion/ui/EmotionButtonGroup.tsx +++ b/src/features/diary-write/emotion/ui/EmotionButtonGroup.tsx @@ -13,11 +13,12 @@ import { Emotions } from '@/shared/model/EmotionEnum'; // TODO - 초기값이 undefined로 들어오는데 null로 들어오도록 변경 export const EmotionButtonGroup: React.FC = ({ - initialKeywords = [null, null, null, null, null], + initialKeywords, onKeywordsChange }) => { - const [keywords, setKeywords] = - useState<(Emotions | null)[]>(initialKeywords); + const [keywords, setKeywords] = useState<(Emotions | null)[]>( + initialKeywords || Array(5).fill(null) + ); const [activeButton, setActiveButton] = useState(0); const [lastClicked, setLastClicked] = useState< 'keyword' | 'emotion' | null diff --git a/src/pages/DiaryWritePage/hooks/useDiaryForm.ts b/src/pages/DiaryWritePage/hooks/useDiaryForm.ts index 815d9bb..645e5f4 100644 --- a/src/pages/DiaryWritePage/hooks/useDiaryForm.ts +++ b/src/pages/DiaryWritePage/hooks/useDiaryForm.ts @@ -12,11 +12,7 @@ export const useDiaryForm = () => { const validators = { isDiaryValid: (diary: DiaryDescDataType | null): boolean => { if (!diary) return false; - return Boolean( - diary.title?.trim() && - diary.content?.trim() && - typeof diary.isPublic === 'boolean' - ); + return Boolean(diary.title?.trim() && diary.content?.trim()); }, isEmotionValid: (emotion: MoodDataType | null): boolean => { diff --git a/src/pages/DiaryWritePage/model/type.ts b/src/pages/DiaryWritePage/model/type.ts index 77b45a8..c1e9147 100644 --- a/src/pages/DiaryWritePage/model/type.ts +++ b/src/pages/DiaryWritePage/model/type.ts @@ -1,7 +1,12 @@ import { ConditionType } from '@/shared/model/conditionTypes'; +import { DiaryData } from '@/shared/model/diaryType'; export interface MoodDataType { mood: ConditionType; emotion: string | null; subEmotions: (string | null)[]; } + +export interface DiaryWritePageProps { + mode: 'create' | 'edit'; +} diff --git a/src/pages/DiaryWritePage/ui/DiaryWritePage.tsx b/src/pages/DiaryWritePage/ui/DiaryWritePage.tsx index 3e44edb..4d7e1a8 100644 --- a/src/pages/DiaryWritePage/ui/DiaryWritePage.tsx +++ b/src/pages/DiaryWritePage/ui/DiaryWritePage.tsx @@ -1,4 +1,4 @@ -import { useNavigate, useParams } from 'react-router-dom'; +import { useLoaderData, useNavigate, useParams } from 'react-router-dom'; import { useDiaryForm } from '../hooks/useDiaryForm'; import { useStepNavigation } from '../hooks/useStepNavigation'; import { useMusicRecommendation } from '../hooks/useMusicRecommendation'; @@ -17,11 +17,18 @@ import { } from './DiaryWritePage.styled'; import { useEffect, useRef } from 'react'; import { useAuthStore } from '@/features/login/hooks/useAuthStore'; +import { DiaryWritePageProps } from '../model/type'; +import { DiaryType } from '@/shared/model/diaryType'; +import { ConditionType } from '@/shared/model/conditionTypes'; -// TODO - 이미 일기가 작성되어있는 날의 경우 수정, 삭제가 가능하도록 처리 -export const DiaryWritePage = () => { +// TODO - 로직 분리 +export const DiaryWritePage = ({ mode }: DiaryWritePageProps) => { const userEmail = useAuthStore((state) => state.email); const { date } = useParams(); + + const { id } = useParams(); + const preLoadDiaryData = useLoaderData() as DiaryType; + const navigate = useNavigate(); const { addToast } = useToastStore(); const { @@ -43,6 +50,66 @@ export const DiaryWritePage = () => { const emotionRef = useRef(null); const musicRef = useRef(null); + // 수정 모드 초기값 + const initialdiary = + mode === 'edit' + ? { + title: preLoadDiaryData?.title || '', + content: preLoadDiaryData?.content || '', + isPublic: preLoadDiaryData?.is_public || false + } + : { + title: '', + content: '', + isPublic: false + }; + + const parsedSubEmotions = + mode === 'edit' && preLoadDiaryData?.sub_emotion + ? (JSON.parse(preLoadDiaryData.sub_emotion) as (string | null)[]) + : []; + + const initialEmotion = + mode === 'edit' + ? { + mood: (preLoadDiaryData?.mood as ConditionType) || null, + emotion: preLoadDiaryData?.emotion || '', + subEmotions: parsedSubEmotions + } + : { + mood: null, + emotion: '', + subEmotions: [] + }; + + const initialMusic = + mode === 'edit' + ? { + title: preLoadDiaryData?.music_title || '', + artist: preLoadDiaryData?.artist || '', + thumbnailUrl: preLoadDiaryData?.music_imgurl || '', + youtubeId: preLoadDiaryData?.music_id || '' + } + : { + title: '', + artist: '', + thumbnailUrl: '', + youtubeId: '' + }; + + useEffect(() => { + setUserDiaryState(initialdiary); + setUserEmotionState(initialEmotion); + setSelectedMusic(initialMusic); + }, []); + + useEffect(() => { + validators.isDiaryValid(userDiaryState); + validators.isEmotionValid(userEmotionState); + validators.isMusicValid(selectedMusic); + }, [userDiaryState, userEmotionState, selectedMusic]); + + // 위젯 단계 useEffect(() => { const scrollToRef = (ref: React.RefObject) => { ref.current?.scrollIntoView({ @@ -67,10 +134,7 @@ export const DiaryWritePage = () => { } }, [currentStep]); - useEffect(() => { - console.log(currentStep); - }, [currentStep]); - + // 제출 const handleSubmitAll = async () => { try { const diaryData = diaryService.formatDiaryData( @@ -81,8 +145,6 @@ export const DiaryWritePage = () => { date || '' ); - console.log(diaryData); - const { success, error } = await diaryService.submitDiary(diaryData); @@ -97,6 +159,35 @@ export const DiaryWritePage = () => { } }; + // 수정 + const handleEditSubmit = async () => { + try { + if (!id) { + throw new Error('일기 ID를 가져올 수 없어요.'); + } + + const diaryData = diaryService.formatDiaryEditData( + userDiaryState!, + userEmotionState!, + selectedMusic!, + userEmail, + id + ); + + const { success, error } = await diaryService.editDiary(diaryData); + + if (success) { + addToast('일기를 수정했어요.', 'success'); + navigate('/'); + } else { + addToast('일기 수정에 실패했습니다.', 'error'); + } + } catch (error) { + addToast('일기 수정에 실패했습니다.', 'error'); + } + }; + + // gpt 추천 const callFetchRecommendations = async () => { try { await fetchRecommendations( @@ -112,6 +203,7 @@ export const DiaryWritePage = () => { } }; + // 다름 버튼 클릭 const handleEmotionNext = async () => { if (!validators.isEmotionValid(userEmotionState)) { return; @@ -120,6 +212,18 @@ export const DiaryWritePage = () => { callFetchRecommendations(); }; + const handleButtonClick = () => { + if (!validators.isMusicValid(selectedMusic)) { + return; + } + + if (mode === 'edit') { + handleEditSubmit(); + } else { + handleSubmitAll(); + } + }; + return (
@@ -128,6 +232,10 @@ export const DiaryWritePage = () => { onDiarySubmit={setUserDiaryState} isActive={currentStep === 1} disabled={currentStep !== 1} + initialTitle={initialdiary?.title || ''} + initialContent={initialdiary?.content || ''} + initialIsPublic={initialdiary?.isPublic || false} + editTargetDate={preLoadDiaryData?.title_date} /> @@ -153,6 +261,9 @@ export const DiaryWritePage = () => { onMoodSelect={setUserEmotionState} isActive={currentStep === 2} disabled={currentStep !== 2} + initialmood={initialEmotion?.mood} + initialemotion={initialEmotion?.emotion} + initialsubemotions={initialEmotion?.subEmotions} /> @@ -195,6 +306,7 @@ export const DiaryWritePage = () => { disabled={currentStep !== 3} isLoading={isLoading} onRecommend={callFetchRecommendations} + initialData={initialMusic} /> @@ -214,14 +326,10 @@ export const DiaryWritePage = () => { fontSize="16px" height="60px" isActive={validators.isMusicValid(selectedMusic)} - onClick={() => { - if (validators.isMusicValid(selectedMusic)) { - handleSubmitAll(); - } - }} + onClick={handleButtonClick} width="200px" > - 게시하기 + {mode === 'edit' ? '수정하기' : '게시하기'} diff --git a/src/shared/api/diary.ts b/src/shared/api/diary.ts index 0ac8aeb..2369b4c 100644 --- a/src/shared/api/diary.ts +++ b/src/shared/api/diary.ts @@ -5,7 +5,8 @@ import { DiaryType, EmotionData, MusicData, - PostDiaryType + PostDiaryType, + putDiaryType } from '../model/diaryType'; const api = defaultApi(); @@ -62,10 +63,40 @@ export const getDiaryApi = async ( */ export const postDiaryApi = async (diary: PostDiaryType) => { try { + const token = localStorage.getItem('token'); + if (!token) { + throw new Error('토큰을 가져올 수 없어요.'); + } const response = await api.post('/diary', diary, { headers: { 'Content-Type': 'application/json', - Authorization: `Bearer ${localStorage.getItem('token')}` + Authorization: `Bearer ${token.replace(/"/g, '')}` + } + }); + return response.data; + } catch (error) { + if (error instanceof Error) { + alert(error.message); + } + return null; + } +}; + +/** + * 일기를 스정합니다. + * @param diaryData + * @returns + */ +export const putDiaryApi = async (diary: putDiaryType) => { + try { + const token = localStorage.getItem('token'); + if (!token) { + throw new Error('토큰을 가져올 수 없어요.'); + } + const response = await api.patch('/diary', diary, { + headers: { + 'Content-Type': 'application/json', + Authorization: `Bearer ${token.replace(/"/g, '')}` } }); return response.data; diff --git a/src/shared/hooks/usePostDiary.ts b/src/shared/hooks/usePostDiary.ts deleted file mode 100644 index e69de29..0000000 diff --git a/src/shared/model/conditionTypes.ts b/src/shared/model/conditionTypes.ts index 3c659bb..4f4b65e 100644 --- a/src/shared/model/conditionTypes.ts +++ b/src/shared/model/conditionTypes.ts @@ -4,7 +4,8 @@ export type ConditionType = | '보통' | '매우 좋음' | '매우 나쁨' - | null; + | null + | undefined; export interface DailyConditionType { day: 'Mon' | 'Tue' | 'Wed' | 'Thu' | 'Fri' | 'Sat' | 'Sun'; diff --git a/src/shared/model/diaryType.ts b/src/shared/model/diaryType.ts index 3c5833e..79760de 100644 --- a/src/shared/model/diaryType.ts +++ b/src/shared/model/diaryType.ts @@ -23,6 +23,7 @@ export interface MusicData { } export interface DiaryType { + title_date?: string | undefined; id: number; title: string; content: string; @@ -30,7 +31,7 @@ export interface DiaryType { music_url: string; mood: string; emotion: string; - sub_emotion: SubEmotionType | string; + sub_emotion: string; date: string; created_date: string; updated_date: string; @@ -57,6 +58,26 @@ export interface PostDiaryType { music_id: string; artist: string; } + +// Date 없음 +// 다이어리 id 추가됨 +export interface putDiaryType { + id: string; + title: string; + content: string; + is_public: boolean; + music_url: string; + mood: string; + emotion: string; + author_email: string; + + sub_emotion: SubEmotionType | string; + + music_title: string; + music_imgurl: string; + music_id: string; + artist: string; +} export interface DiaryDescDataType { title: string; content: string; diff --git a/src/widgets/select-emotion/model/type.ts b/src/widgets/select-emotion/model/type.ts index 07a14d8..71aaf20 100644 --- a/src/widgets/select-emotion/model/type.ts +++ b/src/widgets/select-emotion/model/type.ts @@ -6,12 +6,15 @@ export interface SelectEmotionContainerProps { onNext?: (mood: MoodDataType) => void; isActive: boolean; disabled: boolean; + initialmood: ConditionType | undefined; + initialemotion: string | null | undefined; + initialsubemotions: (string | null)[] | undefined; } export interface MoodState { - mood: ConditionType; - emotion: string | null; - subEmotions: (string | null)[]; + mood: ConditionType | undefined; + emotion: string | null | undefined; + subEmotions: (string | null)[] | undefined; } export const INITIAL_MOOD_STATE: MoodState = { diff --git a/src/widgets/select-emotion/ui/SelectEmotionContainer.tsx b/src/widgets/select-emotion/ui/SelectEmotionContainer.tsx index 0385e57..8ad03af 100644 --- a/src/widgets/select-emotion/ui/SelectEmotionContainer.tsx +++ b/src/widgets/select-emotion/ui/SelectEmotionContainer.tsx @@ -16,23 +16,32 @@ export const SelectEmotionContainer = ({ onMoodSelect, onNext, isActive, - disabled + disabled, + initialmood, + initialemotion, + initialsubemotions }: SelectEmotionContainerProps) => { const { addToast } = useToastStore(); - const [moodState, setMoodState] = useState(INITIAL_MOOD_STATE); + const [moodState, setMoodState] = useState({ + mood: initialmood, + emotion: initialemotion, + subEmotions: initialsubemotions + }); const handleConditionChange = (condition: ConditionType) => { - setMoodState((prev) => ({ - ...prev, - mood: condition - })); + setMoodState((prev) => { + const newState = { + ...prev, + mood: condition + }; + onMoodSelect(newState); + return newState; + }); }; const handleEmotionChange = (emotion: (Emotions | null)[]) => { const korEmotion = emotion.map((item) => { - if (!item) { - return null; - } + if (!item) return null; try { const info = getEmotionInfo(item); return info.description; @@ -41,25 +50,52 @@ export const SelectEmotionContainer = ({ return null; } }); - setMoodState((prev) => ({ - ...prev, - emotion: korEmotion[0], // 첫 번째는 메인 감정 - subEmotions: korEmotion.slice(1) // 나머지는 서브 감정 - })); + + setMoodState((prev) => { + const newState = { + ...prev, + emotion: korEmotion[0], + subEmotions: korEmotion.slice(1) + }; + onMoodSelect(newState); + return newState; + }); }; - useEffect(() => { - onMoodSelect(moodState); - }, [moodState]); + const getInitialKeywords = (): (Emotions | null)[] => { + const defaultKeywords = Array(5).fill(null); + if (!initialemotion && !initialsubemotions) { + return defaultKeywords; + } + const convertToEmotions = ( + emotionStr: string | null | undefined + ): Emotions | null => { + if (!emotionStr) return null; + + return ( + Object.values(Emotions).find( + (emotion) => + getEmotionInfo(emotion).description === emotionStr + ) || null + ); + }; + const emotions = [ + convertToEmotions(initialemotion), + ...(initialsubemotions?.map((emotion) => + convertToEmotions(emotion) + ) || []) + ].filter((emotion): emotion is Emotions => emotion !== null); + return [...emotions, ...Array(5 - emotions.length).fill(null)]; + }; return ( diff --git a/src/widgets/select-music/model/type.ts b/src/widgets/select-music/model/type.ts index 78df5fe..7155612 100644 --- a/src/widgets/select-music/model/type.ts +++ b/src/widgets/select-music/model/type.ts @@ -7,4 +7,5 @@ export interface SelectMusicContainerProps { isActive: boolean; disabled: boolean; isLoading: boolean; + initialData: MusicItem | null; } diff --git a/src/widgets/select-music/ui/SelectMusicContainer.tsx b/src/widgets/select-music/ui/SelectMusicContainer.tsx index d2e02f7..2518ab5 100644 --- a/src/widgets/select-music/ui/SelectMusicContainer.tsx +++ b/src/widgets/select-music/ui/SelectMusicContainer.tsx @@ -24,7 +24,8 @@ export const SelectMusicContainer = ({ isLoading, isActive, disabled, - onRecommend + onRecommend, + initialData }: SelectMusicContainerProps) => { const [selectedType, setSelectedType] = useState( SEARCH_TYPE.GPT @@ -40,11 +41,22 @@ export const SelectMusicContainer = ({ const userMusicList = useMemo(() => { return userMusic && userMusic.data ? [userMusic.data] : []; }, [userMusic]); + + console.log(initialData); + const gptMusicList = useMemo(() => { + if (initialData) { + return [ + initialData, + ...(gptMusic && gptMusic.data ? [gptMusic.data] : []) + ]; + } return gptMusic && gptMusic.data ? [gptMusic.data] : []; - }, [gptMusic]); + }, [gptMusic, initialData]); - const [selectedMusic, setSelectedMusic] = useState(null); + const [selectedMusic, setSelectedMusic] = useState( + initialData + ); const handleMusicSelect = (music: MusicItem | null) => { setSelectedMusic(music); diff --git a/src/widgets/write-diary/model/type.ts b/src/widgets/write-diary/model/type.ts index e9691ea..5d0d934 100644 --- a/src/widgets/write-diary/model/type.ts +++ b/src/widgets/write-diary/model/type.ts @@ -5,13 +5,9 @@ export interface WriteDiaryContainerProps { initialDate?: Date; isActive: boolean; disabled: boolean; - initialTitle?: string; - initialContent?: string; - initialIsPublic?: boolean; - // onDiarySubmit: (diaryData: { - // selectedDate: Date; - // title: string; - // content: string; - // isPublic: boolean; - // }) => void; + initialTitle: string; + initialContent: string; + initialIsPublic: boolean; + initialData?: DiaryDescDataType | null; + editTargetDate?: string; } diff --git a/src/widgets/write-diary/ui/WriteDiaryContainer.tsx b/src/widgets/write-diary/ui/WriteDiaryContainer.tsx index 6c36ee5..9f03f92 100644 --- a/src/widgets/write-diary/ui/WriteDiaryContainer.tsx +++ b/src/widgets/write-diary/ui/WriteDiaryContainer.tsx @@ -21,10 +21,11 @@ export const WriteDiaryContainer: React.FC = ({ initialDate = new Date(), // 초기 날짜가 없으면 오늘 날짜 사용 isActive, disabled, - initialTitle = '', - initialContent = '', - initialIsPublic = true, - onDiarySubmit + initialTitle, + initialContent, + initialIsPublic, + onDiarySubmit, + editTargetDate }) => { const [selectedDate, setSelectedDate] = useState(initialDate); const [title, setTitle] = useState(initialTitle); @@ -32,6 +33,12 @@ export const WriteDiaryContainer: React.FC = ({ const [isPublic, setIsPublic] = useState(initialIsPublic); const [isButtonActive, setIsButtonActive] = useState(false); + useEffect(() => { + setTitle(initialTitle); + setContent(initialContent); + setIsPublic(initialIsPublic); + }, [initialTitle, initialContent, initialIsPublic]); + const { date } = useParams(); // 작성을 선택한 날짜 const navigate = useNavigate(); @@ -105,7 +112,10 @@ export const WriteDiaryContainer: React.FC = ({ return ( - {formatDateWithDot(date)} + + {formatDateWithDot(editTargetDate).split('T')[0] || + formatDateWithDot(date)} + {isEditing ? null : (