feature: foundation 설정 (#4)

* chore: pretendard font asset 추가

- font size를 줄이기위해 subset font 사용

* feat: pretendard, monserrat 폰트 모듈 추가

* chore: tailwind.config.js eslint ignore 추가

* feat: tailwind font extend 설정

* feat: tailwind font size extend 설정

* chore: sample typography

* feat: tailwind color extend 설정

* feat: icon asset 추가

* chore: @svgr/webpack 설치

* chore: next에서 svg 사용가능하게 설정

* chore: icon asset property 수정

* style: prettier import order assets 폴더 정렬 추가

* feat: svg 모듈 타입 정의

* feat: svg module export

* feat: Icon 컴포넌트 구현

* chore: sample icon rendering

* refactor: typo theme extend -> component 플러그인으로 정의

* chore: sample text example 수정

* design: icon default color 수정

* fix: 타이포그래피 글꼴 fallback을 가지는 theme extend 값으로 수정

* feat: info icon 추가

* feat: pretendard medium 추가

* feat: typography 정의 디자인에 맞게 수정

.eslintignore

@@ -8,5 +8,6 @@ build
 dist
 next-env.d.ts
 next.config.js
+tailwind.config.js
 yarn.lock
 README.md

.prettierrc

@@ -17,6 +17,7 @@
     "^@[^/]+/(.*)$",
     "<THIRD_PARTY_MODULES>",
     "^@/components/(.*)$",
+    "^@/assets/(.*)$",
     "^@/styles/(.*)$",
     "^@/types/(.*)$",
     "^@/hooks/(.*)$",

custom.d.ts

@@ -0,0 +1,6 @@
+declare module '*.svg' {
+  import React from 'react';
+
+  const ReactComponent: React.FC<React.SVGProps<SVGSVGElement>>;
+  export default ReactComponent;
+}

next.config.js

@@ -1,6 +1,15 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   reactStrictMode: true,
+  swcMinify: true,
+  webpack(config) {
+    config.module.rules.push({
+      test: /\.svg$/i,
+      issuer: /\.[jt]sx?$/,
+      use: ["@svgr/webpack"]
+    });
+    return config;
+  }
 }
 
 module.exports = nextConfig

package.json

