feat: [LINKER-46] 헤더 구조변경 (#19)

packages/lds/src/Tabs/Tabs.css.ts

@@ -7,21 +7,23 @@ export const tabs = style({
 });
 
 export const tapList = style({
+  position: 'relative',
   display: 'flex',
-  justifyContent: 'space-between',
 });
 
 export const tapItem = style({
-  width: '94px',
-  height: '48px',
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  flex: 1,
 });
 
 export const link = style({
   display: 'flex',
   justifyContent: 'center',
   alignItems: 'center',
-  width: '100%',
-  height: '100%',
+  width: '94px',
+  height: '48px',
   fontSize: '1.6rem',
   color: 'rgba(255, 255, 255, 0.3)',
   fontWeight: 'bold',

packages/lds/src/Tabs/Tabs.tsx

@@ -36,11 +36,9 @@ function Tabs({ tabInfos }: TabsProps) {
       const { textSpan } = matchedRoute
 
       if (textSpan) {
-        const { width, left } = textSpan.getBoundingClientRect()
-
         setActiveTabStyle({
-          width: `${width}px`,
-          left: `${left}px`,
+          width: `${textSpan.offsetWidth}px`,
+          left: `${textSpan.offsetLeft}px`,
         })
       }
     }
@@ -53,7 +51,7 @@ function Tabs({ tabInfos }: TabsProps) {
           <li className={tapItem} key={tabInfo.href}>
             <Link
               href={tabInfo.href}
-              className={clsx({ [link]: true, [activeLink]: pathname === tabInfo.href })}
+              className={clsx(link, pathname === tabInfo.href && activeLink)}
             >
               <span ref={ref => tabInfo.textSpan = ref}>{tabInfo.text}</span>
             </Link>

services/web/src/app/friend/layout.css.ts

@@ -0,0 +1,8 @@
+import { style } from '@vanilla-extract/css';
+
+export const section = style({
+  maxWidth: '720px',
+  padding: '0 16px',
+  margin: '0 auto',
+  boxSizing: 'content-box',
+});

services/web/src/app/friend/layout.tsx

@@ -1,10 +1,14 @@
-import { FriendHeaderContent } from '@/features/HeaderContent';
+import { FriendHeader } from '@features/Header';
+
+import { section } from './layout.css'
 
 function FriendLayout({ children }: { children: React.ReactNode }) {
   return (
     <>
-      <FriendHeaderContent />
-      {children}
+      <FriendHeader />
+      <section className={section}>
+        {children}
+      </section>
     </>
   )
 }

services/web/src/app/me/layout.css.ts

@@ -0,0 +1,8 @@
+import { style } from '@vanilla-extract/css';
+
+export const section = style({
+  maxWidth: '720px',
+  padding: '0 16px',
+  margin: '0 auto',
+  boxSizing: 'content-box',
+});

services/web/src/app/me/layout.tsx

@@ -1,16 +1,16 @@
-import { MeHeaderContent } from '@/features/HeaderContent';
-import { Logo } from '@/features/Logo'
+import { MyHeader } from '@features/Header';
+
+import { section } from './layout.css'
 
 function MeLayout({ children }: { children: React.ReactNode }) {
   return (
     <>
-      <header>
-        <Logo />
-      </header>
-      <MeHeaderContent />
-      {children}
+      <MyHeader />
+      <section className={section}>
+        {children}
+      </section>
     </>
-  )
+  );
 }
 
-export default MeLayout
+export default MeLayout;

services/web/src/features/Header/FriendHeader.css.ts

@@ -0,0 +1,19 @@
+import { style } from '@vanilla-extract/css';
+
+export const minimizeStyle = style({});
+
+export const header = style({
+  background: 'linear-gradient(290.64deg, #FF8058 6.56%, #FB7A93 100.28%)',
+
+  selectors: {
+    [`&.${minimizeStyle}`]: {
+      position: 'sticky',
+      top: 0,
+    },
+  },
+});
+
+export const headerContent = style({
+  maxWidth: '720px',
+  margin: '0 auto',
+});

services/web/src/features/HeaderContent/FriendHeaderContent.tsx → services/web/src/features/Header/FriendHeader.tsx

@@ -5,7 +5,7 @@ import { clsx } from 'clsx';
 import { useParams } from 'next/navigation';
 import { useRef } from 'react';
 
-import { contentWrapper, fixedHeader } from './FriendHeaderContent.css';
+import { minimizeStyle, header, headerContent } from './FriendHeader.css';
 import { FriendProfile } from './components/FriendProfile';
 import useMinimize from './hooks/useMinimize';
 
@@ -26,10 +26,12 @@ function FriendHeaderContent() {
   });
 
   return (
-    <div className={clsx(contentWrapper, isMinimize && fixedHeader)}>
-      <FriendProfile isMinimize={isMinimize} />
-      <Tabs tabInfos={tabInfos} />
-    </div>
+    <header className={clsx(header, isMinimize && minimizeStyle)}>
+      <div className={headerContent}>
+        <FriendProfile isMinimize={isMinimize} />
+        <Tabs tabInfos={tabInfos} />
+      </div>
+    </header>
   );
 }
 

services/web/src/features/Header/MyHeader.css.ts

@@ -0,0 +1,19 @@
+import { style } from '@vanilla-extract/css';
+
+export const minimizeStyle = style({});
+
+export const header = style({
+  background: 'linear-gradient(270deg, #0989FF 0%, #713EFF 98.13%)',
+
+  selectors: {
+    [`&.${minimizeStyle}`]: {
+      position: 'sticky',
+      top: 0,
+    },
+  },
+});
+
+export const headerContent = style({
+  maxWidth: '720px',
+  margin: '0 auto',
+});

services/web/src/features/HeaderContent/MeHeaderContent.tsx → services/web/src/features/Header/MyHeader.tsx

@@ -4,8 +4,9 @@ import { Tabs, TabInfo } from '@linker/lds';
 import { clsx } from 'clsx';
 import { useRef } from 'react';
 
-import { contentWrapper, fixedHeader } from './MeHeaderContent.css';
-import { MeProfile } from './components/MeProfile';
+import { minimizeStyle, header, headerContent } from './MyHeader.css';
+import { Logo } from './components/Logo'
+import { MyProfile } from './components/MyProfile';
 import useMinimize from './hooks/useMinimize';
 
 const MINIMIZE_THRESHOLD = 150;
@@ -24,10 +25,13 @@ function MeHeaderContent() {
   });
 
   return (
-    <div className={clsx(contentWrapper, isMinimize && fixedHeader)}>
-      <MeProfile isMinimize={isMinimize} />
-      <Tabs tabInfos={tabInfos} />
-    </div>
+    <header className={clsx(header, isMinimize && minimizeStyle)}>
+      <div className={headerContent}>
+        {!isMinimize && <Logo />}
+        <MyProfile isMinimize={isMinimize} />
+        <Tabs tabInfos={tabInfos} />
+      </div>
+    </header>
   );
 }
 

