Merge branch 'backghho' into be-dev

.github/workflows/backend-prod.yml

@@ -91,3 +91,5 @@ jobs:
 
       - name: Docker run
         run: sudo docker run -d -p 80:8080 -e SPRING_PROFILES_ACTIVE=prod -v log-volume:/app/logs --name haengdong-backend ${{ secrets.DOCKER_USERNAME }}/${{ secrets.DOCKER_IMAGE_BE_DEV }}
+
+

.github/workflows/frontend-pull-request.yml

@@ -0,0 +1,91 @@
+name: frontend-pull-request
+
+on:
+  pull_request:
+    types: [opened, synchronize]
+    branches: [main, fe-dev]
+    paths:
+      - "client/**"
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+
+    defaults:
+      run:
+        shell: bash
+        working-directory: ./client
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: "20.15.1"
+
+      - name: Install dependencies
+        run: npm install
+
+      - name: Run lint
+        run: npm run lint
+
+      - name: Run test
+        run: npm run test
+
+      - name: Cypress test
+        run: npm run dev &
+        env:
+          CI: true
+
+      - name: Wait for the server to start
+        run: sleep 3
+
+      - name: Run Cypress tests
+        run: npm run cypress-run
+
+  chromatic:
+    name: Run Chromatic
+    runs-on: ubuntu-latest
+
+    defaults:
+      run:
+        shell: bash
+        working-directory: ./client
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: "20.15.1"
+
+      - name: Cache dependencies
+        id: cache
+        uses: actions/cache@v3
+        with:
+          path: "**/node_modules"
+          key: ${{ runner.os }}-npm-${{ hashFiles('**/package-lock.json') }}-v1
+          restore-keys: |
+            ${{ runner.os }}-npm-
+
+      - name: Install dependencies
+        if: steps.cache.outputs.cache-hit != 'true'
+        run: npm install
+
+      - name: Run Chromatic
+        uses: chromaui/action@latest
+        id: publish_chromatic
+        with:
+          workingDir: client
+          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
+
+      - name: Comment on PR
+        uses: thollander/actions-comment-pull-request@v2
+        with:
+          message: "🚀 **storybook**: ${{ steps.publish_chromatic.outputs.storybookUrl }}"

.github/workflows/pr-issue-close.yml

@@ -0,0 +1,33 @@
+name: Close Issue on PR Merge
+
+on:
+  pull_request:
+    types: [closed]
+
+jobs:
+  close-issue:
+    if: github.event.pull_request.merged == true
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v3
+
+      - name: Extract issue number from PR body
+        id: extract_issue
+        run: |
+          # Fetch PR body
+          PR_BODY=$(curl -s -H "Authorization: token ${{ secrets.CONFIG_SUBMODULE_TOKEN }}" \
+            "https://api.github.com/repos/${{ github.repository }}/issues/${{ github.event.pull_request.number }}" \
+            | jq -r '.body')
+          # Extract issue number from PR body using regex (customize if needed)
+          ISSUE_NUMBER=$(echo "$PR_BODY" | grep -oP '#\d+' | head -1 | sed 's/#//')
+          echo "ISSUE_NUMBER=$ISSUE_NUMBER" >> $GITHUB_ENV
+      - name: Close associated issue
+        if: env.ISSUE_NUMBER != ''
+        run: |
+          echo "Closing issue #${{ env.ISSUE_NUMBER }}"
+          curl -s -X PATCH -H "Authorization: token ${{ secrets.CONFIG_SUBMODULE_TOKEN }}" \
+            -H "Accept: application/vnd.github.v3+json" \
+            -d '{"state": "closed"}' \
+            "https://api.github.com/repos/${{ github.repository }}/issues/${{ env.ISSUE_NUMBER }}"

README.md

