Merge pull request #12 from JECT-Study/feature/design-system

[TASK-49] style: 디자인 시스템 변경사항 반영 (국문/영문 폰트 설정, 공용 컴포넌트 기능 추가)
JECT-Study · Dec 24, 2024 · 8da7cff · 8da7cff
2 parents d863078 + d4b4dc9
commit 8da7cff
Show file tree

Hide file tree

Showing 16 changed files with 234 additions and 122 deletions.
diff --git a/src/app/fonts/Pretendard-Medium.woff b/src/app/fonts/Pretendard-Medium.woff
diff --git a/src/app/fonts/Pretendard-SemiBold.woff b/src/app/fonts/Pretendard-SemiBold.woff
diff --git a/src/app/fonts/index.ts b/src/app/fonts/index.ts
@@ -0,0 +1,19 @@
+import { Montserrat } from 'next/font/google';
+import localFont from 'next/font/local';
+
+export const pretendard = localFont({
+  src: [
+    { path: './Pretendard-Regular.woff', weight: '400', style: 'normal' },
+    { path: './Pretendard-Medium.woff', weight: '500', style: 'normal' },
+    {
+      path: './Pretendard-SemiBold.woff',
+      weight: '600',
+      style: 'normal',
+    },
+  ],
+});
+
+export const montserrat = Montserrat({
+  subsets: ['latin'],
+  variable: '--font-montserrat',
+});
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,5 +1,4 @@
 import type { Metadata } from 'next';
-import localFont from 'next/font/local';
 import { ReactNode } from 'react';
 
 import '../styles/globals.css';
@@ -9,26 +8,21 @@ import ReactQueryProvider from './providers/ReactQueryProvider';
 
 import AppShell from '../components/Layout/AppShell';
 
-const PretendardRegular = localFont({
-  src: './fonts/Pretendard-Regular.woff',
-  variable: '--font-geist-sans',
-  weight: '400',
-  style: 'normal',
-});
+import { montserrat, pretendard } from './fonts';
 
 export const metadata: Metadata = {
   title: '',
   description: '',
 };
 
