배경

마켓보로는 식자재 유통 시장의 디지털 전환을 목표로 식봄 서비스를 운영합니다. 식봄은 음식점 사장님들이 식자재를 온라인으로 주문할 수 있는 B2B 플랫폼입니다. 기존 전화·팩스 중심의 발주 방식에서 벗어나 실시간 가격 확인, 즉시 발주, 배송 추적이 가능한 디지털 플랫폼을 제공합니다.

식봄 서비스는 소비자용 웹, 관리자 웹, 판매자용 웹, 인쇄 템플릿 라이브러리까지 복수의 프로젝트로 구성되어 있으며, 레거시 현대화와 신규 기능 개발을 병행했습니다.

전체 기술 스택

관련 링크

• 식봄 웹사이트

이 레포의 역할

음식점 사장님이 식자재를 검색·비교하고 발주하는 메인 소비자 채널입니다. 레거시 PHP 웹을 기능 단위로 Next.js로 현대화한 프로젝트로, CDN 레벨 라우팅을 활용해 신·구 서비스를 병행 운영하면서 점진적으로 전환했습니다.

기술 스택

기술스택은 퇴사 시점 기준으로 작성되었습니다.

컴포넌트 아키텍처

Atomic Design 계층 구조로 컴포넌트를 관리합니다.

src/components/
├── atom/        원자 컴포넌트 (버튼, 인풋, 배지)
├── ds/          디자인 시스템 토큰 기반 컴포넌트
├── molecules/   조합 컴포넌트 (검색바, 상품 카드)
├── organisms/   페이지 단위 섹션 (헤더, 장바구니 시트)
└── pages/       레이아웃 컴포넌트

34개 페이지 영역: main, goods, search, cart, checkout, mypage, seller, signup, category, plan, benefit, notifications 등 전체 쇼핑 플로우 담당.

담당 역할 & 기여

쿠폰 시스템

장바구니 내 쿠폰 기능을 전담 개발했습니다.

• 장바구니 쿠폰가 노출: 쿠폰 적용 시 가격 변동을 실시간으로 계산하여 상품별·주문 전체의 할인가를 표시하는 UI 구현
• 앱 전용 쿠폰 배지: 앱 환경에서만 다운로드 가능한 쿠폰에 배지를 노출하고, 웹 환경에서 클릭 시 앱 유도 인터페이스 처리
• 쿠폰 다운로드 후 수량 재조회: 쿠폰 다운로드 완료 시 남은 수량을 refetch하여 최신 상태를 즉시 반영
• 추가주문 케이스 대응: 기존 주문에 상품을 추가하는 플로우에서도 쿠폰이 올바르게 적용되도록 엣지 케이스 처리

장바구니 성능 최적화

대형 장바구니(다수의 판매자·상품)에서 발생하던 렌더링 지연을 해결했습니다.

• useMemo·useCallback으로 쿠폰 계산 함수와 파생 상태를 메모이제이션
• 판매자별 소계 계산을 순차 처리에서 병렬 처리로 변경하여 계산 시간 단축
• SessionStorage 제어 로직 개선으로 새로고침 후 장바구니 상태 복원 안정화

상품 상세 페이지 모바일 UI

가격 레코드 섹션의 모바일 표시 방식을 전면 개선했습니다. 261줄 변경·156줄 추가 규모의 작업으로, 데스크탑·모바일 각 해상도에서 가격 정보(시세·비교·대량 판매)가 명확하게 표시되도록 레이아웃을 재설계했습니다.

• 시세 차트 컬러 시스템 변경
• 가격 비교 섹션 UI 개선
• 대량 판매 섹션 및 배송 정보 팝업 조정

추가주문 2차 기능

기존 주문에 상품을 추가하는 “추가주문” 플로우의 2차 기능을 구현했습니다. 기존 주문 컨텍스트를 유지한 채 새 상품을 선택하고 결제까지 이어지는 UI 플로우를 담당했습니다.

업종 정보 수집

신규 가입 사용자의 업종 정보를 수집·저장하는 기능과, 기존 사용자의 업종 정보 조회 최적화를 구현했습니다.

커스텀 개발 도구

