Merge branch 'develop' into feat/icon

# Conflicts:
#	src/components/Header.tsx
#	src/styled-system/tokens/tokens.d.ts
#	src/styled-system/types/prop-type.d.ts

.eslintrc.js

@@ -1,5 +1,5 @@
 module.exports = {
-  ignorePatterns: ['.next/', 'node_modules/', 'public', '@types', 'src/styled-system/'],
+  ignorePatterns: ['.next/', 'node_modules/', 'public', '@types', 'src/styled-system'],
   plugins: ['simple-import-sort', 'testing-library'],
   extends: [
     'next/core-web-vitals',

.github/ISSUE_TEMPLATE/10mm-client-issue-template.md

@@ -0,0 +1,14 @@
+---
+name: 10mm-client-issue-template
+about: 10mm 프론트엔드 레포지터리의 이슈 템플릿입니다.
+title: "[Task] "
+labels: ''
+assignees: ''
+
+---
+
+## ⚠️ Issue
+- 이슈 내용을 입력해주세요
+## ✏️ To Do List
+- [ ] Todo 1
+- [ ] Todo 2

.github/workflows/deploy-chromatic.yml

@@ -0,0 +1,59 @@
+name: deploy-chromatic
+
+on:
+  pull_request:
+    types: [opened, closed]
+    branches:
+      - 'develop'
+
+jobs:
+  build:
+    name: deploy-chromatic
+    if: github.event_name == 'pull_request' && (github.event.action == 'closed' && github.event.pull_request.merged == true) || (github.event.action == 'opened')
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      # node 세팅
+      - name: Init node
+        uses: actions/[email protected]
+        with:
+          node-version: '18.17.1'
+          cache: 'yarn'
+
+      - name: Set Yarn Version
+        id: set-version
+        run: |
+          yarn set version 4.0.2
+          echo "YARN_VERSION=$(yarn -v)" >> $GITHUB_OUTPUT
+
+      - name: Yarn Cache - PnP
+        uses: actions/cache@v2
+        with:
+          path: |
+            .yarn/cache
+            .pnp.*
+          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}-${{ steps.set-version.outputs.YARN_VERSION }}
+          restore-keys: |
+            ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}-
+
+      - name: Install dependencies
+        run: yarn install
+
+      - name: publish to chromatic
+        id: chromatic
+        uses: chromaui/action@v1
+        with:
+          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
+          token: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: comment PR
+        uses: thollander/actions-comment-pull-request@v1
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        with:
+          message: '🚀storybook: ${{ steps.chromatic.outputs.storybookUrl }}'

.gitignore

@@ -43,3 +43,6 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+
+# chromatic
+build-storybook.log

.prettierignore

@@ -0,0 +1 @@
+src/styled-system

.storybook/main.ts

@@ -1,19 +1,39 @@
 import type { StorybookConfig } from '@storybook/nextjs';
+import { join, dirname } from 'path';
+import path from 'path';
 
+/**
+ * This function is used to resolve the absolute path of a package.
+ * It is needed in projects that use Yarn PnP or are set up within a monorepo.
+ */
+function getAbsolutePath(value: string): any {
+  return dirname(require.resolve(join(value, 'package.json')));
+}
 const config: StorybookConfig = {
   stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
   addons: [
-    '@storybook/addon-links',
-    '@storybook/addon-essentials',
-    '@storybook/addon-onboarding',
-    '@storybook/addon-interactions',
+    getAbsolutePath('@storybook/addon-links'),
+    getAbsolutePath('@storybook/addon-essentials'),
+    getAbsolutePath('@storybook/addon-onboarding'),
+    getAbsolutePath('@storybook/addon-interactions'),
   ],
   framework: {
-    name: '@storybook/nextjs',
+    name: getAbsolutePath('@storybook/nextjs'),
     options: {},
   },
   docs: {
     autodocs: 'tag',
   },
+  staticDirs: ['../public'],
+  async webpackFinal(config, { configType }) {
+    if (config?.resolve?.alias) {
+      config.resolve.alias = {
+        ...config.resolve.alias,
+        '@': path.resolve(__dirname, '../src'),
+        '@styled-system': path.resolve(__dirname, '../src/styled-system'),
+      };
+    }
+    return config;
+  },
 };
 export default config;

