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

feat: 일지 내용 확인 페이지 UI 구현

src/App.js

@@ -8,6 +8,7 @@ import ChatbotPage from "./chatbotPage/ChatbotPage";
 import DiaryWritePage from "./diaryWritePage/DiaryWritePage";
 import Loading from "./loginPage/Loading";
 import DiaryBotPage from "./diaryBotPage/DiaryBotPage";
+import DiaryDetailPage from "./diaryDetailPage/DiaryDetailPage";
 
 function App() {
   return (
@@ -20,6 +21,7 @@ function App() {
           <Route path="/chatbot" element={<ChatbotPage />} />
           <Route path="/write" element={<DiaryWritePage />} />
           <Route path="/summaryEdit" element={<DiaryBotPage />} />
+          <Route path="/detail" element={<DiaryDetailPage />} />\
           <Route path="/oauth2/redirect" element={<Loading />} />
         </Routes>
       </BrowserRouter>

src/diaryDetailPage/DiaryDetailPage.jsx

@@ -0,0 +1,14 @@
+import React from "react";
+
+import Header from "../common/Header";
+import DiaryDetail from "./components/DiaryDetail";
+function DiaryDetailPage() {
+  return (
+    <div>
+      <Header />
+      <DiaryDetail />
+    </div>
+  );
+}
+
+export default DiaryDetailPage;

src/diaryDetailPage/components/DeleteConfirmModal.jsx

@@ -0,0 +1,11 @@
+import React from "react";
+
+function DeleteConfirmModal() {
+  const closeDeleteModal = () => {
+    // setDeleteModal(false);
+  };
+
+  return <div>DeleteConfirmModal</div>;
+}
+
+export default DeleteConfirmModal;

src/diaryDetailPage/components/DiaryDetail.jsx

@@ -0,0 +1,127 @@
+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() {
+  const [deleteModal, setDeleteModal] = useState(false);
+
+  const dummyTitle = "아이디에이션";
+  const dummyDate = "24.07.16";
+  const dummyContent =
+    "'중앙해커톤 우승'이라는 새로운 목표를 새롭게 만들었다. <p>테스트 테스트</p> <h1>html테스트</h1>";
+  // 컨텐츠 내용 많아지면 스크롤로 내려서 확인할 수 있도록 만듦.
+
+  return (
+    <Wrapper>
+      <BoxWrapper>
+        <CenterBox>
+          <DiaryHeader>
+            <TitleDate>
+              <DiaryTitle name="title">{dummyTitle}</DiaryTitle>
+              <DiaryDate>{dummyDate}</DiaryDate>
+            </TitleDate>
+            <Dropdown>
+              <img src={DiaryEditDropdownBtn} alt=""></img>
+            </Dropdown>
+          </DiaryHeader>
+          <ContentArea>
+            <Contents>
+              <div dangerouslySetInnerHTML={{ __html: dummyContent }}></div>
+            </Contents>
+          </ContentArea>
+        </CenterBox>
+
+        {deleteModal && <DeleteConfirmModal setDeleteModal={setDeleteModal} />}
+      </BoxWrapper>
+    </Wrapper>
+  );
+}
+
+export default DiaryDetail;
+
+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 TitleDate = styled.div`
+  display: flex;
+  flex-direction: column;
+  width: 95%;
+`;
+
+const DiaryHeader = styled.div`
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+
+  /* border: 2px solid gold; */
+  padding-left: 10px;
+  border-bottom: 1.5px solid #dfdfdf;
+`;
+const DiaryTitle = styled.div`
+  display: flex;
+  height: 90%;
+  /* width: 100%; */
+  padding-bottom: 4px;
+  font-size: 18px;
+  /* border: 2px solid blue; */
+`;
+const DiaryDate = styled.div`
+  display: flex;
+  margin-bottom: 10px;
+  color: #aeaeae;
+  font-size: 14px;
+`;
+
+const Dropdown = styled.div`
+  display: flex;
+  /* width: 10px; */
+  align-items: center;
+  justify-content: center;
+  margin-left: 15px;
+  height: 25px;
+  width: 20px;
+  /* border: 2px solid red; */
+  cursor: pointer;
+`;
+
+const ContentArea = styled.div`
+  display: flex;
+  justify-content: center;
+  width: 100%;
+  /* border: 2px solid green; */
+`;
+const Contents = styled.div`
+  display: flex;
+  /* height: 520px; */
+  height: 590px;
+  width: 100%;
+  padding: 10px;
+  overflow-y: auto;
+  /* border: 2px solid red; */
+`;

src/diaryDetailPage/components/DiaryEditDropdown.jsx

@@ -0,0 +1,122 @@
+import React, { useEffect, useRef, useState } from "react";
+import styled, { keyframes } from "styled-components";
+import GoalEditDropdownBtn from "../../../../asset/Icon/GoalEditDropdownBtn.svg";
+import { CSSTransition } from "react-transition-group";
+
+function DiaryEditDropdown({ setIsDeleteModalOpen }) {
+  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+  const dropdownRef = useRef(null);
+
+  const toggleDropdown = (event) => {
+    setIsDropdownOpen(!isDropdownOpen);
+    event.stopPropagation();
+  };
+
+  const handleClickOutside = (event) => {
+    if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
+      setIsDropdownOpen(false);
+    }
+  };
+
+  const handleDeleteClick = (event) => {
+    event.stopPropagation(); //뒤에 goalclick event 방지용
+    setIsDeleteModalOpen(true);
+    toggleDropdown(event);
+  };
+
+  useEffect(() => {
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, []);
+
+  return (
+    <DropdownContainer ref={dropdownRef} onClick={toggleDropdown}>
+      <img src={GoalEditDropdownBtn} alt=""></img>
+      <CSSTransition
+        in={isDropdownOpen}
+        timeout={300}
+        classNames="dropdown"
+        unmountOnExit
+      >
+        <DropdownMenu>
+          <DropdownItem onClick={toggleDropdown}>수정하기</DropdownItem>
+          <Separator />
+
+          <DropdownItem onClick={handleDeleteClick}>삭제하기</DropdownItem>
+        </DropdownMenu>
+      </CSSTransition>
+    </DropdownContainer>
+  );
+}
+
+export default DiaryEditDropdown;
+
+const fadeIn = keyframes`
+  from {
+    opacity: 0;
+    transform: translateY(-10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+`;
+
+const fadeOut = keyframes`
+  from {
+    opacity: 1;
+    transform: translateY(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateY(-10px);
+  }
+`;
+
+const DropdownContainer = styled.div`
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  width: 24px;
+  height: 24px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+`;
+
+const DropdownMenu = styled.div`
+  position: absolute;
+  top: 115%;
+  right: -21%;
+  background-color: white;
+  border: 1px solid #dfdfdf;
+  border-radius: 4px;
+  width: 66px;
+  z-index: 3;
+  font-size: 12px;
+  color: #242424;
+
+  &.dropdown-enter {
+    animation: ${fadeIn} 300ms forwards;
+  }
+  &.dropdown-exit {
+    animation: ${fadeOut} 300ms forwards;
+  }
+`;
+
+const DropdownItem = styled.div`
+  padding: 8px 12px;
+  cursor: pointer;
+
+  &:hover {
+    background-color: #dfdfdf;
+  }
+`;
+
+const Separator = styled.div`
+  height: 1px;
+  background-color: #dfdfdf;
+`;