feat: 햄버거바 옆에 닉네임 출력하도록 변경, 사이드바 요소 네이밍 변경

boostcampwm2023 · Dec 6, 2023 · a5bee8f · a5bee8f
1 parent 5d100c4
commit a5bee8f
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 39 deletions.
diff --git a/FE/src/components/SideBar/SideBar.js b/FE/src/components/SideBar/SideBar.js
@@ -1,6 +1,6 @@
 import React from "react";
 import styled from "styled-components";
-import { useSetRecoilState, useRecoilState } from "recoil";
+import { useSetRecoilState } from "recoil";
 import diaryAtom from "../../atoms/diaryAtom";
 import headerAtom from "../../atoms/headerAtom";
 import userAtom from "../../atoms/userAtom";
@@ -9,13 +9,12 @@ import boostcampImg from "../../assets/boostcamp.png";
 function SideBar() {
   const setDiaryState = useSetRecoilState(diaryAtom);
   const setHeaderState = useSetRecoilState(headerAtom);
-  const [userState, setUserState] = useRecoilState(userAtom);
+  const setUserState = useSetRecoilState(userAtom);
 
   return (
     <AnimationWrapper>
       <SideBarWrapper>
         <SideBarContentWrapper>
-          <SideBarNickname>{userState.nickname}</SideBarNickname>
           <SideBarContent
             onClick={() => {
               setHeaderState((prev) => ({
@@ -37,7 +36,7 @@ function SideBar() {
               });
             }}
           >
-            일기 쓰기
+            나의 별숲
           </SideBarContent>
           <SideBarContent
             onClick={() => {
@@ -69,7 +68,7 @@ function SideBar() {
               });
             }}
           >
-            일기 목록
+            별숲 목록
           </SideBarContent>
           <SideBarContent
             onClick={() => {
@@ -101,10 +100,11 @@ function SideBar() {
               });
             }}
           >
-            일기 분석
+            별숲 현황
           </SideBarContent>
-          <SideBarContent>환경 설정</SideBarContent>
+
           <SideBarContent>별숲 상점</SideBarContent>
+          <SideBarContent>환경 설정</SideBarContent>
         </SideBarContentWrapper>
         <LogOutButton
           onClick={() => {
@@ -201,21 +201,6 @@ const SideBarContentWrapper = styled.div`
   cursor: pointer;
 `;
 
-const SideBarNickname = styled.div`
-  width: 100%;
-  height: 4rem;
-  padding-left: 2rem;
-  display: flex;
-  justify-content: flex-start;
-  align-items: center;
-
-  font-size: 1.2rem;
-  color: #ffffff;
-  box-sizing: border-box;
-
-  cursor: pointer;
-`;
-
 const SideBarContent = styled.div`
   width: 100%;
   height: 4rem;
@@ -251,6 +236,7 @@ const LogOutButton = styled.button`
   justify-content: center;
   align-items: flex-end;
 
+  font-family: "Pretendard-Medium";
   font-size: 1.2rem;
   color: #aeaeae;
   box-sizing: border-box;

diff --git a/FE/src/pages/MainPage.js b/FE/src/pages/MainPage.js
@@ -126,18 +126,9 @@ function MainPage() {
     <div>
       {loaded ? (
         <>
-          <MainPageWrapper
-            onClick={(e) => {
-              e.preventDefault();
-              setDiaryState((prev) => ({
-                ...prev,
-                isCreate: true,
-                isRead: false,
-                isUpdate: false,
-                isList: false,
-              }));
-            }}
-          />
+          <NickNameWrapper>
+            <NickName>{userState.nickname}님의 별숲</NickName>
+          </NickNameWrapper>
           <StarPage />
           {diaryState.isCreate ? <DiaryCreateModal refetch={refetch} /> : null}
           {diaryState.isRead ? <DiaryReadModal refetch={refetch} /> : null}
@@ -151,13 +142,25 @@ function MainPage() {
   );
 }
 
-// TODO: 배경 이미지 제거하고 영상으로 대체할 것
-const MainPageWrapper = styled.div`
-  height: 100vh;
-
+const NickNameWrapper = styled.div`
+  width: 100%;
+  height: 5rem;
   display: flex;
-  justify-content: center;
+  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;