[Fix] 일기 작성 페이지에서 x 누르면 홈으로 이동 구현 (#64)

shinwokkang · web-flow · commit be877ee69edc · 2025-08-27T23:33:46.000+09:00
* feat: WriteDiaryPage UI 구현

* feat: Check 표시에 대한 이미지 추가

* feat: DiaryHeader 컴포넌트로 분리

* feat: DiaryEditor 와 ImageUploader 컴포넌트 분리 (추후 props driling 생길 시 코드 수정)

* feat: DiaryFooter 컴포넌트 구현

* refactor: WriteDiaryPage에서 Diary관련 컴포넌트를 통해 UI 구현되도록 리팩토링

* fix: pt 수정 (pt 중복으로 인한 padding 크기 수정)

* refactor: ImageUploader 재사용을 위한 폴더 구조 변경

* fix: 폴더 구조 변경으로 인한 파일 삭제 및 import 수정

* feat: TakePhoto 에서 사용하는 Header 컴포넌트 정의

* feat: TakePhoto에서 사용하는 Main 컴포넌트 정의

* feat: TakePhoto 에서 사용하는 Footer (Button) 정의

* feat: TakePhotoPage 추가 및 라우터 추가

* feat: WriteDiaryPage UI 구현

* fix: 파일 구조 변경 (컴포넌트 재사용) 및 DiaryHeader props 추가

* fix: 파일 이름 일관성을 위한 수정 (TakePhotoMain -&gt; TakePhotoEditor)

* PR 리뷰 내용 수정

* fix: check.svg 파일 삭제

* feat: 일기 작성 관련 mutation 구현

* feat: pnael API 로직 구현

* feat: takePhoto 사진 업로드 관련 API 및 훅 로직 구현

* TakePhoto API 연동 구현

* feat: 일기쓰기 img API 로직 구현

* feat: 일일 미션 퀴즈 UI 구현

* fix: 오타 수정

* feat: OX 퀴즈 문제 불러오기 API 구현

* feat: quiz 정답 api 구현

* fix: queryKey 수정

* feat: 일기 작성 이미지 업로드 API 구현

* feat: 일기 작성 API 구현

* feat: OX Quiz 정답 확인 후 로직 구현

* OX Quiz 정답 확인 후 로직 구현

* feat: page별 구분 및 사지선다 UI 구현

* refactor: 체크박스 svg 활용하여 수정

* fix: OX 테두리 버그 수정

* feat: 일기 작성 API 연동

* fix: 스타일 var -&gt; -gray 등으로 수정

* fix: placeholder 색상 변경

* chore: takephoto 관련 파일 삭제

* feat: 일기 작성 후 홈 화면으로 이동하는 로직 추가

* fix: queryKey 수정

* fix: yarn build &amp; constants 폴더 삭제

* fix: 일기 작성 x 클릭 시 홈으로 이동 구현

* feat: pull origin dev 충돌 해결 및 미션 랜덤으로 이동
diff --git a/src/App.tsx b/src/App.tsx
@@ -19,7 +19,6 @@ import Layout from "@/components/layout/Layout";
 //네비게이션
 import Navbar from "@/components/layout/Navbar";
 
-
 import DailyMissionRoutes from "./routes/dailyMissionRoutes";
 
 import "swiper/css";
diff --git a/src/apis/missions/QuizApi.ts b/src/apis/missions/QuizApi.ts
@@ -1,4 +1,3 @@
-import { QUERY_KEYS } from "@/constants/querykey";
 import { AnswerQuizResponse } from "@/types/realQuiz/answerQuiz";
 import { getQuizRequest, getQuizResponse } from "@/types/realQuiz/getQuiz";
 
@@ -9,7 +8,8 @@ export const getQuizApi = async (
 ): Promise<getQuizResponse> => {
   try {
     const response = await axios.get("/api/v1/realQuiz", { params });
-    console.log("QUERY_KEYS.QUIZ.REAL는 다음과 같다.", QUERY_KEYS.REAL);
+
+
     return response.data;
   } catch (error) {
     console.error("Error get MissionPanel:", error);
diff --git a/src/assets/icons/common/OX_O.svg b/src/assets/icons/common/OX_O.svg
@@ -1,3 +1,5 @@
 <svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+
 <path d="M19.8546 36.1842C28.9382 36.1842 36.302 28.8205 36.302 19.7369C36.302 10.6532 28.9382 3.28949 19.8546 3.28949C10.771 3.28949 3.40723 10.6532 3.40723 19.7369C3.40723 28.8205 10.771 36.1842 19.8546 36.1842Z" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
+
 </svg>
diff --git a/src/assets/icons/common/OX_X.svg b/src/assets/icons/common/OX_X.svg
@@ -1,4 +1,6 @@
 <svg width="41" height="40" viewBox="0 0 41 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+
 <path d="M35.3816 5.21948L5.77637 34.8247" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
 <path d="M5.77637 5.21948L35.3816 34.8247" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
+
 </svg>
diff --git a/src/components/bottom-sheet/BottomSheet.tsx b/src/components/bottom-sheet/BottomSheet.tsx
@@ -18,6 +18,11 @@ const BottomSheet: React.FC<{ setIsModalOpen: (isOpen: boolean) => void }> = ({
   const [isChecked2] = useState(data?.isDairyCompleted);
   const [isChecked3] = useState(data?.isQuizCompleted);
   const [percent] = useState(data?.wishTree.progressPercent);
+  const randomNum = (Math.floor(Math.random() * 3) + 1) % 2;
+  const path =
+    randomNum === 1
+      ? "/dailyMission/quiz/multipleChoice"
+      : "/dailyMission/quiz/ox";
 
   // ===== 스냅/드래그 파라미터 =====
 
@@ -238,7 +243,7 @@ const BottomSheet: React.FC<{ setIsModalOpen: (isOpen: boolean) => void }> = ({
                 {
                   label: "퀴즈 풀기",
                   on: isChecked3,
-                  action: () => navigate("/dailyMission/quiz"),
+                  action: () => navigate(path),
                 },
               ].map(({ label, on, action }, i) => (
                 <div
diff --git a/src/components/dailyMission/common/DiaryHeader.tsx b/src/components/dailyMission/common/DiaryHeader.tsx
@@ -1,3 +1,5 @@
+import { useNavigate } from "react-router-dom";
+
 import XIcon from "@/assets/icons/common/Xmack.svg?url";
 
 interface DiaryHeaderProps {
@@ -7,10 +9,20 @@ interface DiaryHeaderProps {
 }
 
 const DiaryHeader = ({ onSubmit, showSubmit, context }: DiaryHeaderProps) => {
+  const navigate = useNavigate();
+  const handleGohomee = () => {
+    navigate("/");
+  };
+
   return (
     <header className="w-full h-14 flex items-center justify-between p-4 border-b border-gray-200">
       <button>
-        <img src={XIcon} alt="Close" className="w-3.5 h-3.5" />
+        <img
+          src={XIcon}
+          alt="Close"
+          className="w-3.5 h-3.5"
+          onClick={handleGohomee}
+        />
       </button>
       <h1 className="text-heading2">{context}</h1>
       {showSubmit ? (
diff --git a/src/components/dailyMission/common/ImageUploader.tsx b/src/components/dailyMission/common/ImageUploader.tsx
@@ -1,7 +1,9 @@
 import React, { useEffect, useState } from "react";
 
+
 import { Camera } from "@/assets/icons/common";
 
+
 interface ImageUploaderProps {
   image: File | null;
   handleImageChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
@@ -37,7 +39,9 @@ const ImageUploader = ({ image, handleImageChange }: ImageUploaderProps) => {
           />
         ) : (
           <div className="flex flex-col gap-2.5 items-center justify-center object-contain">
+
             <Camera className="w-6 h-5" />
+
             <div className="text-gray-600 text-center text-body-sb">
               화분을 예쁘게 가꾸고 <br />
               친구들에게 멋진 식물을 자랑해보아요
diff --git a/src/components/dailyMission/quiz/MultipleChoiceQuestionQuiz.tsx b/src/components/dailyMission/quiz/MultipleChoiceQuestionQuiz.tsx
@@ -1,5 +1,7 @@
+
 import { Check, UnCheck } from "@/assets/icons/common";
 
+
 interface MultipleChoiceQuizProps {
   quizQuestion: string;
   quizOptions: { optionOrder: number; optionText: string }[] | null;
diff --git a/src/components/dailyMission/quiz/OXQuiz.tsx b/src/components/dailyMission/quiz/OXQuiz.tsx
@@ -35,6 +35,7 @@ const OX_Quiz: React.FC<OXQuizProps> = ({
 
       if (isCorrect) {
         if (value === answerValue) {
+
           return "bg-primary-varient border-primary text-primary";
         }
       } else {
@@ -43,12 +44,15 @@ const OX_Quiz: React.FC<OXQuizProps> = ({
         }
         if (value === answerValue) {
           return "bg-primary-varient border-primary text-primary";
+
         }
       }
     }
     return selected === value
+
       ? "border-gray-600 bg-gray-400"
       : "border-gray-400 bg-white text-gray-400";
+
   };
 
   const handleClick = (value: number) => {
@@ -64,13 +68,17 @@ const OX_Quiz: React.FC<OXQuizProps> = ({
           className={`${baseBoxClass} ${getBoxClass(0)} `}
           onClick={() => handleClick(0)}
         >
+
           <OX_O width={32} height={32} />
+
         </div>
         <div
           className={`${baseBoxClass} ${getBoxClass(1)}`}
           onClick={() => handleClick(1)}
         >
+
           <OX_X width={32} height={32} />
+
         </div>
       </div>
     </div>
diff --git a/src/components/dailyMission/writeDiary/DiaryFooter.tsx b/src/components/dailyMission/writeDiary/DiaryFooter.tsx
@@ -1,5 +1,7 @@
+
 import { Check, UnCheck } from "@/assets/icons/common";
 
+
 interface DiaryFooterProps {
   isPublic: boolean;
   onVisibilityChange: (isPublic: boolean) => void;
diff --git a/src/components/home/Avatar.tsx b/src/components/home/Avatar.tsx
@@ -9,6 +9,7 @@ import Modal from "./Modal";
 
 import Toast from "../common/Toast";
 
+
 const Avatar = ({
   isWater,
   avatarUri,
diff --git a/src/components/home/FirstPlant.tsx b/src/components/home/FirstPlant.tsx
@@ -5,26 +5,29 @@ import Water from "@/assets/icons/water.svg?react";
 import Background from "@/assets/images/background/background1.png";
 import SunLight from "@/assets/images/background/sunlight.png";
 import Plant from "@/assets/images/plant.png";
-
 import Toast from "@/components/common/Toast";
 import { GardenSummary } from "@/types/home/garden";
-import axios from "@/apis/instance";
+
 import Map from "../common/Map";
 import Avatar from "./Avatar";
 
+import axios from "@/apis/instance";
+
 const FirstPlant = ({
   setIsModalOpen,
   isOpen,
   garden,
 }: {
   setIsModalOpen: React.Dispatch<React.SetStateAction<boolean>>;
   isOpen: boolean;
-  garden: GardenSummary;
+  garden: GardenSummary | null;
 }) => {
-  const [isAbleSunLight, setIsAbleSunLight] = useState(
-    garden.ownerSunlightAble
+  const [isAbleSunLight, setIsAbleSunLight] = useState<boolean>(
+    garden?.ownerSunlightAble || false
+  );
+  const [isAbleWater, setIsAbleWater] = useState(
+    garden?.ownerWateringAble || false
   );
-  const [isAbleWater, setIsAbleWater] = useState(garden.ownerWateringAble);
 
   const [isSunLight, setIsSunLight] = useState(false);
   const [isWater, setIsWater] = useState(false);
@@ -41,7 +44,9 @@ const FirstPlant = ({
       return;
     }
 
-    const res = await axios.post(`/api/v1/gardens/${garden.gardenId}/sunlight`);
+    const res = await axios.post(
+      `/api/v1/gardens/${garden?.gardenId}/sunlight`
+    );
     console.log(res);
     setIsSunLight(true);
     setIsAbleSunLight(false);
@@ -75,7 +80,7 @@ const FirstPlant = ({
       return;
     }
 
-    const res = await axios.post(`/api/v1/gardens/${garden.gardenId}/mywater`);
+    const res = await axios.post(`/api/v1/gardens/${garden?.gardenId}/mywater`);
     console.log(res);
     setIsAbleWater(false);
     setIsWater(true);
@@ -110,7 +115,7 @@ const FirstPlant = ({
       <div className="relative z-20 flex h-full w-full flex-col items-center justify-center">
         <header className="relative flex w-full items-center justify-between p-4 text-heading1 text-white">
           <Map isNumber={3} />
-          {garden.avatar.avatarName}
+          {garden?.avatar.avatarName}
           <div className="h-12 w-12" />
         </header>
 
@@ -136,7 +141,7 @@ const FirstPlant = ({
 
         <Avatar
           isWater={isWater}
-          avatarUri={garden.avatar.avatarImageUrl || Plant}
+          avatarUri={garden?.avatar.avatarImageUrl || Plant}
           setIsModalOpen={setIsModalOpen}
           isOpen={isOpen}
         />
diff --git a/src/components/home/Modal.tsx b/src/components/home/Modal.tsx
@@ -1,12 +1,14 @@
 import { useEffect, useState } from "react";
 
 import Character from "@/assets/images/character.png";
+
 import axios from "@/apis/instance";
 
 import Modal from "../common/Modal";
 import useSurvey from "@/hooks/survey/useSurvey";
 import { PostSurveyResponse } from "@/types/apis/survey";
 
+
 type Props = {
   setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
   setIsChecked: React.Dispatch<React.SetStateAction<number>>;
@@ -40,6 +42,7 @@ const HomeModal = ({ setIsOpen, setIsChecked, isChecked }: Props) => {
     fetchSurvey();
   }, []);
 
+
   const handleCheck = async (answer: number) => {
     console.log(survey?.id, answer);
     const response = await axios.post("/api/v1/survey/answer", {
diff --git a/src/components/home/SecondPlant.tsx b/src/components/home/SecondPlant.tsx
@@ -6,8 +6,10 @@ import Avatar from "@/components/home/Avatar";
 import Lock from "@/components/lock/Lock";
 import UnLock from "@/components/lock/UnLock";
 
+
 import { GardenSummary } from "@/types/home/garden";
 
+
 type BottomSheetType = "lock" | "unlock" | "clear";
 
 const SecondPlant = ({
diff --git a/src/constants/queryKey.ts b/src/constants/queryKey.ts
diff --git a/src/hooks/avatars/useGetSelectAvatarApi.ts b/src/hooks/avatars/useGetSelectAvatarApi.ts
@@ -1,13 +1,12 @@
 import { useQuery } from "@tanstack/react-query";
 
-import { QUERY_KEYS } from "@/constants/queryKey";
 import { SelectAvatarResponse } from "@/types/avatars/masters";
 
 import { getSelectionAvatarApi } from "@/apis/avatars/avatarApi";
 
 export const useGetSelectAvatar = () => {
   return useQuery<SelectAvatarResponse, Error>({
-    queryKey: [QUERY_KEYS.SELECTION_AVATAR],
+    queryKey: ["selectionAvatar"],
     queryFn: getSelectionAvatarApi,
   });
 };
diff --git a/src/hooks/mission/useGetQuizApi.ts b/src/hooks/mission/useGetQuizApi.ts
@@ -1,13 +1,15 @@
 import { useQuery } from "@tanstack/react-query";
 
-import { QUERY_KEYS } from "@/constants/queryKey";
+
 import { getQuizRequest, getQuizResponse } from "@/types/realQuiz/getQuiz";
 
 import { getQuizApi } from "@/apis/missions/QuizApi";
 
 export const useGetQuiz = (params: getQuizRequest) => {
   return useQuery<getQuizResponse>({
-    queryKey: [QUERY_KEYS.QUIZ, params],
+
+    queryKey: ["quiz", params],
+
     queryFn: () => getQuizApi(params),
   });
 };
diff --git a/src/hooks/mission/useWriteDiaryApi.ts b/src/hooks/mission/useWriteDiaryApi.ts
@@ -1,7 +1,6 @@
 // src/hooks/mission/useWriteDiaryApi.ts
 import { useMutation, useQueryClient } from "@tanstack/react-query";
 
-import { QUERY_KEYS } from "@/constants/querykey";
 import {
   writeDiaryImageUploadResponse,
   writeDiarySubmitRequest,
@@ -24,7 +23,9 @@ export const useWriteDiaryImageUploadApi = () => {
     mutationFn: ({ formData }) => takePhotoUploadApi(formData),
     onSuccess: data => {
       console.log("일기 사진 업로드 성공:", data);
-      queryClient.invalidateQueries({ queryKey: [QUERY_KEYS.DIARIES] });
+
+      queryClient.invalidateQueries({ queryKey: ["diaries"] });
+
     },
 
     onError: error => {
@@ -44,7 +45,9 @@ export const useWriteDiarySubmitApi = () => {
     mutationFn: body => writeDiarySubmitApi(body),
     onSuccess: data => {
       console.log("일기 작성 성공:", data);
-      queryClient.invalidateQueries({ queryKey: [QUERY_KEYS.DIARIES] });
+
+      queryClient.invalidateQueries({ queryKey: ["diaries"] });
+
     },
     onError: error => {
       console.error("일기 작성 실패:", error);
diff --git a/src/pages/home/Homepage.tsx b/src/pages/home/Homepage.tsx
@@ -69,7 +69,7 @@ const HomePage = () => {
           <FirstPlant
             setIsModalOpen={setIsModalOpen}
             isOpen={isModalOpen}
-            garden={gardens[0]}
+            garden={gardens[0] || null}
           />
         </SwiperSlide>
         <SwiperSlide>
diff --git a/src/types/home/garden.ts b/src/types/home/garden.ts
@@ -8,7 +8,7 @@ export interface GardenSummary {
   gardenId: number;
   gardenSlotNumber: number;
   avatar: Avatar;
-  ownerWateringAble: boolean;
+  ownerWateringAble: boolean | null;
   ownerSunlightAble: boolean;
 }
 
diff --git a/tsconfig.tsbuildinfo b/tsconfig.tsbuildinfo

Original file line number	Diff line number	Diff line change
`@@ -35,6 +35,7 @@ const OX_Quiz: React.FC<OXQuizProps> = ({`
`35`	`35`
`36`	`36`	`if (isCorrect) {`
`37`	`37`	`if (value === answerValue) {`
	`38`	`+`
`38`	`39`	`return "bg-primary-varient border-primary text-primary";`
`39`	`40`	`}`
`40`	`41`	`} else {`
`@@ -43,12 +44,15 @@ const OX_Quiz: React.FC<OXQuizProps> = ({`
`43`	`44`	`}`
`44`	`45`	`if (value === answerValue) {`
`45`	`46`	`return "bg-primary-varient border-primary text-primary";`
	`47`	`+`
`46`	`48`	`}`
`47`	`49`	`}`
`48`	`50`	`}`
`49`	`51`	`return selected === value`
	`52`	`+`
`50`	`53`	`? "border-gray-600 bg-gray-400"`
`51`	`54`	`: "border-gray-400 bg-white text-gray-400";`
	`55`	`+`
`52`	`56`	`};`
`53`	`57`
`54`	`58`	`const handleClick = (value: number) => {`
`@@ -64,13 +68,17 @@ const OX_Quiz: React.FC<OXQuizProps> = ({`
`64`	`68`	className={`${baseBoxClass} ${getBoxClass(0)} `}
`65`	`69`	`onClick={() => handleClick(0)}`
`66`	`70`	`>`
	`71`	`+`
`67`	`72`	`<OX_O width={32} height={32} />`
	`73`	`+`
`68`	`74`	`</div>`
`69`	`75`	`<div`
`70`	`76`	className={`${baseBoxClass} ${getBoxClass(1)}`}
`71`	`77`	`onClick={() => handleClick(1)}`
`72`	`78`	`>`
	`79`	`+`
`73`	`80`	`<OX_X width={32} height={32} />`
	`81`	`+`
`74`	`82`	`</div>`
`75`	`83`	`</div>`
`76`	`84`	`</div>`