Merge pull request #277 from boostcampwm2023/fix/header-click-event

boostcampwm2023 · Dec 19, 2023 · f59013b · f59013b
2 parents 4525cc2 + 6f71218
commit f59013b
Show file tree

Hide file tree

Showing 7 changed files with 61 additions and 99 deletions.
diff --git a/FE/src/components/DiaryModal/DiaryCreateModal.js b/FE/src/components/DiaryModal/DiaryCreateModal.js
@@ -1,5 +1,3 @@
-/* eslint-disable */
-
 import React, { useEffect, useState } from "react";
 import { useRecoilValue, useRecoilState } from "recoil";
 import { useMutation } from "react-query";
@@ -244,13 +242,6 @@ const ShapeSelectTextWrapper = styled.div`
   gap: 1rem;
 `;
 
-const ShapeSelectText = styled.div`
-  font-size: 1rem;
-  color: #e6e6e6;
-
-  cursor: pointer;
-`;
-
 const ShapeSelectItemWrapper = styled.div`
   width: 100%;
   height: 5rem;

diff --git a/FE/src/components/DiaryModal/DiaryListModal.js b/FE/src/components/DiaryModal/DiaryListModal.js
@@ -1,5 +1,3 @@
-/* eslint-disable */
-
 import React, { useEffect, useLayoutEffect, useState } from "react";
 import styled from "styled-components";
 import { useRecoilState, useRecoilValue, useSetRecoilState } from "recoil";
@@ -44,9 +42,9 @@ function DiaryListModal() {
       setDiaryState((prev) => ({
         ...prev,
         diaryUuid: selectedDiary?.uuid,
-        diaryPoint: `${selectedDiary?.coordinate.x * 100000},${
-          selectedDiary?.coordinate.y * 100000
-        },${selectedDiary?.coordinate.z * 100000}`,
+        diaryPoint: `${selectedDiary.coordinate.x * 100000},${
+          selectedDiary.coordinate.y * 100000
+        },${selectedDiary.coordinate.z * 100000}`,
       }));
     }
   }, [selectedDiary]);
@@ -76,19 +74,13 @@ function DiaryListModal() {
       );
     };
 
-    const isShapeMatch = (diaryShapeUuid) => {
-      return (
-        filterState.shape.length === 0 ||
-        filterState.shape.includes(diaryShapeUuid)
-      );
-    };
+    const isShapeMatch = (diaryShapeUuid) =>
+      filterState.shape.length === 0 ||
+      filterState.shape.includes(diaryShapeUuid);
 
-    const areTagsMatch = (diaryTags) => {
-      return (
-        filterState.tag.length === 0 ||
-        filterState.tag.every((tag) => diaryTags.includes(tag))
-      );
-    };
+    const areTagsMatch = (diaryTags) =>
+      filterState.tag.length === 0 ||
+      filterState.tag.every((tag) => diaryTags.includes(tag));
 
     const filteredList = diaryState.diaryList.filter((diary) => {
       const isDateValid = isDateInRange(diary.date);
@@ -145,7 +137,7 @@ function DiaryListModal() {
               startDate={filterState.date.start}
               endDate={filterState.date.end}
               locale={ko}
-              isClearable={true}
+              isClearable
               placeholderText='시작 날짜'
             />
             <span>~</span>
@@ -166,7 +158,7 @@ function DiaryListModal() {
               endDate={filterState.date.end}
               minDate={filterState.date.start}
               locale={ko}
-              isClearable={true}
+              isClearable
               placeholderText='종료 날짜'
             />
           </DiaryListModalFilterContent>
@@ -203,12 +195,11 @@ function DiaryListModal() {
                           ...prev,
                           shape: updatedShape,
                         };
-                      } else {
-                        return {
-                          ...prev,
-                          shape: [...prev.shape, shape.uuid],
-                        };
                       }
+                      return {
+                        ...prev,
+                        shape: [...prev.shape, shape.uuid],
+                      };
                     });
                   }}
                   selected={filterState.shape.includes(shape.uuid)}
@@ -324,13 +315,11 @@ function DiaryListModal() {
             src={zoomIn}
             alt='zoom-in'
             onClick={() => {
-              setDiaryState((prev) => {
-                return {
-                  ...prev,
-                  isRead: true,
-                  isList: false,
-                };
-              });
+              setDiaryState((prev) => ({
+                ...prev,
+                isRead: true,
+                isList: false,
+              }));
               setLastPageState(["list"]);
             }}
           />

diff --git a/FE/src/components/DiaryModal/DiaryUpdateModal.js b/FE/src/components/DiaryModal/DiaryUpdateModal.js
@@ -1,5 +1,3 @@
-/* eslint-disable */
-
 import React, { useState, useEffect, useLayoutEffect, useRef } from "react";
 import { useRecoilState, useRecoilValue } from "recoil";
 import { useMutation, useQuery } from "react-query";
@@ -116,7 +114,7 @@ function DiaryUpdateModal(props) {
             accessToken,
           }));
           updateDiary({
-            diaryData: diaryData,
+            diaryData,
             accessToken,
           });
         },
@@ -143,8 +141,12 @@ function DiaryUpdateModal(props) {
         date: new Date(originData.date),
         tags: originData.tags,
       });
-      titleRef.current && (titleRef.current.value = originData.title);
-      contentRef.current && (contentRef.current.value = originData.content);
+      if (titleRef.current) {
+        titleRef.current.value = originData.title;
+      }
+      if (contentRef.current) {
+        contentRef.current.value = originData.content;
+      }
     }
   }, [originData]);
 
@@ -310,13 +312,6 @@ const ShapeSelectTextWrapper = styled.div`
   gap: 1rem;
 `;
 
-const ShapeSelectText = styled.div`
-  font-size: 1rem;
-  color: #e6e6e6;
-
-  cursor: pointer;
-`;
-
 const ShapeSelectItemWrapper = styled.div`
   width: 100%;
   height: 5rem;