.storybook/preview.ts

@@ -1,4 +1,5 @@
 import type { Preview } from '@storybook/react';
+import '../src/app/globals.css';
 
 const preview: Preview = {
   parameters: {

package.json

@@ -33,6 +33,7 @@
     "@storybook/blocks": "^7.5.3",
     "@storybook/nextjs": "^7.5.3",
     "@storybook/react": "^7.5.3",
+    "@storybook/test": "^7.6.3",
     "@storybook/testing-library": "^0.2.2",
     "@tanstack/react-query-devtools": "^5.8.4",
     "@testing-library/jest-dom": "^6.1.4",
@@ -44,6 +45,7 @@
     "@types/react-dom": "^18",
     "@typescript-eslint/eslint-plugin": "^6.12.0",
     "@typescript-eslint/parser": "^6.12.0",
+    "chromatic": "^10.0.0",
     "eslint": "^8",
     "eslint-config-next": "14.0.3",
     "eslint-config-prettier": "^9.0.0",
@@ -58,7 +60,8 @@
     "lint-staged": "^15.1.0",
     "prettier": "^3.1.0",
     "storybook": "^7.5.3",
-    "typescript": "^5"
+    "typescript": "^5",
+    "webpack": "^5.89.0"
   },
   "packageManager": "[email protected]"
 }

panda.config.ts

@@ -1,18 +1,34 @@
 import { defineConfig } from '@pandacss/dev';
 
