kakao-tech-campus-2nd-step3 · KimKyuHoi · Nov 15, 2024 · Nov 11, 2024 · Nov 11, 2024 · Nov 11, 2024
diff --git a/.eslintignore b/.eslintignore
@@ -0,0 +1,9 @@
+postcss.config.js
+tailwind.config.js
+mockServiceWorker.js
+node_modules
+dist
+build
+.storybook
+storybook-static
+public
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -0,0 +1,64 @@
+{
+  "env": {
+    "browser": true,
+    "es2021": true
+  },
+  "extends": [
+    "plugin:prettier/recommended",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:react/recommended",
+    "plugin:react-hooks/recommended",
+    "plugin:jsx-a11y/recommended",
+    "plugin:import/errors",
+    "plugin:import/warnings",
+    "plugin:import/typescript",
+    "prettier"
+  ],
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "ecmaVersion": 2021,
+    "sourceType": "module",
+    "createDefaultProgram": true
+  },
+  "plugins": [
+    "@typescript-eslint",
+    "react",
+    "react-hooks",
+    "jsx-a11y",
+    "import",
+    "prettier"
+  ],
+  "settings": {
+    "import/resolver": {
+      "typescript": {
+        "alwaysTryTypes": true
+      }
+    },
+    "react": {
+      "version": "detect"
+    }
+  },
+  "rules": {
+    "no-param-reassign": ["error", { "props": false }],
+    "@typescript-eslint/no-non-null-assertion": "off",
+    "@typescript-eslint/no-explicit-any": "warn",
+    "@typescript-eslint/no-misused-promises": "off",
+    "@typescript-eslint/no-floating-promises": "off",
+    "react/prop-types": "off",
+    "prettier/prettier": "error",
+    "react/react-in-jsx-scope": "off",
+    "import/no-unresolved": "off",
+    "@typescript-eslint/no-unused-vars": "warn",
+    "no-console": "off",
+    "arrow-body-style": "off",
+    "prefer-arrow-callback": "off",
+    "max-len": "off",
+    "no-mixed-operators": "off",
+    "no-multiple-empty-lines": "off",
+    "import/no-named-as-default": "off",
+    "jsx-a11y/heading-has-content": "off",
+    "jsx-a11y/media-has-caption": "off",
+    "@typescript-eslint/no-empty-object-type": "off",
+    "react/display-name": "off"
+  }
+}
diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
@@ -0,0 +1,61 @@
+name: Deploy to Amazon S3
+
+on:
+  push:
+    branches: ['Master']
+
+env:
+  AWS_REGION: ap-northeast-2
+  S3_BUCKET_NAME: talkak-fe
+
+permissions:
+  contents: read
+
+jobs:
+  deploy:
+    name: Deploy
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout source code.
+        uses: actions/checkout@v3
+
+      - name: Cache node modules
+        uses: actions/cache@v4
+        with:
+          path: node_modules
+          key: ${{ runner.OS }}-build-${{ hashFiles('**/package-lock.json') }}
+          restore-keys: |
+            ${{ runner.OS }}-build-
+            ${{ runner.OS }}-
+
+      - name: Install pnpm
+        run: |
+          npm install -g pnpm
+
+      - name: Create .env file
+        run: |
+          echo "VITE_API_URL=${{ secrets.VITE_API_URL }}" >> .env
+          echo "VITE_FAST_API_URL=${{ secrets.VITE_FAST_API_URL }}" >> .env
+
+      - name: Install Dependencies
+        run: pnpm install --no-frozen-lockfile --force
+
+      - name: Lint Code
+        run: pnpm lint
+
+      - name: Build
+        run: CI='' pnpm run build
+
+      - name: Configure 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: ${{ env.AWS_REGION }}
+
+      - name: Upload to AWS S3
+        run: |
+          aws s3 cp \
+            --recursive \
+            --region ${AWS_REGION} \
+            ./dist s3://${{ env.S3_BUCKET_NAME }}
diff --git a/README.md b/README.md
@@ -43,15 +43,60 @@
 
 ## ✨ 프로젝트 소개
 
-영상 하이라이트를 분석하여 쇼츠를 생성해주는 쇼츠 자동화 서비스
+영상 하이라이트를 분석하여 쇼츠를 생성해주는 쇼츠 자동화 서비스, '딸깍'
 
 <br>
 
