ABOUT
안녕하세요, 프론트엔드 개발자 제갈민혁입니다.
사용자 화면과 관리자 도구를 구현해온 프론트엔드 개발자입니다.
예약 플로우, 지도 탐색, 검색/필터, 엑셀 다운로드 등 실서비스 화면에서 필요한 기능을 개발했습니다.
SKILLS
사용 가능한 기술
PROJECTS
프론트엔드 개발 포트폴리오
ASDF
사용자 온보딩 및 관리자 운영 기능 고도화
프로젝트 개요
ASDF는 사용자 온보딩과 관리자 운영 기능을 포함한 서비스입니다. 사용자는 회원가입, 약관 동의, 계정 찾기, 관심사 선택, 회원탈퇴 등의 흐름을 거쳐 서비스에 진입하고, 관리자는 회원 정보와 로그 데이터를 조회하고 다운로드할 수 있습니다.
저는 프론트엔드 개발 팀원으로 사용자 온보딩 흐름, 다국어 처리, 보호 라우트, 공통 사이드바, 관리자 엑셀 다운로드 구조를 구현했습니다. 사용자 진입 흐름을 안정화하는 동시에, 반복적으로 사용되는 UI와 다운로드 기능을 공통 구조로 정리하는 데 중점을 두었습니다.
사용 기술
문제 상황
온보딩 과정에는 회원가입, 약관, 아이디·비밀번호 찾기, 관심사 선택, 회원탈퇴, 다국어 처리, 보호 라우트 등 여러 기능이 포함되어 있었습니다. 각 기능은 사용자의 인증 상태와 입력 상태에 따라 다른 화면 흐름을 가져야 했기 때문에 일관된 제어가 필요했습니다.
프로필 수정, 댓글, 페이지 편집 등 여러 화면에서 유사한 사이드바 UI가 반복적으로 필요했고, 화면마다 개별적으로 상태를 관리하면 코드 중복과 유지보수 비용이 커질 수 있었습니다.
관리자 화면에서는 관리자 로그, 회원 정보, 회원 로그 데이터를 반복적으로 엑셀 다운로드해야 했습니다. 다운로드 기능을 화면별로 따로 구현하면 신규 화면 추가 시 같은 로직을 계속 작성해야 하는 문제가 있었습니다.
해결 방식
사용자 영역에서는 Next.js, React, TypeScript 기반으로 회원가입, 약관, 계정 찾기, 관심사 선택, 회원탈퇴 흐름을 구현했습니다. next-intl을 활용해 다국어 UI를 구성했고, 보호 라우트를 적용해 인증 상태에 따라 접근 가능한 화면을 제어했습니다.
반복적으로 사용되는 사이드바는 Zustand 기반 공통 상태 구조와 useSidebar 훅으로 분리했습니다. 프로필 수정, 댓글, 페이지 편집 등 여러 화면에서 동일한 방식으로 사이드바를 열고 닫을 수 있도록 구성했습니다.
관리자 엑셀 다운로드 기능은 공통 엑셀 다운로드 버튼, 다운로드 훅, API 모듈, 시트 생성 유틸로 분리했습니다. 다운로드 대상 데이터와 컬럼 정의만 추가하면 화면별로 같은 구조를 재사용할 수 있도록 표준화했습니다.
핵심 구현
- 회원가입, 약관 동의, 아이디·비밀번호 찾기, 관심사 선택, 회원탈퇴 흐름 구현
- next-intl 기반 다국어 UI 구성
- 보호 라우트 기반 인증 상태별 접근 제어 구현
- Zustand 기반 공통 사이드바 상태 구조 설계
- useSidebar 훅을 활용한 사이드바 제어 로직 공통화
- 관리자 로그, 회원 정보, 회원 로그 화면의 엑셀 다운로드 기능 구현
- 공통 엑셀 다운로드 버튼, 다운로드 훅, API 모듈, 시트 생성 유틸 구성
성과
- 공통 사이드바 구조 도입으로 유사 사이드바 기능 개발 시간 약 30% 단축
- 공통 엑셀 다운로드 구조 재사용으로 유사 다운로드 기능 개발 시간 약 40% 단축
- 관리자 운영 데이터 추출 흐름 개선
- 사용자 온보딩 및 인증 기반 진입 흐름 안정화
0:00
0:08