Merge pull request #91 from boostcampwm2023/feat/87-diary-list-modal

[Feat] 일기 나열 페이지 UI 구현
boostcampwm2023 · Nov 22, 2023 · c9cf0d3 · c9cf0d3
2 parents c7746a9 + 58f6775
commit c9cf0d3
Show file tree

Hide file tree

Showing 9 changed files with 261 additions and 44 deletions.
diff --git a/FE/public/data/data.json b/FE/public/data/data.json
@@ -1,15 +1,32 @@
-{
-  "userId": "관리자",
-  "title": "테스트 제목",
-  "content": "테스트 내용",
-  "date": "9999-99-99",
-  "tags": ["테스트1", "테스트2"],
-  "positive": 10,
-  "neutral": 50,
-  "negative": 40,
-  "sentiment": "중립",
-  "coordinate-x": 0,
-  "coordinate-y": 0,
-  "coordinate-z": 0,
-  "shapeUuid": "테스트 별모양 UUID"
-}
+[
+  {
+    "userId": "관리자",
+    "title": "테스트 제목",
+    "content": "테스트 내용",
+    "date": "9999-99-99",
+    "tags": ["테스트1", "테스트2"],
+    "positive": 10,
+    "neutral": 50,
+    "negative": 40,
+    "sentiment": "중립",
+    "coordinate-x": 0,
+    "coordinate-y": 0,
+    "coordinate-z": 0,
+    "shapeUuid": "테스트 별모양 UUID"
+  },
+  {
+    "userId": "관리자",
+    "title": "테스트 제목2",
+    "content": "테스트 내용2",
+    "date": "9999-99-99",
+    "tags": ["테스트1", "테스트2"],
+    "positive": 10,
+    "neutral": 50,
+    "negative": 40,
+    "sentiment": "중립",
+    "coordinate-x": 0,
+    "coordinate-y": 0,
+    "coordinate-z": 0,
+    "shapeUuid": "테스트 별모양 UUID"
+  }
+]
diff --git a/FE/src/atoms/diaryAtom.js b/FE/src/atoms/diaryAtom.js
@@ -6,6 +6,7 @@ const diaryAtom = atom({
     isCreate: false,
     isRead: false,
     isDelete: false,
+    isList: false,
   },
 });
 

diff --git a/FE/src/atoms/headerAtom.js b/FE/src/atoms/headerAtom.js
@@ -5,6 +5,7 @@ const headerAtom = atom({
   default: {
     isLogin: false,
     isSignUp: false,
+    isSideBar: false,
   },
 });
 

diff --git a/FE/src/components/DiaryModal/DiaryDeleteModal.js b/FE/src/components/DiaryModal/DiaryDeleteModal.js
@@ -13,16 +13,25 @@ function DiaryDeleteModal() {
       <DeleteModalButtonWrapper>
         <DeleteModalButton
           onClick={() => {
-            setDiaryState({
-              isCreate: false,
-              isRead: true,
+            setDiaryState((prev) => ({
+              ...prev,
               isDelete: false,
-            });
+            }));
           }}
         >
           취소
         </DeleteModalButton>
-        <DeleteModalButton>확인</DeleteModalButton>
+        <DeleteModalButton
+          onClick={() => {
+            setDiaryState((prev) => ({
+              ...prev,
+              isRead: false,
+              isDelete: false,
+            }));
+          }}
+        >
+          확인
+        </DeleteModalButton>
       </DeleteModalButtonWrapper>
     </DeleteModalWrapper>
   );

