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 : (