fix: 헤더 css 수정

- 헤더 부분 css 수정을 통해 중간 공백 제거 - 기존 공백 제거로 인해 상단 부 클릭 시에도 별자리 뷰 이벤트 동작
boostcampwm2023 · Dec 18, 2023 · 6f71218 · 6f71218
1 parent 08149a4
commit 6f71218
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 30 deletions.
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/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;