EveryGSM

배경

EveryGSM은 광주소프트웨어마이스터고등학교 학생들이 만든 프로젝트를 한곳에서 살펴보고, 학생이 직접 프로젝트를 등록해 소개하는 쇼케이스 서비스입니다. 학생들이 만든 프로젝트는 각자의 레포와 발표 자료에 흩어져 있어, 어떤 프로젝트가 있는지 한눈에 보기 어려웠습니다. 학교 프로젝트를 외부에도 알릴 수 있는 창구를 목표로 하며, 20개 이상의 프로젝트가 등록되어 있습니다.

맡은 일

프론트엔드에서 프로젝트 탐색·등록·수정과 사용자 인증, 마이페이지 흐름을 맡고, FSD 구조와 코드 컨벤션을 정비했습니다. 2025년 12월부터 2026년 6월까지 PR 31개를 머지했습니다.

한 일

프로젝트 등록 폼과 신청 흐름 구현

• 문제: 학생이 프로젝트 정보를 서비스에 등록하고 검토를 요청할 수 있는 입력 흐름이 필요했습니다.
• 해결: react-hook-form과 zod로 폼 검증을 구성하고, 로고 업로드·기술 스택·저장소/배포 URL 입력과 등록 API 연결을 구현했습니다. 폼 UI도 필드 단위 컴포넌트로 나눴습니다. #42
• 결과: 프로젝트 정보를 입력해 등록 요청을 제출하는 사용자 흐름을 마련했습니다.

인증·인가와 사용자별 요청 관리

• 문제: 로그인 사용자와 관리자 권한에 따라 접근 가능한 화면과 프로젝트 요청 상태를 구분해야 했습니다.
• 해결: OAuth/PKCE 로그인, 사용자 정보 조회, 관리자 가드와 상태별 마이페이지 목록·요청 상세 조회를 연결했습니다. 요청 상태 필터와 데이터 로딩·오류 UI도 정리했습니다. #22 · #20
• 결과: 사용자 인증부터 프로젝트 요청 현황 확인까지 이어지는 화면 흐름을 구성했습니다.

팀 코드 컨벤션과 AI 개발 환경 구축

• 문제: 여러 개발자가 참여하는 저장소에 공통 코드 규칙과 반복 작업을 안내할 개발 환경 설정이 필요했습니다.
• 해결: FSD 구조·네이밍·컴포넌트·API 규칙을 문서화하고, AGENTS.md·CLAUDE.md·Copilot 지침을 정비했습니다. 이후 Claude용 역할별 에이전트 7개, 프로젝트 규칙·스킬, 위험 명령어 제어 hook을 구성했습니다. #8 · #37 · #60
• 결과: 코드 작성·리뷰·디버깅·품질 확인에서 참고할 저장소 규칙과 AI 작업 보조 구성을 마련했습니다.

트러블슈팅

프로젝트 수정 시 로고 URL 형식 불일치

• 상황: 수정 화면에서 로고를 바꾸지 않고 제출하면, 응답의 pre-signed URL이 수정 요청 바디에 포함될 수 있었습니다.
• 원인: 조회 응답은 pre-signed S3 URL을 반환하지만 수정 API는 images/… 형태의 키 경로를 받았습니다.
• 해결: 초기 폼 데이터 구성 시 URL의 pathname에서 객체 키를 추출해 요청 형식에 맞췄습니다. #66