알맹상점 프론트엔드

실행 방법

1. 의존성 설치

npm install

2. 이미지 파일 복사

알맹상점.png 파일을 public 폴더로 복사해주세요:

• 원본: 알맹상점.png
• 복사 위치: public/알맹상점.png

3. 개발 서버 실행

npm run dev

4. 브라우저에서 확인

브라우저에서 다음 URL로 접속하세요:

• 비밀번호 페이지: http://localhost:3000/password
• 리포트 페이지: http://localhost:3000/report

프로젝트 구조

프론트엔드/
├── app/
│   ├── layout.tsx          # 루트 레이아웃
│   ├── globals.css          # 전역 스타일
│   ├── password/
│   │   └── page.tsx         # 비밀번호 페이지
│   └── report/
│       └── page.tsx         # 리포트 페이지
├── components/
│   └── ui/
│       ├── button.tsx       # Button 컴포넌트
│       ├── input.tsx        # Input 컴포넌트
│       └── card.tsx         # Card 컴포넌트
├── public/
│   └── 알맹상점.png          # 로고 이미지 (복사 필요)
└── package.json              # 프로젝트 설정

주요 명령어

• npm run dev - 개발 서버 실행
• npm run build - 프로덕션 빌드
• npm start - 프로덕션 서버 실행
• npm run lint - 코드 린트 검사

환경 변수

백엔드 API 서버 주소를 환경 변수로 설정합니다.

NEXT_PUBLIC_API_BASE_URL=https://your-backend-domain.com

루트에 있는 env.example 파일을 참고해서 Vercel의 Project Settings → Environment Variables에 동일한 키(NEXT_PUBLIC_API_BASE_URL)를 추가해 주세요.

Vercel 배포 방법

1. 이 frontend 폴더를 GitHub / GitLab / Bitbucket 저장소에 푸시합니다.
2. Vercel 대시보드에서 New Project를 눌러 해당 저장소를 연결합니다.
3. Root Directory로 frontend를 선택합니다.
4. Build & Output Settings는 기본값을 사용합니다.
   • Framework: Next.js
   • Build Command: npm run build
   • Install Command: npm install
   • Output Directory: .next
5. Environment Variables에 NEXT_PUBLIC_API_BASE_URL를 추가합니다.
6. Deploy 버튼을 누르면 Vercel이 자동으로 빌드 및 배포를 진행합니다.