From 40b9647de1de30db8619a0fba504c510839a1632 Mon Sep 17 00:00:00 2001 From: ejPark43 Date: Sat, 3 Aug 2024 15:04:24 +0900 Subject: [PATCH] =?UTF-8?q?feat:=20=EA=B0=9C=EB=B3=84=20=EC=9D=BC=EC=A7=80?= =?UTF-8?q?=20=ED=8E=98=EC=9D=B4=EC=A7=80UI=20+=20=EC=82=AD=EC=A0=9C=20?= =?UTF-8?q?=ED=99=95=EC=9D=B8=20=EB=AA=A8=EB=8B=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.js | 3 +- .../components/DeleteConfirmModal.jsx | 124 +++++++++++++++++- .../components/DiaryDetail.jsx | 18 ++- .../components/DiaryEditDropdown.jsx | 26 ++-- src/diaryListPage/components/Diaries.jsx | 37 ++++-- 5 files changed, 181 insertions(+), 27 deletions(-) diff --git a/src/App.js b/src/App.js index 166f0cc..6338b40 100644 --- a/src/App.js +++ b/src/App.js @@ -21,7 +21,8 @@ function App() { } /> } /> } /> - } />\ + } /> + } /> diff --git a/src/diaryDetailPage/components/DeleteConfirmModal.jsx b/src/diaryDetailPage/components/DeleteConfirmModal.jsx index 94845d9..64f706a 100644 --- a/src/diaryDetailPage/components/DeleteConfirmModal.jsx +++ b/src/diaryDetailPage/components/DeleteConfirmModal.jsx @@ -1,11 +1,127 @@ import React from "react"; +import { useNavigate } from "react-router-dom"; +import styled from "styled-components"; -function DeleteConfirmModal() { +function DeleteConfirmModal({ setDeleteModal, goalId }) { + const navigate = useNavigate(); const closeDeleteModal = () => { - // setDeleteModal(false); + setDeleteModal(false); }; - - return
DeleteConfirmModal
; + const deleteModal = () => { + //일지 삭제하는 부분 필요. + setDeleteModal(false); + navigate(`/diaryList?id=${goalId}`); + }; + return ( +
+ + + +

일지를 삭제하시겠어요?

+
+ 삭제한 일지는 복구가 불가능합니다. +
+ 일지를 삭제하시겠습니까? +
+ + + + + + + + + + {/* */} + +
+ ); } export default DeleteConfirmModal; + +const modalBase = ` +width: 100vw; + height: 100vh; + top: 0; + left: 0; + right: 0; + bottom: 0; + position: fixed; + `; + +const ModalBackground = styled.div` + ${modalBase} + + background: rgba(0, 0, 0, 0.2); + z-index: 4; + cursor: default; +`; +const Overlay = styled.div` + ${modalBase} + cursor: default; +`; + +const Wrapper = styled.div` + display: flex; + flex-direction: column; + /* justify-content: center; */ + align-items: center; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + background: #ffffff; + width: 350px; // 로딩모달 크기 + height: 166px; + border-radius: 12px; + padding-top: 5px; + z-index: 5; + .complete-content { + width: 310px; + /* height: 100px; */ + font-size: 15px; + text-align: center; + } +`; +const CancelBtn = styled.div` + display: flex; + > button { + background-color: white !important; + color: #6c6c6c !important; + border: 1.5px solid #dfdfdf !important; + margin-right: 4px; + + &:active { + background-color: #f5f5f5 !important; + } + } +`; + +const Buttons = styled.div` + display: flex; + flex-direction: row; + margin-top: 16px; + > div > button { + display: flex; + justify-content: center; + align-items: center; + outline: none; + border: none; + border-radius: 8px; + width: 96px; + height: 37px; + font-size: 14px; + font-weight: bold; + color: white; + background-color: #798bff; + cursor: pointer; + margin-left: 4px; + &:active { + background-color: #586eff; + } + } +`; +const CompleteBtn = styled.div` + display: flex; +`; diff --git a/src/diaryDetailPage/components/DiaryDetail.jsx b/src/diaryDetailPage/components/DiaryDetail.jsx index 09a7e5c..cf3b2fc 100644 --- a/src/diaryDetailPage/components/DiaryDetail.jsx +++ b/src/diaryDetailPage/components/DiaryDetail.jsx @@ -1,11 +1,14 @@ import React, { useState } from "react"; // import QuillEditor from "../../diaryWritePage/components/QuillEditor"; -import DiaryEditDropdownBtn from "../../asset/Icon/DiaryEditDropdownBtn.svg"; + import styled from "styled-components"; import DeleteConfirmModal from "./DeleteConfirmModal"; -function DiaryDetail() { +import DiaryEditDropdown from "./DiaryEditDropdown"; + +function DiaryDetail({ diaryId }) { const [deleteModal, setDeleteModal] = useState(false); + var goalId = 2; const dummyTitle = "아이디에이션"; const dummyDate = "24.07.16"; const dummyContent = @@ -22,17 +25,24 @@ function DiaryDetail() { {dummyDate} - + {/* 각 일지 수정 및 삭제 드롭다운 */} + + {/* html 태그 적용된 일지 내용 보여주는 부분 */}
- {deleteModal && } + {deleteModal && ( + + )} ); diff --git a/src/diaryDetailPage/components/DiaryEditDropdown.jsx b/src/diaryDetailPage/components/DiaryEditDropdown.jsx index a4edffb..9a12c36 100644 --- a/src/diaryDetailPage/components/DiaryEditDropdown.jsx +++ b/src/diaryDetailPage/components/DiaryEditDropdown.jsx @@ -1,17 +1,24 @@ import React, { useEffect, useRef, useState } from "react"; import styled, { keyframes } from "styled-components"; -import GoalEditDropdownBtn from "../../../../asset/Icon/GoalEditDropdownBtn.svg"; +import DiaryEditDropdownBtn from "../../asset/Icon/DiaryEditDropdownBtn.svg"; import { CSSTransition } from "react-transition-group"; +import { useNavigate } from "react-router-dom"; -function DiaryEditDropdown({ setIsDeleteModalOpen }) { +function DiaryEditDropdown({ setDeleteModal }) { + // console.log("???"); const [isDropdownOpen, setIsDropdownOpen] = useState(false); const dropdownRef = useRef(null); - + const navigate = useNavigate(); const toggleDropdown = (event) => { setIsDropdownOpen(!isDropdownOpen); event.stopPropagation(); }; + const handleEditclick = (e) => { + setIsDropdownOpen(!isDropdownOpen); + /* 일지 수정하는 페이지로 이동 필요 */ + // navigate(`/edit/${diaryId}`); + }; const handleClickOutside = (event) => { if (dropdownRef.current && !dropdownRef.current.contains(event.target)) { setIsDropdownOpen(false); @@ -20,7 +27,7 @@ function DiaryEditDropdown({ setIsDeleteModalOpen }) { const handleDeleteClick = (event) => { event.stopPropagation(); //뒤에 goalclick event 방지용 - setIsDeleteModalOpen(true); + setDeleteModal(true); toggleDropdown(event); }; @@ -33,7 +40,7 @@ function DiaryEditDropdown({ setIsDeleteModalOpen }) { return ( - + - 수정하기 + 수정하기 - 삭제하기 @@ -76,7 +82,8 @@ const fadeOut = keyframes` `; const DropdownContainer = styled.div` - position: absolute; + display: flex; + position: relative; // relative로 수정해야 내가 설정해두는 곳에 드롭다운 위치 가능 top: 8px; right: 8px; width: 24px; @@ -85,12 +92,13 @@ const DropdownContainer = styled.div` justify-content: center; align-items: center; cursor: pointer; + /* border: 2px solid purple; */ `; const DropdownMenu = styled.div` position: absolute; top: 115%; - right: -21%; + right: -120%; background-color: white; border: 1px solid #dfdfdf; border-radius: 4px; diff --git a/src/diaryListPage/components/Diaries.jsx b/src/diaryListPage/components/Diaries.jsx index 65c6421..4f08788 100644 --- a/src/diaryListPage/components/Diaries.jsx +++ b/src/diaryListPage/components/Diaries.jsx @@ -8,7 +8,7 @@ import DiaryViewDropdown from "./DiaryViewDropdown"; import getDiaryList from "../../apis/getDiaryList"; import { useRecoilValue } from "recoil"; import { tokenState } from "../../atom/atom"; -import { useLocation } from "react-router-dom"; +import { useLocation, useNavigate } from "react-router-dom"; function Diaries() { const [isModalOpen, setIsModalOpen] = useState(false); @@ -18,7 +18,7 @@ function Diaries() { const queryParams = new URLSearchParams(location.search); const goalId = queryParams.get("id"); const csrfToken = useRecoilValue(tokenState); - + const navigate = useNavigate(); useEffect(() => { const fetchGoalList = async () => { try { @@ -39,9 +39,13 @@ function Diaries() { let diaries = goalList.journals; if (currentSort === "최신순") { - diaries = diaries.sort((a, b) => new Date(b.createdDate) - new Date(a.createdDate)); + diaries = diaries.sort( + (a, b) => new Date(b.createdDate) - new Date(a.createdDate) + ); } else if (currentSort === "오래된 순") { - diaries = diaries.sort((a, b) => new Date(a.createdDate) - new Date(b.createdDate)); + diaries = diaries.sort( + (a, b) => new Date(a.createdDate) - new Date(b.createdDate) + ); } return diaries; @@ -60,18 +64,29 @@ function Diaries() { - +
일지 추가하기
- +
{filteredDiaries.map((diaries, index) => ( - + { + navigate(`/detail/${diaries.journalId}`); + }} + >
{diaries.title}
@@ -79,13 +94,17 @@ function Diaries() {
{diaries.thumbnail ? ( // 이미지url이 있는지 없는지 판별, 있으면 Image 컴포넌트 보여주고 없으면 안넣음 - + ) : null} ))} - {isModalOpen && } + {isModalOpen && ( + + )} ); }