할 일 관리 웹 서비스 구축

#Next.js#TypeScript#Tailwind CSS#Git#Jira
  • 🗓️ 프로젝트 기간

2026.08.25 ~ 2026.10.23

  • 📌 프로젝트 개요

    • 코드잇 프론트엔드 단기심화 과정에서 진행한 4인 팀 할 일 관리 웹 서비스 프로젝트입니다.
    • 공통 UI·반응형 Layout 기반을 설계하고, 대시보드의 API 데이터 연동 및 UI 개발을 담당했습니다.
  • 🛠 주요 담당 업무

    • CSS 공통 환경 / Font·Color Token / 공통 Layout 및 반응형 GNB 구성
    • 공통 Button 컴포넌트 및 주요 페이지(랜딩페이지 / 대시보드 / 목표 상세) 반응형 UI 구현
    • TypeScript 기반 API 타입·요청 함수 구성 및 TanStack Query 데이터 연동
  • 💡 주요 개발 경험

    1. UI 실무 경험을 활용한 프로젝트 기반 설계

    • Figma 기반 Font·Color Token, CSS 공통 환경, Layout 및 파일 구조 설계
    • 반응형 GNB와 주요 화면의 UI 구조를 선행 구현
    • 팀원들이 공통 Layout 안에서 담당 기능 개발에 집중할 수 있도록 UI 기반 구성

    2. 대시보드 개발을 통한 API 데이터 흐름 경험

    • 최근 할 일, 전체 진행률, 목표별 할 일 등 대시보드 데이터 API 연동
    • TypeScript 타입 및 API 요청 함수를 구성하고 TanStack Query로 서버 상태 관리
    • Loading / Error / Empty 상태에 따른 UI 처리
    • API 명세 확인 → 타입 정의 → API 요청 → 서버 상태 관리 → UI 렌더링 흐름 경험

    3. 기능 컴포넌트 재사용을 통한 협업 경험

    • Todo 담당자가 구현한 TodoItem을 대시보드에 연동하여 공통 기능 재사용
    • UI뿐 아니라 관련 동작·API 처리가 포함된 컴포넌트를 실제 화면에서 활용
    • 컴포넌트를 UI가 아닌 상태·동작·책임과 재사용 범위의 관점으로 바라보는 경험