@@ -1 +1,3 @@
-# 2024-haeng-dong
+# 행동대장들의 정산을 간편하게💰행동대장
+
+![service introduce](https://github.com/user-attachments/assets/9e51f7a3-0326-4c06-8b03-65aca574c10c)

client/.gitignore

@@ -0,0 +1,17 @@
+logs
+*.log
+npm-debug.log*
+
+node_modules
+dist
+
+.env.*
+
+*storybook.log
+.DS_Store
+
+# Sentry Config File
+.env.sentry-build-plugin
+
+storybook-static
+*storybook.log

client/.npmrc

@@ -0,0 +1,2 @@
+engine-strict = true
+legacy-peer-deps = true

client/.prettierrc

@@ -0,0 +1,12 @@
+{
+	"singleQuote": true,
+	"trailingComma": "all",
+	"printWidth": 120,
+	"tabWidth": 2,
+	"semi": true,
+	"arrowParens": "avoid",
+	"endOfLine": "auto",
+	"jsxSingleQuote": false,
+	"bracketSpacing": false,
+	"proseWrap": "preserve"
+}

client/.storybook/main.ts

@@ -0,0 +1,59 @@
+/** @type { import('@storybook/react-webpack5').StorybookConfig } */
+import type {StorybookConfig} from '@storybook/react-webpack5';
+import path from 'path';
+import TsconfigPathsPlugin from 'tsconfig-paths-webpack-plugin';
+
+const config: StorybookConfig = {
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  addons: [
+    '@storybook/addon-webpack5-compiler-swc',
+    '@storybook/addon-onboarding',
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@chromatic-com/storybook',
+    '@storybook/addon-interactions',
+  ],
+  framework: {
+    name: '@storybook/react-webpack5',
+    options: {},
+  },
+  webpackFinal: async config => {
+    if (config.resolve) {
+      config.resolve.alias = {
+        ...config.resolve.alias,
+        '@apis': path.resolve(__dirname, '../src/apis/'),
+        '@assets': path.resolve(__dirname, '../src/assets/'),
+        '@components': path.resolve(__dirname, '../src/components/'),
+        '@constants': path.resolve(__dirname, '../src/constants/'),
+        '@hooks': path.resolve(__dirname, '../src/hooks/'),
+        '@store': path.resolve(__dirname, '../src/store/'),
+        '@mocks': path.resolve(__dirname, '../src/mocks/'),
+        '@pages': path.resolve(__dirname, '../src/pages/'),
+        '@utils': path.resolve(__dirname, '../src/utils/'),
+        '@errors': path.resolve(__dirname, '../src/errors/'),
+        '@HDesign': path.resolve(__dirname, '../src/components/Design/'),
+        '@HDcomponents': path.resolve(__dirname, '../src/components/Design/components/'),
+        '@HDutils': path.resolve(__dirname, '../src/components/Design/utils/'),
+        '@token': path.resolve(__dirname, '../src/components/Design/token/'),
+        '@theme': path.resolve(__dirname, '../src/components/Design/theme/'),
+        '@layouts': path.resolve(__dirname, '../src/components/Design/layouts/'),
+        '@type': path.resolve(__dirname, '../src/components/Design/type/'),
+      };
+    }
+
+    config.module = config.module || {};
+    config.module.rules = config.module.rules || [];
+
+    const imageRule = config.module.rules.find(rule => rule?.['test']?.test('.svg'));
+    if (imageRule) {
+      imageRule['exclude'] = /\.svg$/;
+    }
+
+    config.module.rules.push({
+      test: /\.svg$/,
+      use: ['@svgr/webpack'],
+    });
+    return config;
+  },
+};
+export default config;

client/.storybook/preview.tsx

@@ -0,0 +1,41 @@
+/** @jsxImportSource @emotion/react */
+
+import type {Preview} from '@storybook/react';
+import {HDesignProvider} from '../src/components/Design';
+
+const preview: Preview = {
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+    viewport: {
+      defaultViewport: {
+        styles: {
+          width: '375px',
+          height: '812px',
+        },
+      },
+    },
+    backgrounds: {
+      default: 'gray',
+      values: [
+        {
+          name: 'gray',
+          value: '#f3f3f3',
+        },
+      ],
+    },
+  },
+  decorators: [
+    Story => (
+      <HDesignProvider>
+        <Story />
+      </HDesignProvider>
+    ),
+  ],
+};
+
+export default preview;

client/cypress.config.ts

@@ -0,0 +1,12 @@
+import {defineConfig} from 'cypress';
+
+export default defineConfig({
+  e2e: {
+    baseUrl: 'http://localhost:3000',
+    viewportWidth: 430,
+    viewportHeight: 930,
+    // setupNodeEvents(on, config) {
+    //   // implement node event listeners here
+    // },
+  },
+});

client/cypress/constants/constants.ts

@@ -0,0 +1,6 @@
+const CONSTANTS = {
+  eventName: '테스트 이벤트',
+  eventPassword: '1234',
+};
+
+export default CONSTANTS;

client/cypress/e2e/createEvent.cy.ts

