From 6771ade8b094b59fff4d4de2ffdafb77e5b0845b Mon Sep 17 00:00:00 2001 From: JongHyun Date: Mon, 5 Aug 2024 01:50:43 +0900 Subject: [PATCH] =?UTF-8?q?=20feat=20:=20=EC=9D=BC=EC=A7=80=20=EC=97=85?= =?UTF-8?q?=EB=8D=B0=EC=9D=B4=ED=8A=B8=20=EB=B0=8F=20=EA=B2=BD=EB=A1=9C=20?= =?UTF-8?q?state=EB=A1=9C=20=EA=B9=94=EB=81=94=ED=95=9C=20=EC=88=98?= =?UTF-8?q?=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.js | 7 +- .../components/DeleteConfirmModal.jsx | 2 +- .../components/DiaryDetail.jsx | 20 +-- .../components/DiaryEditDropdown.jsx | 14 +- src/diaryListPage/components/Calendar.jsx | 56 ++----- src/diaryListPage/components/Diaries.jsx | 9 +- .../components/DiaryListBody.jsx | 7 +- src/diaryListPage/components/GoalCard.jsx | 5 +- src/diaryWritePage/components/QuillEditor.jsx | 10 +- src/diaryWritePage/components/UpdateDiary.jsx | 155 ++++++++++++++++++ src/homepage/component/goals/Goals.jsx | 2 +- 11 files changed, 200 insertions(+), 87 deletions(-) create mode 100644 src/diaryWritePage/components/UpdateDiary.jsx diff --git a/src/App.js b/src/App.js index d7c97e2..3e5e2ba 100644 --- 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() { } /> } /> } /> - } - /> + } /> } /> + } /> diff --git a/src/diaryDetailPage/components/DeleteConfirmModal.jsx b/src/diaryDetailPage/components/DeleteConfirmModal.jsx index d4eaaa9..9904a06 100644 --- 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 (
diff --git a/src/diaryDetailPage/components/DiaryDetail.jsx b/src/diaryDetailPage/components/DiaryDetail.jsx index a2e7850..dca5ed4 100644 --- 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,6 +46,8 @@ function DiaryDetail() { {/* 각 일지 수정 및 삭제 드롭다운 */} @@ -51,16 +55,12 @@ function DiaryDetail() { {/* html 태그 적용된 일지 내용 보여주는 부분 */} -
+
- {deleteModal && ( - - )} + {deleteModal && } ); diff --git a/src/diaryDetailPage/components/DiaryEditDropdown.jsx b/src/diaryDetailPage/components/DiaryEditDropdown.jsx index 9a12c36..818a66a 100644 --- 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 ( - + 수정하기 diff --git a/src/diaryListPage/components/Calendar.jsx b/src/diaryListPage/components/Calendar.jsx index b993b2f..cbfdd8f 100644 --- 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 index b5b4205..5ff29fa 100644 --- 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() { { - 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 } }); }} >
diff --git a/src/diaryListPage/components/DiaryListBody.jsx b/src/diaryListPage/components/DiaryListBody.jsx index a111a0a..26ee974 100644 --- 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 ( @@ -13,7 +14,7 @@ function DiaryListBody() { {/* GoalCardBox: 목표 카드(왼쪽 상단부분위치) */} - + @@ -22,7 +23,7 @@ function DiaryListBody() { - + diff --git a/src/diaryListPage/components/GoalCard.jsx b/src/diaryListPage/components/GoalCard.jsx index 91bbeea..b2d637a 100644 --- 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 index 4c36572..b021b9d 100644 --- 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", () => { diff --git a/src/diaryWritePage/components/UpdateDiary.jsx b/src/diaryWritePage/components/UpdateDiary.jsx new file mode 100644 index 0000000..b8c0522 --- /dev/null +++ b/src/diaryWritePage/components/UpdateDiary.jsx @@ -0,0 +1,155 @@ +import React, { useState } from "react"; +import styled from "styled-components"; +import QuillEditor from "./QuillEditor"; +import { useLocation } from "react-router-dom"; +import ThumbnailModal from "./ThumbnailModal"; +import { useRecoilValue } from "recoil"; +import { tokenState } from "../../atom/atom"; +import DiaryPostModal from "./DiaryPostModal"; + +function UpdateDiary() { + const csrfToken = useRecoilValue(tokenState); + const location = useLocation(); + const { diaryDetail, goalId } = location.state; + const [postedModal, setPostedModal] = useState(false); //일지가 추가되었다는 걸 알려주는 모달 + const [formData, setFormData] = useState({ + title: diaryDetail.title, + content: diaryDetail.content, + }); + const [thumbnailModal, setThumbnailModal] = useState(false); // 썸네일 사진 추가하는 모달 + const openThumbnailModal = () => { + setThumbnailModal(true); + }; + + return ( + + + + + + setFormData((formData) => ({ + ...formData, + title: e.target.value, + })) + } + > + {/* */} + + + + + setFormData((formData) => ({ + ...formData, + content: content, + })) + } + /> + + + + + + {thumbnailModal && ( + + )} + {!thumbnailModal && postedModal && } + + + ); +} + +export default UpdateDiary; + +const Wrapper = styled.div` + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + height: 100%; + cursor: default; + /* border: 2px solid red; */ +`; +const BoxWrapper = styled.div` + display: flex; + /* justify-content: center; */ + flex-direction: column; + /* border: 2px solid red; */ +`; +const CenterBox = styled.div` + display: flex; + /* display: center; */ + margin-top: 32px; + flex-direction: column; + justify-content: space-around; + width: 792px; + height: 707px; + + border-radius: 12px; + background-color: #eef1ff; + + /* border: 2px solid orange; */ + padding: 8px 24px; +`; + +const DiaryHeader = styled.div` + display: flex; + align-items: center; + height: 50px; + /* border: 2px solid gold; */ +`; +const DiaryTitle = styled.input` + display: flex; + height: 90%; + width: 100%; + padding-left: 20px; + outline: none; + border: none; + /* border: 2px solid blue; */ + font-size: 18px; + background-color: #eef1ff; + border-bottom: 1.5px solid #dfdfdf; +`; + +const EditorArea = styled.div` + display: flex; + justify-content: center; + width: 100%; + /* border: 2px solid green; */ +`; +const SaveButton = styled.div` + display: flex; + width: 100%; + + /* height: 100%; */ + /* border: 2px solid purple; */ + justify-content: end; + .save-button { + width: 153px; + height: 36px; + border-radius: 6px; + outline: none; + border: none; + background-color: #798bff; + color: white; + font-weight: bold; + transition: 50ms; + cursor: pointer; + &:active { + background-color: #586eff; + } + } +`; diff --git a/src/homepage/component/goals/Goals.jsx b/src/homepage/component/goals/Goals.jsx index 3ebcce3..26d1c06 100644 --- a/src/homepage/component/goals/Goals.jsx +++ b/src/homepage/component/goals/Goals.jsx @@ -61,7 +61,7 @@ function Goals() { }; const handleClickGoal = (goalId) => { - navigate(`/diarylist?id=${goalId}`); + navigate(`/diarylist`, { state: { goalId } }); }; const today = new Date();