COTATO Official FE v2

COde Together, Arrive TOgether. IT 연합동아리 코테이토

배포 링크 바로가기

📋 목차

• 📖 프로젝트 개요
• 👤 팀원
• 💡 주요 기능
• 🖥️ 화면 UI
• ⚙️ 기술 스택 & 아키텍처
• 📝 개발 컨벤션
• ⭐ 설치 및 실행
  

---

📖 프로젝트 개요

Important

COTATO Official은 COde Together, Arrive TOgether라는 비전을 실천하는 IT 연합동아리 코테이토의 공식 플랫폼입니다.

기존 홈페이지의 활동 아카이빙 부재와 불편한 UI를 개선하기 위한 v2 리뉴얼 프로젝트입니다.
이번 v2 리뉴얼 프로젝트는 사용자 중심의 설계를 통해 동아리의 가치를 명확히 전달하고 운영 효율을 극대화하는 데 집중했습니다.

---

👤 팀원

김초연 Frontend Leader

김민아 Frontend Dev

양희정 Frontend Dev

하지민 Frontend Dev

---

💡 주요 기능

🏠 Homepage (apps/homepage)

• 동아리 브랜딩: 코테이토의 정체성과 활동 내역을 한눈에 확인
• 세션 아카이빙: 매주 진행되는 교육 세션 자료와 기록 보관
• 출석: 세션별 출석 관리 및 위치 정보 기반 출석 진행
• CS 퀴즈 바로가기: 부원들의 기술 역량 강화를 위한 퀴즈 풀이 시스템 Mait 바로가기
• 마이페이지: 개인별 출석 현황 및 상벌점 실시간 조회

🔐 Recruit (apps/recruit)

• 지원 프로세스: 구글 폼을 대체하는 자체 지원서 작성 및 임시저장 기능을 제공
• 어드민 대시보드 제공: 운영진이 지원서를 심사하고 합격 여부를 대량으로 관리

---

🖥️ 화면 UI

🏠 Homepage (apps/homepage)

코테이토의 브랜딩과 활동 아카이빙을 담당하는 메인 플랫폼입니다.

HOME	ABOUT US	PROJECT
코테이토 비전 및 메인 랜딩	동아리 히스토리 및 소개	프로젝트 통합 아카이빙

MYPAGE	MYPAGE_ADMIN	MYPAGE_ADMIN
개인 활동 통계 및 정보	운영진 전용 통합 관리 자동화 시스템	운영진 전용 통합 관리 자동화 시스템

🔐 Recruit (apps/recruit)

신규 부원 모집 및 운영진의 효율적인 심사 프로세스를 지원합니다.

APPLY	ADMIN
신입기수 지원서 작성	운영진용 서류/면접 평가

⚙️ 기술 스택 & 아키텍처

📦 기술 스택

Tip

고성능 빌드 시스템과 타입 안정성을 바탕으로 효율적인 협업 환경을 구축했습니다.
Turborepo와 pnpm workspace를 통해 반복되는 UI 컴포넌트와 설정을 모듈화하여 개발 생산성을 극대화했습니다.

🖌️ 모노레포 패키지 상세 구조

기존의 파편화된 구조에서 벗어나, 모노레포를 이용해 packages에서 정의된 표준을 apps에서 소비하는 선순환 구조를 구축했습니다.

.
├── 🚀 apps
│   ├── homepage        # 공식 홈페이지 (cotato.kr)
│   └── recruit         # 리크루트 페이지 (recruit.cotato.kr)
│
└── 📦 packages
    ├── ui              # 디자인 시스템 기반 공통 컴포넌트
    ├── tailwind-config # 공통 테마 및 스타일 규격
    ├── typescript-config # 엄격한 타입 체크를 위한 전역 설정
    └── eslint-config   # 일관된 코드 품질을 위한 린팅 룰

📦 핵심 기술

• Workspaces: pnpm을 통한 효율적인 패키지 의존성 관리
• Build System: Turborepo를 활용한 빌드 캐싱 및 파이프라인 최적화
• Data Fetching: React Query 기반의 서버 상태 관리 (Apps 간 공통 Query Key 공유)
• Shared UI: packages/ui를 통해 홈페이지와 리크루트 앱 간의 일관된 디자인 시스템 유지

