| 💡 Better | 💬 Opinion | 📂 Organize | ✨ Simple | 🤝 Together |
|---|---|---|---|---|
| 더 나은 성장과 개선 | 솔직한 의견 공유 | 체계적 관리와 정리 | 누구나 쉽게 사용 가능 | 함께 만드는 협업 경험 |
BOOST는 대학생 팀 프로젝트에서 더 나은 성장을 돕고, 솔직한 의견을 자유롭게 나누며,
체계적인 관리와 누구나 쉽게 접근 가능한 환경 속에서 팀원 모두가 함께 협업할 수 있게 만들어주는 협업 툴입니다.
- 대학생 팀 프로젝트를 보다 효율적이고 체계적으로 관리할 수 있도록 돕는 협업 툴입니다.
- 칸반(Kanban) 보드 형태의 직관적인 인터페이스를 제공하여, 팀원들은 할 일을 쉽게 테스크(Task)로 만들고 담당자를 지정할 수 있습니다.
- 작업물이 업로드되면 팀원들이 확인하고 승인할 수 있으며, 원하는 부분에 마커를 달아 구체적인 피드백을 남길 수도 있습니다.
- 복잡한 일정 관리 없이도 팀 프로젝트의 진행 상황을 한눈에 확인하고, 원활한 협업을 경험할 수 있습니다.
2025/09 ~ 2025/11 (약 3개월)
BOOST https://boost.ai.kr/
| 이진호 | 김원호 | 김혜민 | 서영진 | 유다연 |
|---|---|---|---|---|
 @treasure-sky |
 @kmwh |
 @hyemomo |
 @seoyoungjin23 |
 @daaoooy |