diff --git a/FE/src/components/Header/Header.js b/FE/src/components/Header/Header.js
@@ -13,15 +13,18 @@ function Header() {
 
   return (
     <>
-      <HeaderWrapper>
+      <HeaderWrapper position='left'>
         <HeaderLogo
           src={logo}
           onClick={() => {
             window.location.href = "/";
           }}
           alt='logo'
         />
-        {!userState.isLogin ? (
+      </HeaderWrapper>
+
+      {!userState.isLogin ? (
+        <HeaderWrapper position='right'>
           <LoginBar>
             <LoginItem
               onClick={() => {
@@ -46,7 +49,10 @@ function Header() {
               로그인
             </LoginItem>
           </LoginBar>
-        ) : (
+        </HeaderWrapper>
+      ) : (
+        <HeaderWrapper position='right'>
+          <NickName>{userState.nickname}님의 별숲</NickName>
           <SideBarImg
             src={sideBarImg}
             alt='side-bar'
@@ -57,20 +63,21 @@ function Header() {
               }));
             }}
           />
-        )}
-      </HeaderWrapper>
+        </HeaderWrapper>
+      )}
+
       {HeaderState.isSideBar ? <SideBar /> : null}
     </>
   );
 }
 
 const HeaderWrapper = styled.header`
-  width: 100%;
   height: 5rem;
   z-index: 1004;
 
   position: absolute;
   top: 0;
+  ${(props) => (props.position === "left" ? "left: 0;" : "right: 0;")}
 
   display: flex;
   justify-content: space-between;
@@ -113,4 +120,12 @@ const SideBarImg = styled.img`
   cursor: pointer;
 `;
 
+const NickName = styled.div`
+  flex-shrink: 0;
+  font-size: 1.2rem;
+  font-weight: thin;
+  color: #fff;
+  margin-right: 2vw;
+`;
+
 export default Header;
diff --git a/FE/src/components/SideBar/SideBar.js b/FE/src/components/SideBar/SideBar.js
@@ -1,5 +1,3 @@
-/* eslint-disable max-len */
-
 import React from "react";
 import styled from "styled-components";
 import { useSetRecoilState, useRecoilState } from "recoil";
@@ -104,7 +102,8 @@ function SideBar() {
       text: "도움말",
       onClick: () => {
         window.open(
-          "https://byeolsoop.notion.site/551e1070f73a405badb8aeb178dac192?pvs=4",
+          "https://byeolsoop.notion.site/" +
+            "551e1070f73a405badb8aeb178dac192?pvs=4",
           "_blank",
         );
       },

diff --git a/FE/src/pages/MainPage.js b/FE/src/pages/MainPage.js
@@ -1,9 +1,7 @@
-/* eslint-disable */
-
 import React, { useEffect } from "react";
 import { useQuery } from "react-query";
 import styled from "styled-components";
-import { useRecoilState, useRecoilValue, useSetRecoilState } from "recoil";
+import { useRecoilState, useSetRecoilState } from "recoil";
 import diaryAtom from "../atoms/diaryAtom";
 import shapeAtom from "../atoms/shapeAtom";
 import userAtom from "../atoms/userAtom";
@@ -28,8 +26,8 @@ function MainPage() {
 
   const { refetch } = useQuery(
     ["diaryList", userState.accessToken],
-    async () => {
-      return fetch(`${process.env.REACT_APP_BACKEND_URL}/diaries`, {
+    async () =>
+      fetch(`${process.env.REACT_APP_BACKEND_URL}/diaries`, {
         method: "GET",
         headers: {
           "Content-Type": "application/json",
@@ -55,14 +53,14 @@ function MainPage() {
             }));
           },
         }),
-      );
-    },
+      ),
     {
       onSuccess: (data) => {
         data.forEach((diary) => {
-          diary.coordinate.x /= 100000;
-          diary.coordinate.y /= 100000;
-          diary.coordinate.z /= 100000;
+          const { coordinate } = diary;
+          coordinate.x /= 100000;
+          coordinate.y /= 100000;
+          coordinate.z /= 100000;
         });
 
         setDiaryState((prev) => ({ ...prev, diaryList: data }));
@@ -193,9 +191,6 @@ function MainPage() {
     <div>
       {loaded ? (
         <MainPageWrapper>
-          <NickNameWrapper>
-            <NickName>{userState.nickname}님의 별숲</NickName>
-          </NickNameWrapper>
           <StarPage refetch={refetch} pointsRefetch={pointsRefetch} />
           {diaryState.isCreate ? <DiaryCreateModal refetch={refetch} /> : null}
           {diaryState.isRead ? (
@@ -222,25 +217,4 @@ const MainPageWrapper = styled.div`
   overflow: hidden;
 `;
 
-const NickNameWrapper = styled.div`
-  width: 100%;
-  height: 5rem;
-  display: flex;
-  justify-content: flex-end;
-  align-items: center;
-
-  position: absolute;
-  top: 0;
-  right: 5rem;
-
-  z-index: 1001;
-`;
-
-const NickName = styled.div`
-  font-size: 1.2rem;
-  font-weight: thin;
-  color: #fff;
-  margin-right: 2vw;
-`;
-
 export default MainPage;
diff --git a/FE/src/pages/StarPage.js b/FE/src/pages/StarPage.js
@@ -1,11 +1,10 @@
 /* eslint-disable react/no-unknown-property */
-/* eslint-disable */
 
 import React, { useState, useEffect } from "react";
 import { useMutation } from "react-query";
 import { useRecoilState, useRecoilValue, useSetRecoilState } from "recoil";
 import styled from "styled-components";
-import dayjs, { Dayjs } from "dayjs";
+import dayjs from "dayjs";
 import { Canvas, useThree } from "@react-three/fiber";
 import { OrbitControls, useFBX } from "@react-three/drei";
 import * as THREE from "three";
@@ -211,7 +210,7 @@ function StarView({ refetch, pointsRefetch, setHoverData }) {
       ...prev,
       isLoading: true,
     }));
-    const diaryData = data.diaryData;
+    const { diaryData } = data;
     return fetch(`${process.env.REACT_APP_BACKEND_URL}/diaries`, {
       method: "PUT",
       headers: {
@@ -506,7 +505,7 @@ function Star(props) {
   }
 
   async function deleteLineFn(data) {
-    const id = data.id;
+    const { id } = data;
     return fetch(`${process.env.REACT_APP_BACKEND_URL}/lines/${data.id}`, {
       method: "DELETE",
       headers: {