+import { typographyList } from './src/styles/typography';
+
 export default defineConfig({
   // Whether to use css reset
   preflight: true,
   jsxFramework: 'react',
   // Where to look for your css declarations
-  include: ['./src/**/*.{js,jsx,ts,tsx}', './src/app/**/*.{ts,tsx,js,jsx}'],
+  include: ['./src/**/*.{js,jsx,ts,tsx}', './src/app/**/*.{ts,tsx,js,jsx}', './stories/**/*.{js,jsx,ts,tsx}'],
 
   // Files to exclude
   exclude: [],
 
   // Useful for theme customization
   theme: {
-    extend: {},
+    extend: {
+      keyframes: {
+        gradient: {
+          '0%': { transform: 'rotate(0deg)', backgroundPositionX: '0%', backgroundPositionY: '0%' },
+          '50%': { backgroundPositionX: '50%', backgroundPositionY: '100%' },
+          '100%': { transform: 'rotate(0deg)', backgroundPositionX: '0%', backgroundPositionY: '0%' },
+        },
+      },
+      textStyles: typographyList,
+      tokens: {
+        fonts: {
+          pretendard: { value: 'var(--pretendard)' },
+        },
+      },
+    },
   },
 
   // The output directory for your css system

src/app/LogoIcon.tsx

@@ -0,0 +1,54 @@
+// TODO : Icon 컴포넌트로 변경
+const LogoIcon = () => {
+  return (
+    <svg width="201" height="76" viewBox="0 0 201 76" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <g clipPath="url(#clip0_189_2661)">
+        <g filter="url(#filter0_d_189_2661)">
+          <path d="M10.5 25.22V14.9672H28.3617V62.0397H16.8838V25.22H10.5Z" fill="white" />
+          <path
+            d="M35.9047 37.8586C35.9047 30.4646 37.3233 24.6397 40.1606 20.3838C43.0408 16.1279 47.662 14 54.0243 14C60.3867 14 64.9864 16.1279 67.8237 20.3838C70.7039 24.6397 72.144 30.4646 72.144 37.8586C72.144 45.3386 70.7039 51.2066 67.8237 55.4624C64.9864 59.7183 60.3867 61.8462 54.0243 61.8462C47.662 61.8462 43.0408 59.7183 40.1606 55.4624C37.3233 51.2066 35.9047 45.3386 35.9047 37.8586ZM61.3109 37.8586C61.3109 33.5168 60.838 30.1852 59.8923 27.8638C58.9465 25.4994 56.9906 24.3172 54.0243 24.3172C51.0581 24.3172 49.1022 25.4994 48.1564 27.8638C47.2107 30.1852 46.7378 33.5168 46.7378 37.8586C46.7378 40.7818 46.9098 43.2107 47.2537 45.1452C47.5976 47.0367 48.2854 48.5843 49.3171 49.7879C50.3918 50.9486 51.9609 51.529 54.0243 51.529C56.0878 51.529 57.6354 50.9486 58.6671 49.7879C59.7418 48.5843 60.4511 47.0367 60.795 45.1452C61.1389 43.2107 61.3109 40.7818 61.3109 37.8586Z"
+            fill="white"
+          />
+          <path
+            d="M130.33 16.7728V62.0397H119.303V34.8924L109.179 62.0397H100.281L90.0924 34.8279V62.0397H79.0658V16.7728H92.0913L104.794 48.1114L117.369 16.7728H130.33Z"
+            fill="white"
+          />
+          <path
+            d="M189.523 16.7728V62.0397H178.496V34.8924L168.372 62.0397H159.474L149.286 34.8279V62.0397H138.259V16.7728H151.285L163.988 48.1114L176.562 16.7728H189.523Z"
+            fill="white"
+          />
+        </g>
+      </g>
+      <defs>
+        <filter
+          id="filter0_d_189_2661"
+          x="0.5"
+          y="4"
+          width="199.023"
+          height="68.0397"
+          filterUnits="userSpaceOnUse"
+          colorInterpolationFilters="sRGB"
+        >
+          <feFlood floodOpacity="0" result="BackgroundImageFix" />
+          <feColorMatrix
+            in="SourceAlpha"
+            type="matrix"
+            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+            result="hardAlpha"
+          />
+          <feOffset />
+          <feGaussianBlur stdDeviation="5" />
+          <feComposite in2="hardAlpha" operator="out" />
+          <feColorMatrix type="matrix" values="0 0 0 0 0.121492 0 0 0 0 0.133128 0 0 0 0 0.237856 0 0 0 0.08 0" />
+          <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_189_2661" />
+          <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_189_2661" result="shape" />
+        </filter>
+        <clipPath id="clip0_189_2661">
+          <rect width="200" height="76" fill="white" transform="translate(0.5)" />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+};
+
+export default LogoIcon;

src/app/globals.css

@@ -1 +1,42 @@
-@layer reset, base, tokens, recipes, utilities;
+@layer reset, base, tokens, recipes, utilities;
+
+/* 아래 폰트들은 safari에서의 대응을 위한 css 변수 등록을 위한 코드 입니다 */
+@font-face {
+  font-family: 'Pretendard';
+  font-weight: 400;
+  font-display: swap;
+  src:
+    local('Pretendard'),
+    url('../assets/fonts/PretendardVariable.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: 'Pretendard';
+  font-weight: 500;
+  font-display: swap;
+  src:
+    local('Pretendard'),
+    url('../assets/fonts/PretendardVariable.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: 'Pretendard';
+  font-weight: 600;
+  font-display: swap;
+  src:
+    local('Pretendard'),
+    url('../assets/fonts/PretendardVariable.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: 'Pretendard';
+  font-weight: 700;
+  font-display: swap;
+  src:
+    local('Pretendard'),
+    url('../assets/fonts/PretendardVariable.woff2') format('woff2');
+}
+
+:root {
+  --pretendard: 'Pretendard', sans-serif;
+}

src/app/layout.tsx

@@ -1,4 +1,6 @@
 import type { Metadata } from 'next';
+import { css } from '@/styled-system/css';
+import { pretendardFont } from '@/styles/font';
 
 import { QueryProvider } from '../hooks/query';
 
@@ -11,10 +13,18 @@ export const metadata: Metadata = {
 
 export default function RootLayout({ children }: { children: React.ReactNode }) {
   return (
-    <html lang="en" suppressHydrationWarning>
+    <html lang="en" suppressHydrationWarning className={pretendardFont.variable}>
       <body>
-        <QueryProvider>{children}</QueryProvider>
+        <QueryProvider>
+          <div className={css(containerCss)}>{children}</div>
+        </QueryProvider>
       </body>
     </html>
   );
 }
+
+const containerCss = {
+  maxWidth: '475px',
+  margin: '0 auto',
+  minHeight: '100vh',
+};