fix : 날짜가 불러와지지 않는 오류 수정 (#156)

src/entities/diary/diaryService.ts

@@ -1,10 +1,6 @@
 import { postDiaryApi } from '@/shared/api/diary';
-import { PostDiaryType } from '@/shared/model/diaryType';
-import {
-    DiaryDescDataType,
-    MoodDataType,
-    MusicItem
-} from '../music/model/type';
+import { DiaryDescDataType, PostDiaryType } from '@/shared/model/diaryType';
+import { MoodDataType, MusicItem } from '../music/model/type';
 
 export const diaryService = {
     async submitDiary(diary: PostDiaryType) {

src/entities/music/model/type.ts

@@ -55,10 +55,3 @@ export interface MoodDataType {
     emotion: string | null;
     subEmotions: (string | null)[];
 }
-
-export interface DiaryDescDataType {
-    selectedDate: Date;
-    title: string;
-    content: string;
-    isPublic: boolean;
-}

src/pages/DiaryWritePage/hooks/useDiaryForm.ts

@@ -1,9 +1,6 @@
 import { useState } from 'react';
-import {
-    DiaryDescDataType,
-    MoodDataType,
-    MusicItem
-} from '@/entities/music/model/type';
+import { MoodDataType, MusicItem } from '@/entities/music/model/type';
+import { DiaryDescDataType } from '@/shared/model/diaryType';
 
 export const useDiaryForm = () => {
     const [userDiaryState, setUserDiaryState] =

src/pages/DiaryWritePage/hooks/useMusicRecommendation.ts

@@ -1,10 +1,7 @@
 import { useState } from 'react';
 import { fetchMusicRecommendation } from '@/entities/music';
-import {
-    DiaryDescDataType,
-    gptAnswerType,
-    MoodDataType
-} from '@/entities/music/model/type';
+import { gptAnswerType, MoodDataType } from '@/entities/music/model/type';
+import { DiaryDescDataType } from '@/shared/model/diaryType';
 
 export const useMusicRecommendation = () => {
     const [recommendedMusicList, setRecommendedMusicList] =

src/pages/DiaryWritePage/ui/DiaryWritePage.tsx

@@ -17,6 +17,7 @@ import {
 } from './DiaryWritePage.styled';
 import { useEffect, useRef } from 'react';
 
+// TODO - 이미 일기가 작성되어있는 날의 경우 수정, 삭제가 가능하도록 처리
 export const DiaryWritePage = () => {
     const testUserEmail = '[email protected]';
     const { date } = useParams();

src/shared/model/diaryType.ts

@@ -57,3 +57,8 @@ export interface PostDiaryType {
     music_id: string;
     artist: string;
 }
+export interface DiaryDescDataType {
+    title: string;
+    content: string;
+    isPublic: boolean;
+}

src/widgets/write-diary/model/type.ts

@@ -1,9 +1,4 @@
-export interface DiaryDescDataType {
-    selectedDate: Date;
-    title: string;
-    content: string;
-    isPublic: boolean;
-}
+import { DiaryDescDataType } from '@/shared/model/diaryType';
 
 export interface WriteDiaryContainerProps {
     onDiarySubmit: (data: DiaryDescDataType) => void;

src/widgets/write-diary/ui/WriteDiaryContainer.tsx

@@ -15,6 +15,7 @@ import Button from '@/shared/ui/Button/Button';
 import { DatePicker } from '@/widgets/date-picker';
 import { DiaryVisibilityControls } from '@/widgets/diary-visibility-controls';
 import { setDateFormat } from '@/widgets/date-picker/ui/setDateFormat';
+import { useNavigate, useParams } from 'react-router-dom';
 
 export const WriteDiaryContainer: React.FC<WriteDiaryContainerProps> = ({
     initialDate = new Date(), // 초기 날짜가 없으면 오늘 날짜 사용
@@ -31,9 +32,30 @@ export const WriteDiaryContainer: React.FC<WriteDiaryContainerProps> = ({
     const [isPublic, setIsPublic] = useState(initialIsPublic);
     const [isButtonActive, setIsButtonActive] = useState(false);
 
+    const { date } = useParams(); // 작성을 선택한 날짜
+    const navigate = useNavigate();
+
     const [existingDiaryDates, setExistingDiaryDates] = useState<string[]>([]); // 일기 작성된 날짜 배열
     const [isEditing, setIsEditing] = useState(false); // 일기 수정 페이지 인지, 초기 날짜(오늘)가 일기 작성된 날짜 배열에 있으면 일기 수정 페이지
 
+    const formatDateWithDot = (dateStr: string | undefined): string => {
+        if (dateStr) {
+            // "2024-11-05"
+            const [year, month, day] = dateStr.split('-');
+            // "2024. 11. 05"
+            return `${year}. ${month}. ${day}`;
+        }
+        return `날짜 선택에 오류가 있어요.`;
+    };
+
+    const formatDateWithHy = (selecteddate: Date): string => {
+        const year = selecteddate.getFullYear();
+        const month = String(selecteddate.getMonth() + 1).padStart(2, '0');
+        const day = String(selecteddate.getDate()).padStart(2, '0');
+
+        return `${year}-${month}-${day}`;
+    };
+
     const userEmail = '[email protected]'; // 샘플 계정
 
     useEffect(() => {
@@ -57,22 +79,19 @@ export const WriteDiaryContainer: React.FC<WriteDiaryContainerProps> = ({
         fetchDisabledDates(); // 비활성화 날짜 데이터 가져오기
     }, []);
 
-    useEffect(() => {
-        setIsEditing(existingDiaryDates.includes(setDateFormat(initialDate)));
-    }, [existingDiaryDates, initialDate]);
-
     useEffect(() => {
         setIsButtonActive(title.trim() !== '' && content.trim() !== '');
     }, [title, content]);
 
     useEffect(() => {
         if (isButtonActive) {
-            onDiarySubmit({ selectedDate, title, content, isPublic });
+            onDiarySubmit({ title, content, isPublic });
         }
-    }, [selectedDate, title, content, isPublic]);
+    }, [title, content, isPublic]);
 
-    const handleDateSelect = (date: Date) => {
-        setSelectedDate(date);
+    const handleDateSelect = (selecteddate: Date) => {
+        console.log(selecteddate);
+        navigate(`/diaryWrite/${formatDateWithHy(selecteddate)}`);
     };
 
     const handleTitleChange = (value: string) => {
@@ -86,7 +105,7 @@ export const WriteDiaryContainer: React.FC<WriteDiaryContainerProps> = ({
     return (
         <Container>
             <SelectDateContainer>
-                <DateContainer>{setDateFormat(selectedDate)}</DateContainer>
+                <DateContainer>{formatDateWithDot(date)}</DateContainer>
                 <DatePickeContainer>
                     {isEditing ? null : (
                         <DatePicker