$ npm i
$ npm run dev[서비스 링크](https:)
- 프로젝트 이름: Pet Moment
- 프로젝트 설명: 동물들의 특별한 순간을 공유하는 공간 SNS 플랫폼 개발
| 김금란 | 양명규 | 이민태 |
|---|---|---|
 |
 |
 |
| FE | FE | FE |
| GitHub | GitHub | GitHub |
| 고양이 좋아함😻 | 고양이 좋아함😻 | 강아지 좋아함🐶 |
- 회원가입:
- 사용자는 소셜 로그인(Google)을 통해 계정을 생성할 수 있다.
- 로그인/로그아웃:
- 사용자는 소셜 로그인을 통해 간편하게 로그인할 수 있다.
- 사용자는 로그아웃을 통해 서비스를 탈출 할 수 있다.
- 프로필 관리:
- 사용자는 자신의 프로필 사진, 닉네임, 소개 글을 수정할 수 있다.
- 사용자는 자신의 관심사를 정할 수 있다.
- 좋아요:
- 사용자는 플레이리스트에 대해 좋아요를 누르거나 제거할 수 있다.
- 공유:
- 사용자는 플레이리스트를 클립보드를 복사하여 공유할 수 있다.
- 플레이리스트 CRUD:
- 사용자는 플레이 리스트를 생성하고, 리스트의 영상 링크를 추가하거나 제거하여 확인할 수 있다.
- 플레이리스트 구독:
- 다른 사용자가 공개한 플레이 리스트를 구독하거나 구독을 취소할 수 있다.
- 검색
- 사용자는 창작자, 해시 태그, 플레이리스트 제목을 키워드로 공개된 모든 플레이리스트를 검색할 수 있다.
| 김금란 | |
|
| 양명규 | |
|
| 이민태 | |
|
| Javascript |  |
| Typescript |  |
| React |  |
18.3.1 |
| Zustand |  |
5.0 |
| StyledComponents |  |
6.1.14 |
| Tanstack Query |  |
5.62.15 |
| Firebase |  |
11.0.2 |
| Vercel | R37 |
| Git |  |
| Notion |  |
| Slack |  |
| Zoom |  |
project/
├── public # 로고 및 정적 파일
│ ├── favicon.ico
│ ├── logo_petmoment.svg
│
├── src/
| |── api/ # API 호출 함수 및 관련 로직
| | └── firebase/ # 파이어스토어 설정 및 초기화
| | └── service/ # 내부 api 함수
| | └── external/ # 외부 api 함수
│ ├── assets/ # 이미지 아이콘 폰트 등 리소스
│ ├── components/ # 재사용 가능한 UI 컴포넌트
| | └── atom/ # atom 컴포넌트
| | └── 기능 단위/ # 기능별 컴포넌트 그룹화
| | └── index.ts
| | └── 컴포넌트
| |── constant/ # 프로젝트에서 사용하는 상수값 모음 (예: URL, 키값 등)
| |── context/ # Context API 관련 설정
│ ├── hooks/ # 커스텀 훅 모음
| |── layout/ # 레이아웃 관련 UI
│ ├── pages/ # 각 페이지컴포넌트와 해당 페이지에서만 사용하는 컴포넌트
│ ├── provider/ # React Provider 컴포넌트 정의
| |── routes/ # 경로 설정 화면 라우팅과 URL 직접 접근 차단
| |── store/ # 전역 상태 관리를 위한 로직 (Zustand, user 상태 관리 관련 코드)
| ├── styles/ # reset.css 및 디자인 토큰 정의
| | └── token/
| | └── reset.css
| | └── index.ts
| ├── types/ # api 스키마와 프로젝트에서 사용하는 type 정의
| ├── utils/ # 다양한 곳에서 사용하는 유틸 함수 정의
│ ├── App.tsx # 메인 애플리케이션 컴포넌트
│ ├── main.tsx # 엔트리 포인트 파일
│ ├── GlobalStyle.ts # 전역 스타일 정의
├── .commitlintrc.json # 커밋 메시지 스타일을 정의하는 규칙 파일
├── .stylelintrc.json # css 설정 파일
├── .prettierrc # 코드 포매팅 규칙 파일
├── eslint.config.js # ESLint 설정 파일
├── index.html # 애플리케이션의 HTML 템플릿
├── package-lock.json # 정확한 종속성 버전이 기록된 파일로, 일관된 빌드를 보장
├── package.json # 프로젝트 종속성 및 스크립트 정의
├── .gitignore # Git 무시 파일 목록
├── README.md # 프로젝트 개요 및 사용법
├── tsconfig.json # TypeScript 설정 파일
└── vite.config.ts # Vite 설정 파일
- components
|- core : atom(버튼, 인풋), 공용 기능 컴포넌트(탭, 아코디언, 드롭다운...)
|- modal
|- index.ts
|- Modal.tsx
|- historyModal
|-index.ts
|-HistoryModal.tsx
|-HistoryModal.styles.ts
|- SalaryModal.tsx => 도메인별
|- Component3.tsx => 도메인별
|- Component4.tsx
|- 기능
|- 기능
|- 기능
|- 기능우리의 브랜치 전략은 Git Flow를 기반으로 하며, 다음과 같은 브랜치를 사용합니다.
-
Main Branch
- 배포 가능한 상태의 코드를 유지합니다.
-
develop Branch
- 페이지 및 기능 개발 상태의 코드를 유지합니다.
-
feature Branch
- feature 단위로 개발하거나 설정, 수정 등의 목적별로 상태 코드를 유지합니다.
-
상수 : 영문 대문자(SNAKE_CASE)
const SNAKE_CASE;
-
클래스 네임 : kebab-case
<div className = "kebab-case">
-
변수 & 함수 : camelCase
-
컴포넌트 명 : PascalCase
- 컴포넌트 명과 디렉토리 명(`directory/index.tsx`) 동일 - 파일 하나당 컴포넌트 하나(단일 책임 원칙) ```tsx // index.ts export { default as SomeComponent } from 'SomeComponent'; ``` ```tsx // SomeComponent.tsx import * as S from './NavBar.styles'; const SomeComponent = () => { return ( <S.SomeComponent> <S.ComponentHeader>이름</S.ComponentHeader> <S.ComponentBody> <Children userInfoArr={userInfo.info} userQueArr={userInfo.question} /> </S.ComponentBody> </S.SomeComponent> ); }; export default SomeComponent; ```
-
컴포넌트명.styles.ts 파일
// SomeComponent.styles.ts export const SomeComponent = styled.article` background: #efefef; `; export const ComponentHeader = styled.div` background: #aaa; `; export const ComponentBody = styled.div` padding: 70px 0; `;
함수는 함수 표현식을 사용하며, 화살표 함수를 사용한다.
// Good
const fnName = () => {};
// Bad
function fnName() {};카멜 케이스를 기본으로 하며, 컴포넌트 폴더일 경우에만 파스칼 케이스로 사용한다.
// 카멜 케이스
camelCase;
// 파스칼 케이스
PascalCase;컴포넌트일 경우만 .tsx 확장자를 사용한다 (그 외에는 .ts)
customHook을 사용하는 경우 : use + 함수명
prefix : subject (#issueNumber)- ISSUE 하나당 - branch 하나, PR 하나
- 이슈 제목
[prefix] 구체적인 내용
- PR 제목
이슈 제목과 동일
- 브랜치 컨벤션
prefix/function-issueNumber
- 커밋 메시지 컨벤션
prefix: subject (#issueNumber)
- 사용하는 prefix
feature: 새로운 기능 추가- 커밋 메세지는
feat사용
- 커밋 메세지는
fix: 버그 수정hotfix: 긴급한 버그 수정docs: 문서 수정style: 코드 스타일 변경 (코드 로직에 영향을 주지 않는 변경)refactor: 코드 리팩토링perf: (Performance) 성능 개선design: UI 디자인 변경 또는 css 관련 작업test: 테스트 작업 관련settings: 프로젝트 설정 관련 변경build: 빌드 시스템이나 외부 종속성에 대한 변경ci: CI 설정 파일 및 스크립트 변경chore: 기타 작업 (ex. .gitignore 수정)comment: 주석 추가 또는 수정rename: 파일 또는 폴더명 변경remove: 파일 삭제revert: 이전 커밋 되돌리기
- 이슈 제목
- user 콜렉션
- playlist 콜렉션
- comment 콜렉션
