StudyPot

Frontend
2026.05 ~ 2026.06Frontend Lead (기획 · FE 설계)

삼성 청년 SW·AI 아카데미(SSAFY) 1학기 프로젝트 최우수상

스터디장에게 몰리는 운영 부담과 팀원 간 의사결정·합의 병목을 줄이기 위해, AI 팀장이 커리큘럼·회고·규칙 운영을 대신 챙겨주는 스터디 관리 플랫폼입니다.

GitHub (FE)GitHub (BE)
StudyPot 이미지

사용 기술

Vue 3TypeScriptViteTailwind CSSFSDMSWNetlify

MSW백엔드 연동 전에 UI와 로직 개발을 완주하기 위해 미구현 도메인의 API 타입·목 핸들러를 먼저 구성했고, 이 선행 작업으로 전체 개발 기간을 약 30% 단축했습니다.

FSD (Feature-Sliced Design)팀원이 같은 코드베이스에서 병렬 작업할 때 충돌을 줄이기 위해 pages/entities/features/shared/widgets 레이어로 도메인 경계를 나눴습니다.

주요 기능

  • ▸그룹 생성과 초대 코드 참여부터 온보딩(스터디 목표·세부 키워드 설정)까지 스터디 개설 흐름을 하나로 연결했습니다.
  • ▸커리큘럼 Todo, 회고, AI 팀장 답변(마크다운 렌더링) 등 스터디 운영을 AI가 관리하도록 구성했습니다.
  • ▸그룹 규칙과 위반 관리, 알림·운영 로그, 그룹 스페이스(게시판·마이페이지)까지 운영에 필요한 기능을 갖췄습니다.
  • ▸FSD(pages/entities/features/shared/widgets) 레이어로 도메인 경계를 설계해 팀원 간 작업 충돌을 줄였습니다.

담당 역할

  • •프론트엔드 리드로 FE 구조 설계와 구현을 담당했습니다.
  • •미구현 도메인의 API 타입·함수·MSW 핸들러를 먼저 정리해 BE 연동 전에 UI와 로직 개발을 완주했고, 전체 개발 기간을 약 30% 단축했습니다.
  • •FSD 아키텍처의 레이어 구조를 설계하고 팀 전체 컨벤션으로 적용했습니다.
  • •ESLint/Prettier, PR·이슈 템플릿, 코드·커밋 컨벤션을 문서화하여 협업 방식을 표준화했습니다.
  • •쿠키 세션 인증, 그룹 생성·초대 코드 참여, 온보딩, 커리큘럼 투두, 회고·AI 팀장, 알림·운영 로그, 그룹 스페이스 등 핵심 화면을 구현했습니다.
모든 프로젝트 보기