🏗️ Monorepo Architecture

• Turborepo: 고성능 빌드 시스템 및 캐싱 지원을 통한 파이프라인 최적화
• pnpm Workspace: 의존성 관리 최적화 및 로컬 패키지 간 효율적 공유

⚡ Framework & Language

• Next.js: React 기반 SSR/SSG 지원 및 서버 컴포넌트 활용
• TypeScript: 강력한 타입 시스템을 통한 안정적인 코드 작성

🎨 Styling & State

• Tailwind CSS: 유틸리티 클래스 기반의 빠른 스타일링 및 응답형 디자인
• Zustand: 가볍고 직관적인 전역 상태 관리
• React Query: @tanstack/react-query를 이용한 서버 상태 캐싱 및 관리

🛠️ Code Quality & Tools

• ESLint & Prettier: 코드 품질 유지 및 팀 컨벤션 자동 적용
• Husky: Git hook을 통한 커밋 전 lint/format 자동 검사
• SVGR: SVG를 React 컴포넌트로 변환하여 관리
• CodeRabbit: AI 기반 코드 리뷰 및 자동 피드백 시스템 도입
  

---

📝 개발 컨벤션

Important

모든 팀원은 원활한 협업을 위해 아래 명시된 규칙을 반드시 준수합니다.

📁 파일 및 폴더 네이밍

형식	대상	예시
PascalCase	컴포넌트 파일	HomeClient.tsx
camelCase	일반 함수, 커스텀 훅, 스토어	formatDate.ts, useClickOutside.tsx, useAuthStore.ts
kebab-case	일반 파일(styles, mocks), 폴더명, 아이콘	mock-faq.ts, app/, brand-logo.svg
📌	mutation, query, api, schema, type	useApply.mutation.ts, auth.api.ts, admin.schema.ts

• 컴포넌트 선언: 페이지/레이아웃은 export default function, 일반 컴포넌트는 export const (Arrow Function) 사용
• 컴포넌트 위치: 특정 도메인 전용 컴포넌트는 해당 폴더 내 _components/에서 관리
• 경로: @를 이용한 절대경로 사용
  

🎄 브랜치 전략 (Git Flow)

Format: prefix/scope/이슈번호-작업내용 (kebab-case 사용)

• Scope: recruit, homepage, root(공통)
• 예시: feat/recruit/1-apply-form, fix/homepage/12-login-error

머릿말	설명
main	실제 서비스 브랜치
develop	배포 전 작업 기준 브랜치 (Default)
feat	새로운 기능 단위 구현
fix	버그 수정 및 에러 해결
refactor	기능 변경 없는 코드 구조 개선
hotfix	서비스 중 긴급 수정

✉️ 커밋 메시지 컨벤션

Format: prefix(scope): 작업내용 (#이슈번호)

• 예시: feat(recruit): 지원서 제출 기능 구현 (#5)

1. 제목과 본문을 빈 행으로 분리합니다.
2. 본문에는 '어떻게'보다 '무엇을, 왜' 변경했는지 설명합니다.
3. 제목 끝에 마침표(.)는 금지하며, 첫 글자는 대문자로 작성합니다.

🚀 모노레포 프로젝트 관리 (GitHub)

• Label: Recruit와 Homepage 라벨을 색상으로 구분하여 PR에 적용합니다.
• Milestone: PR 생성 시 해당되는 마일스톤을 반드시 연결하여 진행 상황을 가시화합니다.

---

⭐ 설치 및 실행

📋 필수 환경

Warning

프로젝트 실행 전에 반드시 아래 환경을 확인해주세요.

필수 환경:

• Node.js 18 이상
• pnpm (권장 패키지 매니저)

# 환경 확인
node -v
pnpm -v

💾 설치 과정

1. Repository 클론

git clone https://github.com/IT-Cotato/COTATO-FE-v2.git
cd COTATO-FE-v2

2. 전체 의존성 설치 (Root에서 실행)

pnpm install

3. 전체 프로젝트 실행

pnpm dev

Note

• Homepage: http://localhost:3001
• Recruit: http://localhost:3000
  

---