services/web/src/features/Logo/Logo.css.ts → services/web/src/features/Header/components/Logo/Logo.css.ts

@@ -2,15 +2,15 @@ import { style } from '@vanilla-extract/css';
 
 export const wrapper = style({
   width: '100%',
-  padding: '16px 20px',
-  backgroundColor: 'black',
+  padding: '14px 20px',
   boxSizing: 'border-box',
 });
 
 export const logo = style({
   margin: 0,
   fontSize: '2rem',
   fontWeight: 'bold',
+  lineHeight: '2.4rem',
   fontStyle: 'italic',
   color: '#ffffff',
 });

services/web/src/features/Logo/Logo.tsx → services/web/src/features/Header/components/Logo/Logo.tsx

@@ -2,9 +2,9 @@ import { wrapper, logo } from './Logo.css'
 
 function Logo() {
   return (
-    <div className={wrapper}>
+    <main className={wrapper}>
       <h1 className={logo}>LINKER</h1>
-    </div>
+    </main>
   )
 }
 

services/web/src/features/HeaderContent/components/MeProfile/MeProfile.css.ts → services/web/src/features/Header/components/MyProfile/MyProfile.css.ts

@@ -5,11 +5,11 @@ export const minimizeStyle = style({});
 export const profileWrapper = style({
   display: 'flex',
   alignItems: 'center',
-  padding: '1.4rem 2.3rem 2.4rem',
+  padding: '2rem',
 
   selectors: {
     [`&.${minimizeStyle}`]: {
-      padding: '1.2rem 2.3rem 1.4rem',
+      padding: '1.2rem 2rem',
     },
   },
 });
@@ -18,33 +18,26 @@ export const profileImageWrapper = style({
   display: 'flex',
   justifyContent: 'center',
   alignItems: 'center',
+  overflow: 'hidden',
   width: '7.2rem',
   height: '7.2rem',
   boxSizing: 'content-box',
-  border: '3px solid #49a15f',
-  borderRadius: '50%',
+  border: '2px solid #FFFFFF',
+  borderRadius: '42%',
 
   selectors: {
     [`&.${minimizeStyle}`]: {
-      width: '3.4rem',
-      height: '3.4rem',
+      width: '4rem',
+      height: '4rem',
     },
   },
 });
 
 export const profileImage = style({
-  width: '6.7rem',
-  height: '6.7rem',
+  width: '100%',
+  height: '100%',
   objectFit: 'cover',
   objectPosition: 'top',
-  borderRadius: '50%',
-
-  selectors: {
-    [`&.${minimizeStyle}`]: {
-      width: '3rem',
-      height: '3rem',
-    },
-  },
 });
 
 export const profileInfo = style({

services/web/src/features/HeaderContent/components/MeProfile/MeProfile.tsx → services/web/src/features/Header/components/MyProfile/MyProfile.tsx

@@ -11,18 +11,18 @@ import {
   name,
   job,
   tag,
-} from './MeProfile.css'
+} from './MyProfile.css'
 
 interface ProfileProps {
   isMinimize: boolean
 }
 
-function MeProfile({ isMinimize }: ProfileProps) {
+function MyProfile({ isMinimize }: ProfileProps) {
   return (
     <section className={clsx(profileWrapper, isMinimize && minimizeStyle)}>
       <article className={clsx(profileImageWrapper, isMinimize && minimizeStyle)}>
         <img
-          className={clsx(profileImage, isMinimize && minimizeStyle)}
+          className={clsx(profileImage)}
           src="https://thumb.mtstarnews.com/06/2022/02/2022022517263696411_3.jpg"
           alt="main profile"
         />
@@ -36,4 +36,4 @@ function MeProfile({ isMinimize }: ProfileProps) {
   );
 }
 
-export default MeProfile;
+export default MyProfile;

services/web/src/features/Header/components/MyProfile/index.ts

@@ -0,0 +1 @@
+export { default as MyProfile } from './MyProfile';

services/web/src/features/Header/index.ts

@@ -0,0 +1,2 @@
+export { default as MyHeader } from './MyHeader';
+export { default as FriendHeader } from './FriendHeader';