Merge pull request #65 from LikeLionHGU/eunju_feat/#60

feat: 개별 일지 페이지UI + 삭제 확인 모달
LikeLionHGU · Aug 3, 2024 · 721f07e · 721f07e
2 parents 2e8807b + 40b9647
commit 721f07e
Show file tree

Hide file tree

Showing 5 changed files with 181 additions and 27 deletions.
diff --git a/src/App.js b/src/App.js
@@ -21,7 +21,8 @@ function App() {
           <Route path="/chatbot" element={<ChatbotPage />} />
           <Route path="/write" element={<DiaryWritePage />} />
           <Route path="/summaryEdit" element={<DiaryBotPage />} />
-          <Route path="/detail" element={<DiaryDetailPage />} />\
+          <Route path="/detail/:id" element={<DiaryDetailPage />} />
+
           <Route path="/oauth2/redirect" element={<Loading />} />
         </Routes>
       </BrowserRouter>

diff --git 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 <div>DeleteConfirmModal</div>;
+  const deleteModal = () => {
+    //일지 삭제하는 부분 필요.
+    setDeleteModal(false);
+    navigate(`/diaryList?id=${goalId}`);
+  };
+  return (
+    <div>
+      <ModalBackground>
+        <Overlay onClick={closeDeleteModal} />
+        <Wrapper>
+          <h3>일지를 삭제하시겠어요?</h3>
+          <div className="complete-content">
+            삭제한 일지는 복구가 불가능합니다.
+            <br />
+            일지를 삭제하시겠습니까?
+          </div>
+          <Buttons>
+            <CancelBtn>
+              <button onClick={closeDeleteModal}>취소 </button>
+            </CancelBtn>
+            <CompleteBtn>
+              <button onClick={deleteModal}>확인</button>
+            </CompleteBtn>
+          </Buttons>
+        </Wrapper>
+        {/* </Overlay> */}
+      </ModalBackground>
+    </div>
+  );
 }
 
 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
@@ -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() {
               <DiaryDate>{dummyDate}</DiaryDate>
             </TitleDate>
             <Dropdown>
-              <img src={DiaryEditDropdownBtn} alt=""></img>
+              {/* 각 일지 수정 및 삭제 드롭다운 */}
+              <DiaryEditDropdown
+                setDeleteModal={setDeleteModal}
+                // diaryId={diaryId} // 각 일지 아이디
+              />
             </Dropdown>
           </DiaryHeader>
           <ContentArea>
             <Contents>
+              {/* html 태그 적용된 일지 내용 보여주는 부분 */}
               <div dangerouslySetInnerHTML={{ __html: dummyContent }}></div>
             </Contents>
           </ContentArea>
         </CenterBox>
 
-        {deleteModal && <DeleteConfirmModal setDeleteModal={setDeleteModal} />}
+        {deleteModal && (
+          <DeleteConfirmModal setDeleteModal={setDeleteModal} goalId={goalId} />
+        )}
       </BoxWrapper>
     </Wrapper>
   );

diff --git 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,17 +40,16 @@ function DiaryEditDropdown({ setIsDeleteModalOpen }) {
 
   return (
     <DropdownContainer ref={dropdownRef} onClick={toggleDropdown}>
-      <img src={GoalEditDropdownBtn} alt=""></img>
+      <img src={DiaryEditDropdownBtn} alt=""></img>
       <CSSTransition
         in={isDropdownOpen}
         timeout={300}
         classNames="dropdown"
         unmountOnExit
       >
         <DropdownMenu>
-          <DropdownItem onClick={toggleDropdown}>수정하기</DropdownItem>
+          <DropdownItem onClick={handleEditclick}>수정하기</DropdownItem>
           <Separator />
-
           <DropdownItem onClick={handleDeleteClick}>삭제하기</DropdownItem>
         </DropdownMenu>
       </CSSTransition>
@@ -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
@@ -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,32 +64,47 @@ function Diaries() {
     <ListPart>
       <Searchbar>
         <SearchIcon />
-        <input className="search-bar" placeholder="제목+내용을 입력해보세요."></input>
+        <input
+          className="search-bar"
+          placeholder="제목+내용을 입력해보세요."
+        ></input>
       </Searchbar>
       <DairyListBox>
         <div className="diary-list-head">
           <div onClick={openCreateDiaryModal} className="diary-add">
             일지 추가하기 <img src={goPencil} alt="" />
           </div>
-          <DiaryViewDropdown currentSort={currentSort} setCurrentSort={setCurrentSort} />
+          <DiaryViewDropdown
+            currentSort={currentSort}
+            setCurrentSort={setCurrentSort}
+          />
         </div>
         <DiaryList>
           {filteredDiaries.map((diaries, index) => (
-            <Diary key={index}>
+            <Diary
+              key={index}
+              onClick={() => {
+                navigate(`/detail/${diaries.journalId}`);
+              }}
+            >
               <div className="diary-title-date">
                 <div className="diary-title">{diaries.title}</div>
                 <div className="diary-date">
                   <div className="diary-end-date">{diaries.createdDate}</div>
                 </div>
               </div>
               {diaries.thumbnail ? ( // 이미지url이 있는지 없는지 판별, 있으면 Image 컴포넌트 보여주고 없으면 안넣음
-                <Image style={{ backgroundImage: `url(${diaries.thumbnail})` }} />
+                <Image
+                  style={{ backgroundImage: `url(${diaries.thumbnail})` }}
+                />
               ) : null}
             </Diary>
           ))}
         </DiaryList>
       </DairyListBox>
-      {isModalOpen && <CreateDiaryModal setIsModalOpen={setIsModalOpen} goalId={goalId} />}
+      {isModalOpen && (
+        <CreateDiaryModal setIsModalOpen={setIsModalOpen} goalId={goalId} />
+      )}
     </ListPart>
   );
 }