Skip to content

Commit

Permalink
Merge pull request #90 from kakao-tech-campus-2nd-step3/Develop
Browse files Browse the repository at this point in the history
[Master] 11주차 코드 Master 에 병합
  • Loading branch information
KimKyuHoi authored Nov 15, 2024
2 parents 07f66e4 + 2070283 commit e40c47e
Show file tree
Hide file tree
Showing 124 changed files with 5,738 additions and 5,229 deletions.
9 changes: 9 additions & 0 deletions .eslintignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
postcss.config.js
tailwind.config.js
mockServiceWorker.js
node_modules
dist
build
.storybook
storybook-static
public
64 changes: 64 additions & 0 deletions .eslintrc.json
Original file line number Diff line number Diff line change
@@ -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"
}
}
61 changes: 61 additions & 0 deletions .github/workflows/deploy.yml
Original file line number Diff line number Diff line change
@@ -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 }}
66 changes: 57 additions & 9 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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>

Expand All @@ -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)
3 changes: 0 additions & 3 deletions babel.config.cjs

This file was deleted.

2 changes: 1 addition & 1 deletion components.json
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@
"aliases": {
"components": "@/components",
"utils": "@/lib/utils",
"ui": "@/components/ui",
"ui": "@/components/common",
"lib": "@/lib",
"hooks": "@/hooks"
}
Expand Down
45 changes: 0 additions & 45 deletions eslint.config.js

This file was deleted.

4 changes: 2 additions & 2 deletions index.html
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
17 changes: 0 additions & 17 deletions jest.config.cjs

This file was deleted.

1 change: 0 additions & 1 deletion jest.setup.cjs

This file was deleted.

Loading

0 comments on commit e40c47e

Please sign in to comment.