이 문서에 대해

Mercury K-pop 굿즈 백오피스 프론트엔드에서 맡은 영역과 커밋 규모를 한국어로 정리한 작업 로그입니다. 상품·이벤트·운영 도구처럼 내부 사용자를 위한 UI에 초점이 있습니다.

Mercury 백오피스 프론트엔드 개발

기여 기간: 2023년 6월 ~ 2026년 3월 (약 2년 9개월)

프로젝트: K-pop 굿즈 관리 시스템

기술 스택: React 19, TypeScript, Material-UI, GraphQL, Apollo Client

주요 담당 영역

1. 상품 관리 시스템 (250+ 커밋)

핵심 기여: 8가지 상품 타입의 복잡한 관리 시스템 개발

판매수량제한 시스템

• 고객구매수량제한 정보 상점 필터 로직 구현
• 세트/랜덤 상품의 판매수량제한 탭에 중국 상점 추가
• useActiveShops 훅을 통한 상점 필터링 로직 최적화

판매설정 기능

• 전시/판매상태 일괄 업데이트 토글 개발
• 출시입고 정보에 입고예정일 계산 함수 및 테스트코드 작성
• 예약금/잔금 상품 조회 및 업데이트 기능 구현

상품 복제 시스템

• 일반/랜덤/세트/묶음 상품의 복제 기능 구현
• 복제 옵션에 출시일 필드 추가 및 필수값 validation
• 복제 화면 팬클럽 이벤트 추가 로직 개선

특전 관리

• 일괄 특전 추가/삭제 기능 (AllSpecialRewardBulkUpload)
• 특전 추가, 삭제 버튼 UI 개선

2. 팬클럽 시스템 (129+ 커밋)

핵심 기여: 팬클럽 전용 상품 및 이벤트 관리 기능

팬클럽 이벤트 관리

• 팬클럽 이벤트 관리 화면 신규 개발
• 이벤트 복제 모달 및 API 연동
• 댓글 관리 모달 및 댓글 아이콘 활성화 조건 구현
• 진행상태 필터, 검색 기능 개선

팬클럽 상품 등록

• 팬클럽 묶음상품 등록 폼 타입 강화 및 맵퍼 함수 구현
• 팬클럽 이벤트 n개 일괄 등록 기능
• 팬클럽 일반/랜덤/세트/묶음 상품에 팬클럽 이벤트 추가 기능

팬클럽 그룹 관리

• 팬클럽 그룹 조회를 위한 커스텀 훅 개발
• 팬클럽 정보 영역에 fanclubEvents 필드 추가

3. 아이템그룹 관리 (73+ 커밋)

핵심 기여: 실제 물리적 상품(SKU) 관리 시스템

• 아이템그룹이 없는 묶음/팬클럽묶음 조회 전용 훅 구현
• 아이템 복제 필수값 validation 추가
• 상품 및 아이템그룹 상세 에디터 저장 로깅 기능

4. 이벤트 관리 (64+ 커밋)

핵심 기여: 온라인 이벤트 운영 시스템

이벤트 목록 관리

• 이벤트 관리 SearchForm 및 EventColumns 컴포넌트 개발
• useEventsQuery 훅 구현
• 진행상태 필터, 기간 검색, placeholder 추가

일반증정 시스템

• 일반증정 일괄 추가 뮤테이션 연결
• 이벤트 노출유형 타입 변경에 따른 valueGetter 추가

이벤트 복제 및 삭제

• 이벤트 복제 API 연동
• 이벤트 공통 삭제 뮤테이션 연결
• 팬클럽 이벤트 삭제 시 목록 자동 갱신

5. GNB 메뉴 관리 시스템

핵심 기여: 프로젝트 초기 메뉴 관리 시스템 구축

카테고리/메뉴 관리 페이지 (2023년 6월)

• 카테고리 관리 페이지 신규 개발
• CategoryEditor, MenuEditor 컴포넌트 구현
• 더블클릭 → 버튼 클릭 방식으로 UX 개선

다국어 지원

• 로케일별 메뉴 배열 상태 관리 (menusByLocale)
• GNB 관리 페이지 locale 탭 추가
• useMenusByLocale 커스텀 훅 개발

API 통합

• Mock GNB menu API 구축
• 메뉴 추가/삭제/저장 기능 구현

기술적 강점

1. 컴포넌트 설계 및 구현 (47+ 커밋)

• 재사용 가능한 UI 컴포넌트 설계
• Compound Component 패턴 적용
• Material-UI DataGrid 전문성

2. 커스텀 훅 개발

• useMenusByLocale, useEventsQuery, useActiveShops 등 다수 개발
• 비즈니스 로직과 UI 분리 원칙 준수

3. 타입 안전성

• 폼 타입 강화 및 맵퍼 함수 구현
• Validation 로직 체계화
• TypeScript를 활용한 타입 안전성 확보

4. 코드 품질 관리

• 린트 규칙 준수
• Import 순서 정리
• 테스트코드 작성 (예: 입고예정일 계산 함수)

5. UI/UX 개선

• 그리드 간격 조정 및 스타일 개선
• 사용자 경험 최적화 (더블클릭 → 버튼 클릭)
• Placeholder, 토스트 메시지 등 세부 사항 개선

최근 작업 내역 (2026년 2~3월)

1. 팬클럽 이벤트 목록 개선

• 누락된 셀 반영 및 노출순서 컬럼 width 조정
• 댓글 관리 모달 추가
• 검색 및 필터 기능 강화

2. 이벤트 복제 기능

• 이벤트 복제 API 연동 완료
• 진행상태 필터 추가

3. 코드 리팩토링

• 중복 useEventComment 훅 삭제 및 기존 훅으로 통합
• 불필요한 Apollo Provider 제거

총 1,435개 커밋을 통해 Mercury 백오피스의 핵심 기능을 구축하고 지속적으로 개선

마무리

• 위 내용은 관리자·운영자용 화면 중심의 기여를 묶어 둔 것입니다. 스토어 고객용 플랫폼(Klimt) 요약은 work_summary와 Phase 문서를 참고하세요.
• GraphQL·MUI 버전 등은 시점별 스택이므로, 현재 레포 상태와 다를 수 있습니다.