🤝 Coworkers

팀별 업무 공유와 사내 커뮤니케이션이 모두 가능한 To-do 리스트 기반 협업 툴

---

🔗 배포 링크

https://coworkers-three.vercel.app

---

✨ 주요 기능 (Features)

• 업무 생성 및 공유
  

  ---

• 팀 생성, 팀 초대/가입, 팀 관리
  • 팀 생성
    
    
  • 팀 초대/가입
    
  • 팀 관리
    

    ---

• 인증 시스템
  

  ---

• 데이터 시각화
  

  ---

• 자유게시판

---

📚 기술 스택

기술	카테고리	용도
	UI 개발	컴포넌트 기반 선언적 UI 개발
	언어	정적 타이핑을 통한 코드 안정성 확보 및 런타임 에러 방지
	라우팅	SPA 구현을 위한 클라이언트 사이드 라우팅
	상태 관리	Atomic 패턴을 이용한 전역 상태 관리
	폼 관리	비제어 컴포넌트 기반 폼 상태 관리 및 렌더링 최적화
	유효성 검사	스키마 기반 검사 로직 분리로 관심사 분리 및 TS 타입 추론
	데이터 페칭	서버 데이터 캐싱, 동기화 및 선언적 데이터 상태 관리(로딩/에러)
	네트워크	인터셉터를 활용한 공통 요청 및 토큰 관리
	스타일	Utility-first 기반 스타일 생산성 향상
	디자인 시스템	공용 컴포넌트 중복 개발 방지 및 자동 문서화
	UI 컴포넌트	공용 컴포넌트 개발 속도, 생산성, 접근성 확보
	UI 컴포넌트	캐러셀 구현 편의성 도구
	애니메이션	스크롤 인터랙션 구현 편의성 도구
	유틸리티	불변성 유지 로직 간소화로 가독성 향상
	유틸리티	new Date()보다 경량화된 날짜 데이터 처리
	빌드 도구	HMR(Hot Module Replacement) 지원으로 개발 서버 실행 속도, 빌드 속도 향상
	배포	GitHub 연동 CI/CD 자동화

---

📁 프로젝트 구조

src
 ┣ api/
 ┃  ┣ mutations.ts    // 뮤테이션 팩토리 (React Query)
 ┃  ┗ queries.ts      // 쿼리 팩토리 (React Query)
 ┣ assets/            // 정적 리소스
 ┃  ┣ fonts/
 ┃  ┣ icons/
 ┃  ┗ images/
 ┣ components/
 ┃  ┣ feature/        // 기능별 컴포넌트
 ┃  ┣ layout/         // 페이지별 레이아웃
 ┃  ┗ ui/             // 공용 컴포넌트
 ┣ constants/         // 상수 선언
 ┣ hooks/             // 공용 커스텀 훅
 ┣ lib/               // 라이브러리 관련 유틸 함수 (axios, shadcn/ui)
 ┣ pages/             
 ┣ store/             // jotai atoms
 ┣ stories/           // 스토리북 stories
 ┣ styles/            
 ┣ types/             // 타입, rhf 스키마 선언
 ┣ utils/             // 공용 유틸 함수
 ┣ App.tsx            // QueryProvider, RouterProvider 적용
 ┣ main.tsx
 ┗ routes.tsx         // 라우팅

---

개발 포인트

1. 아키텍처 설계 - React Query 쿼리 팩토리 적용 (캐싱 전략 최적화)

적용 전

• 동일한 API 호출이 여러 컴포넌트에서 중복 발생
• 쿼리 키 관리가 일관성 없이 산재되어 유지보수 어려움

적용 방법

• Query Factory 패턴 도입으로 쿼리 키 중앙 관리
• queries.ts, mutations.ts에서 도메인별 query/mutation key 분리 및 구조화

적용 후

• 캐시 무효화 로직이 명확해져 버그 감소
• 쿼리 키들이 하나의 파일에 모여있어 유지보수성 증가
• UI로부터 리액트 쿼리 로직 분리 → 컴포넌트 가독성 개선

2. Jotai를 이용한 가벼운 전역 상태 관리

기준	Redux Toolkit	Zustand	Jotai
번들 사이즈	❌ 큼	✅ 작음	✅ 매우 작음
학습 곡선	❌ 가파름	✅ 완만	⚠️ 중간
React Query 호환	⚠️ 보통	✅ 좋음	✅ 매우 좋음

→ 서버 상태는 React Query, 클라이언트 전역 상태는 Jotai atom으로 관리

3. Storybook 도입을 통한 UI 컴포넌트 생산성 향상

• Storybook을 통한 공용 컴포넌트 문서화
  • 동일한 컴포넌트를 새로 만드는 상황 방지
  • 버그 발견 시점 조기화 (UI 테스트를 Storybook에서 선행)
  • 공용 컴포넌트 관련 커뮤니케이션 비용 감소 (Storybook URL 공유로 실시간 확인)
  

---

⚙ 설치 및 실행

git clone https://github.com/asksa1256/coworkers.git .
pnpm i
pnpm run dev

👥 팀원 소개

Member	Role
윤정환 Frontend Developer @khuyjh	팀 페이지, 할 일 목록 등록/수정/삭제, 팀 초대/관리, 데이터 시각화, 계정 설정
이상달 Frontend Developer @asksa1256	인증 시스템, 자유게시판, 댓글 시스템, 랜딩페이지, 배포
이태경 Frontend Developer @LeeTaegyung	팀 생성, 할 일 등록/수정/삭제, 할 일 상세, 마이 히스토리, 댓글 시스템, 페이지 레이아웃(사이드바 포함)