02. 고객 관리 기능 구현

현재 만들어진 화면

1. 개발 순서

• 프로젝트 초기 설정
  • Next.js 프로젝트 생성
  • FastAPI 프로젝트 구조 설정
  • MySQL 데이터베이스 설정
• 기본 UI 구성
  • 네비게이션 메뉴 구현
  • 레이아웃 구성
  • 기본 컴포넌트 설정
• 핵심 기능 구현
  • 고객 관리 기능
  • Excel 파일 업로드
  • 데이터 필터링
  • 페이지네이션

2. 주요 기능 정의 및 구현 방법

2.1 고객 관리 기능

• 고객 목록 조회

• 고객 정보 추가/수정/삭제

• Excel 파일을 통한 대량 데이터 업로드

• 검색 및 필터링 기능

  // 고객 데이터 타입 정의
  interface Customer {
    seq: number;
    orderNo: number;
    addressName: string;
    unit: string;
    address: string;
    name: string;
    deliveryDays: string;
    area: string;
    note: string;
  }

2.2 통계 기능

• 전체 고객 수 표시

• 요일별 배달 고객 수 표시

• 구역별 고객 분포 표시

    const calculateStats = () => {
      const total = customers.length;
      const mondayCount = customers.filter(c => c.deliveryDays?.includes('월')).length;
      const wednesdayCount = customers.filter(c => c.deliveryDays?.includes('수')).length;
      const fridayCount = customers.filter(c => c.deliveryDays?.includes('금')).length;
  
      return { total, mondayCount, wednesdayCount, fridayCount };
    };

2.3 고객 데이터베이스

  class Customer(Base):
      __tablename__ = "customers"

      seq = Column(Integer, primary_key=True, index=True)
      order_no = Column(Integer, nullable=False)
      address_name = Column(String(100))
      unit = Column(String(50))
      address = Column(String(200))
      name = Column(String(50))
      delivery_days = Column(String(50))
      area = Column(String(50))
      note = Column(Text)

3. 주요 에러 및 해결 방법

3.1 React Hydration 에러

• 원인: 테이블 컴포넌트 내의 불필요한 공백
  해결: JSX 코드 정리 및 불필요한 공백 제거

  Error: In HTML, whitespace text nodes cannot be a child of <tr>

3.2 MySQL 연결 오류

• 원인: 연결 문자열의 특수문자 처리 문제
  해결: URL 인코딩 적용

3.3 CORS 에러

• 원인: 프론트엔드와 백엔드 간 도메인 차이
  해결: FastAPI CORS 미들웨어 설정

    app.add_middleware(
      CORSMiddleware,
      allow_origins=["http://localhost:3000"],
      allow_credentials=True,
      allow_methods=["*"],
      allow_headers=["*"],
    )

4. 향후 계획 및 느낀점

배달 품목 및 배달 일지 작성 기능 추가
OCR로 배달 리스트 종이 텍스트 읽어서 자동으로 일지 작성하기

이번 프로젝트를 통해 Next.js와 FastAPI를 활용한 풀스택 웹 애플리케이션 개발 경험을 쌓을 수 있었다.
특히 타입스크립트를 활용한 타입 안정성 확보, 데이터베이스 설계, API 개발, 그리고 사용자 인터페이스 구현에 대한 실전 경험해 보는 것 같아서 이 사이드 프로젝트가 재밌다.