해운대마루는 마루라는 본교입학 전형을 해운대고등학교 입학전형에 맞게 전면 개편한 프로젝트입니다. 기존 코드베이스를 인수해 해운대고등학교 요구사항에 맞게 빠르게 파악, 개편해야 했고, 프론트엔드 리드로서 팀원 이탈 상황에서도 인증 보안 개선, 분석 페이지 API 연동, Emotion 마이그레이션 등 대부분의 작업을 주도했습니다. 클라이언트인 해운대고등학교와 직접 소통하며 요구사항을 반영했고, 서비스는 2025년 실제 입학전형에 사용되어 3,000만 건 이상의 트래픽을 처리했습니다.

</aside>

Preview

<aside>

원서 작성 페이지

학생 원서 관리 페이지

학생 분석페이지

학생 원서 - 입학원서

</aside>

Contribution

<aside>

인증/보안

JWT 디코딩 기반 인증에서 토큰 없이 어드민 페이지 접근이 가능한 취약점을 발견, Next.js 미들웨어에서 /users API 서버 검증 + 리다이렉트로 전환해 비인증 접근 차단
Authorization 헤더 토큰 미전달 / 로그아웃 실패 시 토큰 삭제 오작동 / 로그인 후 재발급 누락 등 인증 흐름 전반의 버그 수정
비밀번호 내 &와 같은특수문자 필터링으로 보안 강화

기능 개발

갱신된 클라이언트 요구에 대응해 예금주 및 은행 정보 입력 필드 추가
새로고침 시 로컬 state와 전역 state 간 주민등록번호 동기화 끊김 문제를 useEffect로 해결
주민등록번호 입력 시 생년월일 기준 2, 4일 해당 시 하단 주의 문구 표시로 UX 개선
학생 상세 페이지 헤더 디자인 수정 및 전화번호 누락 문제 해결

코드 구조 개선

컨벤션 없이 혼재된 Recoil atom/selector를 value/set/state로 역할별 분리하고 import 경로를 단일 진입점으로 통일해 상태 추적 비용 감소
mobileSchoolPhonenumber → teacherPhonenumber 네이밍 불일치를 백엔드와 협의해 DB 컬럼명까지 통일
매년 변경되는 출석 기준일·담당 교사 연락처 등 하드코딩된 값을 환경변수 및 공통 constants로 분리
학생 원서 타입을 중분류/소분류로 세분화하고 관련 타입 및 UI 전반 수정
Vercel 무료 플랜의 Image Optimization 요청 한도 초과 방지를 위해 <Image /> → <img />로 교체
해운대고등학교 전체 원서를 Thymeleaf로 제작 및 리팩토링

안정성/UX 개선

alert/confirm 기반 예외 처리를 toast 비차단 방식으로 전환하고 인증/인가/폼 검증/데이터 로딩 실패 전 흐름을 일관되게 재설계
필터 제거 시 표시 상태와 실제 상태를 함께 초기화해 UI/데이터 불일치 해결
성적/비율 분석 탭의 필터 조합별 null/undefined 처리 및 소수점 표시 로직 수정 </aside>

Troubleshooting

<aside>

</aside>

Experience

[ 클라이언트와의 협업 경험 ] 해마루는 외부 클라이언트와 함께 진행된 입학 전형 사이트로, 초기에는 요구사항 해석과 일정 조율에서 혼선이 있었습니다. 이를 해결하기 위해 노션과 카카오톡을 기반으로 빠른 컨펌 체계를 구축했고, 그 결과 요구사항 반영 속도와 정확도를 안정화할 수 있었습니다.

[ 배포 및 운영 경험 ] 프로젝트의 전 사이클을 담당하며 프론트엔드 외 배포 및 서비스 운영까지도 경험했습니다. 배포 이후 도메인 설정 및 접근 오류 등 프로덕션 이슈를 직접 대응하며, 서비스 안정화가 개발 사이클의 핵심 단계임을 체감했습니다. 이후에는 배포 전 환경변수·도메인 설정을 체크리스트로 사전 검증하고, 변경 사항은 즉시 스모크 테스트로 확인하는 방식으로 배포 프로세스를 개선했습니다.

[ 팀원 이탈 상황에서의 업무 조율 경험 ] 프론트 팀원 이탈로 인한 리소스 부족 상황에서, 잔여 태스크를 중요도·난이도 기준으로 우선순위를 재조정하고 고난이도 작업 사이에 경량 태스크를 인터리빙하는 방식으로 번아웃 없이 스프린트를 완수했습니다.