From 71e3b925e86a49c16218445c7184c1e25ccef473 Mon Sep 17 00:00:00 2001 From: presentKey <115006670+presentKey@users.noreply.github.com> Date: Thu, 2 May 2024 16:15:20 +0900 Subject: [PATCH] =?UTF-8?q?docs:=20README=20=EC=97=85=EB=8D=B0=EC=9D=B4?= =?UTF-8?q?=ED=8A=B8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 97 +++++++------------------------------------------------ 1 file changed, 11 insertions(+), 86 deletions(-) diff --git a/README.md b/README.md index 6d9d518f..60ab1d13 100644 --- a/README.md +++ b/README.md @@ -29,11 +29,12 @@ ## 기술 스택 -- React -- TypeScript -- Emotion -- TanStack Query -- Framer Motion + + + +## 아키텍쳐 + +![image](https://github.com/oduck-team/oduck-client/assets/105474635/2ddf7cb8-5a7b-4399-ad66-7c790a7bf5cc) ## 주요 기능 ### 🌟 인기 애니메이션 @@ -61,13 +62,13 @@ ### 🙌 소셜 로그인 -- 소셜 계정으로 쉽고 빠르게 가입 및 로그인할 수 있어요. +- 소셜 계정으로 쉽고 빠르게 가입 및 로그인할 수 있어요. +## 구현 영상 +[🔗 영상 Wiki](https://github.com/oduck-team/oduck-client/wiki/%EC%98%81%EC%83%81) -## 아키텍쳐 -![image](https://github.com/oduck-team/oduck-client/assets/105474635/2ddf7cb8-5a7b-4399-ad66-7c790a7bf5cc) ## 오덕을 만드는 과정 @@ -173,81 +174,5 @@ [🔗바로가기](https://github.com/oduck-team/oduck-server) -# 개발 -## 💬 커밋 메세지 컨벤션 - -### 커밋 형식 - -커밋 메세지 형식은 다음을 따릅니다: - -```bash -type: subject #issue-number - -body - -footer -``` - -- `type` : 커밋의 종류를 나타냅니다. 종류는 다음 항목을 참고해주세요. -- `subject` : 커밋의 요약을 나타냅니다. -- `iuuse-number` : 관련된 이슈 번호를 나타냅니다. -- `body` : 커밋의 자세한 내용을 나타냅니다. (선택) -- `footer` : 커밋과 관련된 이슈를 닫거나, 어떤 변경을 가져오는지 등 추가적인 정보를 나타냅니다. (선택) - -예시는 다음과 같습니다: - -> Header 컴포넌트를 개발, 이에 따른 스타일을 변경함 - -```bash -feat: Header 컴포넌트 구현 및 스타일 수정 #123 - -* 헤더 컴포넌트를 개발합니다. 새 컴포넌트에 맞게 style.css를 수정했습니다. - -* Close #123 -``` - -### 커밋 종류 (type) - -- `feat` : 새로운 기능 -- `fix` : 버그 수정 -- `docs` : 문서만 변경 -- `style` : 코드에 영향을 주지 않는 변경 (공백, 세미콜론, css 등) -- `refactor` : 코드 리팩토링. 코드의 기능 변경이 아닌 가독성을 높이거나 재사용성 향상, 주석 추가 등 -- `test` : 테스트 추가, 기존 테스트 수정 등 -- `cleanup` : 불필요 파일 삭제, 코드 삭제 -- `rename` : 파일, 폴더 이름 변경 -- `chore` : 프로젝트 운영(유지보수, 개선) 업데이트. 빌드 설정, 의존성 변경, 스크립트 추가 등 - -## ⚛️ React Component 컨벤션 -### 폴더, 파일 구조 -Component 폴더, 파일 구조는 다음을 따릅니다: -```bash -ComponentName/ - index.tsx - style.ts -``` -하위 카테고리에 속하는 컴포넌트의 경우, 별도의 파일을 만듭니다: -```bash -ComponentName/ - index.tsx - style.ts - AddComponentName.style.ts - AddComponentName.tsx - ComponentNameList.tsx - ComponentNameList.style.ts -``` - -### 코드 -컴포넌트는 `function` 키워드를 사용합니다. -```tsx -export default function Component() { - return <>; -} -``` -이벤트 핸들러는 `handle~` 명칭과 함께 `arrow function` 키워드를 사용합니다. -```tsx -export default function Component() { - const handleClick = () => {}; - return <>; -} -``` +## 컨벤션 +[🔗 컨벤션 Wiki](https://github.com/oduck-team/oduck-client/wiki/%EC%BB%A8%EB%B2%A4%EC%85%98)