Notion: 프로젝트 노션 링크
PPT: 프로젝트 발표 자료
React + TypeScript를 활용하여 게임 커뮤니티용 소셜 네트워크 서비스를 구현.
 |
 |
 |
|
 |
|---|---|---|---|---|
 |
 |
 |
 |
 |
| 이재건 | 김은지 | 박은서 | 이지윤 | 최원일 |
| 팀장 | 디자인 | 외부 API 연결 | 디자인, 외부 API 연결 | 발표 자료 작성 |
| 게시글 & 좋아요 구현 | 커뮤니티 & 알림 구현 | 인증 & 사이드바 & 구독 구현, 인기글 기능 | 회원 페이지 구현 | 검색 & 댓글 구현 |
프로젝트 개발 기간: 2025.04.25 - 2025.05.19 (25일)
React + TypeScript: 프로젝트 환경
Zustand: 전역 상태 설정
Axios: API 통신
Tailwind CSS: 스타일
{
"semi": true,
"singleQuote": true,
"tabWidth": 2,
"useTabs": false,
"plugins": ["prettier-plugin-tailwindcss"]
}| 타입 | 설명 | 깃모지 |
|---|---|---|
| feat | 새로운 기능 추가 | ✨ |
| refactor | 코드 리팩토링 | 🔨 |
| fix | 버그 수정 | 🐛 |
| chore | 패키지 매니저, 설정 세팅 | 📦 |
| init | 초기 세팅 및 종속성 추가 관련 | 🌱 |
| docs | 문서 수정 | 📝 |
| pencil | 오탈자 또는 문구, 변수명 수정 | ✏️ |
| zap | 기능 개선 및 변경 | ⚡️ |
| poop | 코드 또는 파일 삭제 | 💩 |
| design | 문서 수정 | 🎨 |
| style | 코드 포맷팅, 세미콜론 누락 등 코드 변경 없음 | 💄 |
| test | 테스트 코드, 리팩토링 테스트 코드 추가 | ✅ |
- ✨ feat: 페인페이지 레이아웃 구현
- 🐛 fix: 잘못된 날짜 형식 문제 해결
브랜치
main: 배포 전용 브랜치, 항상 안정적인 상태 유지dev: 개발 통합 브랜치, 기능 완성 후 mergefeature/기능: 기능 단위 작업 브랜치, 기능마다 분기해서 작업 진행
디렉토리 구조
📂 FiveCoders
├── 📂 src
│ ├── 📂 assets # 이미지, 아이콘 등 정적 리소스
│ │ ├── 📂 icons
│ │ ├── 📂 imgs
│ ├── 📂 components # 컴포넌트 관련 파일 (재사용 가능한 UI)
│ ├── 📂 css # 전역 스타일 모음
│ ├── 📂 data # 프로젝트 적용을 위한 데이터 파일
│ ├── 📂 pages # 라우트 단위 페이지 파일
│ ├── 📂 services # API 통신 모듈
│ ├── 📂 store # 전역 상태 관리 파일
│ ├── 📂 types # 타입스크립트 타입 정의
│ ├── 📂 utils # 유틸리티 파일(함수)
│ └── 📄 App.tsx # 메인 App 컴포넌트
│ └── 📄 main.tsx
│ └── 📄 router.tsx # 라우터 설정
├── 📂 public
│ └── 📄 favicon.ico # 사이트 아이콘
└── 📄 package.json # 프로젝트 종속성 및 설정 파일
└── 📄 tsconfig.json # 타입스크립트 설정 파일
| 메인 화면 | 검색 화면 | 내 정보 화면 |
|---|---|---|
 |
 |
 |
| 커뮤니티 리스트 | 특정 커뮤니티 | 게시물 작성 |
|---|---|---|
 |
 |
 |
| 로그인 화면 | 채널 생성 화면 | 404 화면 |
|---|---|---|
 |
 |
 |
-
✨ 팀장
- 프로젝트 초기 세팅 및 관리
- 노션페이지 작성 및 회의 진행
-
💻 화면 개발
- 각 커뮤니티 화면
- 게시글 작성, 수정 화면
- 댓글 작성, 좋아요 화면
-
🛠 구현 기능
- 게시글 작성 및 수정
- 내 게시글, 검색 게시글 바로가기
- 좋아요 기능
-
🎨 디자인
- 전체적인 UI 디자인
-
💻 화면 개발
- 커뮤니티 목록 화면
- 커뮤니티 생성 화면(관리자)
- 알림 팝업창 화면
-
🛠 구현 기능
- 커뮤니티 생성 기능
- 좋아요와 댓글 알림 기능
-
📑 문서 관리
- 프로젝트 초기 세팅 및 관리
- 와이어프레임 및 피그마 제작
-
💻 화면 개발
- 로그인, 회원 가입 화면
- 사이드바 화면(반응형 제작)
- 홈 외부 API, 인기글 화면
- 404 오류 화면
-
🛠 구현 기능
- 로그인, 회원 가입 기능
- 커뮤니티 구독 기능
- 모든 유저 표시(로그인 표시)
- 외부 API 연결 (스팀, 디스코드)
- 뉴스 캐로셀
- 오늘의 인기글 표시 기능
-
🎨 디자인
- 전체적인 UI 디자인
-
💻 화면 개발
- 사용자 프로필 화면
- 프로필 수정 화면
- 홈 외부 API 화면
-
🛠 구현 기능
- 사용자 프로필 수정 기능
- 사용자 아이디, 비밀번호 설정 기능
- 타 사용자 프로필 확인 기능
- 외부 API 연결(던전앤파이터)
-
📑 문서 관리
- 프로젝트 발표 자료 작성
-
💻 화면 개발
- 검색 바를 포함한 상단 바
- 비어있는 컨텐츠 화면
- 검색 결과 화면
-
🛠 구현 기능
- 게시글, 사용자 검색 기능
- 댓글 작성, 조회, 삭제 기능
- 다중 클릭 방지 기능
# 1. 클론하기
$ git clone https://github.com/79gun79/FiveCoders.git .
# 2. 의존성 설치하기
$ npm install
# 3. 개발 서버 실행하기
$ npm run dev