코드 품질과 팀 생산성을 위해 Bun 기반 자동화 스크립트를 프로젝트 내에서 직접 제작하여 운영했습니다. 미사용 모듈 탐지, GraphQL 스키마 변경 영향도 분석, 환경 변수 포맷 검증, 파일명 규칙 감지 등을 자동화했습니다.

커스텀 ESLint 플러그인도 제작하여 Relay fragment 규칙 강제, ts-pattern 엄격 사용 강제 등 팀 코드 규칙을 자동으로 적용했습니다.

기술 선택 이유

Relay: GraphQL 데이터 의존성을 컴포넌트 레벨 fragment로 선언합니다. Relay Compiler가 빌드 타임에 스키마와 쿼리를 검증하므로 런타임 타입 불일치가 원천 차단됩니다. 오버페칭 없이 컴포넌트가 필요한 필드만 정확히 요청하는 구조입니다.

Jotai: 장바구니·쿠폰처럼 여러 컴포넌트가 공유하는 상태를 원자(atom) 단위로 관리합니다. Context API 대비 불필요한 리렌더링 범위가 좁아 성능에 유리합니다.

GrowthBook: 신규 기능 출시 시 사용자 세그먼트별로 기능 플래그를 켜고 끄거나, 두 가지 UI 변형을 A/B 테스트합니다. 코드 재배포 없이 플래그 상태를 변경할 수 있어 안전한 점진적 롤아웃이 가능합니다.

성과

• Relay Compiler 도입으로 GraphQL 타입 불일치 버그를 빌드 단계에서 검출
• Datadog RUM으로 Core Web Vitals 상시 모니터링 체계 구축
• 장바구니 판매자별 summary 병렬 처리로 대형 장바구니 렌더링 지연 개선
• GrowthBook 기반 기능 플래그로 코드 배포 없는 점진적 기능 출시 구현

이 레포의 역할

식봄 소비자 채널의 레거시 구현체입니다. CodeIgniter 3 기반 PHP 애플리케이션으로, 식자재 검색·주문·결제·마이페이지 전 플로우를 운영합니다. 현재 Next.js 기반 신규 웹으로 점진적 마이그레이션 중이며, 두 서비스를 라우팅 레이어에서 병행 운영합니다.

기술 스택

기술스택은 퇴사 시점 기준으로 작성되었습니다.

서비스 규모

• 다수의 웹 컨트롤러: 상품 탐색, 장바구니, 주문, 결제, 마이페이지 등 소비자 플로우 전반
• 다수의 API 컨트롤러: 구현 로직과 응답 스키마를 분리한 2-레이어 구조
• 다양한 결제 수단 연동 (간편결제, 신용카드, 가상계좌 등)

담당 역할 & 기여

알림센터

알림센터 메인 페이지를 신규 구현했습니다.

• 알림 목록 조회 쿼리 최적화로 응답 속도 개선
• 알림 타입별 아이콘 애니메이션 추가
• 미로그인 사용자 접근 시 로그인 페이지로 리다이렉트 처리
• 알림 JS 모듈 분리 및 구조화

검색 기능 개선

검색 결과 페이지와 검색 입력 UX를 개선했습니다.

• PC/모바일 상품 리스트 차별화: 화면 크기에 따라 노출 상품 구성 분기 처리
• 검색어 볼드 강조: 검색 결과 상품명 내 일치하는 검색어를 강조(bold) 표시
• 검색 Placeholder 이벤트: 검색창 포커스 시 이벤트성 Placeholder 노출
• 검색 UX 버그 수정: 검색 입력창 커서 위치 이슈·뒤로가기 시 검색어 초기화 문제 해결

메인 헤더 UX 개선

메인 화면 헤더의 사용성을 개선했습니다.

• 배송지·장바구니 버튼 위치 조정 및 헤더 탭 메뉴 추가
• 모바일·PC 통합 반응형 대응

최근 본 상품

모바일·PC 공통으로 최근 본 상품을 노출하는 기능을 구현했습니다. 로컬 스토리지 기반으로 세션 간 히스토리를 유지합니다.

기획전 노출 기간 관리

