feat : 모바일 상단바 디자인 개선 (#317)

Co-authored-by: 9yujin <[email protected]>
Gosrock · Nov 10, 2024 · 522819f · 522819f
1 parent 7450e68
commit 522819f
Show file tree

Hide file tree

Showing 15 changed files with 136 additions and 206 deletions.
diff --git a/apps/ticket/next.config.js b/apps/ticket/next.config.js
@@ -32,7 +32,7 @@ module.exports = withBundleAnalyzer(
       },
       images: {
         domains: ['asset.dudoong.com'],
-        minimumCacheTTL: 86400,
+        minimumCacheTTL: 5184000,
       },
       rewrites: async () => [
         {

diff --git a/apps/ticket/src/components/home/Landing/ImpressionStartSetHeader.tsx b/apps/ticket/src/components/home/Landing/ImpressionStartSetHeader.tsx
diff --git a/apps/ticket/src/components/home/Landing/feature/Feature.PC.tsx b/apps/ticket/src/components/home/Landing/feature/Feature.PC.tsx
@@ -1,14 +1,11 @@
 import FeaturePCImage from '@assets/landing-renewal/feature-pc.svg';
 import { FlexBox, Spacing } from '@dudoong/ui';
-import { ImpressionStartSetHeader } from '../ImpressionStartSetHeader';
 
 export const FeaturePC = () => {
   return (
     <FlexBox direction={'column'}>
       <FeaturePCImage />
-      <ImpressionStartSetHeader color="white">
-        <Spacing size={180} />
-      </ImpressionStartSetHeader>
+      <Spacing size={180} />
     </FlexBox>
   );
 };
diff --git a/apps/ticket/src/components/home/Landing/index.tsx b/apps/ticket/src/components/home/Landing/index.tsx
@@ -1,22 +1,14 @@
-import { Footer, useHeaderColorContext } from '@dudoong/ui';
+import { Footer } from '@dudoong/ui';
 import DDHead from '@components/shared/Layout/NextHead';
 import { css } from '@emotion/react';
 import Media from '@components/shared/Media';
 import { Title } from './title';
-import { ImpressionArea } from '@toss/impression-area';
-import { useEffect } from 'react';
 import { Intro } from './intro';
 import { Feature } from './feature';
 import { Special } from './special';
 import { Outro } from './outro';
 
 const Landing = () => {
-  const { setHeaderColor } = useHeaderColorContext();
-
-  useEffect(() => {
-    setHeaderColor('black');
-  }, []);
-
   return (
     <>
       <DDHead
@@ -33,41 +25,19 @@ const Landing = () => {
         `}
       >
         <Media.Mobile>
-          <ImpressionArea
-            onImpressionStart={() => setHeaderColor('black')}
-            onImpressionEnd={() => setHeaderColor('white')}
-          >
-            <Title.Mobile />
-            <Intro.Mobile />
-          </ImpressionArea>
-          <ImpressionArea onImpressionEnd={() => setHeaderColor('black')}>
-            <Feature.Mobile />
-          </ImpressionArea>
-          <ImpressionArea onImpressionEnd={() => setHeaderColor('white')}>
-            <Special.Mobile />
-          </ImpressionArea>
-          <ImpressionArea>
-            <Outro />
-          </ImpressionArea>
+          <Title.Mobile />
+          <Intro.Mobile />
+          <Feature.Mobile />
+          <Special.Mobile />
+          <Outro />
         </Media.Mobile>
 
         <Media.PC>
-          <ImpressionArea
-            onImpressionStart={() => setHeaderColor('black')}
-            onImpressionEnd={() => setHeaderColor('white')}
-          >
-            <Title.PC />
-          </ImpressionArea>
-          <ImpressionArea onImpressionEnd={() => setHeaderColor('black')}>
-            <Intro.PC />
-            <Feature.PC />
-          </ImpressionArea>
-          <ImpressionArea onImpressionEnd={() => setHeaderColor('white')}>
-            <Special.PC />
-          </ImpressionArea>
-          <ImpressionArea>
-            <Outro />
-          </ImpressionArea>
+          <Title.PC />
+          <Intro.PC />
+          <Feature.PC />
+          <Special.PC />
+          <Outro />
         </Media.PC>
       </main>
       <section>

diff --git a/apps/ticket/src/components/home/Landing/special/Special.Mobile.tsx b/apps/ticket/src/components/home/Landing/special/Special.Mobile.tsx
@@ -6,7 +6,6 @@ import SpecialFourth from '@assets/landing-renewal/special-4.svg';
 import { css } from '@emotion/react';
 import { backgroundBlackStyle } from '../backgroundBlackStyle';
 import { ReactNode } from 'react';
-import { ImpressionStartSetHeader } from '../ImpressionStartSetHeader';
 
 export const SpecialMobile = () => {
   return (
@@ -54,9 +53,7 @@ export const SpecialMobile = () => {
           }
         />
       </div>
-      <ImpressionStartSetHeader color="black">
-        <Spacing size={120} />
-      </ImpressionStartSetHeader>
+      <Spacing size={120} />
     </FlexBox>
   );
 };

diff --git a/apps/ticket/src/components/home/Landing/special/Special.PC.tsx b/apps/ticket/src/components/home/Landing/special/Special.PC.tsx
@@ -7,7 +7,6 @@ import SpecialThird from '@assets/landing-renewal/special-3.svg';
 import SpecialFourth from '@assets/landing-renewal/special-4.svg';
 import { css } from '@emotion/react';
 import { backgroundBlackStyle } from '../backgroundBlackStyle';
-import { ImpressionStartSetHeader } from '../ImpressionStartSetHeader';
 
 export const SpecialPC = () => {
   return (
@@ -84,9 +83,7 @@ export const SpecialPC = () => {
           />
         </FlexBox>
       </div>
-      <ImpressionStartSetHeader color="black">
-        <Spacing size={190} />
-      </ImpressionStartSetHeader>
+      <Spacing size={190} />
     </FlexBox>
   );
 };

diff --git a/apps/ticket/src/components/home/Landing/title/Title.Mobile.tsx b/apps/ticket/src/components/home/Landing/title/Title.Mobile.tsx
@@ -1,4 +1,4 @@
-import { Spacing, Text } from '@dudoong/ui';
+import { Spacing, Text, theme } from '@dudoong/ui';
 import { css } from '@emotion/react';
 import Logo from '@assets/landing-renewal/title-logo.svg';
 import TitleIllustMobile from '@assets/landing-renewal/title-illust-mobile.svg';
@@ -7,7 +7,16 @@ import { backgroundBlackStyle } from '../backgroundBlackStyle';
 export const TitleMobile = () => {
   return (
     <div css={backgroundBlackStyle}>
-      <Spacing size={12} />
+      <div
+        css={css({
+          position: 'absolute',
+          top: 0,
+          width: '100%',
+          height: 72,
+          backgroundColor: theme.palette.black,
+        })}
+      />
+      <Spacing size={24} />
       <Logo css={css({ marginLeft: 24, width: 231 })} />
       <Spacing size={22} />
       <div css={css({ marginLeft: 24 })}>

diff --git a/apps/ticket/src/components/shared/Layout/HeaderLayout.tsx b/apps/ticket/src/components/shared/Layout/HeaderLayout.tsx
@@ -1,14 +1,7 @@
 /** @jsxImportSource @emotion/react */
 import styled from '@emotion/styled';
-import { PropsWithChildren, useState } from 'react';
-import {
-  Divider,
-  Header,
-  PopupOptions,
-  ProfileImage,
-  ThemeType,
-  useHeaderColorContext,
-} from '@dudoong/ui';
+import { PropsWithChildren } from 'react';
+import { Divider, Header, PopupOptions, ProfileImage } from '@dudoong/ui';
 import { media } from '@dudoong/ui/src/theme';
 import { useRouter } from 'next/router';
 import { useRecoilValue, useResetRecoilState } from 'recoil';
@@ -37,7 +30,6 @@ const navigatorMap = {
 export const HeaderLayout = ({ children }: PropsWithChildren) => {
   const { push, asPath } = useRouter();
   const { userProfile, isAuthenticated } = useRecoilValue(authState);
-  const { theme } = useHeaderColorContext();
 
   const { Toast } = useToastify();
   const resetAuthState = useResetRecoilState(authState);
@@ -82,7 +74,7 @@ export const HeaderLayout = ({ children }: PropsWithChildren) => {
           }
         />
         {(asPath === '/' || asPath === '/home') && (
-          <Navigator colortheme={theme}>
+          <Navigator>
             <>
               {navigatorMap[asPath].map((link) => (
                 <Link href={link.url} key={link.title}>
@@ -116,21 +108,21 @@ export const HeaderLayout = ({ children }: PropsWithChildren) => {
                 url="/mypage"
                 text="마이페이지"
                 padding={[12, 24]}
-                textColor={theme === 'black' ? 'gray_200' : 'gray_500'}
+                textColor={'gray_500'}
               />
               <Shortcuts
                 onClick={logoutMutate}
                 text="로그아웃"
                 padding={[12, 24]}
-                textColor={theme === 'black' ? 'gray_200' : 'gray_500'}
+                textColor={'gray_500'}
               />
             </>
           ) : (
             <Shortcuts
               onClick={handleLogin}
               text="로그인"
               padding={[12, 24]}
-              textColor={theme === 'black' ? 'gray_200' : 'gray_500'}
+              textColor={'gray_500'}
             />
           )}
           <Divider line padding={24} height={12} />
@@ -141,11 +133,12 @@ export const HeaderLayout = ({ children }: PropsWithChildren) => {
                 key={link.title}
                 text={link.title}
                 padding={[12, 24]}
-                textColor={theme === 'black' ? 'gray_200' : 'gray_500'}
+                textColor={'gray_500'}
               />
             ))}
         </MobileHeader>
       )}
+
       {/* 서비스 콘텐츠 */}
       <Content>
         <div>{children}</div>
@@ -188,15 +181,13 @@ const Content = styled.div`
   }
 `;
 
-const Navigator = styled.div<{ colortheme: ThemeType }>`
+const Navigator = styled.div`
   ${media.mobile} {
     display: none;
   }
   position: absolute;
   top: 12px;
   ${({ theme }) => theme.typo.G_Side_15_M}
-  color : ${({ theme, colortheme }) =>
-    colortheme === 'black' ? theme.palette.white : undefined};
   display: flex;
   gap: 36px;
   right: 180px;
@@ -206,8 +197,7 @@ const Navigator = styled.div<{ colortheme: ThemeType }>`
     border-radius: 12px;
 
     &:hover {
-      background-color: ${({ theme, colortheme }) =>
-        colortheme === 'white' && theme.palette.gray_100};
+      background-color: ${({ theme }) => theme.palette.gray_100};
     }
   }
 `;
diff --git a/apps/ticket/src/components/shared/Layout/HeaderProfileElement.tsx b/apps/ticket/src/components/shared/Layout/HeaderProfileElement.tsx
@@ -1,10 +1,4 @@
-import {
-  Popup,
-  PopupOptions,
-  Profile,
-  ThemeType,
-  useHeaderColorContext,
-} from '@dudoong/ui';
+import { Popup, PopupOptions, Profile } from '@dudoong/ui';
 import { palette } from '@dudoong/ui/src/theme/palette';
 import { css } from '@emotion/react';
 import styled from '@emotion/styled';
@@ -17,7 +11,6 @@ interface HeaderProfileElement {
 }
 const HeaderProfileElement = (props: HeaderProfileElement) => {
   const { name, profileOption, image, handleLogin } = props;
-  const { theme } = useHeaderColorContext();
 
   return (
     <>
@@ -42,23 +35,18 @@ const HeaderProfileElement = (props: HeaderProfileElement) => {
           }
         />
       ) : (
-        <LoginButton onClick={handleLogin} colortheme={theme}>
-          로그인
-        </LoginButton>
+        <LoginButton onClick={handleLogin}>로그인</LoginButton>
       )}
     </>
   );
 };
-const LoginButton = styled.button<{ colortheme?: ThemeType }>`
+const LoginButton = styled.button`
   height: 40px;
   width: 80px;
   border-radius: 12px;
-  border: 1px solid
-    ${({ theme, colortheme }) =>
-      colortheme === 'black' ? theme.palette.white : theme.palette.black};
+  border: 1px solid ${({ theme }) => theme.palette.black};
   ${({ theme }) => theme.typo.Text_16}
-  color: ${({ theme, colortheme }) =>
-    colortheme === 'black' ? theme.palette.white : theme.palette.black};
+  color: ${({ theme }) => theme.palette.black};
   line-height: 100%;
 `;