Merge pull request #101 from LikeLionHGU/jonghyun_feat/#100

feat : 일지 업데이트 및 경로 state로 깔끔한 수정
LikeLionHGU · Aug 4, 2024 · 34c0488 · 34c0488
2 parents 4f1504c + 6771ade
commit 34c0488
Show file tree

Hide file tree

Showing 11 changed files with 200 additions and 87 deletions.
diff --git a/src/App.js b/src/App.js
@@ -9,6 +9,7 @@ import DiaryWritePage from "./diaryWritePage/DiaryWritePage";
 import Loading from "./loginPage/Loading";
 import DiaryBotPage from "./diaryBotPage/DiaryBotPage";
 import DiaryDetailPage from "./diaryDetailPage/DiaryDetailPage";
+import UpdateDiary from "./diaryWritePage/components/UpdateDiary";
 
 function App() {
   return (
@@ -21,11 +22,9 @@ function App() {
           <Route path="/chatbot" element={<ChatbotPage />} />
           <Route path="/write" element={<DiaryWritePage />} />
           <Route path="/summaryEdit" element={<DiaryBotPage />} />
-          <Route
-            path="/diarylist/:goalId/detail/:diaryId"
-            element={<DiaryDetailPage />}
-          />
+          <Route path="/detail" element={<DiaryDetailPage />} />
           <Route path="/oauth2/redirect" element={<Loading />} />
+          <Route path="/UpdateDiary" element={<UpdateDiary />} />
         </Routes>
       </BrowserRouter>
     </RecoilRoot>

diff --git a/src/diaryDetailPage/components/DeleteConfirmModal.jsx b/src/diaryDetailPage/components/DeleteConfirmModal.jsx
@@ -10,7 +10,7 @@ function DeleteConfirmModal({ setDeleteModal, goalId }) {
   const deleteModal = () => {
     //일지 삭제하는 부분 필요.
     setDeleteModal(false);
-    navigate(`/diaryList?id=${goalId}`);
+    navigate(`/diarylist`, { state: { goalId } });
   };
   return (
     <div>

diff --git a/src/diaryDetailPage/components/DiaryDetail.jsx b/src/diaryDetailPage/components/DiaryDetail.jsx
@@ -5,16 +5,18 @@ import styled from "styled-components";
 import DeleteConfirmModal from "./DeleteConfirmModal";
 import DiaryEditDropdown from "./DiaryEditDropdown";
 import getDiaryDetail from "../../apis/getDiaryDetail";
-import { useParams } from "react-router-dom";
+import { useLocation, useParams } from "react-router-dom";
 import { useRecoilValue } from "recoil";
 import { tokenState } from "../../atom/atom";
 
 function DiaryDetail() {
   const [deleteModal, setDeleteModal] = useState(false);
   const [diaryDetail, setDiaryDetail] = useState([]);
-  const { diaryId } = useParams(); //diaryId로 설정해놓은 param 값을 url로부터 가져와서 사용.
-  const { goalId } = useParams(); // goalId로 설정해놓은 param 값을 url로부터 가져와서 사용.
-  // console.log("id is : ", goalId);
+  const location = useLocation();
+  const { goalId } = location.state;
+  const { diaries } = location.state;
+  const diaryId = diaries.journalId;
+  console.log("id is : ", goalId, diaries);
   const csrfToken = useRecoilValue(tokenState);
 
   // 컨텐츠 내용 많아지면 스크롤로 내려서 확인할 수 있도록 만듦.
@@ -44,23 +46,21 @@ function DiaryDetail() {
               {/* 각 일지 수정 및 삭제 드롭다운 */}
               <DiaryEditDropdown
                 setDeleteModal={setDeleteModal}
+                diaryDetail={diaryDetail}
+                goalId={goalId}
                 // diaryId={diaryId} // 각 일지 아이디
               />
             </Dropdown>
           </DiaryHeader>
           <ContentArea>
             <Contents>
               {/* html 태그 적용된 일지 내용 보여주는 부분 */}
-              <div
-                dangerouslySetInnerHTML={{ __html: diaryDetail.content }}
-              ></div>
+              <div dangerouslySetInnerHTML={{ __html: diaryDetail.content }}></div>
             </Contents>
           </ContentArea>
         </CenterBox>
 
-        {deleteModal && (
-          <DeleteConfirmModal setDeleteModal={setDeleteModal} goalId={goalId} />
-        )}
+        {deleteModal && <DeleteConfirmModal setDeleteModal={setDeleteModal} goalId={goalId} />}
       </BoxWrapper>
     </Wrapper>
   );

diff --git a/src/diaryDetailPage/components/DiaryEditDropdown.jsx b/src/diaryDetailPage/components/DiaryEditDropdown.jsx
@@ -4,7 +4,7 @@ import DiaryEditDropdownBtn from "../../asset/Icon/DiaryEditDropdownBtn.svg";
 import { CSSTransition } from "react-transition-group";
 import { useNavigate } from "react-router-dom";
 
-function DiaryEditDropdown({ setDeleteModal }) {
+function DiaryEditDropdown({ setDeleteModal, diaryDetail, goalId }) {
   //   console.log("???");
   const [isDropdownOpen, setIsDropdownOpen] = useState(false);
   const dropdownRef = useRef(null);
@@ -14,10 +14,9 @@ function DiaryEditDropdown({ setDeleteModal }) {
     event.stopPropagation();
   };
 
-  const handleEditclick = (e) => {
+  const handleEditclick = () => {
     setIsDropdownOpen(!isDropdownOpen);
-    /* 일지 수정하는 페이지로 이동 필요 */
-    // navigate(`/edit/${diaryId}`);
+    navigate(`/UpdateDiary`, { state: { diaryDetail, goalId } });
   };
   const handleClickOutside = (event) => {
     if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
@@ -41,12 +40,7 @@ function DiaryEditDropdown({ setDeleteModal }) {
   return (
     <DropdownContainer ref={dropdownRef} onClick={toggleDropdown}>
       <img src={DiaryEditDropdownBtn} alt=""></img>
-      <CSSTransition
-        in={isDropdownOpen}
-        timeout={300}
-        classNames="dropdown"
-        unmountOnExit
-      >
+      <CSSTransition in={isDropdownOpen} timeout={300} classNames="dropdown" unmountOnExit>
         <DropdownMenu>
           <DropdownItem onClick={handleEditclick}>수정하기</DropdownItem>
           <Separator />

diff --git a/src/diaryListPage/components/Calendar.jsx b/src/diaryListPage/components/Calendar.jsx
@@ -11,18 +11,10 @@ import markDate from "../../asset/Icon/markDate.svg";
 import markDateBright from "../../asset/Icon/markDateBright.svg";
 const Calendar = () => {
   const location = useLocation();
-  const queryParams = new URLSearchParams(location.search);
-  // 현재 목표 번호
-  const goalId = queryParams.get("id");
+  const goalId = location.state.goalId;
   const csrfToken = useRecoilValue(tokenState);
   const [isLoading, setIsLoading] = useState(true);
-  const {
-    weekCalendarList,
-    currentDate,
-    setCurrentDate,
-    prevMonthDaysLength,
-    totalMonthDays,
-  } = UseCalendar();
+  const { weekCalendarList, currentDate, setCurrentDate, prevMonthDaysLength, totalMonthDays } = UseCalendar();
   // localstorage에 날짜들 저장해서 새로고침해도 사라지지 않도록 함.
   const [selectedDates, setSelectedDates] = useState(() => {
     const storedDates = localStorage.getItem("selectedDates");
@@ -54,20 +46,14 @@ const Calendar = () => {
   }, [selectedDates]);
 
   const handlePrevMonth = () => {
-    setCurrentDate(
-      new Date(currentDate.getFullYear(), currentDate.getMonth() - 1, 1)
-    );
+    setCurrentDate(new Date(currentDate.getFullYear(), currentDate.getMonth() - 1, 1));
   };
 
   const handleNextMonth = () => {
-    setCurrentDate(
-      new Date(currentDate.getFullYear(), currentDate.getMonth() + 1, 1)
-    );
+    setCurrentDate(new Date(currentDate.getFullYear(), currentDate.getMonth() + 1, 1));
   };
   // 현재 년도 + 월  //
-  const monthYear = `${currentDate.getFullYear()} ${
-    currentDate.getMonth() + 1
-  }월`;
+  const monthYear = `${currentDate.getFullYear()} ${currentDate.getMonth() + 1}월`;
 
   // 1~9일까지를 두자릿수로 변경하는 부분 01,02,03 ... 09일
   const formatDay = (day) => (day < 10 ? `0${day}` : day);
@@ -85,14 +71,8 @@ const Calendar = () => {
   // };
 
   const isSelected = (date, isCurrentMonth, monthOffset) => {
-    const displayMonth = new Date(
-      currentDate.getFullYear(),
-      currentDate.getMonth() + monthOffset,
-      1
-    );
-    const formattedDate = `${displayMonth.getFullYear()}-${formatDay(
-      displayMonth.getMonth() + 1
-    )}-${formatDay(date)}`;
+    const displayMonth = new Date(currentDate.getFullYear(), currentDate.getMonth() + monthOffset, 1);
+    const formattedDate = `${displayMonth.getFullYear()}-${formatDay(displayMonth.getMonth() + 1)}-${formatDay(date)}`;
     return selectedDates.includes(formattedDate);
   };
 
@@ -118,19 +98,11 @@ const Calendar = () => {
             {week.map((date, dateIndex) => {
               const isCurrentMonth =
                 weekIndex * 7 + dateIndex >= prevMonthDaysLength &&
-                weekIndex * 7 + dateIndex <
-                  prevMonthDaysLength + totalMonthDays;
+                weekIndex * 7 + dateIndex < prevMonthDaysLength + totalMonthDays;
               let monthOffset = 0;
-              if (
-                !isCurrentMonth &&
-                weekIndex * 7 + dateIndex < prevMonthDaysLength
-              ) {
+              if (!isCurrentMonth && weekIndex * 7 + dateIndex < prevMonthDaysLength) {
                 monthOffset = -1;
-              } else if (
-                !isCurrentMonth &&
-                weekIndex * 7 + dateIndex >=
-                  prevMonthDaysLength + totalMonthDays
-              ) {
+              } else if (!isCurrentMonth && weekIndex * 7 + dateIndex >= prevMonthDaysLength + totalMonthDays) {
                 monthOffset = 1;
               }
               return (
@@ -234,14 +206,10 @@ const MonthDates = styled.div`
     width: 28px;
     height: 28px;
     /* 일지 작성한 날짜 && 현재 보여지는 달이면 마킹 그대로 */
-    background-image: ${(props) =>
-      props.isSelected && props.isCurrentMonth ? `url(${markDate})` : "#fff"};
+    background-image: ${(props) => (props.isSelected && props.isCurrentMonth ? `url(${markDate})` : "#fff")};
     /* 일지 작성한 날짜 && 다른 달에서 보여지는 일지 작성 날이면 투명도 낮춘 마킹 */
     // 예) 7월 달력인데 8월 1일에 일지 작성해서 날짜 표시 연하게 해둠
-    background-image: ${(props) =>
-      props.isSelected && !props.isCurrentMonth
-        ? `url(${markDateBright})`
-        : "#fff"};
+    background-image: ${(props) => (props.isSelected && !props.isCurrentMonth ? `url(${markDateBright})` : "#fff")};
   }
   color: ${(props) => (props.isCurrentMonth ? "#000" : "#bdbdbd")};
 `;
diff --git a/src/diaryListPage/components/Diaries.jsx b/src/diaryListPage/components/Diaries.jsx
@@ -15,10 +15,10 @@ function Diaries() {
   const [goalList, setGoalList] = useState({ journals: [] });
   const [isLoading, setIsLoading] = useState(true);
   const location = useLocation();
-  const queryParams = new URLSearchParams(location.search);
-  const goalId = queryParams.get("id");
+  const goalId = location.state.goalId;
   const csrfToken = useRecoilValue(tokenState);
   const navigate = useNavigate();
+  console.log("찐 막", goalId);
 
   useEffect(() => {
     const fetchGoalList = async () => {
@@ -79,10 +79,7 @@ function Diaries() {
             <Diary
               key={index}
               onClick={() => {
-                navigate(`${goalId}/detail/${diaries.journalId}`);
-                // navigate(`?id=${goalId}/detail/${diaries.journalId}`);
-                // navigate(`/detail/${diaries.journalId}`);
-                // navigate(`/diarylist?id=${goalId}/detail/${diaries.journalId}`);
+                navigate(`/detail/`, { state: { goalId, diaries } });
               }}
             >
               <div className="diary-title-date">

diff --git a/src/diaryListPage/components/DiaryListBody.jsx b/src/diaryListPage/components/DiaryListBody.jsx
@@ -4,7 +4,8 @@ import Diaries from "./Diaries";
 import GoalCard from "./GoalCard";
 import Calendar from "./Calendar";
 
-function DiaryListBody() {
+function DiaryListBody(goalId) {
+  console.log("프롭스로 받은 골아이디", goalId);
   return (
     <Container>
       <CenterBox>
@@ -13,7 +14,7 @@ function DiaryListBody() {
           <SidePart>
             <GoalCardBox>
               {/* GoalCardBox: 목표 카드(왼쪽 상단부분위치) */}
-              <GoalCard />
+              <GoalCard goalIdNumber={goalId.goalId} />
             </GoalCardBox>
             <CalendarCard>
               <Calendar />
@@ -22,7 +23,7 @@ function DiaryListBody() {
             </CalendarCard>
           </SidePart>
           <ListPart>
-            <Diaries />
+            <Diaries goalIdNumber={goalId.goalId} />
           </ListPart>
         </ContentWrapper>
       </CenterBox>

diff --git a/src/diaryListPage/components/GoalCard.jsx b/src/diaryListPage/components/GoalCard.jsx
@@ -20,10 +20,9 @@ function GoalCard() {
   const [isConfirmModalOpen, setIsConfirmModalOpen] = useState(false);
   const [isCompModalOpen, setIsCompModalOpen] = useState(false);
   // const [isCompleted, setIsCompleted] = useState(false);
-  const location = useLocation();
-  const queryParams = new URLSearchParams(location.search);
-  const goalId = queryParams.get("id");
   const csrfToken = useRecoilValue(tokenState);
+  const location = useLocation();
+  const goalId = location.state.goalId;
 
   //랜덤 이미지 설정
 

diff --git a/src/diaryWritePage/components/QuillEditor.jsx b/src/diaryWritePage/components/QuillEditor.jsx
@@ -13,7 +13,7 @@ import "quill/dist/quill.snow.css";
 import axios from "axios";
 import styled from "styled-components";
 
-const QuillEditor = ({ onChange }) => {
+const QuillEditor = ({ onChange, mainText }) => {
   const editorRef = useRef(null);
   const quillRef = useRef(null);
 
@@ -43,10 +43,10 @@ const QuillEditor = ({ onChange }) => {
 
     quillRef.current = new Quill(editorRef.current, options);
 
-    // const initialContent = mainText;
-    // if (initialContent) {
-    //   quillRef.current.clipboard.dangerouslyPasteHTML(initialContent);
-    // }
+    const initialContent = mainText;
+    if (initialContent) {
+      quillRef.current.clipboard.dangerouslyPasteHTML(initialContent);
+    }
 
     // 텍스트 에디터에 변화 있으면(=타이핑하거나 지우거나 등) 변화 적용시켜주기
     quillRef.current.on("text-change", () => {