+## 💡 서비스 기획 의도
+
+최근 영상 소비 트렌드는 짧고 핵심적인 숏폼 위주로 변하고 있습니다. 따라서 이러한 흐름이 발 맞춰, '딸깍'은 영상 편집의 진입장벽을 낮추어 누구나 손쉽게 숏폼 영상을 만들고 공유할 수 있도록 돕는 것을 목표로 하고 있습니다. 또한 공유된 서로의 영상을 시청하고 피드백을 교환할 수 있는 커뮤니티를 통해 사용자들이 상호작용하며 함께 성장할 수 있는 플랫폼을 제공합니다.
+
+<br>
+
+## 🔧 주요 기능
+
+### 1. 하이라이트 추출 및 숏폼 생성
+
+- AI 가 롱폼 영상에서 주요 장면을 분석하여 자동으로 숏폼으로 편집해주어 짧은 시간 내에 완성도 높은 컨텐츠를 제작할 수 있게 합니다.
+
+### 2. 커뮤니티 기반 피드백
+
+- 사용자 간 상호 컨텐츠에 대해 피드백을 교환하고, 이를 바탕으로 컨텐츠를 개선할 수 있는 커뮤니티 기능을 제공합니다.
+
+### 3. 사용자별 추천 영상
+
+- 각 사용자의 관심사와 영상을 분석하여, 개인에게 적합한 흥미로운 컨텐츠를 추천할 수 있도록 추천 알고리즘을 설계했습니다.
+
+<br>
+
+## ⚙️ 프론트엔드 개발 주안점
+
+### 1. 컴포넌트 최적화를 위한 Lazy Loading 사용
+
+> 어플리케이션의 성능 최적화를 위해 `Lazy Loading` 을 활용하여 컴포넌트를 동적으로 로드하는 방식을 채택했습니다. 이를 통해 초기 로딩 속도를 개선하고 사용자가 필요한 시점에만 컴포넌트를 동적으로 로드할 수 있게 설계했습니다. 특히 리소스가 많이 필요한 무거운 컴포넌트를 사용자가 접글할 때까지 로드하지 않음으로써 불필요한 리소스 낭비를 방지하고 전반적인 성능을 향상시켰습니다.
+
+
+### 2. 런타임 타입 검증을 위한 React Hook Form 과 Zod의 조합
+
+> 타입스크립트는 정적 타입 검사를 통해 컴파일 타임에 오류를 잡을 수 있지만, 런타임 타입 검증이 불가능하다는 한계를 고려했습니다. 이러한 부분을 보완하기 위해 `React Hook Form` 과 `Zod` 를 사용하여 폼 데이터의 타입을 런타임에 검증할 수 있도록 구현했습니다. Zod 를 통해 런타임에서 타입을 검증하여 코드의 안정성을 높이고, 폼 입력값의 유효성을 보장하여 사용자 경험을 개선했습니다.
+
+### 3. 효율적인 개발 환경(DX)를 위한 조성
+
+> 재사용성과 코드 유지보수성을 높이기 위해 공용 디자인 시스템 컴포넌트와 코드 모듈화를 진행하였습니다. 이를 통해 반복적인 UI 구성 요소를 효율적으로 관리하고, 코드 복잡도를 줄이면서도 일관된 디자인을 유지할 수 있었습니다. 이를 통해 개발 속도를 향상시키고, 향후 기능 확장이나 수정 시에도 최소한의 변경으로 손쉽게 대응할 수 있도록 했습니다.
+
+<br>
+
+## 🔎 시스템 아키텍쳐
+
+![system](https://github.com/user-attachments/assets/8511d515-bb48-44d9-9456-17a33055f8eb)
+
+<br>
+
 ## 🖥️ 배포 링크
 
-http://talkak-fe.s3-website.ap-northeast-2.amazonaws.com
+- **Frontend**: http://talkak-fe.s3-website.ap-northeast-2.amazonaws.com
 
-http://ec2-43-202-1-31.ap-northeast-2.compute.amazonaws.com
+- **Backend**: http://ec2-43-202-1-31.ap-northeast-2.compute.amazonaws.com
 
 <br>
 
@@ -61,36 +106,39 @@ http://ec2-43-202-1-31.ap-northeast-2.compute.amazonaws.com
 
 <br>
 
-## 🤝그라운드 룰
+
+## 🤝 그라운드 룰
 
 [Ground Rule](https://quickest-asterisk-75d.notion.site/de33c852391d4e1599721de6136e9c3a?p=93d3274c7a8b4d159b38b16115c3ff42&pm=s)
 
 <br>
 
-## 📜커밋 컨벤션
+
+## 📜 커밋 컨벤션
 
 [Commit Convention](https://quickest-asterisk-75d.notion.site/de33c852391d4e1599721de6136e9c3a?p=17afc129cb144bfea2fc3cea94ea153d&pm=s)
 
 <br>
 
-## 👨‍💻코딩 컨벤션
+
+## 👨‍💻 코딩 컨벤션
 
 [Coding Convention](https://quickest-asterisk-75d.notion.site/de33c852391d4e1599721de6136e9c3a?p=833e57b063094194b6150558d89af6ec&pm=s)
 
 <br>
 
-## 📋API 명세서
+## 📋 API 명세서
 
 [API Docs](https://quickest-asterisk-75d.notion.site/de33c852391d4e1599721de6136e9c3a?p=c1164ec45e4a485284644935bdb9a29f&pm=s)
 
 <br>
 
-## ❎에러코드 정의서
+## ❎ 에러코드 정의서
 
 [ErrorCode Definition](https://quickest-asterisk-75d.notion.site/de33c852391d4e1599721de6136e9c3a?p=de999aae2f53421088e7edd875702089&pm=s)
 
 <br>
 
-## 🛠️테스트 결과 보고서
+## 🛠️ 테스트 결과 보고서
 
 [Testing Report](https://quickest-asterisk-75d.notion.site/de33c852391d4e1599721de6136e9c3a?p=1243d1ecfbac437abbffece87f8f7c8a&pm=s)
diff --git a/babel.config.cjs b/babel.config.cjs
diff --git a/components.json b/components.json
@@ -13,7 +13,7 @@
   "aliases": {
     "components": "@/components",
     "utils": "@/lib/utils",
-    "ui": "@/components/ui",
+    "ui": "@/components/common",
     "lib": "@/lib",
     "hooks": "@/hooks"
   }

diff --git a/eslint.config.js b/eslint.config.js
diff --git a/index.html b/index.html
@@ -2,9 +2,9 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <link rel="icon" type="image/svg+xml" href="/Logo.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + React + TS</title>
+    <title>TALKAK</title>
   </head>
   <body>
     <div id="root"></div>

diff --git a/jest.config.cjs b/jest.config.cjs
diff --git a/jest.setup.cjs b/jest.setup.cjs