From 6f71218738d3b4c4a681b676e662140b5ec7cfd9 Mon Sep 17 00:00:00 2001
From: dmson1218 <dmson1218@naver.com>
Date: Tue, 19 Dec 2023 02:09:09 +0900
Subject: [PATCH] =?UTF-8?q?fix:=20=ED=97=A4=EB=8D=94=20css=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 헤더 부분 css 수정을 통해 중간 공백 제거
- 기존 공백 제거로 인해 상단 부 클릭 시에도 별자리 뷰 이벤트 동작
---
 FE/src/components/Header/Header.js | 27 +++++++++++++++++++++------
 FE/src/pages/MainPage.js           | 24 ------------------------
 2 files changed, 21 insertions(+), 30 deletions(-)

diff --git a/FE/src/components/Header/Header.js b/FE/src/components/Header/Header.js
index 4007a04..0b97687 100644
--- a/FE/src/components/Header/Header.js
+++ b/FE/src/components/Header/Header.js
@@ -13,7 +13,7 @@ function Header() {
 
   return (
     <>
-      <HeaderWrapper>
+      <HeaderWrapper position='left'>
         <HeaderLogo
           src={logo}
           onClick={() => {
@@ -21,7 +21,10 @@ function Header() {
           }}
           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/pages/MainPage.js b/FE/src/pages/MainPage.js
index bec9826..b034cb5 100644
--- a/FE/src/pages/MainPage.js
+++ b/FE/src/pages/MainPage.js
@@ -191,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 ? (
@@ -220,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;