Merge pull request #229 from boostcampwm2023/feat/225-nickname-sidebar

[Feat] 닉네임 받아서 로컬에 저장 및 메인페이지에 닉네임 출력
boostcampwm2023 · Dec 6, 2023 · 047a6aa · 047a6aa
2 parents e757ca5 + 8f3626c
commit 047a6aa
Show file tree

Hide file tree

Showing 7 changed files with 41 additions and 22 deletions.
diff --git a/FE/src/App.js b/FE/src/App.js
@@ -44,9 +44,11 @@ function App() {
 
   useLayoutEffect(() => {
     let accessToken = localStorage.getItem("accessToken");
+    let nickname = localStorage.getItem("nickname");
     accessToken = accessToken || sessionStorage.getItem("accessToken");
+    nickname = nickname || sessionStorage.getItem("nickname");
     if (accessToken) {
-      setUserState({ ...userState, isLogin: true, accessToken });
+      setUserState({ ...userState, isLogin: true, accessToken, nickname });
     }
   }, []);
 

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

diff --git a/FE/src/components/DiaryModal/DiaryCreateModal.js b/FE/src/components/DiaryModal/DiaryCreateModal.js
@@ -81,7 +81,9 @@ function DiaryCreateModal(props) {
         if (res.status === 403) {
           alert("로그인이 만료되었습니다. 다시 로그인해주세요.");
           localStorage.removeItem("accessToken");
+          localStorage.removeItem("nickname");
           sessionStorage.removeItem("accessToken");
+          sessionStorage.removeItem("nickname");
           window.location.href = "/";
         }
         throw new Error("error");

diff --git a/FE/src/components/DiaryModal/DiaryDeleteModal.js b/FE/src/components/DiaryModal/DiaryDeleteModal.js
@@ -27,7 +27,9 @@ function DiaryDeleteModal(props) {
         if (res.status === 403) {
           alert("로그인이 만료되었습니다. 다시 로그인해주세요.");
           localStorage.removeItem("accessToken");
+          localStorage.removeItem("nickname");
           sessionStorage.removeItem("accessToken");
+          sessionStorage.removeItem("nickname");
           window.location.href = "/";
         }
         return null;

diff --git a/FE/src/components/LoginModal/LoginModal.js b/FE/src/components/LoginModal/LoginModal.js
@@ -40,11 +40,14 @@ function LoginModal() {
             ...prev,
             isLogin: true,
             accessToken: data.accessToken,
+            nickname: data.nickname,
           }));
           if (keepLogin) {
             localStorage.setItem("accessToken", data.accessToken);
+            localStorage.setItem("nickname", data.nickname);
           } else {
             sessionStorage.setItem("accessToken", data.accessToken);
+            sessionStorage.setItem("nickname", data.nickname);
           }
         } else {
           errorRef.current.innerText = data.message;

diff --git a/FE/src/components/SideBar/SideBar.js b/FE/src/components/SideBar/SideBar.js
@@ -36,7 +36,7 @@ function SideBar() {
               });
             }}
           >
-            일기 쓰기
+            나의 별숲
           </SideBarContent>
           <SideBarContent
             onClick={() => {
@@ -68,7 +68,7 @@ function SideBar() {
               });
             }}
           >
-            일기 목록
+            별숲 목록
           </SideBarContent>
           <SideBarContent
             onClick={() => {
@@ -100,10 +100,11 @@ function SideBar() {
               });
             }}
           >
-            일기 분석
+            별숲 현황
           </SideBarContent>
-          <SideBarContent>환경 설정</SideBarContent>
+
           <SideBarContent>별숲 상점</SideBarContent>
+          <SideBarContent>환경 설정</SideBarContent>
         </SideBarContentWrapper>
         <LogOutButton
           onClick={() => {
@@ -117,7 +118,9 @@ function SideBar() {
               accessToken: "",
             }));
             localStorage.removeItem("accessToken");
+            localStorage.removeItem("nickname");
             sessionStorage.removeItem("accessToken");
+            sessionStorage.removeItem("nickname");
           }}
         >
           로그아웃
@@ -233,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
@@ -40,7 +40,9 @@ function MainPage() {
           alert("로그인이 만료되었습니다. 다시 로그인해주세요.");
 
           localStorage.removeItem("accessToken");
+          localStorage.removeItem("nickname");
           sessionStorage.removeItem("accessToken");
+          sessionStorage.removeItem("nickname");
           window.removeEventListener("beforeunload", preventBeforeUnload);
           window.location.href = "/";
         }
@@ -124,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}
@@ -149,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;