-export default function RootLayout({
+const RootLayout = ({
   children,
 }: Readonly<{
   children: ReactNode;
-}>) {
+}>) => {
   return (
     <html lang='ko'>
-      <body className={`${PretendardRegular.variable}`}>
+      <body className={`${pretendard} ${montserrat.variable}`}>
         <MSWProvider>
           <ReactQueryProvider>
             <AppShell>{children}</AppShell>
@@ -37,4 +31,6 @@ export default function RootLayout({
       </body>
     </html>
   );
-}
+};
+
+export default RootLayout;
diff --git a/src/components/FilterDropdown/index.tsx b/src/components/FilterDropdown/index.tsx
@@ -48,11 +48,11 @@ const FilterDropdown = ({
         hover:bg-gray-800 focus:outline-none'
       >
         {selected}
-        <span className='text-gray-300'>
+        <span className='text-gray-700'>
           {isDropdownOpen ? (
-            <Icon name='ChevronUp' size='m' />
+            <Icon name='Dropup' size='m' />
           ) : (
-            <Icon name='ChevronDown' size='m' />
+            <Icon name='Dropdown' size='m' />
           )}
         </span>
       </button>
@@ -68,7 +68,10 @@ const FilterDropdown = ({
                 key={index}
                 onClick={() => handleOptionSelect(option)}
                 aria-current={option === selected ? 'true' : undefined}
-                className={`block w-[149px] h-[44px] px-[23px] py-[10px] text-gray-400 cursor-pointer hover:bg-gray-800`}
+                className={`block w-[149px] h-[44px] px-[23px] py-[10px]
+                  text-gray-400 cursor-pointer
+                  ${option === selected && isDropdownOpen ? 'text-white' : 'text-gray-400'}
+                  hover:bg-gray-800`}
               >
                 {option}
               </li>

diff --git a/src/components/Footer/index.tsx b/src/components/Footer/index.tsx
@@ -5,14 +5,14 @@ import logo from '../../../public/images/momentiaLogoSymbol.png';
 
 const Footer = () => {
   return (
-    <footer className='bg-black text-white px-14 py-24'>
+    <footer className='bg-black text-white px-[32px] lg:px-[140px] py-24'>
       <Link href='/'>
         <Image src={logo} alt='모멘티아 로고' width={45} priority />
       </Link>
 
       <div className='flex flex-wrap wrap-reverse items-center mt-10'>
         <div className='w-full'>
-          <p className='body1 mb-2 text-gray-300'>
+          <p className='font-sans body1 mb-2 text-gray-300'>
             Exhibitions, for Artists' Moments
           </p>
           <div className='flex flex-col justify-between md:flex-row'>

diff --git a/src/components/Icon/icons/DropDown.tsx b/src/components/Icon/icons/DropDown.tsx
@@ -0,0 +1,17 @@
+const Dropdown = ({ className }: { className?: string }) => {
+  return (
+    <svg
+      className={className}
+      viewBox='0 0 18 18'
+      fill='none'
+      xmlns='http://www.w3.org/2000/svg'
+    >
+      <path
+        d='M8.20759 12.9706C8.6079 13.4906 9.3921 13.4906 9.79241 12.9706L14.6888 6.60999C15.195 5.95243 14.7263 5 13.8964 5H4.10358C3.27374 5 2.80497 5.95243 3.31117 6.60999L8.20759 12.9706Z'
+        fill='currentColor'
+      />
+    </svg>
+  );
+};
+
+export default Dropdown;
diff --git a/src/components/Icon/icons/DropUp.tsx b/src/components/Icon/icons/DropUp.tsx
@@ -0,0 +1,17 @@
+const Dropup = ({ className }: { className?: string }) => {
+  return (
+    <svg
+      className={className}
+      viewBox='0 0 18 18'
+      fill='none'
+      xmlns='http://www.w3.org/2000/svg'
+    >
+      <path
+        d='M8.20759 5.02937C8.6079 4.50936 9.3921 4.50936 9.79241 5.02937L14.6888 11.39C15.195 12.0476 14.7263 13 13.8964 13H4.10358C3.27374 13 2.80497 12.0476 3.31117 11.39L8.20759 5.02937Z'
+        fill='currentColor'
+      />
+    </svg>
+  );
+};
+
+export default Dropup;
diff --git a/src/components/Icon/icons/Lock.tsx b/src/components/Icon/icons/Lock.tsx
@@ -0,0 +1,27 @@
+import { ReactNode } from 'react';
+
+const Lock = ({
+  className,
+  onClick,
+}: {
+  className?: string;
+  onClick?: () => void;
+}): ReactNode => {
+  return (
+    <svg
+      className={className}
+      onClick={onClick}
+      viewBox='0 0 24 24'
+      fill='none'
+      xmlns='http://www.w3.org/2000/svg'
+    >
+      <path
+        d='M17 9.65V7.75C17 6.49022 16.4732 5.28204 15.5355 4.39124C14.5979 3.50044 13.3261 3 12 3C10.6739 3 9.40215 3.50044 8.46447 4.39124C7.52678 5.28204 7 6.49022 7 7.75V9.65C6.20435 9.65 5.44129 9.95027 4.87868 10.4847C4.31607 11.0192 4 11.7441 4 12.5V19.15C4 19.9059 4.31607 20.6308 4.87868 21.1653C5.44129 21.6997 6.20435 22 7 22H17C17.7956 22 18.5587 21.6997 19.1213 21.1653C19.6839 20.6308 20 19.9059 20 19.15V12.5C20 11.7441 19.6839 11.0192 19.1213 10.4847C18.5587 9.95027 17.7956 9.65 17 9.65ZM9 7.75C9 6.99413 9.31607 6.26922 9.87868 5.73475C10.4413 5.20027 11.2044 4.9 12 4.9C12.7956 4.9 13.5587 5.20027 14.1213 5.73475C14.6839 6.26922 15 6.99413 15 7.75V9.65H9V7.75Z'
+        fill='currentColor'
+      />
+      <rect x='11' y='14' width='2' height='4' rx='1' fill='white' />
+    </svg>
+  );
+};
+
+export default Lock;
diff --git a/src/components/Icon/icons/Unlock.tsx b/src/components/Icon/icons/Unlock.tsx
@@ -0,0 +1,27 @@
+import { ReactNode } from 'react';
+
+const Unlock = ({
+  className,
+  onClick,
+}: {
+  className?: string;
+  onClick?: () => void;
+}): ReactNode => {
+  return (
+    <svg
+      className={className}
+      onClick={onClick}
+      viewBox='0 0 24 24'
+      fill='none'
+      xmlns='http://www.w3.org/2000/svg'
+    >
+      <path
+        d='M9 8.65032H17C17.7956 8.65032 18.5587 8.95061 19.1213 9.48511C19.6839 10.0196 20 10.7446 20 11.5005V18.1508C20 18.9067 19.6839 19.6317 19.1213 20.1662C18.5587 20.7007 17.7956 21.001 17 21.001H7C6.20435 21.001 5.44129 20.7007 4.87868 20.1662C4.31607 19.6317 4 18.9067 4 18.1508V11.5005C4 10.7446 4.31607 10.0196 4.87868 9.48511C5.44129 8.95061 6.20435 8.65032 7 8.65032V6.75022C7.00021 5.81143 7.29321 4.89375 7.84201 4.11305C8.3908 3.33235 9.17078 2.72365 10.0835 2.3638C10.9961 2.00395 12.0006 1.9091 12.97 2.09122C13.9393 2.27334 14.8302 2.72426 15.53 3.38705C16.1603 3.99027 16.6122 4.74068 16.84 5.56266C16.8728 5.68368 16.8802 5.80966 16.8618 5.9334C16.8434 6.05715 16.7995 6.17623 16.7327 6.28386C16.6658 6.39149 16.5773 6.48555 16.4722 6.56068C16.3671 6.63581 16.2474 6.69053 16.12 6.72172C15.9926 6.75291 15.86 6.75996 15.7298 6.74247C15.5995 6.72497 15.4742 6.68327 15.3609 6.61975C15.2476 6.55623 15.1486 6.47214 15.0695 6.37227C14.9904 6.2724 14.9328 6.15871 14.9 6.03769C14.7649 5.54349 14.4959 5.0915 14.12 4.72662C13.6999 4.32795 13.1646 4.0567 12.5821 3.94724C11.9996 3.83777 11.3959 3.89501 10.8477 4.11171C10.2994 4.3284 9.83118 4.6948 9.50226 5.1645C9.17334 5.6342 8.99854 6.18607 9 6.75022V8.65032Z'
+        fill='currentColor'
+      />
+      <rect x='11' y='13' width='2' height='4' rx='1' fill='white' />
+    </svg>
+  );
+};
+
+export default Unlock;
diff --git a/src/components/Icon/iconsNames.ts b/src/components/Icon/iconsNames.ts
@@ -18,6 +18,8 @@ import Close from './icons/Close';
 import CloseCircleFilled from './icons/CloseCircleFilled';
 import Controller from './icons/Controller';
 import DisabledBookmark from './icons/DisabledBookmark';
+import Dropdown from './icons/Dropdown';
+import Dropup from './icons/Dropup';
 import EditNotePencil from './icons/EditNotePencil';
 import EditPencil from './icons/EditPencil';
 import ExternalLink from './icons/ExternalLink';
@@ -26,6 +28,7 @@ import EyeOff from './icons/EyeOff';
 import Heart from './icons/Heart';
 import HeartFilled from './icons/HeartFilled';
 import Image from './icons/Image';
+import Lock from './icons/Lock';
 import Menu from './icons/Menu';
 import Message from './icons/Message';
 import MoreHorizontal from './icons/MoreHorizontal';
@@ -35,6 +38,7 @@ import Person from './icons/Person';
 import Plus from './icons/Plus';
 import Search from './icons/Search';
 import Star from './icons/Star';
+import Unlock from './icons/Unlock';
 import UploadShare from './icons/UploadShare';
 
 export const iconsNames: Record<
@@ -83,4 +87,8 @@ export const iconsNames: Record<
   Search,
   Star,
   UploadShare,
+  Dropup,
+  Dropdown,
+  Lock,
+  Unlock,
 };
diff --git a/src/components/Input/EmailInput.tsx b/src/components/Input/EmailInput.tsx
@@ -22,7 +22,7 @@ const EmailInput = ({ mode }: EmailInputProps) => {
     setEmail('');
   };
 
-  const checkEmailStatus = (email: string) => {
+  const validateEmail = (email: string) => {
     // TODO: 이메일 상태 확인 (API 호출 로직 추가)
     if (mode === 'sign-in') {
       if (email === '[email protected]') {
@@ -39,7 +39,7 @@ const EmailInput = ({ mode }: EmailInputProps) => {
       setValidationMessage('올바른 이메일 형식으로 입력해주세요.');
       setValidationMessageColor('text-system-error');
     } else if (email) {
-      checkEmailStatus(email);
+      validateEmail(email);
     } else {
       setValidationMessage('');
     }

diff --git a/src/components/Navbar/index.tsx b/src/components/Navbar/index.tsx
@@ -16,37 +16,39 @@ const Navbar = () => {
 
   return (
     <>
-      <nav className='fixed top-0 w-full flex items-center bg-black text-white px-14 py-5 h-[60px] z-50'>
-        <div className='absolute left-14'>
-          <Link href='/'>
-            <Image src={logo} alt='모멘티아 로고' width={45} priority />
-          </Link>
-        </div>
+      <nav className='fixed top-0 w-full bg-black text-white z-50'>
+        <div className='max-w-[1640px] mx-auto flex justify-between items-center px-[32px] lg:px-[140px] py-[29px] h-[90px] lg:h-[60px]'>
+          <div className='flex-shrink-0'>
+            <Link href='/'>
+              <Image src={logo} alt='모멘티아 로고' width={45} priority />
+            </Link>
+          </div>
 
-        <div className='hidden lg:flex justify-center w-full'>
-          <ul className='button-m flex gap-20 text-gray-100'>
-            <li className='hover:text-gray-300 cursor-pointer'>작품</li>
-            <li className='hover:text-gray-300 cursor-pointer'>전시회</li>
-            <li className='hover:text-gray-300 cursor-pointer'>커뮤니티</li>
-          </ul>
-        </div>
+          <div className='hidden lg:flex justify-center w-full'>
+            <ul className='button-m flex gap-20 text-gray-100'>
+              <li className='hover:text-gray-300 cursor-pointer'>작품</li>
+              <li className='hover:text-gray-300 cursor-pointer'>전시회</li>
+              <li className='hover:text-gray-300 cursor-pointer'>커뮤니티</li>
+            </ul>
+          </div>
 
-        <div className='absolute right-14 flex items-center gap-7'>
-          {/* TODO: 로그인 상태에 따라 Notification 버튼, 로그인/회원가입 버튼 다르게 보이도록 처리 */}
-          <Icon name='Notification' size='l' className='text-white' />
-          <div className='hidden lg:flex items-center gap-7'>
-            <div className='rounded-full bg-white w-8 h-8'></div>
-            <button className='button-m bg-main px-6 py-2 rounded-full text-white'>
-              작품 업로드
-            </button>
-            {/* <button className='button-m text-white' >로그인/회원가입</button> */}
+          <div className='flex items-center gap-7 flex-shrink-0'>
+            {/* TODO: 로그인 상태에 따라 Notification 버튼, 로그인/회원가입 버튼 다르게 보이도록 처리 */}
+            <Icon name='Notification' size='l' className='text-white' />
+            <div className='hidden lg:flex items-center gap-7'>
+              <div className='rounded-full bg-white w-8 h-8 flex-shrink-0'></div>
+              <button className='button-m bg-main px-6 py-2 rounded-full text-white flex-shrink-0'>
+                작품 업로드
+              </button>
+              {/* <button className='button-m text-white' >로그인/회원가입</button> */}
+            </div>
+            <Icon
+              name='Menu'
+              size='l'
+              onClick={toggleMenu}
+              className='lg:hidden text-white focus:outline-none'
+            />
           </div>
-          <Icon
-            name='Menu'
-            size='l'
-            onClick={toggleMenu}
-            className='lg:hidden text-white focus:outline-none'
-          />
         </div>
       </nav>