스토리북 작성 (issue #54) (#74)

* chore: 스토리북 레이아웃 셋팅 * design: 버튼, 인풋에 대한 스토리 작성 * design: 버튼 적용값 수정 * fix: 방향 전환 애니메이션 코드 추가 * design: 모달 반응형 추가 * design: 퍼널 컴포넌트 css 수정 * refactor: 유저 코드 셋팅 초기화 로직 모달 컴포넌트로 이동 * chore: 테마 관련 애드온 설치 및 스토리북 svg 적용 * design: 코드 셋팅 모달 css 수정 * fix: 린트 에러 수정 * fix: 린트 에러 수정 * refactor: 구글 로그인 관련 컨텐츠 숨김 * chore: 액션 스크립트 ci/cd 분리
brgndyy · Aug 29, 2024 · d9df9bb · d9df9bb
1 parent 4552bde
commit d9df9bb
Show file tree

Hide file tree

Showing 30 changed files with 5,973 additions and 5,619 deletions.
diff --git a/.github/workflows/frontend-cd.yml b/.github/workflows/frontend-cd.yml
@@ -0,0 +1,37 @@
+name: frontend CD
+
+permissions:
+  contents: read
+
+on:
+  push:
+    branches: [main]
+
+jobs:
+  deploy_frontend:
+    runs-on: ubuntu-latest
+    steps:
+      - name: EC2 Front Docker Run
+        uses: appleboy/ssh-action@master
+        with:
+          host: ${{ secrets.FRONT_EC2_HOST }}
+          username: ec2-user
+          key: ${{ secrets.FRONT_EC2_PEM_KEY }}
+          script: |
+            docker stop ${{ secrets.FRONT_DOCKER_CONTAINER }} || true
+            docker rm ${{ secrets.FRONT_DOCKER_CONTAINER }} || true
+            docker pull ${{ secrets.FRONT_DOCKER_IMAGE }}:latest
+            docker run --name ${{ secrets.FRONT_DOCKER_CONTAINER }} --rm -d -p 3000:3000 \
+              -e NODE_ENV=production \
+              -e NEXT_PUBLIC_FRONT_ENV_MODE=production \
+              ${{ secrets.FRONT_DOCKER_IMAGE }}:latest
+
+      - name: Remove dangling images
+        uses: appleboy/ssh-action@master
+        with:
+          host: ${{ secrets.FRONT_EC2_HOST }}
+          username: ec2-user
+          key: ${{ secrets.FRONT_EC2_PEM_KEY }}
+          script: |
+            docker images -q --filter "dangling=true" | xargs docker rmi -f
+            docker image prune -f
diff --git a/.github/workflows/frontend.yml → .github/workflows/frontend-ci.yml b/.github/workflows/frontend.yml → .github/workflows/frontend-ci.yml
@@ -1,4 +1,4 @@
-name: frontend CI/CD
+name: frontend CI
 
 permissions:
   pull-requests: write
@@ -34,7 +34,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
 
       - name: Set up Node.js
         uses: actions/setup-node@v4
@@ -58,8 +58,7 @@ jobs:
         run: npm test
 
   build_and_push_frontend:
-    needs: [path_changes, frontend-tests]
-    # needs: path_changes
+    needs: frontend-tests
     if: needs.path_changes.outputs.front == 'true'
     runs-on: ubuntu-latest
     steps:
@@ -106,28 +105,3 @@ jobs:
             NEXT_PUBLIC_CDN_URL=${{ secrets.NEXT_PUBLIC_CDN_URL }}
             SENTRY_AUTH_TOKEN=${{ secrets.SENTRY_AUTH_TOKEN }}
             NEXT_PUBLIC_SENTRY_DSN=${{ secrets.NEXT_PUBLIC_SENTRY_DSN }}
-
-      - name: EC2 Front Docker Run
-        uses: appleboy/ssh-action@master
-        with:
-          host: ${{ secrets.FRONT_EC2_HOST }}
-          username: ec2-user
-          key: ${{ secrets.FRONT_EC2_PEM_KEY }}
-          script: |
-            docker stop ${{ secrets.FRONT_DOCKER_CONTAINER }} || true
-            docker rm ${{ secrets.FRONT_DOCKER_CONTAINER }} || true
-            docker pull ${{ secrets.FRONT_DOCKER_IMAGE }}:latest
-            docker run --name ${{ secrets.FRONT_DOCKER_CONTAINER }} --rm -d -p 3000:3000 \
-              -e NODE_ENV=production \
-              -e NEXT_PUBLIC_FRONT_ENV_MODE=production \
-              ${{ secrets.FRONT_DOCKER_IMAGE }}:latest
-
-      - name: Remove dangling images
-        uses: appleboy/ssh-action@master
-        with:
-          host: ${{ secrets.FRONT_EC2_HOST }}
-          username: ec2-user
-          key: ${{ secrets.FRONT_EC2_PEM_KEY }}
-          script: |
-            docker images -q --filter "dangling=true" | xargs docker rmi -f
-            docker image prune -f
diff --git a/front/.storybook/main.ts b/front/.storybook/main.ts
@@ -13,10 +13,13 @@ const config: StorybookConfig = {
     '@storybook/addon-interactions',
     '@chromatic-com/storybook',
     '@storybook/addon-styling-webpack',
+    '@storybook/addon-themes',
   ],
   framework: {
     name: '@storybook/nextjs',
-    options: {},
+    options: {
+      strictMode: false,
+    },
   },
 
   docs: {},
@@ -25,10 +28,8 @@ const config: StorybookConfig = {
   } as PresetValue<Partial<import('@storybook/types').TypescriptOptions> | undefined>,
 
   webpackFinal(config, options) {
-    // Add Vanilla-Extract and MiniCssExtract Plugins
     config.plugins?.push(new VanillaExtractPlugin(), new MiniCssExtractPlugin());
 
-    // Exclude vanilla extract files from regular css processing
     config.module?.rules?.forEach((rule) => {
       if (
         rule &&
@@ -53,6 +54,27 @@ const config: StorybookConfig = {
       ],
     });
 
+    if (!config.module || !config.module.rules) {
+      return config;
+    }
+
+    config.module.rules = [
+      ...config.module.rules.map((rule) => {
+        if (!rule || rule === '...') {
+          return rule;
+        }
+
+        if (rule.test && /svg/.test(String(rule.test))) {
+          return { ...rule, exclude: /\.svg$/i };
+        }
+        return rule;
+      }),
+      {
+        test: /\.svg$/,
+        use: ['@svgr/webpack'],
+      },
+    ];
+
     config.resolve = config.resolve || {};
     config.resolve.alias = config.resolve.alias || {};
 

diff --git a/front/.storybook/preview.tsx b/front/.storybook/preview.tsx
@@ -1,5 +1,24 @@
 import type { Preview } from '@storybook/react';
 import { fn } from '@storybook/test';
+import React from 'react';
+
+const withCenterAlignment = (Story, context) => {
+  if (context.viewMode === 'docs') {
+    return <Story />;
+  }
+  return (
+    <div
+      style={{
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        height: '100vh',
+      }}
+    >
+      <Story />
+    </div>
+  );
+};
 
 const preview: Preview = {
   parameters: {
@@ -9,7 +28,11 @@ const preview: Preview = {
         date: /Date$/i,
       },
     },
+    nextjs: {
+      appDirectory: true,
+    },
   },
+  decorators: [withCenterAlignment],
   globalTypes: {
     action: fn,
   },