Merge pull request #506 from team-moabam/dev

chore: dev 내용을 main 으로 머지합니다.

.github/actions/install/action.yml

@@ -0,0 +1,22 @@
+name: Install
+description: 'Node.js와 NPM 패키지를 설치합니다.'
+runs:
+  using: composite
+  steps:
+    - name: Node.js 설치
+      uses: actions/setup-node@v4
+      with:
+        node-version: 20.x
+        cache: 'npm'
+
+    - name: 의존성 캐싱
+      uses: actions/cache@v4
+      id: npm-cache
+      with:
+        path: '**/node_modules'
+        key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
+
+    - name: 의존성 설치
+      shell: bash
+      if: steps.npm-cache.outputs.cache-hit != 'true'
+      run: npm ci

.github/workflows/cd.yml

@@ -0,0 +1,97 @@
+name: CD
+
+on:
+  push:
+    branches: ['main', 'dev']
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.ref }}
+  cancel-in-progress: true
+
+env:
+  VITE_DEV_BACKEND_API_ENDPOINT: ${{ secrets.VITE_DEV_BACKEND_API_ENDPOINT }}
+  VITE_PROD_BACKEND_API_ENDPOINT: ${{ secrets.VITE_PROD_BACKEND_API_ENDPOINT }}
+  VITE_DEV_DEPLOY_ENDPOINT: ${{ secrets.VITE_DEV_DEPLOY_ENDPOINT }}
+  VITE_PROD_DEPLOY_ENDPOINT: ${{ secrets.VITE_PROD_DEPLOY_ENDPOINT }}
+
+  VITE_KAKAO_LOGIN_CLIENT_ID: ${{ secrets.VITE_KAKAO_LOGIN_CLIENT_ID }}
+  VITE_FIREBASE_API_KEY: ${{ secrets.VITE_FIREBASE_API_KEY }}
+  VITE_FIREBASE_AUTH_DOMAIN: ${{ secrets.VITE_FIREBASE_AUTH_DOMAIN }}
+  VITE_FIREBASE_PROJECT_ID: ${{ secrets.VITE_FIREBASE_PROJECT_ID }}
+  VITE_FIREBASE_STORAGE_BUCKET: ${{ secrets.VITE_FIREBASE_STORAGE_BUCKET }}
+  VITE_FIREBASE_MESSAGING_SENDER_ID: ${{ secrets.VITE_FIREBASE_MESSAGING_SENDER_ID }}
+  VITE_FIREBASE_APP_ID: ${{ secrets.VITE_FIREBASE_APP_ID }}
+  VITE_FIREBASE_MEASUREMENT_ID: ${{ secrets.VITE_FIREBASE_MEASUREMENT_ID }}
+  VITE_FIREBASE_VAPID_PUBLIC_KEY: ${{ secrets.VITE_FIREBASE_VAPID_PUBLIC_KEY }}
+
+  VITE_TOSS_CLIENT_KET: ${{ secrets.VITE_TOSS_CLIENT_KET }}
+  VITE_TOSS_CUSTOMER_KEY: ${{ secrets.VITE_TOSS_CUSTOMER_KEY }}
+
+jobs:
+  production:
+    if: github.ref == 'refs/heads/main'
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Node.js 및 NPM 설치
+        uses: ./.github/actions/install
+
+      - name: .env 파일 생성
+        run: |
+          echo "VITE_DEPLOY_TARGET=production" >> .env
+          jq -r 'to_entries|map("\(.key)=\(.value|tostring)")|.[]' <<< "$SECRETS_CONTEXT" >> .env
+        env:
+          SECRETS_CONTEXT: ${{ toJson(env) }}
+
+      - name: .env 파일 확인
+        run: cat .env
+
+      - name: 빌드
+        run: npm run build
+
+      - name: AWS credentials 설정
+        uses: aws-actions/configure-aws-credentials@v4
+        with:
+          aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
+          aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
+          aws-region: 'ap-northeast-2'
+
+      - name: S3 버킷에 업로드
+        run: aws s3 sync dist s3://${{ secrets.AWS_S3_WEB_HOST }} --delete
+
+      - name: CloudFront 캐시 무효화
+        run: aws cloudfront create-invalidation --distribution-id ${{ secrets.AWS_CLOUDFRONT_WEB_HOST_ID }} --paths '/*'
+  development:
+    if: github.ref == 'refs/heads/dev'
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Node.js 및 NPM 설치
+        uses: ./.github/actions/install
+
+      - name: .env 파일 생성
+        run: |
+          echo "VITE_DEPLOY_TARGET=development" >> .env
+          jq -r 'to_entries|map("\(.key)=\(.value|tostring)")|.[]' <<< "$SECRETS_CONTEXT" >> .env
+        env:
+          SECRETS_CONTEXT: ${{ toJson(env) }}
+
+      - name: .env 파일 확인
+        run: cat .env
+
+      - name: 빌드
+        run: npm run build
+
+      - name: AWS credentials 설정
+        uses: aws-actions/configure-aws-credentials@v4
+        with:
+          aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
+          aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
+          aws-region: 'ap-northeast-2'
+
+      - name: S3 버킷에 업로드
+        run: aws s3 sync dist s3://${{ secrets.AWS_S3_DEV_WEB_HOST }} --delete

