프로젝트 제목

프로젝트 부제목

🔗 배포 링크

0. 목차

1. 프로젝트 소개
2. 팀원 소개
3. 개발 일정
4. 기술 스택
5. 라이브러리 사용 이유
6. 컨벤션
7. 브랜치 및 디렉토리 구조
8. 주요 기능 소개
9. 상세 담당 업무
10. 주요 코드
11. 트러블 슈팅
12. 프로젝트 회고
13. 시작 가이드

🚩 1. 프로젝트 소개

Notion: 프로젝트 노션 링크

프로젝트에 대한 전반적인 소개를 여기에 적어주세요.

▲

🏃 2. 팀원 소개

팀원1 이름	팀원2 이름	팀원3 이름	팀원4 이름
기능1 설명	기능2 설명	기능3 설명	기능4 설명

▲

📅 3. 개발 일정

프로젝트 개발 기간: 202n.00.00 - 202n.00.00 (n일)

▲

📚 4. 기술 스택

Environment

Config

Development

Project Management

Design

Hosting

Communication

▲

❓ 5. 라이브러리 사용 이유

각 라이브러리의 사용 이유를 설명해주세요.

React

Redux

Axios

Styled-Components

▲

🤝 6. 컨벤션

prettier

{
  "printWidth": 80,
  "tabWidth": 2,
  "singleQuote": true,
  "trailingComma": "all",
  "semi": false
}

커밋 컨벤션

타입	설명	예시
feat	기능 구현	[feat] - 페인페이지 레이아웃 구현
rename	파일/폴더 이름 변경 및 이동	[rename] - src/old-folder를 src/new-folder로 이동
script	라이브러리 추가	[script] - supabase 라이브러리 추가
fix	버그 수정	[fix] - supabase env 미연결 문제 해결
chore	빌드 업무 수정, 패키지 매니저 설정 수정	[chore] - .env 설정 변경
refactor	코드 리팩토링	[refactor] - 함수 분리 및 코드 정리
style	코드 포맷팅, 세미콜론 누락, 코드 변경이 없는 경우	[style] - 버튼 스타일 수정
test	테스트 코드, 리팩토링 테스트 코드 추가	[test] - 유저 로그인 기능 테스트 추가
docs	문서 수정	[docs] - API 문서 업데이트

▲

7. 🗂️ 브랜치 및 디렉토리 구조

브랜치

• main:
• dev:

디렉토리 구조

📂 App
├── 📂 src
│   ├── 📂 components      # 컴포넌트 관련 파일
│   ├── 📂 pages           # 페이지 파일
│   ├── 📂 redux           # Redux 상태 관리 파일
│   ├── 📂 utils           # 유틸리티 파일
│   └── 📄 App.js          # 메인 App 컴포넌트
├── 📂 public
│   ├── 📄 index.html      # HTML 엔트리 파일
│   └── 📄 favicon.ico     # 사이트 아이콘
└── 📄 package.json        # 프로젝트 종속성 및 설정 파일

▲

8. 💻 주요 기능 소개

프로젝트의 주요 기능을 GIF를 첨부하여 설명해주세요.

1) 홈

- 화면	- 화면	- 화면

2) 게시글

상세페이지 화면	게시물 작성 - ??	게시물 작성 - ??

3) 404 & 로딩 화면

- 화면	- 화면	- 화면

▲

9. 📄 상세 담당 업무

1) 팀원1 이름

• 🎨 디자인

  • 로고 디자인 및 이미지 제작

• 💻 화면 개발

  • 로그인 화면
  • 검색 화면
  • 채팅 화면

• 🧑‍💻 구현 기능

  • 로딩 페이지
    • 회원가입 후 로그인 모달이 올라오는 로딩페이지
  • 팔로워 목록 및 팔로워 취소&팔로우
    • 팔로워 목록을 getFollowerList로 서버에 요청하여 리스트 출력

• ♻️ 리팩토링

  • 관련 설명

2) 팀원2 이름

• 🎨 디자인

  • 전체적인 UI 디자인

• 💻 화면 개발

  • 공통 헤더 네브바
  • 공통 푸터 네브바
  • 삭제 / 신고 모달창

• 👩‍💻 구현 기능

  • 라우터 초기 셋팅
  • 게시물 등록
    • 토글 Open, Close에 따라 인풋창 높이 자동 조절
    • api 전송 한계로 인해 한 공간에 저장하여 보낼 수 있게, 데이터를 연산자로 구분하여 한줄로 전송 이미지 추가 및 삭제 가능
  • 게시글 삭제 / 신고
    • userId를 통해 유저를 구별하여 타인의 경우 신고 기능, 본인일 경우 삭제 기능 구현

• ♻️ 리팩토링

  • 관련 설명

▲

✨ 10. 주요 코드

주요 코드에 대한 설명을 입력하세요.

설명

주요 코드에 대한 설명을 입력하세요.

설명

▲

🚦 11. 트러블 슈팅

트러블 슈팅을 입력하세요.

1. 문제 상황
   

2. 시도
   

3. 해결방안
   

▲

12. 📝 프로젝트 회고

프로젝트 진행 후 느낀 점과 개선할 점을 적어주세요. 블로그에 작성하셨다면 블로그 링크를 첨부해주세요.

▲

13. 🛠️ 시작 가이드

Installation

# 1. 클론하기
$ git clone https://github.com/CAREER-For-Me/Career-web.git .

# 2. 의존성 설치하기
$ yarn

# 3. 개발 서버 실행하기
$ yarn dev

▲