@@ -0,0 +1,79 @@
+import {ROUTER_URLS} from '@constants/routerUrls';
+import CONSTANTS from '../constants/constants';
+import RULE from '@constants/rule';
+
+beforeEach(() => {
+  cy.blockSentry();
+  cy.blockKakao();
+});
+
+describe('Flow: 랜딩 페이지에서부터 이벤트를 생성 완료하는 flow', () => {
+  it('랜딩페이지에서 "정산 시작하기" 버튼을 눌러 행사 이름 입력 페이지로 이동해야 한다.', () => {
+    cy.visit('/');
+    cy.get('button').contains('정산 시작하기').click();
+    cy.url().should('include', ROUTER_URLS.createEvent);
+  });
+
+  context('행사 이름 입력 페이지', () => {
+    beforeEach(() => {
+      cy.visit(ROUTER_URLS.createEvent);
+    });
+
+    it('행사 이름 입력 페이지에서 input이 포커싱 되어 있고, "다음" 버튼이 비활성화 되어 있어야 한다.', () => {
+      cy.get('input').focused();
+      cy.get('button').contains('다음').should('have.attr', 'disabled');
+    });
+
+    it('행사 이름이 1자 이상 입력된 경우 "다음" 버튼이 활성화 되고, 값이 없는 경우 "다음" 버튼이 비활성화 되어야 한다.', () => {
+      cy.get('input').type(CONSTANTS.eventName);
+      cy.get('button').contains('다음').should('not.have.attr', 'disabled');
+      cy.get('input').clear();
+      cy.get('input').should('have.value', '');
+      cy.get('button').contains('다음').should('have.attr', 'disabled');
+    });
+
+    it('행사 이름을 입력한 후 "다음" 버튼을 누르면 행사 비밀번호 설정 화면으로 이동해야 한다.', () => {
+      cy.get('input').type(CONSTANTS.eventName);
+      cy.get('button').contains('다음').click();
+
+      // 다음 버튼을 클릭하면 /create/event 경로가 아니라 /create/event/?로 가네요.. 그래서 일단 제거함.
+      cy.contains('비밀번호').should('exist');
+    });
+  });
+
+  context('행사 비밀번호 입력 페이지', () => {
+    beforeEach(() => {
+      cy.createEventName(CONSTANTS.eventName);
+    });
+
+    it('행사 비밀번호 입력 페이지에서 input이 포커싱 되어 있고, "행동 개시!" 버튼이 비활성화 되어 있어야 한다.', () => {
+      cy.get('input').focused();
+      cy.get('button').contains('행동 개시!').should('have.attr', 'disabled');
+    });
+
+    it('행사 비밀번호에 숫자가 아닌 입력을 할 경우 값이 입력되지 않아야 한다.', () => {
+      cy.get('input').type('테스트');
+      cy.get('input').should('have.value', '');
+    });
+
+    it(`행사 비밀번호에 ${RULE.maxEventPasswordLength}자리 이상 입력을 할 경우 처음 ${RULE.maxEventPasswordLength}자리만 입력되어야 한다.`, () => {
+      cy.get('input').type('12345');
+      cy.get('input').should('have.value', CONSTANTS.eventPassword);
+    });
+
+    it('행사 비밀번호이 1자 이상 입력된 경우 "행동 개시!" 버튼이 활성화 되고, 값이 없는 경우 "행동 개시!" 버튼이 비활성화 되어야 한다.', () => {
+      cy.get('input').type(CONSTANTS.eventPassword);
+      cy.get('button').contains('행동 개시!').should('not.have.attr', 'disabled');
+      cy.get('input').clear();
+      cy.get('input').should('have.value', '');
+      cy.get('button').contains('행동 개시!').should('have.attr', 'disabled');
+    });
+
+    it('행사 비밀번호을 입력한 후 "행동 개시!" 버튼을 누르면 행사 생성 완료 화면으로 이동해야 한다.', () => {
+      cy.interceptAPI({type: 'postEvent', statusCode: 200});
+      cy.interceptAPI({type: 'getEventName', statusCode: 200});
+      cy.get('input').type(CONSTANTS.eventPassword);
+      cy.get('button').contains('행동 개시!').click();
+    });
+  });
+});

client/cypress/fixtures/postEvent.json

@@ -0,0 +1,3 @@
+{
+  "eventId": "550e8400-e29b-41d4-a716-446655440000"
+}