.github/workflows/ci.yml

@@ -0,0 +1,24 @@
+name: CI
+
+on:
+  pull_request:
+    branches: ['main', 'dev']
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.ref }}
+  cancel-in-progress: true
+
+jobs:
+  ci:
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        command: ['build', 'build-storybook']
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Node.js 및 NPM 설치
+        uses: ./.github/actions/install
+
+      - run: npm run ${{ matrix.command }}

.vscode/settings.json

@@ -1,6 +1,6 @@
 {
   "editor.codeActionsOnSave": {
-    "source.fixAll.eslint": true
+    "source.fixAll.eslint": "explicit"
   },
   "files.associations": {
     "*.css": "tailwindcss"

src/core/api/functions/roomAPI.ts

@@ -36,8 +36,6 @@ const roomAPI = {
     roomId: string;
     title: string;
     announcement: string;
-    // TODO: 루틴 수정을 제한하는 요구사항 발생
-    // routines: string[];
     password: string;
     certifyTime: number;
     maxUserCount: number;

src/domain/RoomForm/components/Password.tsx

@@ -1,7 +1,7 @@
 import { useCallback } from 'react';
 import { useFormContext } from 'react-hook-form';
 import { PasswordInput } from '@/shared/Input';
-import { PASSWORD } from '@/domain/RoomForm/constants/literals';
+import { FORM_LITERAL } from '@/domain/RoomForm/constants/literals';
 import { errorStyle } from '../constants/styles';
 
 interface PasswordProps {
@@ -29,7 +29,7 @@ const Password = ({ placeholder }: PasswordProps) => {
       <PasswordInput
         {...register('password')}
         placeholder={placeholder}
-        maxLength={PASSWORD.max}
+        maxLength={FORM_LITERAL.password.max.value}
         onChange={handleChangePassword}
       />
       {errors.password && (

src/domain/RoomForm/components/Routines.tsx

@@ -2,7 +2,7 @@ import { useCallback } from 'react';
 import { useFieldArray, useFormContext } from 'react-hook-form';
 import { InnerTextInput } from '@/shared/Input';
 import { Icon } from '@/shared/Icon';
-import { ROUTINE_COUNT, ROUTINE_NAME } from '../constants/literals';
+import { FORM_LITERAL } from '../constants/literals';
 import { errorStyle, iconButtonStyle } from '../constants/styles';
 
 const Routines = () => {
@@ -25,7 +25,7 @@ const Routines = () => {
   });
 
   const handleAppendRoutine = useCallback(() => {
-    if (routines.length >= ROUTINE_COUNT.max) {
+    if (routines.length >= FORM_LITERAL.routines.max.value) {
       return;
     }
 
@@ -54,10 +54,10 @@ const Routines = () => {
               text={
                 watchRoutines[idx].value.length.toString() +
                 ' / ' +
-                ROUTINE_NAME.max
+                FORM_LITERAL.routines.item.max.value
               }
               placeholder="루틴 이름"
-              maxLength={ROUTINE_NAME.max}
+              maxLength={FORM_LITERAL.routines.item.max.value}
             />
             {idx !== 0 && (
               <div
@@ -91,7 +91,7 @@ const Routines = () => {
           />
         </button>
         <div className="text-center text-xs">
-          {routines.length} / {ROUTINE_COUNT.max}
+          {routines.length} / {FORM_LITERAL.routines.max.value}
         </div>
       </li>
     </ul>

src/domain/RoomForm/components/UserCount.tsx

@@ -2,7 +2,7 @@ import { useCallback } from 'react';
 import { useFormContext } from 'react-hook-form';
 import { Icon } from '@/shared/Icon';
 import { iconButtonStyle, errorStyle } from '../constants/styles';
-import { USER_COUNT } from '../constants/literals';
+import { FORM_LITERAL } from '../constants/literals';
 
 const UserCount = () => {
   const {
@@ -15,7 +15,7 @@ const UserCount = () => {
 
   const handleSetUserCount = useCallback(
     (count: number) => {
-      if (count <= 0 || count > USER_COUNT.max) {
+      if (count <= 0 || count > FORM_LITERAL.userCount.max.value) {
         return;
       }