@@ -30,6 +30,7 @@
     "typescript": "5.1.6"
   },
   "devDependencies": {
+    "@svgr/webpack": "^8.0.1",
     "@trivago/prettier-plugin-sort-imports": "^4.1.1",
     "@typescript-eslint/eslint-plugin": "^5.61.0",
     "eslint-config-prettier": "^8.8.0",

src/assets/icons/index.ts

@@ -0,0 +1,5 @@
+export { default as Edit } from './edit.svg';
+export { default as Info } from './info.svg';
+export { default as Menu } from './menu.svg';
+export { default as Plus } from './plus.svg';
+export { default as RightArrow } from './right-arrow.svg';

src/components/shared/icon/Icon.tsx

@@ -0,0 +1,32 @@
+import { SVGProps } from 'react';
+import clsx from 'clsx';
+import * as icons from '@/assets/icons';
+
+const RIGHT_ARROW_WIDTH = 40;
+const DEFAULT_SIZE = 24;
+
+type IconType = keyof typeof icons;
+
+interface Props extends SVGProps<SVGSVGElement> {
+  iconType: IconType;
+}
+
+export function Icon({
+  iconType,
+  color,
+  width = iconType === 'RightArrow' ? RIGHT_ARROW_WIDTH : DEFAULT_SIZE,
+  height = DEFAULT_SIZE,
+  ...restProps
+}: Props) {
+  const Icon = icons[iconType];
+
+  return (
+    <Icon
+      fill={color}
+      width={width}
+      height={height}
+      className={clsx({ 'fill-grayscale-500': !color })}
+      {...restProps}
+    />
+  );
+}

src/components/shared/icon/index.ts

@@ -0,0 +1 @@
+export { Icon } from './Icon';

src/components/shared/index.ts

@@ -0,0 +1 @@
+export * from './icon';

src/pages/_app.tsx

@@ -1,6 +1,11 @@
 import type { AppProps } from 'next/app';
+import { montserrat, pretendard } from '@/styles/fonts';
 import '@/styles/globals.css';
 
 export default function App({ Component, pageProps }: AppProps) {
-  return <Component {...pageProps} />;
+  return (
+    <main className={`${pretendard.variable} ${montserrat.variable}`}>
+      <Component {...pageProps} />
+    </main>
+  );
 }

src/pages/index.tsx

@@ -1,7 +1,22 @@
-import { Inter } from 'next/font/google';
-
-const inter = Inter({ subsets: ['latin'] });
+import { Icon } from '@/components/shared';
 
 export default function Home() {
-  return <main className={inter.className}>main</main>;
+  return (
+    <main>
+      <p className='text-main-headline'>이건 메인 헤드라인이에요 Pretendard</p>
+      <p className='text-sub-headline'>이건 서브 헤드라인이에요 Pretendard</p>
+      <p className='text-body1'>이건 본문1이에요 Pretendard</p>
+      <p className='text-body2'>이건 본문2이에요 Pretendard</p>
+      <p className='text-caption'>이건 캡션이에요 Pretendard</p>
+      <p className='text-button1'>이건 버튼1이에요 Pretendard</p>
+      <p className='text-button2'>이건 버튼2이에요 Pretendard</p>
+      <p className='text-accent-eng'>Montserrat accent</p>
+      <p className='text-body-eng'>Montserrat body</p>
+      <p className='text-caption-eng'>Montserrat caption</p>
+      <Icon iconType='Edit' />
+      <Icon iconType='Menu' />
+      <Icon iconType='Plus' />
+      <Icon iconType='RightArrow' />
+    </main>
+  );
 }

src/styles/fonts.ts

@@ -0,0 +1,36 @@
+import { Montserrat } from 'next/font/google';
+import localFont from 'next/font/local';
+
+const pretendard = localFont({
+  src: [
+    {
+      path: '../../public/fonts/Pretendard-Regular.subset.woff2',
+      weight: '400',
+    },
+    {
+      path: '../../public/fonts/Pretendard-Medium.subset.woff2',
+      weight: '500',
+    },
+    {
+      path: '../../public/fonts/Pretendard-SemiBold.subset.woff2',
+      weight: '600',
+    },
+    {
+      path: '../../public/fonts/Pretendard-Bold.subset.woff2',
+      weight: '700',
+    },
+  ],
+  variable: '--font-pretendard',
+  style: 'normal',
+  display: 'swap',
+});
+
+const montserrat = Montserrat({
+  variable: '--font-montserrat',
+  weight: ['400', '600'],
+  style: 'normal',
+  display: 'swap',
+  subsets: ['latin'],
+});
+
+export { pretendard, montserrat };

tailwind.config.js

@@ -1,3 +1,6 @@
+const { fontFamily } = require('tailwindcss/defaultTheme');
+const plugin = require('tailwindcss/plugin');
+
 /** @type {import('tailwindcss').Config} */
 module.exports = {
   content: [
@@ -6,7 +9,90 @@ module.exports = {
     './src/app/**/*.{js,ts,jsx,tsx,mdx}',
   ],
   theme: {
-    extend: {},
+    extend: {
+      fontFamily: {
+        montserrat: ['var(--font-montserrat)', ...fontFamily.sans],
+        pretendard: ['var(--font-pretendard)', ...fontFamily.sans],
+      },
+      colors: {
+        primary: '#202020',
+        grayscale: {
+          100: '#F3F3F3',
+          200: '#E8E8E8',
+          300: '#BCBCBC',
+          400: '#797979',
+          500: '#3F3F3F',
+          600: '#202020',
+          700: '#1B1717',
+        },
+      },
+    },
   },
-  plugins: [],
+  plugins: [
+    plugin(function ({ addComponents, theme }) {
+      addComponents({
+        '.text-main-headline': {
+          fontFamily: theme('fontFamily.pretendard'),
+          fontSize: '1.25rem',
+          fontWeight: '700',
+        },
+        '.text-sub-headline': {
+          fontFamily: theme('fontFamily.pretendard'),
+          fontSize: '1.125rem',
+          fontWeight: '700',
+          lineHeight: '1.3',
+        },
+        '.text-body1': {
+          fontFamily: theme('fontFamily.pretendard'),
+          fontSize: '1rem',
+          fontWeight: '500',
+          lineHeight: '1.5',
+        },
+        '.text-body2': {
+          fontFamily: theme('fontFamily.pretendard'),
+          fontSize: '0.875rem',
+          fontWeight: '400',
+          lineHeight: '1.5',
+        },
+        '.text-body2-accent': {
+          fontFamily: theme('fontFamily.pretendard'),
+          fontSize: '0.875rem',
+          fontWeight: '500',
+        },
+        '.text-caption': {
+          fontFamily: theme('fontFamily.pretendard'),
+          fontSize: '0.75rem',
+          fontWeight: '500',
+          lineHeight: '1.5',
+        },
+        '.text-button1': {
+          fontFamily: theme('fontFamily.pretendard'),
+          fontSize: '1rem',
+          fontWeight: '600',
+        },
+        '.text-button2': {
+          fontFamily: theme('fontFamily.pretendard'),
+          fontSize: '0.875rem',
+          fontWeight: '600',
+        },
+        '.text-accent-eng': {
+          fontFamily: theme('fontFamily.montserrat'),
+          fontSize: '1rem',
+          fontWeight: '600',
+        },
+        '.text-body-eng': {
+          fontFamily: theme('fontFamily.montserrat'),
+          fontSize: '0.875rem',
+          fontWeight: '600',
+          lineHeight: '1.5',
+        },
+        '.text-caption-eng': {
+          fontFamily: theme('fontFamily.montserrat'),
+          fontSize: '0.75rem',
+          fontWeight: '400',
+          lineHeight: '1.3',
+        },
+      });
+    }),
+  ],
 };

tsconfig.json

@@ -18,6 +18,6 @@
       "@/*": ["./src/*"]
     }
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
+  "include": ["custom.d.ts", "next-env.d.ts", "**/*.ts", "**/*.tsx"],
   "exclude": ["node_modules"]
 }