diff --git a/FE/src/components/DiaryModal/DiaryListModal.js b/FE/src/components/DiaryModal/DiaryListModal.js
@@ -0,0 +1,161 @@
+import React, { useEffect } from "react";
+import { useQuery } from "react-query";
+import styled from "styled-components";
+
+function DiaryListModal() {
+  const [selectedDiary, setSelectedDiary] = React.useState(null);
+  const {
+    data: DiaryList,
+    // error,
+    isLoading,
+  } = useQuery("diaryList", () =>
+    fetch("http://localhost:3000/data/data.json").then((res) => res.json()),
+  );
+
+  useEffect(() => {
+    if (DiaryList) {
+      setSelectedDiary(DiaryList[0]);
+    }
+  }, [DiaryList]);
+
+  if (isLoading) return <div>로딩중...</div>;
+
+  return (
+    <DiaryListModalWrapper>
+      <DiaryListModalItem>
+        <DiaryListModalFilterWrapper>
+          <DiaryTitleListHeader>날짜</DiaryTitleListHeader>
+          <DiaryListModalFilterContent>필터</DiaryListModalFilterContent>
+        </DiaryListModalFilterWrapper>
+        <DiaryListModalFilterWrapper>
+          <DiaryTitleListHeader>감정</DiaryTitleListHeader>
+          <DiaryListModalFilterContent>필터</DiaryListModalFilterContent>
+        </DiaryListModalFilterWrapper>
+        <DiaryListModalFilterWrapper>
+          <DiaryTitleListHeader>모양</DiaryTitleListHeader>
+          <DiaryListModalFilterContent>필터</DiaryListModalFilterContent>
+        </DiaryListModalFilterWrapper>
+        <DiaryListModalFilterWrapper>
+          <DiaryTitleListHeader>태그</DiaryTitleListHeader>
+          <DiaryListModalFilterContent>필터</DiaryListModalFilterContent>
+        </DiaryListModalFilterWrapper>
+      </DiaryListModalItem>
+      <DiaryListModalItem>
+        <DiaryTitleListHeader>제목</DiaryTitleListHeader>
+        {DiaryList?.map((diary) => (
+          <DiaryTitleListItem
+            key={diary.id}
+            onClick={() => {
+              setSelectedDiary(diary);
+            }}
+          >
+            {diary.title}
+          </DiaryTitleListItem>
+        ))}
+      </DiaryListModalItem>
+      <DiaryListModalItem width='50%'>
+        <DiaryTitle>{selectedDiary?.title}</DiaryTitle>
+        <DiaryContent>{selectedDiary?.content}</DiaryContent>
+      </DiaryListModalItem>
+    </DiaryListModalWrapper>
+  );
+}
+
+const DiaryListModalWrapper = styled.div`
+  width: 95%;
+  height: 97.5%;
+  position: absolute;
+  top: 2.5%;
+  left: 2.5%;
+  z-index: 1001;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 1%;
+`;
+
+const DiaryListModalItem = styled.div`
+  width: ${(props) => props.width || "25%"};
+  height: 85%;
+  background-color: rgba(255, 255, 255, 0.5);
+  backdrop-filter: blur(10px);
+  border-radius: 1rem;
+
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  font-size: 1.3rem;
+  color: #ffffff;
+`;
+
+const DiaryListModalFilterWrapper = styled.div`
+  width: 100%;
+
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  font-size: 1.1rem;
+`;
+
+const DiaryListModalFilterContent = styled.div`
+  width: 100%;
+  height: 4.5rem;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;
+
+const DiaryTitleListHeader = styled.div`
+  width: 100%;
+  height: 3.5rem;
+  padding-left: 3rem;
+
+  display: flex;
+  align-items: center;
+
+  font-size: 1.1rem;
+`;
+
+const DiaryTitleListItem = styled.div`
+  width: 100%;
+  height: 4.5rem;
+  border-top: 1px solid #ffffff;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  cursor: pointer;
+
+  &:hover {
+    background-color: rgba(255, 255, 255, 0.2);
+  }
+`;
+
+const DiaryTitle = styled.div`
+  width: 100%;
+  height: 4.5rem;
+  padding-left: 3rem;
+
+  display: flex;
+  align-items: center;
+
+  font-size: 1.3rem;
+`;
+
+const DiaryContent = styled.div`
+  width: 100%;
+  height: 4.5rem;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  font-size: 1.1rem;
+`;
+
+export default DiaryListModal;
diff --git a/FE/src/components/DiaryModal/DiaryReadModal.js b/FE/src/components/DiaryModal/DiaryReadModal.js
@@ -71,11 +71,10 @@ function DiaryReadModal() {
         </DiaryButton>
         <DiaryButton
           onClick={() => {
-            setDiaryState({
-              isCreate: false,
-              isRead: true,
+            setDiaryState((prev) => ({
+              ...prev,
               isDelete: true,
-            });
+            }));
           }}
         >
           <img
@@ -88,21 +87,21 @@ function DiaryReadModal() {
           />
         </DiaryButton>
       </DiaryModalHeader>
-      <DiaryModalContent>{data.content}</DiaryModalContent>
+      <DiaryModalContent>{data[0].content}</DiaryModalContent>
       <DiaryModalTagBar>
         <DiaryModalTagName>태그</DiaryModalTagName>
         <DiaryModalTagList>
-          {data.tags.map((tag) => (
+          {data[0].tags.map((tag) => (
             <DiaryModalTag>{tag}</DiaryModalTag>
           ))}
         </DiaryModalTagList>
       </DiaryModalTagBar>
       <DiaryModalEmotionBar>
         <DiaryModalEmotionIndicator
           emotion={{
-            positive: data.positive,
-            neutral: data.neutral,
-            negative: data.negative,
+            positive: data[0].positive,
+            neutral: data[0].neutral,
+            negative: data[0].negative,
           }}
         />
         <DiaryModalIcon>

diff --git a/FE/src/components/Header/Header.js b/FE/src/components/Header/Header.js
@@ -25,20 +25,22 @@ function Header() {
           <LoginBar>
             <LoginItem
               onClick={() => {
-                setHeaderState({
+                setHeaderState((prev) => ({
+                  ...prev,
                   isLogin: false,
                   isSignUp: true,
-                });
+                }));
               }}
             >
               회원가입
             </LoginItem>
             <LoginItem
               onClick={() => {
-                setHeaderState({
+                setHeaderState((prev) => ({
+                  ...prev,
                   isLogin: true,
                   isSignUp: false,
-                });
+                }));
               }}
             >
               로그인
@@ -49,11 +51,10 @@ function Header() {
             src={sideBarImg}
             alt='side-bar'
             onClick={() => {
-              setHeaderState({
-                isLogin: false,
-                isSignUp: false,
+              setHeaderState((prev) => ({
+                ...prev,
                 isSideBar: !HeaderState.isSideBar,
-              });
+              }));
             }}
           />
         )}

diff --git a/FE/src/components/SideBar/SideBar.js b/FE/src/components/SideBar/SideBar.js
@@ -1,20 +1,50 @@
 import React from "react";
 import styled from "styled-components";
 import { useSetRecoilState } from "recoil";
+import diaryAtom from "../../atoms/diaryAtom";
 import headerAtom from "../../atoms/headerAtom";
 import userAtom from "../../atoms/userAtom";
 import boostcampImg from "../../assets/boostcamp.png";
 
 function SideBar() {
+  const setDiaryState = useSetRecoilState(diaryAtom);
   const setHeaderState = useSetRecoilState(headerAtom);
   const setUserState = useSetRecoilState(userAtom);
 
   return (
     <>
       <SideBarWrapper>
         <SideBarContentWrapper>
-          <SideBarContent>일기 쓰기</SideBarContent>
-          <SideBarContent>일기 목록</SideBarContent>
+          <SideBarContent
+            onClick={() => {
+              setHeaderState((prev) => ({
+                ...prev,
+                isSideBar: false,
+              }));
+              setDiaryState((prev) => ({
+                ...prev,
+                isList: false,
+              }));
+            }}
+          >
+            일기 쓰기
+          </SideBarContent>
+          <SideBarContent
+            onClick={() => {
+              setHeaderState((prev) => ({
+                ...prev,
+                isSideBar: false,
+              }));
+              setDiaryState({
+                isCreate: false,
+                isRead: false,
+                isDelete: false,
+                isList: true,
+              });
+            }}
+          >
+            일기 목록
+          </SideBarContent>
           <SideBarContent>일기 분석</SideBarContent>
           <SideBarContent>환경 설정</SideBarContent>
           <SideBarContent>별숲 상점</SideBarContent>