| Backend | Backend | Frontend | Backend | Frontend |
git clone https://github.com/kakao-tech-campus-3rd-step3/Team1_FE.git
cd Team1_FE
pnpm install
pnpm run dev
이번 프로젝트에서는 다음 기술들을 선택했습니다. |
| 구분 | 기술 / 사용 도구 |
|---|---|
| 개발 언어 |  |
| UI 라이브러리 |  |
| 스타일링 |   |
| 클라이언트 상태 관리 |  |
| 서버 상태 관리 |  |
| 라우팅 |  |
| 애니메이션 라이브러리 |  |
| 개발 환경 / 버전 관리 |    |
| 협업 도구 |   |
| 패키지 / 빌드 |   |
| 배포 |  |
| CI/CD |  |
- 컴포넌트 기반 설계로 재사용성이 높고, 협업 시 타입 안정성을 확보할 수 있기 때문에 선정하게 되었습니다.
- 타입 오류 덕분에 버그를 초기에 발견할 수 있었고, 코드 이해도가 높아져서 팀원 간 협업이 수월했습니다. TypeScript는 초반 러닝커브가 존재해서 조금 힘들었지만, 사용에 익숙해지면서 유지보수와 확장성이 크게 개선됨을 느꼈습니다.
- 빠른 빌드와 안정적인 HMR 제공하며 Create React App 대비 빌드 속도가 빠르다고 하여 선정하게 되었습니다. 기존에 늘 사용했던 빌드 툴이라 선정하게 되었습니다.
- TailwindCSS의 유틸리티 기반 클래스는 빠른 스타일링과 디자인 일관성을 제공하며, shadcn UI의 컴포넌트를 적극 활용하면 UI 구현 속도를 극대화할 수 있을 것 같아 선정했습니다.
- 유틸리티 클래스와 미리 정의된 UI 컴포넌트 덕분에 페이지 개발 시간을 매우 단축할 수 있었고, 디자인 일관성도 유지할 수 있었습니다.
- 간단한 전역 상태 관리에 최적화 되어 있어서 UI 상태 관리를 편하게 할 수 있을 것 같아 선정했습니다. 또한 직관적인 느낌이라 러닝커브 낮을 것 같아 고르게 되었습니다.
- 전역 상태 관리가 간단하고, 프로젝트 규모가 커져도 구조가 깨지지 않아 편리했습니다. 하지만 전역 상태를 과도하게 사용하면 상태 추적 및 디버깅이 어려워진다는 것을 직접.. 느꼈습니다.
- 서버 데이터 캐싱과 상태 관리가 간편하기 때문에 선정했습니다. 또한 zustand와 함께 사용하여 프론트 상태와 서버 상태를 명확히 분라하면서도 복잡한 API 통신과 상태 동기화 문제를 해결해보고자 선정하게 되었습니다.
- API 요청 최적화, 로딩/에러 상태 처리 간편했고 비동기 코드 작성 시 실수를 줄일 수 있었습니다. 캐싱 및 로딩/에러 처리도 쉽게 구현할 수 있었습니다. 하지만, 상태 구조가 점점 커지면서 상태 설계 및 패턴을 잘 잡아야 함을 느꼈습니다.
- UI/UX 품질 향상을 위해서 애니메이션과 인터랙션이 필요했는데, Framer Motion이 간단하게 이를 해결할 수 있을 것 같아 선정하게 되었습니다.
- 화면 전환, 버튼 인터랙션 등 애니메이션 구현이 어렵지 않아 만족도가 높았습니다.
- 다양한 드래그 앤 드랍 라이브러리 중 가장 공식 문서가 잘 나와있는 느낌을 받았습니다. 처음 구현해보는 기능이었어서 사용이 직관적이고 자료가 많은 라이브러리를 선택하게 되었습니다.
- 사용 방법이 직관적이서 어렵지 않았고, 인지도도 어느정도 있는 라이브러리라 자료들도 많아서 좋았습니다.
- 초기에 npm으로 선정하였다가 pnpm이 빠른 설치, 경량화된 의존성 관리를 지원한다고 하여 선정하게 되었습니다.
- npm이나 yarn에 비해 덜 대중적이라 그런지 비교적 자료가 적었지만 빠른 설치가 장점이었습니다.
- PR 제목은 커밋 컨벤션 + 간단 설명 형식
- 코드 리뷰 시 Approve / Request Changes로 피드백
- 기능 구현 시 작은 단위로 commit & PR
- 코드 스타일과 포맷은 Prettier / ESLint 기준 준수
- 상태 관리와 API 호출은 Zustand / TanStack Query 규칙 준수
### 😊 리뷰 규칙을 지킵시다
코드 리뷰는 `Pn`룰에 따라 작성하기.
Reviewer가 피드백을 남길 때 Assignee에게 얼마나 해당 피드백에 대해 강조하고 싶은 지 표현하기 위한 규칙입니다.
- `P1` : 꼭 반영해 주세요 (Request Changes) - 이슈가 발생하거나 취약점이 발견되는 케이스 등
- `P2` : 반영을 적극적으로 고려해 주시면 좋을 것 같아요 (Comment)
- `P3` : 이런 방법도 있을 것 같아요~ 등의 사소한 의견입니다 (Chore)
<Gitmoji>(#이슈번호) <작업 요약>
<상세 설명>
| 이모지 | 의미 | 예시 |
|---|---|---|
| 🎨 | UI / 디자인 개선 | 🎨 버튼 색상 변경 |
| ✨ | 새로운 기능 추가 | ✨ 팀원 보드 추가 |
| 🐛 | 버그 수정 | 🐛 알람 버그 수정 |
| 🔥 | 코드 제거 | 🔥 불필요한 콘솔 로그 제거 |
| ♻️ | 리팩토링 | ♻️ 칸반 컴포넌트 구조 변경 |
| ✅ | 테스트 추가 | ✅ TaskDetail 테스트 추가 |
| 📦 | 패키지 / 의존성 변경 | 📦 pnpm 패키지 업데이트 |
| 브랜치 | 용도 | 설명 |
|---|---|---|
main |
배포용 | 항상 안정된 버전 유지 |
develop |
개발 통합 | 기능 완료 후 merge |
feature/#이슈-<이름> |
기능 개발 | 새로운 기능 개발 시 사용 |
refactor/#이슈-<이름> |
코드 리팩토링 | 코드 리팩토링 시 사용 |
fix/#이슈-<이름> |
버그 수정 | 버그 발생 해결 시 사용 |
style/#이슈-<이름> |
코드 포맷 / 스타일 | 스타일 수정 및 코드 포맷시 사용 |
test/#이슈-<이름> |
테스트 코드 | 테스트 코드 작성 시 사용 |
deploy/#이슈-<이름> |
배포 관련 | 배포 관련 작업 시 사용 |
💡 PR은 반드시 리뷰 후 merge 진행
이번 프로젝트의 폴더 구조는 Feature-Sliced-Design(FSD) 를 참고하여 설계했습니다.
FSD의 기본 원칙인 기능 단위(feature) 중심 분리 + 재사용 중심(shared) + 페이지/레이아웃 구분을 기반으로 하되,
BOOST 프로젝트의 특성과 팀 협업 방식을 고려하여 약간 변형했습니다.
app/: 앱 전체 레이아웃과 라우팅, 전역 스타일 초기화features/: 기능 단위 모듈 (auth, board, task, memo, project, tag 등 …)pages/: 실제 페이지 컴포넌트 (Login, MyTask, Project, TaskDetail …)shared/: 재사용 가능한 공용 리소스, UI 컴포넌트, 디자인 토큰, 유틸 등widgets/: 반복되는 레이아웃 컴포넌트 (사이드바, 헤더, 탑탭 …)...: 각 폴더 안에 더 많은 파일과 기능 존재
❓ 선택 이유
- 모듈화: 기능별로 폴더를 나눠 유지보수가 쉽고, 새로운 기능 추가가 용이
- 재사용성: 공용 컴포넌트와 유틸, 디자인 토큰 등을
shared에 모아 반복 코드 최소화 - 협업 친화적: 폴더 구조만 보고도 어떤 기능이 어디 있는지 쉽게 파악 가능
쉽게 말하면, 기능 단위는
features, 재사용 요소는shared, 페이지 구성은pages, UI 반복 요소는widgets로 구분하여
FSD를 기반으로 하되, BOOST 프로젝트에 맞게 조금 변형해서 설계했습니다.
👀 폴더 구조 한눈에 보기
public/
src/
├─ app/
│ ├─ layout/ # 페이지 레이아웃 및 공통 UI 구조
│ ├─ routes/ # React Router 라우팅 설정
│ └─ styles/ # 전역 스타일 및 App 초기화
│ └─ AppInitializer.tsx
├─ features/ # 도메인별 기능 단위 모듈 (Domain-driven)
│ ├─ auth/ # 로그인/회원가입 관련 기능
│ ├─ board/ # 프로젝트 보드 관련 기능
│ ├─ comment/ # 댓글 기능
│ ├─ memo/ # 메모 페이지 기능
│ ├─ task/ # 테스크(Task) 관련 기능
│ ├─ project/ # 프로젝트 단위 기능
│ │ ├─ api/ # API 통신 모듈
│ │ ├─ components/ # 프로젝트 관련 UI 컴포넌트
│ │ ├─ constants/ # 프로젝트 상수
│ │ ├─ store/ # Zustand 상태 관리
│ │ ├─ hooks/ # 커스텀 훅
│ │ ├─ types/ # TypeScript 타입 정의
│ │ └─ utils/ # 유틸 함수
│ └─ tag/ # 태그 관련 기능
│ └─ ... # 그 외 다양한 기능 모듈
├─ pages/ # 라우팅되는 실제 페이지 컴포넌트
│ ├─ LoginPage.tsx
│ ├─ MyTaskPage.tsx
│ ├─ ProjectPage.tsx
│ ├─ TaskDetailPage.tsx
│ └─ ... # 추가 페이지
├─ shared/ # 재사용 가능한 공용 리소스
│ ├─ api/ # 공통 API 통신 모듈
│ ├─ assets/ # 이미지, 아이콘 등 정적 리소스
│ ├─ components/ # 공용 UI 컴포넌트
│ │ ├─ shadcn/ # shadcn UI 컴포넌트
│ │ └─ ui/ # 자체 UI 컴포넌트
│ ├─ constants/ # 공용 상수
│ ├─ data/ # 샘플 데이터
│ ├─ design-token/ # 디자인 토큰
│ │ ├─ colors.css
│ │ ├─ index.css
│ │ ├─ spacing.css
│ │ └─ typography.css
│ ├─ hooks/ # 공용 커스텀 훅
│ ├─ lib/ # 공용 라이브러리/유틸
│ ├─ store/ # 공용 상태 관리
│ ├─ types/ # 공용 타입 정의
│ └─ utils/ # 공용 유틸 함수
├─ widgets/ # 레이아웃용 반복 UI 컴포넌트
│ ├─ AppSidebar.tsx
│ ├─ Header.tsx
│ ├─ TopTab.tsx
│ └─ ... # 추가 위젯
├─ App.tsx
├─ index.css
└─ main.tsx
- 개인 칸반보드 형태로 직관적인 작업 생성 및 관리 가능
- 프로젝트별 개인 테스크를 한눈에 확인하고, 우선순위에 따라 효율적으로 정리
- 상태(진행 전 / 진행 중 / 검토 중 / 완료) 변경을 통해 작업 현황을 명확하게 관리
- 팀 단위 칸반보드를 통해 팀원들과 실시간으로 작업 진행 상황을 공유
- 각 작업의 담당자, 진행 상태, 마감일 등을 한곳에서 관리하여 협업 효율 극대화
- 상태 변경 시 팀원들이 즉시 확인할 수 있어 투명한 협업 환경 구축
- 참여 코드를 통해 안전하게 프로젝트 참여 가능
- 24시간마다 코드가 리프레시되어 보안 유지
- 코드 공유로 간편하게 팀원 초대
- 각 팀원의 작업 상태 한눈에 확인 가능
- 점수가 가장 높은 팀원에게 왕관 아이콘 부여
- 개인의 기여도를 시각적으로 표시하여 협업 동기 부여
- 팀원의 작업물에 댓글 가능
- 피드백 작성 시 원하는 위치에 마커 지정 후 댓글 작성 기능
- 거친 표현이나 세게 들릴 수 있는 말투를 AI가 자연스럽고 부드럽게 변환
- 솔직한 피드백은 그대로 유지하면서, 상대방이 기분 좋게 받아들일 수 있도록 조정
- 팀 내 건강한 커뮤니케이션 문화 형성에 도움
- 업로드된 작업물 확인 및 승인
- 리뷰 요청 시 검토 중으로 할 일이 이동하고, 모든 승인을 다 받으면 완료 처리 가능
- 마감일이 얼마 남지 않은 작업 알림
- 검토가 필요한 작업 발생 시 알림
- 모든 승인 완료 시 알림
- 팀원들이 중요한 일정을 놓치지 않도록 실시간으로 안내
- 직관적인 인터페이스로 누구나 쉽게 사용 가능
- 귀여운 아바타 지정 가능
- 프로젝트를 진행하면서 나온 작업 파일들을 한곳에서 모아보기 가능
- 팀원 간 공유용 자유로운 메모 작성 가능
- 프로젝트 관련 아이디어, 링크, 참고 자료 정리
- 간단한 개인 기록용으로도 사용 가능
 |
 |
|---|---|
| Logo 2D ver | Logo 3D ver |
 |
|---|
| App Icon |
 |
 |
 |
 |
|---|---|---|---|
| Crown | Rocket | Bell | Siren |
Name: Boo (부)
|
 |
 |
 |
|---|---|---|---|
| front | left | Back | Right |
본 서비스는 다음 오픈소스 라이선스를 포함합니다 Avatars by Stefanie – Licensed underCC BY 4.0