Merge branch 'develop' into feat/216

TUK-DP · Jun 17, 2024 · a08721f · a08721f
2 parents 4be90fa + 38c9a09
commit a08721f
Show file tree

Hide file tree

Showing 21 changed files with 626 additions and 122 deletions.
diff --git a/src/App.js b/src/App.js
@@ -34,9 +34,11 @@ import Login from "./pages/Login";
 import Signup from "./pages/Signup";
 import useAutoLogin from "./hooks/useAutoLogin";
 import Explain from "./pages/Keyword/Explain.js";
-import Keyword from "./pages/Keyword/Keyword.js";
+import UserUpdate from "./pages/UserUpdate.js";
+import DiaryManagement from "./pages/DiaryManagement.js";
 import HelpForAi from "./pages/ImageDiary/HelpForAi.js";
 import ShowAiResult from "./pages/ImageDiary/ShowAiResult.js";
+import Keyword from "./pages/Keyword/Keyword.js";
 
 function App() {
   let { loading } = useAutoLogin();
@@ -81,6 +83,12 @@ function App() {
           <Route exact path={"/centermap"} element={<CenterMap />} />
           <Route exact path={"/explain"} element={<Explain />} />
           <Route exact path={"/keyword"} element={<Keyword />} />
+          <Route exact path={"/userupdate"} element={<UserUpdate />} />
+          <Route
+            exact
+            path={"/diarymanagement"}
+            element={<DiaryManagement />}
+          />
           <Route
             exact
             path={"/prevsurveyresult"}

diff --git a/src/api/common.controller.js b/src/api/common.controller.js
@@ -36,6 +36,10 @@ export class Api {
     return await this.sendRequest({ method: "patch", url, data, content_type });
   }
 
+  async put(url, { data, content_type = "application/json" } = {}) {
+    return await this.sendRequest({ method: "put", url, data, content_type });
+  }
+
   async delete(url, { data, content_type = "application/json" } = {}) {
     const config = {
       headers: {

diff --git a/src/api/diary.controller.js b/src/api/diary.controller.js
@@ -44,12 +44,18 @@ class DiaryController extends Api {
   //그래프 데이터 가져오기
   getGraphData = async (diaryId) => {
     return await this.get(`/diary/${diaryId}/graph`);
-  }
+  };
   //일기 이미지 저장
   saveDiaryImg = async (diaryId, imgUrl) => {
     return await this.post(`/diary/${diaryId}/image`, {
       data: imgUrl,
     });
   };
+  //기간별 일기 리스트 가져오기
+  searchDiaryList = async ({ userId, startDate, finishDate, sortBy }) => {
+    return await this.get(
+      `/diary/list?userId=${userId}&startDate=${startDate}&finishDate=${finishDate}&sortBy=${sortBy}`
+    );
+  };
 }
 export default new DiaryController();
diff --git a/src/api/users.controller.js b/src/api/users.controller.js
@@ -26,6 +26,15 @@ class UserController extends Api {
     });
   };
   // 회원 정보 수정
+  updateUser = async ({ userData, accessToken }) => {
+    return await this.put("/users", userData, {
+      headers: {
+        AccessToken: `${accessToken}`,
+        "Content-Type": "application/json",
+      },
+    });
+  };
+
   // 회원탈퇴
 }
 

diff --git a/src/component/MyPageList.js b/src/component/MyPageList.js
@@ -1,6 +1,9 @@
-const MyPageList = ({ src, text }) => {
+const MyPageList = ({ src, text, onClick }) => {
   return (
-    <div className={"flex flex-row py-5 gap-2.5 items-center border-b-2"}>
+    <div
+      onClick={onClick}
+      className={"flex flex-row py-5 gap-2.5 items-center border-b-2"}
+    >
       <img src={src} width="30" />
       <div className={"text-lg flex-grow"}>{text}</div>
     </div>

diff --git a/src/hooks/useLogin.js b/src/hooks/useLogin.js
@@ -52,6 +52,7 @@ const useLogin = () => {
     dispatch({
       type: SET_USERINFO,
       ...info,
+      username: info.username,
     });
     navigate("/");
   };

diff --git a/src/index.js b/src/index.js
@@ -2,7 +2,6 @@ import React from "react";
 import ReactDOM from "react-dom/client";
 import App from "./App";
 import "./index.css";
-
 import store from "./redux/config/configStore";
 import { Provider } from "react-redux";
 import { BrowserRouter } from "react-router-dom";
@@ -17,3 +16,21 @@ root.render(
     </Provider>
   </RecoilRoot>
 );
+
+const render = () => {
+  const state = store.getState();
+  const fontSize = state.fontSize;
+
+  document.documentElement.style.fontSize = fontSize;
+
+  root.render(
+    <Provider store={store}>
+      <BrowserRouter>
+        <App />
+      </BrowserRouter>
+    </Provider>
+  );
+};
+
+render();
+store.subscribe(render);
diff --git a/src/pages/Calendar/Calendar.js b/src/pages/Calendar/Calendar.js
@@ -2,35 +2,61 @@ import React, { useEffect, useState } from "react";
 import "../../styles/Calendar.css";
 import left from "../../assets/left.png";
 import Right from "../../assets/Right.png";
-import { useNavigate } from "react-router-dom";
+import { useNavigate, useLocation } from "react-router-dom";
 import DiaryShow from "./DiaryShow.js";
 import { useDispatch, useSelector } from "react-redux";
-import { CHANGE_DAY, CHANGE_MONTH } from "../../redux/modules/DiaryDate.js";
+import {
+  CHANGE_DAY,
+  CHANGE_MONTH,
+  SET_DATE,
+} from "../../redux/modules/DiaryDate.js";
 import { CHANGE_DIARY } from "../../redux/modules/DiaryInfo.js";
 import DiaryController from "../../api/diary.controller.js";
 import { SET_PAGENAME } from "../../redux/modules/PageName.js";
 
 const Calendar = () => {
+  const location = useLocation();
   const dispatch = useDispatch();
+  const [isOpen, setIsOpen] = useState(false);
+
   useEffect(() => {
+    // 페이지 이름 설정
     dispatch({ type: SET_PAGENAME, pageName: "캘린더" });
-  }, []);
+
+    if (location.state) {
+      const selectedDate = new Date(location.state);
+      dispatch({
+        type: SET_DATE,
+        year: selectedDate.getFullYear(),
+        month: selectedDate.getMonth() + 1,
+        day: selectedDate.getDate(),
+      });
+      setIsOpen(true);
+    } else {
+      // location.state가 없을 때 현재 날짜로 초기화
+      const currentDate = new Date();
+      dispatch({
+        type: SET_DATE,
+        year: currentDate.getFullYear(),
+        month: currentDate.getMonth() + 1,
+        day: currentDate.getDate(),
+      });
+    }
+  }, [location.state, dispatch]);
+
   const navigate = useNavigate();
-  const { year, month, day } = useSelector((state) => state.DiaryDate);
+  const {
+    year: reduxYear,
+    month: reduxMonth,
+    day: reduxDay,
+  } = useSelector((state) => state.DiaryDate);
   const [isDiaryExist, setIsDiaryExist] = useState();
   const [isGetDiaryComplete, setIsGetDiaryComplete] = useState(false);
   // userId는 한 번 로그인 이후 고정
   const userId = useSelector((state) => state.UserInfo.userId);
-  const [imgUrl, setImgUrl] = useState(null);
-
-  // 현재 날짜를 가져옴
-  const currentDate = new Date();
-  const currentYear = currentDate.getFullYear();
-  const currentMonth = currentDate.getMonth() + 1; // 월은 0부터 시작하므로 +1 해줌
-  const currentDay = currentDate.getDate();
 
   const dateFormat = () => {
-    const date = new Date(year, month - 1, day);
+    const date = new Date(reduxYear, reduxMonth - 1, reduxDay);
     return (
       date.getFullYear() +
       "-" +
@@ -45,10 +71,17 @@ const Calendar = () => {
   //선택한 날의 일기 가져오기
   const getDiary = async () => {
     setIsGetDiaryComplete(false);
+    const currentDate = new Date();
+    const currentYear = currentDate.getFullYear();
+    const currentMonth = currentDate.getMonth() + 1;
+    const currentDay = currentDate.getDate();
+
     if (
-      year > currentYear ||
-      (year === currentYear && month > currentMonth) ||
-      (year === currentYear && month === currentMonth && day > currentDay)
+      reduxYear > currentYear ||
+      (reduxYear === currentYear && reduxMonth > currentMonth) ||
+      (reduxYear === currentYear &&
+        reduxMonth === currentMonth &&
+        reduxDay > currentDay)
     )
       return;
     try {
@@ -87,7 +120,7 @@ const Calendar = () => {
   useEffect(() => {
     // 일기 데이터 가져오기
     getDiary();
-  }, [year, month, day]);
+  }, [reduxYear, reduxMonth, reduxDay]);
 
   // 이전 달로 이동
   const prevMonth = () => {
@@ -101,13 +134,13 @@ const Calendar = () => {
 
   // 현재 달의 첫째 날의 요일을 반환합니다. (0: 일요일, 1: 월요일, ...)
   const getFirstDayOfMonth = () => {
-    const firstDayOfMonth = new Date(year, month - 1, 1);
+    const firstDayOfMonth = new Date(reduxYear, reduxMonth - 1, 1);
     return firstDayOfMonth.getDay();
   };
 
   // 현재 달의 날짜 배열 생성 (날짜와 요일을 모두 포함)
   const getDaysInMonth = () => {
-    const daysInMonth = new Date(year, month, 0).getDate();
+    const daysInMonth = new Date(reduxYear, reduxMonth, 0).getDate();
     const days = [];
 
     // 빈 셀을 삽입하여 첫째 날이 올바른 요일에 위치하도록 합니다.
@@ -142,7 +175,7 @@ const Calendar = () => {
     let cells = [];
 
     days.forEach((selectDay, index) => {
-      const isSelected = selectDay !== "" && day === selectDay;
+      const isSelected = selectDay !== "" && reduxDay === selectDay;
 
       if (index % 7 !== 0) {
         cells.push(
@@ -193,7 +226,7 @@ const Calendar = () => {
           <span
             style={{ fontSize: "20px", fontWeight: "bold", color: "#999999" }}
           >
-            {`${year}년 ${month}월`}
+            {`${reduxYear}년 ${reduxMonth}월`}
           </span>
           <img
             src={Right}
@@ -221,7 +254,7 @@ const Calendar = () => {
       </table>
       <hr style={{ borderColor: "#f8f8f8" }} />
       {/* 작성된 일기 없으면 버튼표시, 아니면 일기 표시 */}
-      {isGetDiaryComplete && isDiaryExist && <DiaryShow />}
+      {isGetDiaryComplete && isDiaryExist && <DiaryShow isOpen={isOpen} />}
       {isGetDiaryComplete && !isDiaryExist && (
         <div id="btnBox">
           <div

diff --git a/src/pages/Calendar/Diary.js b/src/pages/Calendar/Diary.js
@@ -107,6 +107,7 @@ const Diary = () => {
         {diaryImages.length === 0 && (
           <div
             id="btn_paint"
+            className="text-xl"
             onClick={() => {
               navigate("/draw");
             }}
@@ -141,6 +142,7 @@ const Diary = () => {
         </div>
         <textarea
           id="writeBox"
+          className="text-lg"
           placeholder="일기를 작성해주세요."
           ref={textRef}
           onChange={handleContentChange}
@@ -154,7 +156,7 @@ const Diary = () => {
       >
         <button
           className={
-            "bg-[#82aae3] text-white w-40 h-10 flex justify-center items-center rounded-xl font-bold text-lg mx-6"
+            "bg-[#82aae3] text-white w-40 h-10 flex justify-center items-center rounded-xl font-bold mx-6 text-xl"
           }
           style={{ boxShadow: " 3px 3px 3px rgb(200, 200, 200)" }}
           onClick={deleteDiary}
@@ -163,7 +165,7 @@ const Diary = () => {
         </button>
         <button
           className={
-            "bg-[#82aae3] text-white w-40 h-10 flex justify-center items-center rounded-xl font-bold text-lg mx-6"
+            "bg-[#82aae3] text-white w-40 h-10 flex justify-center items-center rounded-xl font-bold mx-6 text-xl"
           }
           style={{ boxShadow: " 3px 3px 3px rgb(200, 200, 200)" }}
           onClick={updateDiary}

diff --git a/src/pages/Calendar/DiaryShow.js b/src/pages/Calendar/DiaryShow.js
@@ -8,7 +8,7 @@ import keywordController from "../../api/keyword.controller.js";
 import { useSetRecoilState } from "recoil";
 import { keywordState } from "../../recoil/keywordState.js";
 
-const DiaryEdit = () => {
+const DiaryEdit = ({ isOpen }) => {
   const [showDiary, setShowDiary] = useState(false);
 
   const userId = useSelector((state) => state.UserInfo.userId);
@@ -51,6 +51,10 @@ const DiaryEdit = () => {
     setShowDiary(false);
   }, [diaryId]);
 
+  useEffect(() => {
+    setShowDiary(isOpen);
+  }, [isOpen]);
+
   const getKeyword = async () => {
     try {
       const response = await keywordController.getKeyword(diaryId);
@@ -71,7 +75,7 @@ const DiaryEdit = () => {
       <div className={"flex justify-between items-center py-8 bg-[#e0f4ff]  "}>
         <button
           className={
-            "bg-[#82aae3] text-white w-40 h-10 flex justify-center items-center rounded-xl font-bold text-lg mx-6"
+            "bg-[#82aae3] text-white w-40 h-10 flex justify-center items-center rounded-xl font-bold mx-6 text-xl"
           }
           style={{ boxShadow: " 3px 3px 3px rgb(200, 200, 200)" }}
           onClick={handleDiaryTestClick}
@@ -80,7 +84,7 @@ const DiaryEdit = () => {
         </button>
         <button
           className={
-            "bg-[#82aae3] text-white w-40 h-10 flex justify-center items-center rounded-xl font-bold text-lg mx-6"
+            "bg-[#82aae3] text-white w-40 h-10 flex justify-center items-center rounded-xl font-bold mx-6 text-xl"
           }
           style={{
             boxShadow: " 3px 3px 3px rgb(200, 200, 200)",
@@ -95,7 +99,7 @@ const DiaryEdit = () => {
         </button>
         <button
           className={
-            "bg-[#82aae3] text-white w-40 h-10 flex justify-center items-center rounded-xl font-bold text-lg mx-6"
+            "bg-[#82aae3] text-white w-40 h-10 flex justify-center items-center rounded-xl font-bold mx-6 text-xl"
           }
           style={{
             boxShadow: " 3px 3px 3px rgb(200, 200, 200)",