feat: 헤더 및 푸터 스타일 변경 (#388) (#389)

depromeet · Nov 19, 2024 · 6a3fc4b · 6a3fc4b
2 parents 722a23e + 56b0ca4
commit 6a3fc4b
Show file tree

Hide file tree

Showing 8 changed files with 96 additions and 37 deletions.
diff --git a/public/images/16th/logo/depromeet.svg b/public/images/16th/logo/depromeet.svg
diff --git a/src/components/Footer/Footer.tsx b/src/components/Footer/Footer.tsx
@@ -3,6 +3,7 @@ import { css, Theme } from '@emotion/react';
 
 import { FIRST_ROW_FOOTER_INFOS, SECOND_ROW_FOOTER_INFOS } from '~/constant/contactInfo';
 import { mediaQuery } from '~/styles/media';
+import { theme } from '~/styles/theme';
 
 export function Footer() {
   return (
@@ -21,8 +22,8 @@ export function Footer() {
           {SECOND_ROW_FOOTER_INFOS.map(footer => (
             <li key={footer.name}>
               <Link css={linkCss} href={footer.href} target="_blank">
-                <span>{footer.name}</span>
-                <span>{footer.detail}</span>
+                <span id="footer-name">{footer.name}</span>
+                <span id="footer-detail">{footer.detail}</span>
               </Link>
             </li>
           ))}
@@ -71,7 +72,10 @@ const rowCss = css`
   ${mediaQuery('mobile')} {
     width: 100%;
     gap: 0;
-    justify-content: space-between;
+    column-gap: 24px;
+    row-gap: 4px;
+    flex-wrap: wrap-reverse;
+    justify-content: center;
   }
 `;
 
@@ -82,10 +86,19 @@ const secondRowCss = css`
   span + span {
     margin-left: 12px;
   }
+
+  #footer-name {
+    // TODO: 디자인 컬러셋 PR 반영 확인 후 수정
+    color: ${theme.colors['16th'].gray['00']};
+    opacity: 0.6;
+  }
+
   ${mediaQuery('mobile')} {
     width: 100%;
-    gap: 40px;
+    flex-direction: column;
+    align-items: center;
     justify-content: center;
+    gap: 0;
     margin-top: 8px;
 
     span + span {
@@ -95,7 +108,7 @@ const secondRowCss = css`
 `;
 
 const strongLinkCss = (theme: Theme) => css`
-  ${theme.typosV2.bebas.regular24};
+  ${theme.typosV2.pretendard.semibold20};
   color: white;
 
   ${mediaQuery('mobile')} {
@@ -105,6 +118,7 @@ const strongLinkCss = (theme: Theme) => css`
 
 const linkCss = (theme: Theme) => css`
   ${theme.typosV2.pretendard.regular14};
+  letter-spacing: inherit;
   color: white;
 
   ${mediaQuery('mobile')} {
@@ -113,7 +127,8 @@ const linkCss = (theme: Theme) => css`
 `;
 
 const copyrightCss = (theme: Theme) => css`
-  ${theme.typosV2.pretendard.regular8};
+  ${theme.typosV2.pretendard.regular9};
+  opacity: 0.8;
   color: white;
 
   ${mediaQuery('mobile')} {

diff --git a/src/components/GNB/GNB.tsx b/src/components/GNB/GNB.tsx
@@ -11,10 +11,19 @@ import { GNB_MENU_NAME, GNBMenu } from '~/constant/gnb';
 import { useDropDown } from '~/hooks/useDropdown';
 import { mediaQuery } from '~/styles/media';
 
-const LOGO_IMAGE = `/images/logo.svg`;
-const currentGeneration = 16;
+const LOGO_IMAGE = `/images/16th/logo/depromeet.svg`;
+const CURRENT_GENERATION = 16;
 
-// TODO: 추후 해당 컴포넌트 재사용
+function NotifyButton() {
+  const handleClick = () => window.open('https://bit.ly/3YJgDmR');
+  return (
+    <Button onClick={handleClick} css={linkButtonCss}>
+      {CURRENT_GENERATION}기 모집 알림 신청
+    </Button>
+  );
+}
+
+// TODO: 웹 사이트 오픈 시에 주석 해제
 // function ApplyButton() {
 //   const { isInProgress, dDay } = useIsInProgress();
 //   const router = useRouter();
@@ -25,20 +34,11 @@ const currentGeneration = 16;
 //
 //   return (
 //     <Button disabled={!isInProgress} css={linkButtonCss} onClick={onClick} suppressHydrationWarning>
-//       {isInProgress ? ' 지원하기' : dDay < 0 ? `D${dDay}` : `지원 마감`}
+//       {isInProgress ? '16기 지원하기' : dDay < 0 ? `D${dDay}` : `지원 마감`}
 //     </Button>
 //   );
 // }
 
-function NotifyButton() {
-  const handleClick = () => window.open('https://bit.ly/3YJgDmR');
-  return (
-    <Button onClick={handleClick} css={linkButtonCss}>
-      {currentGeneration}기 모집 알림 신청
-    </Button>
-  );
-}
-
 const linkButtonCss = css`
   height: 37px;
   padding: 8px 24px 8px 24px;
@@ -73,7 +73,6 @@ export function GNB() {
               </li>
             ))}
           </ul>
-          {/*<ApplyButton />*/}
           <NotifyButton />
         </div>
       </nav>

diff --git a/src/constant/common.ts b/src/constant/common.ts
@@ -9,8 +9,9 @@ export const NOTION_RECRUIT_PATH =
   'https://depromeet.notion.site/DEPROMEET-13th-f1e931cf073e43c4aeca44a4521b44be';
 
 // NOTE: UTC 타임존에 맞추기 위해 9시간을 뺌
-export const START_DATE = '2024-04-26T15:00:00.000Z'; // 04.27 00:00
-export const END_DATE = '2024-05-04T14:59:59.000Z'; // 05.04 11:59:59
+// TODO: 개발용으로 임시로 데이트 타임을 변경
+export const START_DATE = '2024-11-20T15:00:00.000Z'; // 04.27 00:00
+export const END_DATE = '2024-11-30T14:59:59.000Z'; // 05.04 11:59:59
 
 // export const START_DATE = '2024-04-19T06:00:00.000Z'; // test
 // export const END_DATE = '2025-03-04T20:00:00.000Z'; // test

diff --git a/src/constant/contactInfo.ts b/src/constant/contactInfo.ts
@@ -9,15 +9,15 @@ import {
 } from '~/constant/depromeet';
 
 export const FIRST_ROW_FOOTER_INFOS = [
-  { name: 'INSTAGRAM', href: DEPROMEET_INSTAGRAM },
-  { name: 'BEHANCE', href: DEPROMEET_BEHANCE },
-  { name: 'GITHUB', href: DEPROMEET_GITHUB },
-  { name: 'MEDIUM', href: DEPROMEET_MEDIUM },
-  { name: 'LINKEDIN', href: DEPROMEET_LINKEDIN },
+  { name: 'Instagram', href: DEPROMEET_INSTAGRAM },
+  { name: 'Behance', href: DEPROMEET_BEHANCE },
+  { name: 'Github', href: DEPROMEET_GITHUB },
+  { name: 'Medium', href: DEPROMEET_MEDIUM },
+  { name: 'LinkedIn', href: DEPROMEET_LINKEDIN },
 ];
 
 export const SECOND_ROW_FOOTER_INFOS = [
-  { name: 'Kakao channel', detail: '@DEPROMEET', href: DEPROMEET_KAKAO_PLUS_FRIEND },
+  { name: 'Kakao channel', detail: '@depromeet', href: DEPROMEET_KAKAO_PLUS_FRIEND },
   { name: 'E-mail', detail: 'depromeet@gmail.com', href: DEPROMEET_EMAIL },
 ];
 

diff --git a/src/constant/gnb.ts b/src/constant/gnb.ts
@@ -1,5 +1,5 @@
 export type GNBMenu = {
-  name: 'About' | '모집 안내' | '프로젝트' | '블로그' | '지원하기' | '16기 모집 알림 신청';
+  name: '소개' | '모집 안내' | '프로젝트' | '블로그' | '지원하기' | '16기 모집 알림 신청';
   href: '/about' | '/recruit' | '/project' | '/blog' | '/apply' | 'https://bit.ly/3YJgDmR';
   type: 'text' | 'button';
   isNewTab?: boolean;
@@ -8,7 +8,7 @@ export type GNBMenu = {
 // TODO: 지원하기 url 넣기
 export const GNB_MENU_NAME: GNBMenu[] = [
   {
-    name: 'About',
+    name: '소개',
     href: '/about',
     type: 'text',
   },
@@ -31,7 +31,7 @@ export const GNB_MENU_NAME: GNBMenu[] = [
 
 export const GNB_MOBILE_MENU_NAME: GNBMenu[] = [
   {
-    name: 'About',
+    name: '소개',
     href: '/about',
     type: 'text',
   },

diff --git a/src/styles/colors.ts b/src/styles/colors.ts
@@ -23,6 +23,32 @@ export const colors = {
   gray: '#999999',
   mint: '#A0EEE9',
 
+  // NOTE: 디프만 16기 컬러셋
+  '16th': {
+    gray: {
+      '00': '#FFFFFF',
+      '100': '#F4F4F5',
+      '300': '#999999',
+      '500': '#323232',
+      '600': '#232323',
+      '900': '#000000',
+    },
+
+    primary: {
+      pink: '#FF90FF',
+      blue: '#006AFE',
+    },
+
+    sub: {
+      sky: '#48A4FF',
+      darkMint: '#00CEBA',
+      lightPink: '#FF97FF',
+      purple: '#877BFF',
+      yellow: '#FFEC87',
+      lightMint: '#A0EEE9',
+    },
+  },
+
   // NOTE: 16th
   grey: {
     '00': '#FFFFFF',

diff --git a/src/styles/typo.ts b/src/styles/typo.ts
@@ -258,42 +258,49 @@ export const typosV2 = {
       font-style: normal;
       font-weight: 500;
       line-height: ${pxToRem(21)};
-      letter-spacing: -5%;
+      letter-spacing: -0.05em;
     `,
     regular20: css`
       font-size: ${pxToRem(20)};
       font-style: normal;
       font-weight: 400;
       line-height: ${pxToRem(30)};
-      letter-spacing: -5%;
+      letter-spacing: -0.05em;
     `,
     regular18: css`
       font-size: ${pxToRem(18)};
       font-style: normal;
       font-weight: 400;
       line-height: ${pxToRem(27)};
-      letter-spacing: -5%;
+      letter-spacing: -0.05em;
     `,
     regular16: css`
       font-size: ${pxToRem(16)};
       font-style: normal;
       font-weight: 400;
       line-height: ${pxToRem(24)};
-      letter-spacing: -5%;
+      letter-spacing: -0.05em;
     `,
     regular14: css`
       font-size: ${pxToRem(14)};
       font-style: normal;
       font-weight: 400;
       line-height: ${pxToRem(21)};
-      letter-spacing: -5%;
+      letter-spacing: -0.05em;
+    `,
+    regular9: css`
+      font-size: ${pxToRem(9)};
+      font-style: normal;
+      font-weight: 400;
+      line-height: ${pxToRem(15)};
+      letter-spacing: -0.02em;
     `,
     regular8: css`
       font-size: ${pxToRem(8)};
       font-style: normal;
       font-weight: 400;
       line-height: ${pxToRem(12)};
-      letter-spacing: -2%;
+      letter-spacing: -0.02em;
     `,
   },
 };