하드코딩된 기획전 노출 조건을 DB 기반 동적 관리로 전환했습니다. 운영자가 관리자 화면에서 기획전의 시작·종료일을 직접 설정할 수 있도록 개선했습니다.

Next.js 전환과의 관계

레거시 PHP 웹은 여전히 일부 페이지를 서빙하며, 사용자는 두 서비스를 구별하지 않고 동일한 도메인에서 이용합니다.

동일 도메인 진입
  ├── 신규 기능 (Next.js 전환 완료) → 신규 웹
  └── 레거시 기능 (미전환)          → 이 레포

PHP 레포에서의 경험은 레거시 코드베이스의 복잡성, 점진적 마이그레이션 전략, 그리고 운영 중인 서비스를 중단 없이 개선하는 방법에 대한 실전 이해를 제공했습니다.

이 레포의 역할

식봄 서비스 운영팀이 사용하는 내부 관리 도구입니다. 쿠폰 관리, 포인트 프로모션, 상품 관리, 사용자 조회 등 운영 업무를 처리합니다. 레거시 관리 도구를 React + TanStack Router 기반의 SPA로 현대화한 프로젝트입니다.

기술 스택

기술스택은 퇴사 시점 기준으로 작성되었습니다.

아키텍처

파일 기반 라우팅 + 인증 가드 레이아웃:

인증 가드 레이아웃(_withTokenScaffold)이 토큰 유효성을 검사하고, 미인증 시 로그인으로 리다이렉트합니다. 인증이 필요한 모든 페이지는 이 레이아웃 하위에 배치되어 라우트 단위로 보호됩니다. TanStack Router의 타입 안전 라우팅으로 URL 파라미터·쿼리 스트링이 컴파일 타임에 검증됩니다.

명령 팔레트: 46KB 규모의 CommandMenu.tsx로 전체 메뉴를 검색·이동할 수 있는 인터페이스를 제공합니다.

담당 역할 & 기여

쿠폰 관리 기능

쿠폰 목록 조회와 쿠폰 템플릿 관리 기능을 개발했습니다. Relay를 통해 쿠폰 목록의 페이지네이션과 필터링을 서버 주도로 처리하고, TanStack Table로 다양한 정렬·필터 조합을 지원하는 테이블 UI를 구성했습니다.

레거시 관리 도구 현대화 참여

기존 관리 도구의 기능을 기능 단위로 독립 React 모듈로 분리하는 방식으로 참여했습니다. 각 기능이 자체 라우트와 데이터 레이어를 갖고 독립적으로 개발·배포됩니다.

기술 선택 이유

TanStack Router: 파일 시스템 기반 라우팅 없이 코드로 라우트를 선언합니다. URL 파라미터와 쿼리 스트링이 TypeScript 타입으로 강제되어, 라우트 이동 시 파라미터 누락이나 타입 불일치를 컴파일 단계에서 잡습니다.

Shadcn/ui: 접근성(ARIA)이 내장된 헤드리스 컴포넌트를 베이스로 스타일만 얹는 패턴입니다. 모달, 드롭다운, 팝오버 등 관리자 UI에서 빈번하게 사용하는 인터랙티브 컴포넌트의 키보드·스크린 리더 대응을 직접 구현하지 않아도 됩니다.

Relay: 소비자 웹과 동일한 GraphQL 타입 시스템을 공유합니다. 팀 내 기술 스택 일관성을 유지하면서 fragment 기반 데이터 선언으로 오버페칭을 방지합니다.

이 레포의 역할

식봄 물류 현장에서 사용하는 배송 라벨과 거래명세서를 React 컴포넌트로 구현한 인쇄 전용 라이브러리입니다. 판매자(유통사) 담당자가 상품을 출고할 때 프린터로 출력하는 모든 서류를 이 라이브러리 하나로 생성합니다.

템플릿 목록

기술 스택

기술스택은 퇴사 시점 기준으로 작성되었습니다.

아키텍처

배포 방식

TypeScript 소스가 아닌 UMD 번들로 빌드되어 사내 CDN에 배포됩니다. PHP 레거시 웹을 포함한 모든 서비스가 CDN을 통해 동일한 버전을 불러옵니다.

