견적관리 임직원 GPT

serveone-front-web/
├── src/
│   ├── components/          # 재사용 가능한 컴포넌트
│   │   ├── auth/           # 인증 관련 컴포넌트
│   │   │   └── ProtectedRoute.tsx
│   │   ├── ui/             # shadcn/ui 컴포넌트
│   │   │   ├── sidebar.tsx
│   │   │   ├── button.tsx
│   │   │   ├── dialog.tsx
│   │   │   ├── toast.tsx
│   │   │   └── ...         # 33개의 UI 컴포넌트
│   │   └── not-found-error.tsx
│   │
│   ├── templates/          # 페이지 템플릿
│   │   ├── ChatPage.tsx
│   │   ├── AgentMonitoringPage.tsx
│   │   ├── QuoteRequestListPage.tsx
│   │   └── LoginPage.tsx
│   │
│   ├── services/           # API 서비스 계층
│   │   ├── conversations/  # 대화 관리 API
│   │   ├── email/          # 이메일 발송 API
│   │   ├── product-list/   # 제품 목록 API
│   │   ├── address/        # 주소 검색 API
│   │   ├── openai.ts       # OpenAI 통합
│   │   ├── queryKeys.ts    # React Query 키 관리
│   │   └── service.ts      # 공통 서비스 로직
│   │
│   ├── stores/             # Zustand 스토어
│   │   └── authStore.ts    # 인증 상태 관리
│   │
│   ├── contexts/           # React Context
│   │   └── ChatContext.tsx # 채팅 컨텍스트
│   │
│   ├── hooks/              # 커스텀 훅
│   │   ├── use-mobile.ts   # 모바일 감지
│   │   └── use-window-size.ts
│   │
│   ├── types/              # TypeScript 타입 정의
│   │   ├── api.types.ts
│   │   ├── chat.types.ts
│   │   ├── business.types.ts
│   │   ├── product-list.types.ts
│   │   ├── quote-request.types.ts
│   │   └── ...
│   │
│   ├── lib/                # 유틸리티 함수
│   │   ├── utils.ts        # 공통 유틸리티
│   │   ├── constants.ts    # 상수 정의
│   │   └── logger.ts       # 로깅 유틸리티
│   │
│   ├── styles/             # 전역 스타일
│   │   ├── _variables.scss
│   │   └── _keyframe-animations.scss
│   │
│   ├── assets/             # 정적 자산
│   │   ├── logo_serveone.svg
│   │   ├── serveone.mp4
│   │   └── fonts/
│   │
│   ├── test/               # 테스트 설정
│   │   └── setup.ts
│   │
│   ├── App.tsx             # 메인 애플리케이션
│   ├── main.tsx            # 엔트리 포인트
│   └── index.css           # 전역 스타일
│
├── public/                 # 정적 파일
│   ├── tinymce/           # TinyMCE 에디터 리소스
│   └── favicon_192.png
│
├── docs/                   # 문서
│   └── environment-setup.md
│
├── vite.config.ts          # Vite 설정
├── vitest.config.ts        # Vitest 설정
├── tailwind.config.js      # Tailwind CSS 설정
├── tsconfig.json           # TypeScript 설정
├── Dockerfile              # Docker 설정
├── nginx.conf              # Nginx 설정
└── package.json            # 프로젝트 의존성

# 1. 저장소 클론
git clone <repository-url>
cd serveone-front-web
 
# 2. 의존성 설치
npm install
# 또는
yarn install
 
# 3. 환경 변수 설정 (아래 "환경 변수" 섹션 참조)
cp .env.example .env
# .env 파일을 편집하여 필요한 값 설정
 
# 4. 개발 서버 실행 (포트 80)
npm run dev
# 또는
yarn dev
 
# 브라우저에서 http://localhost 접속

# 개발 서버 실행
npm run dev
 
# TypeScript 타입 체크 후 프로덕션 빌드
npm run build
 
# 프로덕션 모드로 빌드
npm run build:prod
 
# 빌드된 앱 미리보기
npm run preview
 
# 코드 린팅
npm run lint
 
# 자동 수정과 함께 린팅
npm run lint:fix
 
# 코드 포맷팅
npm run format
 
# 포맷팅 검사 (CI용)
npm run format:check
 
# Docker 이미지 빌드
npm run docker:build
 
# Docker 컨테이너 실행
npm run docker:run

# 테스트 실행 (watch 모드)
npm run test
 
# 테스트 UI 실행
npm run test:ui
 
# 단일 실행 (CI용)
npm run test:run
 
# 커버리지 리포트 생성
npm run test:coverage

# 개발 빌드 (소스맵 포함)
npm run build
 
# 프로덕션 빌드 (최적화)
npm run build:prod
 
# 빌드 결과 미리보기
npm run preview

dist/
├── index.html
├── assets/
│   ├── index-[hash].js      # 메인 애플리케이션
│   ├── vendor-[hash].js     # React, React-DOM, Router
│   ├── ui-[hash].js         # UI 라이브러리
│   ├── index-[hash].css     # 스타일시트
│   └── fonts/               # 웹 폰트
└── tinymce/                 # 에디터 리소스

npm run docker:build
# 또는
docker build -t front-web .

npm run docker:run
# 또는
docker run -p 80:80 front-web

# API 설정
VITE_API_URL=http://localhost:3001
VITE_GUEST_TOKEN=your_guest_token_here

# 개발 환경 설정
VITE_NODE_ENV=development

# 린팅 실행
npm run lint
 
# 자동 수정
npm run lint:fix

# 포맷팅 실행
npm run format
 
# 포맷팅 검사
npm run format:check

{
  "*.{ts,tsx}": ["eslint --fix", "prettier --write"],
  "*.{js,jsx,json,css,md}": ["prettier --write"]
}