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();