빌드  → UMD 번들 (.umd.cjs)
배포  → 사내 CDN
사용  → window.Boronter.template(payload)
        window.Boronter.print(payload)

그리드 기반 레이아웃

각 템플릿은 mm 단위 행(ROWS)·열(COLS) 배열로 용지를 격자 분할하고, area 맵으로 각 셀에 필드를 배치합니다. 이 방식으로 픽셀 단위 절대 좌표 없이 인쇄 결과를 정밀하게 제어합니다.

// 일반배송 라벨 레이아웃 예시
const ROWS = [10, 12, 10, 6, 6, 6, 6, 6, 10, 8, 4]; // mm 단위 행 높이
const COLS = [11, 48, 11, 22];                        // mm 단위 열 너비

const area = [
  ['좌측바코드', '납품처명',   '납품처명',   'QR_CODE'],
  ['좌측바코드', '품명',       '품명',       'QR_CODE'],
  // ... 11행
];

Provider 패턴

각 필드는 데이터를 받아 Boronter 컴포넌트 구조로 변환하는 Provider 함수로 정의됩니다. 템플릿은 Provider 함수들을 조합하여 완성됩니다.

const 좌측바코드Provider = (값: string): FieldBarcode => ({
  type: 'BARCODE',
  props: {
    value: 값,
    vertical: true,
    format: 'CODE128',
    renderer: 'img',
    style: { width: '70mm', height: 40 },
  },
});

바코드 생성 로직

배송 라벨의 바코드는 물류 시스템과 1:1로 대응하는 고유 값을 인코딩합니다. 기준일로부터 경과 일수를 계산하고, 주문번호·수량·라벨 차수를 조합하여 CODE128 바코드를 생성합니다.

// 기준일 기반 경과 일수 계산
const calculateDays = (rd_date: string): string => {
  const [y, m, d] = [rd_date.slice(0,4), rd_date.slice(4,6), rd_date.slice(6,8)];
  const inputDate = new Date(+y, +m - 1, +d);
  const baseDate  = new Date(1900, 0, 1);
  const diffDays  = Math.ceil((inputDate.getTime() - baseDate.getTime()) / 86400000 + 1);
  return diffDays.toString();
};

주요 개발 작업

저장품 라벨 신규 템플릿 추가

축산물 이력제 의무 표시 규정에 대응하여 저장품 라벨을 세 가지 유형(이력·비축산, 이력·축산물, 비이력·비축산)으로 분리 구현했습니다. 각 유형별로 표시해야 하는 항목(원산지, 이력 번호, 이력 QR 코드 등)이 달라 별도 템플릿으로 관리합니다.

바코드 값 개선

물류팀 요청에 따라 바코드 구성 값과 자릿수를 조정했습니다. 바코드 값이 바뀌면 물류 시스템 스캐너와의 연동이 깨지므로, 변경 전 실제 프린터·스캐너로 검증하는 QA 프로세스를 거쳤습니다.

Playground 개발 도구

json-edit-react 라이브러리 기반의 인터랙티브 Playground를 직접 구현했습니다. MOCK 데이터를 실시간으로 편집하면 템플릿 미리보기가 즉시 갱신되어, 백엔드 연동 없이 인쇄 결과를 확인하고 검증할 수 있습니다.

한글 도메인 코드 (유비쿼터스 언어)

파일명, 변수명, 함수명을 백엔드 도메인 용어와 동일한 한글로 작성했습니다.

src/templates/식봄/일반배송_라벨.ts
src/utils/바코드.ts
src/utils/날짜포맷팅.ts
src/utils/원산지.ts

프론트엔드 코드가 비즈니스 용어를 그대로 반영함으로써, 커뮤니케이션 비용이 줄고 도메인 전문가(물류 담당자 등)와의 협업이 원활해졌습니다.

성과

• 라이브러리 단일 배포로 기술 스택에 관계없이 모든 서비스에서 동일한 인쇄 결과 보장
• Playground 도구로 QA 팀이 백엔드 없이 템플릿 변경 사항을 즉시 검증 가능
• 한글 도메인 코드로 물류·운영 도메인 전문가와의 커뮤니케이션 비용 감소