feat: mock payment flow + flash token page (test mode)
- Mock purchase: order create → mock-pay → FlashToken issued instantly (no real billing) - Flash page (/flash/:token): esp-web-tools integration, token state display, consume on complete - Orders route: create/mock-pay/me/refund with full audit logging - Flash route: GET validate, GET manifest (esp-web-tools compatible), POST consume - MinIO file proxy (/api/files/*): browser CORS solved, firmware served through backend - Schema: chipFamily on Project, flashOffset on ProjectFile - ProjectNew: chipFamily selector + firmware flash offset option - MyOrders: real order list with flash token status and buttons - Dockerfile: prisma db push (no migration files needed for dev) - TOSS_PAYMENT_GUIDE.md: step-by-step guide for real payment after business registration Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
root
@@ -1,3 +1,8 @@
|
||||
# ──────────────────────────────────────────────────────
|
||||
# ESP32 DIY 플랫폼 환경 변수
|
||||
# cp .env.example .env 후 각 값을 채워주세요
|
||||
# ──────────────────────────────────────────────────────
|
||||
|
||||
# PostgreSQL
|
||||
DB_PASSWORD=change_this_strong_password
|
||||
|
||||
@@ -8,12 +13,17 @@ MINIO_PASSWORD=change_this_strong_password
|
||||
# JWT (openssl rand -hex 64 로 생성 권장)
|
||||
JWT_SECRET=change_this_very_long_random_secret_string
|
||||
|
||||
# 배포 URL (DNS 설정 후 변경)
|
||||
# 서비스 외부 접근 URL (DNS 설정 후 변경, 파일 URL에 사용됨)
|
||||
# 로컬 테스트: http://localhost:3200
|
||||
# 실 서비스: https://your-domain.com
|
||||
BASE_URL=http://localhost:3200
|
||||
|
||||
# 토스페이먼츠 (https://developers.tosspayments.com 에서 발급)
|
||||
TOSS_CLIENT_KEY=test_ck_YOUR_KEY
|
||||
TOSS_SECRET_KEY=test_sk_YOUR_KEY
|
||||
# ──────────────────────────────────────────────────────
|
||||
# 토스페이먼츠 (현재 테스트 모드 — 값 없어도 동작함)
|
||||
# 실결제 전환 시 TOSS_PAYMENT_GUIDE.md 참고
|
||||
# ──────────────────────────────────────────────────────
|
||||
TOSS_CLIENT_KEY=test_ck_placeholder
|
||||
TOSS_SECRET_KEY=test_sk_placeholder
|
||||
|
||||
# webflash 연동 내부 토큰 (임의 UUID)
|
||||
WEBFLASH_INTERNAL_TOKEN=change_this_token
|
||||
|
||||
267
platform/TOSS_PAYMENT_GUIDE.md
Normal file
267
platform/TOSS_PAYMENT_GUIDE.md
Normal file
@@ -0,0 +1,267 @@
|
||||
# 토스페이먼츠 실전 적용 가이드
|
||||
|
||||
> 현재 플랫폼은 **테스트(모의 결제) 모드**로 동작합니다.
|
||||
> 사업자 등록 완료 후 아래 절차를 따라 실제 결제로 전환하세요.
|
||||
|
||||
---
|
||||
|
||||
## 1단계 — 사업자 등록
|
||||
|
||||
토스페이먼츠는 사업자 등록증이 필요합니다.
|
||||
|
||||
| 구분 | 내용 |
|
||||
|------|------|
|
||||
| 개인사업자 | 홈택스에서 사업자 등록 (즉시 발급 가능) |
|
||||
| 법인사업자 | 법인 설립 후 사업자 등록 |
|
||||
| 필요 서류 | 사업자등록증, 통장 사본, 신분증 |
|
||||
|
||||
---
|
||||
|
||||
## 2단계 — 토스페이먼츠 계정 및 API 키 발급
|
||||
|
||||
### 2-1. 개발자 센터 가입
|
||||
|
||||
1. [https://developers.tosspayments.com](https://developers.tosspayments.com) 접속
|
||||
2. 회원가입 후 **내 개발 정보** → **API 키** 탭
|
||||
3. **테스트 키** (무료, 사업자 없어도 사용 가능):
|
||||
- `test_ck_...` — 클라이언트 키
|
||||
- `test_sk_...` — 시크릿 키
|
||||
|
||||
### 2-2. 실 결제 키 발급 (사업자 등록 후)
|
||||
|
||||
1. 토스페이먼츠 파트너 신청: [https://www.tosspayments.com/contact](https://www.tosspayments.com/contact)
|
||||
2. 심사 완료 후 **라이브 키** 발급:
|
||||
- `live_ck_...` — 클라이언트 키
|
||||
- `live_sk_...` — 시크릿 키
|
||||
3. 수수료: 카드 기준 약 **2.2%** (매출 규모에 따라 협의 가능)
|
||||
|
||||
---
|
||||
|
||||
## 3단계 — 플랫폼에 토스 SDK 적용
|
||||
|
||||
### 3-1. 환경 변수 업데이트
|
||||
|
||||
```env
|
||||
# platform/.env
|
||||
TOSS_CLIENT_KEY=live_ck_YOUR_LIVE_KEY # test_ck_ → live_ck_ 로 교체
|
||||
TOSS_SECRET_KEY=live_sk_YOUR_LIVE_KEY # test_sk_ → live_sk_ 로 교체
|
||||
BASE_URL=https://your-domain.com # 실제 도메인으로 변경
|
||||
```
|
||||
|
||||
### 3-2. 프론트엔드 — 토스 SDK 로드 (`platform/frontend/index.html`)
|
||||
|
||||
```html
|
||||
<!-- 기존 -->
|
||||
<!-- 없음 -->
|
||||
|
||||
<!-- 추가 -->
|
||||
<script src="https://js.tosspayments.com/v2/standard"></script>
|
||||
```
|
||||
|
||||
### 3-3. 프론트엔드 — 결제창 호출 (`ProductDetail.jsx`)
|
||||
|
||||
현재 `handleBuy` 함수의 `mock-pay` 부분을 아래로 교체하세요:
|
||||
|
||||
```javascript
|
||||
// ❌ 기존 모의 결제 코드
|
||||
const payRes = await api.post(`/orders/${orderId}/mock-pay`);
|
||||
navigate(`/flash/${payRes.data.flashToken}`);
|
||||
|
||||
// ✅ 토스 실결제 코드로 교체
|
||||
const tossPayments = TossPayments(import.meta.env.VITE_TOSS_CLIENT_KEY);
|
||||
const payment = tossPayments.payment({ customerKey: user.id });
|
||||
|
||||
await payment.requestPayment({
|
||||
method: 'CARD',
|
||||
amount: {
|
||||
currency: 'KRW',
|
||||
value: product.price,
|
||||
},
|
||||
orderId, // 서버에서 생성한 주문 ID
|
||||
orderName: product.project.title,
|
||||
successUrl: `${window.location.origin}/payment/success`,
|
||||
failUrl: `${window.location.origin}/payment/fail`,
|
||||
customerEmail: user.email,
|
||||
customerName: user.nickname,
|
||||
});
|
||||
// 위 코드 실행 시 토스 결제창으로 리다이렉트됨
|
||||
```
|
||||
|
||||
### 3-4. Vite 환경변수 추가 (`platform/frontend/.env`)
|
||||
|
||||
```env
|
||||
VITE_TOSS_CLIENT_KEY=live_ck_YOUR_LIVE_KEY
|
||||
```
|
||||
|
||||
### 3-5. 결제 성공 페이지 추가 (`pages/PaymentSuccess.jsx`)
|
||||
|
||||
```javascript
|
||||
// platform/frontend/src/pages/PaymentSuccess.jsx
|
||||
import { useEffect } from 'react';
|
||||
import { useNavigate, useSearchParams } from 'react-router-dom';
|
||||
import api from '../api/client';
|
||||
|
||||
export default function PaymentSuccess() {
|
||||
const [params] = useSearchParams();
|
||||
const navigate = useNavigate();
|
||||
|
||||
useEffect(() => {
|
||||
const paymentKey = params.get('paymentKey');
|
||||
const orderId = params.get('orderId');
|
||||
const amount = params.get('amount');
|
||||
|
||||
// 서버에 결제 승인 요청
|
||||
api.post('/payments/toss/confirm', { paymentKey, orderId, amount })
|
||||
.then(r => navigate(`/flash/${r.data.flashToken}`))
|
||||
.catch(() => navigate('/payment/fail'));
|
||||
}, []);
|
||||
|
||||
return <div className="spinner" />;
|
||||
}
|
||||
```
|
||||
|
||||
### 3-6. 백엔드 — 토스 결제 승인 라우트 추가 (`routes/payments.js`)
|
||||
|
||||
```javascript
|
||||
// platform/backend/src/routes/payments.js
|
||||
const router = require('express').Router();
|
||||
const prisma = require('../config/db');
|
||||
const { requireAuth } = require('../middleware/auth');
|
||||
const { v4: uuidv4 } = require('uuid');
|
||||
|
||||
// POST /api/payments/toss/confirm
|
||||
router.post('/toss/confirm', requireAuth, async (req, res) => {
|
||||
const { paymentKey, orderId, amount } = req.body;
|
||||
|
||||
// 1. DB에서 주문 확인
|
||||
const order = await prisma.order.findFirst({
|
||||
where: { tossOrderId: orderId, buyerId: req.user.id, status: 'pending' },
|
||||
});
|
||||
if (!order || order.amount !== parseInt(amount)) {
|
||||
return res.status(400).json({ error: '주문 정보가 일치하지 않습니다' });
|
||||
}
|
||||
|
||||
// 2. 토스 서버에 결제 승인 요청
|
||||
const tossRes = await fetch('https://api.tosspayments.com/v1/payments/confirm', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
// 시크릿 키를 Base64로 인코딩
|
||||
Authorization: `Basic ${Buffer.from(process.env.TOSS_SECRET_KEY + ':').toString('base64')}`,
|
||||
},
|
||||
body: JSON.stringify({ paymentKey, orderId, amount }),
|
||||
});
|
||||
|
||||
if (!tossRes.ok) {
|
||||
const err = await tossRes.json();
|
||||
return res.status(400).json({ error: err.message });
|
||||
}
|
||||
|
||||
// 3. 주문 상태 업데이트 + FlashToken 발급
|
||||
const expiresAt = new Date(Date.now() + 30 * 24 * 60 * 60 * 1000);
|
||||
const [, flashToken] = await prisma.$transaction([
|
||||
prisma.order.update({
|
||||
where: { id: order.id },
|
||||
data: { status: 'paid', paidAt: new Date(), paymentKey },
|
||||
}),
|
||||
prisma.flashToken.create({
|
||||
data: { orderId: order.id, expiresAt },
|
||||
}),
|
||||
prisma.product.update({
|
||||
where: { id: order.productId },
|
||||
data: { totalSales: { increment: 1 } },
|
||||
}),
|
||||
]);
|
||||
|
||||
res.json({ flashToken: flashToken.token });
|
||||
});
|
||||
|
||||
// POST /api/payments/toss/webhook — 토스 웹훅 (결제 상태 변경 알림)
|
||||
router.post('/toss/webhook', async (req, res) => {
|
||||
// 웹훅 서명 검증 (토스 대시보드에서 시크릿 설정)
|
||||
const signature = req.headers['toss-payments-signature'];
|
||||
// TODO: HMAC-SHA256 서명 검증 구현
|
||||
|
||||
const { eventType, data } = req.body;
|
||||
if (eventType === 'PAYMENT_STATUS_CHANGED' && data.status === 'CANCELED') {
|
||||
await prisma.order.updateMany({
|
||||
where: { paymentKey: data.paymentKey },
|
||||
data: { status: 'cancelled' },
|
||||
});
|
||||
}
|
||||
res.json({ success: true });
|
||||
});
|
||||
|
||||
module.exports = router;
|
||||
```
|
||||
|
||||
### 3-7. `index.js`에 payments 라우트 추가
|
||||
|
||||
```javascript
|
||||
// platform/backend/src/index.js 에 추가
|
||||
app.use('/api/payments', require('./routes/payments'));
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 4단계 — 환불 처리 (토스 API)
|
||||
|
||||
현재 모의 환불은 DB만 변경합니다. 실결제 환불 시:
|
||||
|
||||
```javascript
|
||||
// routes/orders.js refund 엔드포인트에 추가
|
||||
const tossRefundRes = await fetch(
|
||||
`https://api.tosspayments.com/v1/payments/${order.paymentKey}/cancel`,
|
||||
{
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
Authorization: `Basic ${Buffer.from(process.env.TOSS_SECRET_KEY + ':').toString('base64')}`,
|
||||
},
|
||||
body: JSON.stringify({ cancelReason: req.body.reason || '사용자 요청' }),
|
||||
}
|
||||
);
|
||||
if (!tossRefundRes.ok) throw new Error('토스 환불 API 실패');
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 5단계 — 토스 대시보드 설정
|
||||
|
||||
실키 발급 후 [토스페이먼츠 대시보드](https://app.tosspayments.com)에서:
|
||||
|
||||
| 설정 항목 | 값 |
|
||||
|----------|-----|
|
||||
| 결제 성공 URL | `https://your-domain.com/payment/success` |
|
||||
| 결제 실패 URL | `https://your-domain.com/payment/fail` |
|
||||
| 웹훅 URL | `https://your-domain.com/api/payments/toss/webhook` |
|
||||
| 허용 도메인 | `your-domain.com` |
|
||||
|
||||
---
|
||||
|
||||
## 테스트 → 운영 전환 요약
|
||||
|
||||
| 항목 | 테스트 모드 (현재) | 운영 모드 (전환 후) |
|
||||
|------|-----------------|----------------|
|
||||
| 결제 처리 | mock-pay (즉시) | 토스 결제창 → confirm API |
|
||||
| API 키 | 없음 | live_ck_, live_sk_ |
|
||||
| 실제 청구 | 없음 | 있음 |
|
||||
| 환불 | DB만 변경 | 토스 cancel API 호출 |
|
||||
| 코드 변경 | - | ProductDetail.jsx, payments.js 추가, index.js 라우트 등록 |
|
||||
|
||||
---
|
||||
|
||||
## 해외 결제 (Stripe) — 차후 적용
|
||||
|
||||
Stripe는 사업자 없이도 개인으로 가입 가능합니다.
|
||||
|
||||
```bash
|
||||
npm install stripe
|
||||
```
|
||||
|
||||
주요 차이점:
|
||||
- Stripe는 USD 기준 → 원화 환율 처리 필요
|
||||
- Payment Intent 방식 사용
|
||||
- 수수료: 약 2.9% + $0.30/건
|
||||
|
||||
별도 가이드 예정.
|
||||
@@ -15,5 +15,5 @@ COPY src ./src
|
||||
|
||||
EXPOSE 3201
|
||||
|
||||
# 마이그레이션 후 서버 시작
|
||||
CMD ["sh", "-c", "npx prisma migrate deploy && node src/index.js"]
|
||||
# prisma db push: 마이그레이션 파일 없이 스키마를 DB에 직접 동기화 (개발용)
|
||||
CMD ["sh", "-c", "npx prisma db push --accept-data-loss && node src/index.js"]
|
||||
|
||||
@@ -60,6 +60,7 @@ model Project {
|
||||
title String
|
||||
description String @db.Text
|
||||
difficultyLevel Int @default(3)
|
||||
chipFamily String @default("ESP32-S3")
|
||||
requiredParts Json?
|
||||
status ProjectStatus @default(draft)
|
||||
adminNote String?
|
||||
@@ -81,6 +82,7 @@ model ProjectFile {
|
||||
fileSize Int
|
||||
mimeType String
|
||||
originalName String?
|
||||
flashOffset String @default("0x0")
|
||||
displayOrder Int @default(0)
|
||||
createdAt DateTime @default(now())
|
||||
}
|
||||
|
||||
@@ -14,27 +14,15 @@ async function ensureBucket() {
|
||||
const exists = await client.bucketExists(BUCKET);
|
||||
if (!exists) {
|
||||
await client.makeBucket(BUCKET);
|
||||
// 공개 읽기 정책 (이미지·영상 직접 접근용)
|
||||
const policy = JSON.stringify({
|
||||
Version: '2012-10-17',
|
||||
Statement: [{
|
||||
Effect: 'Allow',
|
||||
Principal: { AWS: ['*'] },
|
||||
Action: ['s3:GetObject'],
|
||||
Resource: [`arn:aws:s3:::${BUCKET}/*`],
|
||||
}],
|
||||
});
|
||||
await client.setBucketPolicy(BUCKET, policy);
|
||||
console.log(`MinIO bucket "${BUCKET}" created`);
|
||||
}
|
||||
}
|
||||
|
||||
// 파일 업로드 후 공개 URL 반환
|
||||
// 파일 URL — 플랫폼 백엔드 프록시를 통해 서빙 (CORS 문제 없음)
|
||||
// objectName: "images/uuid.webp" 형식
|
||||
function publicUrl(objectName) {
|
||||
const proto = process.env.MINIO_USE_SSL === 'true' ? 'https' : 'http';
|
||||
const host = process.env.MINIO_ENDPOINT || 'localhost';
|
||||
const port = process.env.MINIO_PORT || '9000';
|
||||
return `${proto}://${host}:${port}/${BUCKET}/${objectName}`;
|
||||
const base = (process.env.BASE_URL || 'http://localhost:3200').replace(/\/$/, '');
|
||||
return `${base}/api/files/${objectName}`;
|
||||
}
|
||||
|
||||
module.exports = { client, BUCKET, ensureBucket, publicUrl };
|
||||
|
||||
@@ -1,8 +1,9 @@
|
||||
const express = require('express');
|
||||
const cors = require('cors');
|
||||
const helmet = require('helmet');
|
||||
const path = require('path');
|
||||
const rateLimit = require('express-rate-limit');
|
||||
const { ensureBucket } = require('./config/minio');
|
||||
const { ensureBucket, client, BUCKET } = require('./config/minio');
|
||||
const prisma = require('./config/db');
|
||||
|
||||
const app = express();
|
||||
@@ -10,7 +11,7 @@ const PORT = process.env.PORT || 3201;
|
||||
|
||||
// ── 기본 미들웨어 ────────────────────────────────────────────────────────────
|
||||
app.set('trust proxy', 1);
|
||||
app.use(helmet());
|
||||
app.use(helmet({ crossOriginResourcePolicy: false }));
|
||||
app.use(cors({
|
||||
origin: process.env.ALLOWED_ORIGIN || '*',
|
||||
credentials: true,
|
||||
@@ -20,8 +21,8 @@ app.use(express.urlencoded({ extended: true, limit: '2mb' }));
|
||||
|
||||
// ── Rate Limiting ────────────────────────────────────────────────────────────
|
||||
const limiter = rateLimit({
|
||||
windowMs: 15 * 60 * 1000, // 15분
|
||||
max: 200,
|
||||
windowMs: 15 * 60 * 1000,
|
||||
max: 300,
|
||||
standardHeaders: true,
|
||||
legacyHeaders: false,
|
||||
message: { error: '요청이 너무 많습니다. 잠시 후 다시 시도해주세요.' },
|
||||
@@ -33,13 +34,45 @@ const authLimiter = rateLimit({
|
||||
});
|
||||
|
||||
app.use('/api/', limiter);
|
||||
app.use('/api/auth/login', authLimiter);
|
||||
app.use('/api/auth/login', authLimiter);
|
||||
app.use('/api/auth/register', authLimiter);
|
||||
|
||||
// ── MinIO 파일 프록시 ─────────────────────────────────────────────────────────
|
||||
// /api/files/images/xxx.webp → MinIO BUCKET/images/xxx.webp 스트리밍
|
||||
// esp-web-tools가 bin 파일을 직접 fetch할 때 CORS 헤더 포함
|
||||
const MIME = {
|
||||
'.webp': 'image/webp', '.jpg': 'image/jpeg', '.jpeg': 'image/jpeg',
|
||||
'.png': 'image/png', '.gif': 'image/gif', '.svg': 'image/svg+xml',
|
||||
'.bin': 'application/octet-stream', '.stl': 'model/stl',
|
||||
'.pdf': 'application/pdf', '.mp4': 'video/mp4', '.webm': 'video/webm',
|
||||
};
|
||||
|
||||
app.get('/api/files/*', async (req, res) => {
|
||||
try {
|
||||
const objectName = req.params[0];
|
||||
if (!objectName) return res.status(400).end();
|
||||
|
||||
const ext = path.extname(objectName).toLowerCase();
|
||||
const contentType = MIME[ext] || 'application/octet-stream';
|
||||
|
||||
res.setHeader('Content-Type', contentType);
|
||||
res.setHeader('Access-Control-Allow-Origin', '*');
|
||||
res.setHeader('Cache-Control', 'public, max-age=86400');
|
||||
|
||||
const stream = await client.getObject(BUCKET, objectName);
|
||||
stream.pipe(res);
|
||||
stream.on('error', () => res.status(404).end());
|
||||
} catch {
|
||||
res.status(404).end();
|
||||
}
|
||||
});
|
||||
|
||||
// ── 라우트 ───────────────────────────────────────────────────────────────────
|
||||
app.use('/api/auth', require('./routes/auth'));
|
||||
app.use('/api/projects', require('./routes/projects'));
|
||||
app.use('/api/products', require('./routes/products'));
|
||||
app.use('/api/orders', require('./routes/orders'));
|
||||
app.use('/api/flash', require('./routes/flash'));
|
||||
app.use('/api/admin', require('./routes/admin'));
|
||||
|
||||
// 헬스 체크
|
||||
|
||||
142
platform/backend/src/routes/flash.js
Normal file
142
platform/backend/src/routes/flash.js
Normal file
@@ -0,0 +1,142 @@
|
||||
const router = require('express').Router();
|
||||
const prisma = require('../config/db');
|
||||
const { writeAuditLog } = require('../middleware/audit');
|
||||
|
||||
// FlashToken 포함 조회 헬퍼
|
||||
async function findToken(token) {
|
||||
return prisma.flashToken.findUnique({
|
||||
where: { token },
|
||||
include: {
|
||||
order: {
|
||||
include: {
|
||||
product: {
|
||||
include: {
|
||||
project: {
|
||||
select: {
|
||||
id: true, title: true, chipFamily: true,
|
||||
files: {
|
||||
where: { fileType: 'firmware' },
|
||||
orderBy: { displayOrder: 'asc' },
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
// GET /api/flash/:token — 토큰 유효성 확인 (Flash 페이지, webflash 둘 다 사용)
|
||||
router.get('/:token', async (req, res) => {
|
||||
try {
|
||||
const ft = await findToken(req.params.token);
|
||||
if (!ft) return res.status(404).json({ error: '유효하지 않은 토큰입니다' });
|
||||
|
||||
const expired = new Date() > new Date(ft.expiresAt);
|
||||
const project = ft.order.product.project;
|
||||
|
||||
res.json({
|
||||
valid: !expired && !ft.isUsed,
|
||||
isUsed: ft.isUsed,
|
||||
expired,
|
||||
expiresAt: ft.expiresAt,
|
||||
productName: project.title,
|
||||
chipFamily: project.chipFamily,
|
||||
hasFirmware: project.files.length > 0,
|
||||
usedAt: ft.usedAt,
|
||||
});
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
res.status(500).json({ error: '서버 오류' });
|
||||
}
|
||||
});
|
||||
|
||||
// GET /api/flash/:token/manifest — esp-web-tools 매니페스트 반환
|
||||
// 브라우저에서 직접 fetch하므로 CORS 허용
|
||||
router.get('/:token/manifest', async (req, res) => {
|
||||
try {
|
||||
const ft = await findToken(req.params.token);
|
||||
if (!ft) return res.status(404).json({ error: '유효하지 않은 토큰입니다' });
|
||||
|
||||
if (ft.isUsed) {
|
||||
return res.status(410).json({ error: '이미 플래시에 사용된 토큰입니다' });
|
||||
}
|
||||
if (new Date() > new Date(ft.expiresAt)) {
|
||||
return res.status(410).json({ error: '만료된 토큰입니다' });
|
||||
}
|
||||
|
||||
const project = ft.order.product.project;
|
||||
if (!project.files.length) {
|
||||
return res.status(404).json({ error: '펌웨어 파일이 없습니다. 판매자에게 문의하세요.' });
|
||||
}
|
||||
|
||||
const manifest = {
|
||||
name: project.title,
|
||||
new_install_improv_wait_ms: 0,
|
||||
builds: [{
|
||||
chipFamily: project.chipFamily,
|
||||
parts: project.files.map(f => ({
|
||||
path: f.url,
|
||||
offset: parseInt(f.flashOffset || '0x0', 16),
|
||||
})),
|
||||
}],
|
||||
};
|
||||
|
||||
res.setHeader('Access-Control-Allow-Origin', '*');
|
||||
res.setHeader('Content-Type', 'application/json');
|
||||
res.json(manifest);
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
res.status(500).json({ error: '서버 오류' });
|
||||
}
|
||||
});
|
||||
|
||||
// POST /api/flash/:token/consume — 플래시 완료 기록
|
||||
// esp-web-tools 또는 플래시 페이지에서 호출
|
||||
router.post('/:token/consume', async (req, res) => {
|
||||
try {
|
||||
const ft = await findToken(req.params.token);
|
||||
if (!ft) return res.status(404).json({ error: '유효하지 않은 토큰입니다' });
|
||||
if (ft.isUsed) return res.status(410).json({ error: '이미 사용된 토큰입니다' });
|
||||
if (new Date() > new Date(ft.expiresAt)) return res.status(410).json({ error: '만료된 토큰입니다' });
|
||||
|
||||
const { mac = 'unknown', chipFamily, success = true, errorMessage } = req.body;
|
||||
const project = ft.order.product.project;
|
||||
|
||||
await prisma.$transaction([
|
||||
prisma.flashToken.update({
|
||||
where: { id: ft.id },
|
||||
data: { isUsed: true, usedAt: new Date(), macAddress: mac, chipFamily: chipFamily || project.chipFamily },
|
||||
}),
|
||||
prisma.flashLog.create({
|
||||
data: {
|
||||
flashTokenId: ft.id,
|
||||
macAddress: mac,
|
||||
chipFamily: chipFamily || project.chipFamily,
|
||||
firmwareName: project.title,
|
||||
firmwareId: project.id,
|
||||
success: Boolean(success),
|
||||
errorMessage: errorMessage || null,
|
||||
clientIp: req.ip || 'unknown',
|
||||
userAgent: req.headers['user-agent'] || null,
|
||||
},
|
||||
}),
|
||||
]);
|
||||
|
||||
await writeAuditLog({
|
||||
userId: ft.order.buyerId,
|
||||
action: success ? 'FLASH_SUCCESS' : 'FLASH_FAIL',
|
||||
targetType: 'FlashToken', targetId: ft.id,
|
||||
req, metadata: { mac, chipFamily, firmwareId: project.id }, responseStatus: 200,
|
||||
});
|
||||
|
||||
res.json({ success: true, message: success ? '플래시 완료 기록됨' : '실패 기록됨' });
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
res.status(500).json({ error: '서버 오류' });
|
||||
}
|
||||
});
|
||||
|
||||
module.exports = router;
|
||||
195
platform/backend/src/routes/orders.js
Normal file
195
platform/backend/src/routes/orders.js
Normal file
@@ -0,0 +1,195 @@
|
||||
const router = require('express').Router();
|
||||
const { v4: uuidv4 } = require('uuid');
|
||||
const prisma = require('../config/db');
|
||||
const { requireAuth, requireRole } = require('../middleware/auth');
|
||||
const { writeAuditLog } = require('../middleware/audit');
|
||||
|
||||
// POST /api/orders — 주문 생성 (결제 전)
|
||||
router.post('/', requireAuth, async (req, res) => {
|
||||
const { productId } = req.body;
|
||||
if (!productId) return res.status(400).json({ error: 'productId가 필요합니다' });
|
||||
|
||||
try {
|
||||
const product = await prisma.product.findUnique({
|
||||
where: { id: productId },
|
||||
include: { project: { select: { commissionRate: true, userId: true } } },
|
||||
});
|
||||
if (!product) return res.status(404).json({ error: '상품을 찾을 수 없습니다' });
|
||||
if (!product.isOnSale) return res.status(400).json({ error: '판매 중지된 상품입니다' });
|
||||
if (product.project.userId === req.user.id) return res.status(400).json({ error: '자신의 상품은 구매할 수 없습니다' });
|
||||
|
||||
// 이미 유효한 주문이 있는지 확인 (중복 구매 방지)
|
||||
const existing = await prisma.order.findFirst({
|
||||
where: { buyerId: req.user.id, productId, status: { in: ['pending', 'paid'] } },
|
||||
include: { flashToken: true },
|
||||
});
|
||||
if (existing?.status === 'paid') {
|
||||
return res.status(409).json({
|
||||
error: '이미 구매한 상품입니다',
|
||||
flashToken: existing.flashToken?.token,
|
||||
orderId: existing.id,
|
||||
});
|
||||
}
|
||||
if (existing?.status === 'pending') {
|
||||
return res.json({ orderId: existing.id, amount: existing.amount, status: 'pending' });
|
||||
}
|
||||
|
||||
const commissionAmount = Math.round(product.price * product.project.commissionRate);
|
||||
const sellerAmount = product.price - commissionAmount;
|
||||
|
||||
const order = await prisma.order.create({
|
||||
data: {
|
||||
buyerId: req.user.id,
|
||||
productId,
|
||||
amount: product.price,
|
||||
commissionAmount,
|
||||
sellerAmount,
|
||||
paymentGateway: 'toss',
|
||||
tossOrderId: `mock_${uuidv4()}`,
|
||||
buyerInfo: { email: req.user.email, nickname: req.user.nickname },
|
||||
deviceInfo: { ip: req.ip, userAgent: req.headers['user-agent'] },
|
||||
},
|
||||
});
|
||||
|
||||
await writeAuditLog({ userId: req.user.id, action: 'ORDER_CREATE', targetType: 'Order', targetId: order.id, req, responseStatus: 201 });
|
||||
res.status(201).json({ orderId: order.id, amount: order.amount, status: 'pending' });
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
res.status(500).json({ error: '서버 오류' });
|
||||
}
|
||||
});
|
||||
|
||||
// POST /api/orders/:id/mock-pay — 모의 결제 (사업자 등록 전 테스트용)
|
||||
// 실제 결제 없이 즉시 paid 처리하고 FlashToken 발급
|
||||
router.post('/:id/mock-pay', requireAuth, async (req, res) => {
|
||||
try {
|
||||
const order = await prisma.order.findUnique({
|
||||
where: { id: req.params.id },
|
||||
include: { flashToken: true },
|
||||
});
|
||||
if (!order) return res.status(404).json({ error: '주문을 찾을 수 없습니다' });
|
||||
if (order.buyerId !== req.user.id) return res.status(403).json({ error: '권한이 없습니다' });
|
||||
if (order.status === 'paid') {
|
||||
return res.json({ flashToken: order.flashToken?.token, orderId: order.id, alreadyPaid: true });
|
||||
}
|
||||
if (order.status !== 'pending') {
|
||||
return res.status(400).json({ error: `${order.status} 상태의 주문은 결제할 수 없습니다` });
|
||||
}
|
||||
|
||||
const expiresAt = new Date(Date.now() + 30 * 24 * 60 * 60 * 1000); // 30일
|
||||
|
||||
const [updatedOrder, flashToken] = await prisma.$transaction([
|
||||
prisma.order.update({
|
||||
where: { id: order.id },
|
||||
data: { status: 'paid', paidAt: new Date(), paymentKey: `mock_${uuidv4()}` },
|
||||
}),
|
||||
prisma.flashToken.create({
|
||||
data: { orderId: order.id, expiresAt },
|
||||
}),
|
||||
prisma.product.update({
|
||||
where: { id: order.productId },
|
||||
data: { totalSales: { increment: 1 } },
|
||||
}),
|
||||
]);
|
||||
|
||||
await writeAuditLog({
|
||||
userId: req.user.id, action: 'MOCK_PAYMENT',
|
||||
targetType: 'Order', targetId: order.id,
|
||||
req, metadata: { amount: order.amount, mode: 'mock' }, responseStatus: 200,
|
||||
});
|
||||
|
||||
res.json({ flashToken: flashToken.token, orderId: order.id, expiresAt: flashToken.expiresAt });
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
res.status(500).json({ error: '서버 오류' });
|
||||
}
|
||||
});
|
||||
|
||||
// GET /api/orders/me — 내 주문 목록
|
||||
router.get('/me', requireAuth, async (req, res) => {
|
||||
try {
|
||||
const orders = await prisma.order.findMany({
|
||||
where: { buyerId: req.user.id },
|
||||
orderBy: { orderedAt: 'desc' },
|
||||
include: {
|
||||
product: {
|
||||
select: {
|
||||
id: true, price: true,
|
||||
project: { select: { title: true, chipFamily: true, files: { where: { fileType: 'image' }, take: 1 } } },
|
||||
},
|
||||
},
|
||||
flashToken: { select: { token: true, isUsed: true, expiresAt: true } },
|
||||
review: { select: { id: true } },
|
||||
},
|
||||
});
|
||||
res.json(orders);
|
||||
} catch (err) {
|
||||
res.status(500).json({ error: '서버 오류' });
|
||||
}
|
||||
});
|
||||
|
||||
// GET /api/orders/:id
|
||||
router.get('/:id', requireAuth, async (req, res) => {
|
||||
try {
|
||||
const order = await prisma.order.findUnique({
|
||||
where: { id: req.params.id },
|
||||
include: {
|
||||
product: { include: { project: true } },
|
||||
flashToken: true,
|
||||
},
|
||||
});
|
||||
if (!order) return res.status(404).json({ error: '주문을 찾을 수 없습니다' });
|
||||
if (order.buyerId !== req.user.id && req.user.role !== 'admin') {
|
||||
return res.status(403).json({ error: '권한이 없습니다' });
|
||||
}
|
||||
res.json(order);
|
||||
} catch (err) {
|
||||
res.status(500).json({ error: '서버 오류' });
|
||||
}
|
||||
});
|
||||
|
||||
// POST /api/orders/:id/refund — 환불 (모의 / 플래시 미완료 시만)
|
||||
router.post('/:id/refund', requireAuth, async (req, res) => {
|
||||
try {
|
||||
const order = await prisma.order.findUnique({
|
||||
where: { id: req.params.id },
|
||||
include: { flashToken: true },
|
||||
});
|
||||
if (!order) return res.status(404).json({ error: '주문을 찾을 수 없습니다' });
|
||||
if (order.buyerId !== req.user.id && req.user.role !== 'admin') {
|
||||
return res.status(403).json({ error: '권한이 없습니다' });
|
||||
}
|
||||
if (order.status !== 'paid') return res.status(400).json({ error: '결제 완료 상태가 아닙니다' });
|
||||
if (order.flashToken?.isUsed && req.user.role !== 'admin') {
|
||||
return res.status(400).json({ error: '플래시가 완료된 주문은 환불할 수 없습니다' });
|
||||
}
|
||||
|
||||
await prisma.$transaction([
|
||||
prisma.order.update({
|
||||
where: { id: order.id },
|
||||
data: { status: 'refunded', refundedAt: new Date(), refundReason: req.body.reason || '사용자 요청' },
|
||||
}),
|
||||
// FlashToken 무효화
|
||||
...(order.flashToken ? [prisma.flashToken.update({
|
||||
where: { id: order.flashToken.id },
|
||||
data: { expiresAt: new Date() },
|
||||
})] : []),
|
||||
prisma.product.update({
|
||||
where: { id: order.productId },
|
||||
data: { totalSales: { decrement: 1 } },
|
||||
}),
|
||||
]);
|
||||
|
||||
await writeAuditLog({
|
||||
userId: req.user.id, action: 'REFUND',
|
||||
targetType: 'Order', targetId: order.id,
|
||||
req, responseStatus: 200,
|
||||
});
|
||||
res.json({ success: true });
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
res.status(500).json({ error: '서버 오류' });
|
||||
}
|
||||
});
|
||||
|
||||
module.exports = router;
|
||||
@@ -108,7 +108,7 @@ router.post('/', requireAuth, [
|
||||
const errors = validationResult(req);
|
||||
if (!errors.isEmpty()) return res.status(400).json({ error: errors.array()[0].msg });
|
||||
|
||||
const { title, description, difficultyLevel, requiredParts } = req.body;
|
||||
const { title, description, difficultyLevel, chipFamily, requiredParts } = req.body;
|
||||
try {
|
||||
const project = await prisma.project.create({
|
||||
data: {
|
||||
@@ -116,6 +116,7 @@ router.post('/', requireAuth, [
|
||||
title,
|
||||
description,
|
||||
difficultyLevel: difficultyLevel ? parseInt(difficultyLevel) : 3,
|
||||
chipFamily: chipFamily || 'ESP32-S3',
|
||||
requiredParts: requiredParts || [],
|
||||
},
|
||||
});
|
||||
@@ -138,13 +139,14 @@ router.put('/:id', requireAuth, async (req, res) => {
|
||||
return res.status(400).json({ error: '승인 대기/완료 상태에서는 수정할 수 없습니다' });
|
||||
}
|
||||
|
||||
const { title, description, difficultyLevel, requiredParts } = req.body;
|
||||
const { title, description, difficultyLevel, chipFamily, requiredParts } = req.body;
|
||||
const updated = await prisma.project.update({
|
||||
where: { id: req.params.id },
|
||||
data: {
|
||||
...(title && { title }),
|
||||
...(description && { description }),
|
||||
...(difficultyLevel && { difficultyLevel: parseInt(difficultyLevel) }),
|
||||
...(chipFamily && { chipFamily }),
|
||||
...(requiredParts !== undefined && { requiredParts }),
|
||||
},
|
||||
});
|
||||
@@ -205,7 +207,8 @@ router.post('/:id/files', requireAuth, upload.array('files', 10), async (req, re
|
||||
if (project.userId !== req.user.id) return res.status(403).json({ error: '권한이 없습니다' });
|
||||
if (!req.files?.length) return res.status(400).json({ error: '파일이 없습니다' });
|
||||
|
||||
const fileType = req.body.fileType || 'image'; // image|video|stl|wiring|firmware
|
||||
const fileType = req.body.fileType || 'image'; // image|video|stl|wiring|firmware
|
||||
const flashOffset = req.body.flashOffset || '0x0';
|
||||
const results = [];
|
||||
|
||||
for (const file of req.files) {
|
||||
@@ -225,6 +228,7 @@ router.post('/:id/files', requireAuth, upload.array('files', 10), async (req, re
|
||||
fileSize: stored.fileSize,
|
||||
mimeType: stored.mimeType,
|
||||
originalName: file.originalname,
|
||||
flashOffset: fileType === 'firmware' ? flashOffset : '0x0',
|
||||
displayOrder: results.length,
|
||||
},
|
||||
});
|
||||
|
||||
@@ -5,6 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>ESP32 DIY 플랫폼</title>
|
||||
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
||||
<script type="module" src="https://unpkg.com/esp-web-tools@10/dist/web/install-button.js?module"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
|
||||
@@ -3,6 +3,7 @@ import { AuthProvider, useAuth } from './hooks/useAuth';
|
||||
import Navbar from './components/Navbar';
|
||||
|
||||
import Home from './pages/Home';
|
||||
import Flash from './pages/Flash';
|
||||
import Projects from './pages/Projects';
|
||||
import ProjectDetail from './pages/ProjectDetail';
|
||||
import Shop from './pages/Shop';
|
||||
@@ -51,6 +52,7 @@ function AppRoutes() {
|
||||
<Route path="/dashboard/projects/:id" element={<RequireAuth><ProjectEdit /></RequireAuth>} />
|
||||
<Route path="/dashboard/orders" element={<RequireAuth><MyOrders /></RequireAuth>} />
|
||||
<Route path="/dashboard/sales" element={<RequireAuth><MySales /></RequireAuth>} />
|
||||
<Route path="/flash/:token" element={<RequireAuth><Flash /></RequireAuth>} />
|
||||
|
||||
<Route path="/admin" element={<RequireAdmin><AdminIndex /></RequireAdmin>} />
|
||||
<Route path="/admin/projects" element={<RequireAdmin><AdminProjects /></RequireAdmin>} />
|
||||
|
||||
@@ -1,10 +1,103 @@
|
||||
import { useEffect, useState } from 'react';
|
||||
import { Link, useNavigate } from 'react-router-dom';
|
||||
import api from '../../api/client';
|
||||
|
||||
const STATUS_LABEL = {
|
||||
pending: { label: '결제 대기', color: 'var(--warn)' },
|
||||
paid: { label: '결제 완료', color: 'var(--success)' },
|
||||
refunded: { label: '환불됨', color: 'var(--text2)' },
|
||||
cancelled:{ label: '취소됨', color: 'var(--text2)' },
|
||||
};
|
||||
|
||||
export default function MyOrders() {
|
||||
const [orders, setOrders] = useState([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const navigate = useNavigate();
|
||||
|
||||
useEffect(() => {
|
||||
api.get('/orders/me')
|
||||
.then(r => setOrders(r.data))
|
||||
.catch(() => {})
|
||||
.finally(() => setLoading(false));
|
||||
}, []);
|
||||
|
||||
async function handleRefund(orderId) {
|
||||
if (!confirm('환불 요청하시겠습니까?\n플래시 완료 후에는 환불이 불가능합니다.')) return;
|
||||
try {
|
||||
await api.post(`/orders/${orderId}/refund`, { reason: '사용자 요청' });
|
||||
setOrders(prev => prev.map(o => o.id === orderId ? { ...o, status: 'refunded' } : o));
|
||||
} catch (err) {
|
||||
alert(err.response?.data?.error || '환불 처리 실패');
|
||||
}
|
||||
}
|
||||
|
||||
if (loading) return <div className="spinner" />;
|
||||
|
||||
return (
|
||||
<div className="container page">
|
||||
<h2 style={{ marginBottom: 24 }}>구매 내역</h2>
|
||||
<div className="card text-center" style={{ padding: 48 }}>
|
||||
<p className="text-muted">결제 기능은 2단계에서 구현됩니다.</p>
|
||||
</div>
|
||||
|
||||
{orders.length === 0 ? (
|
||||
<div className="card text-center" style={{ padding: 48 }}>
|
||||
<p className="text-muted">구매 내역이 없습니다.</p>
|
||||
<Link to="/shop" className="btn btn-primary" style={{ marginTop: 16 }}>상점 둘러보기</Link>
|
||||
</div>
|
||||
) : (
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
|
||||
{orders.map(order => {
|
||||
const st = STATUS_LABEL[order.status] || { label: order.status, color: 'var(--text2)' };
|
||||
const thumb = order.product?.project?.files?.[0];
|
||||
const ft = order.flashToken;
|
||||
|
||||
return (
|
||||
<div key={order.id} className="card" style={{ display: 'grid', gridTemplateColumns: '60px 1fr auto', gap: 16, alignItems: 'center' }}>
|
||||
{/* 썸네일 */}
|
||||
{thumb
|
||||
? <img src={thumb.thumbnailUrl || thumb.url} alt="" style={{ width: 60, height: 60, objectFit: 'cover', borderRadius: 4 }} />
|
||||
: <div style={{ width: 60, height: 60, background: 'var(--bg3)', borderRadius: 4, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 20 }}>📦</div>
|
||||
}
|
||||
|
||||
{/* 정보 */}
|
||||
<div>
|
||||
<div style={{ fontWeight: 600, marginBottom: 2 }}>
|
||||
{order.product?.project?.title || '상품'}
|
||||
</div>
|
||||
<div className="text-muted" style={{ fontSize: 12, marginBottom: 4 }}>
|
||||
₩{order.amount.toLocaleString()} · {new Date(order.orderedAt).toLocaleDateString('ko-KR')}
|
||||
{' · '}<span style={{ color: st.color }}>{st.label}</span>
|
||||
</div>
|
||||
{ft && (
|
||||
<div style={{ fontSize: 12 }}>
|
||||
{ft.isUsed
|
||||
? <span style={{ color: 'var(--text2)' }}>✅ 플래시 완료</span>
|
||||
: new Date() > new Date(ft.expiresAt)
|
||||
? <span style={{ color: 'var(--danger)' }}>⏰ 토큰 만료</span>
|
||||
: <span style={{ color: 'var(--success)' }}>
|
||||
🔑 토큰 유효 · 만료: {new Date(ft.expiresAt).toLocaleDateString('ko-KR')}
|
||||
</span>
|
||||
}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 액션 버튼 */}
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: 6, alignItems: 'flex-end' }}>
|
||||
{ft && !ft.isUsed && order.status === 'paid' && new Date() <= new Date(ft.expiresAt) && (
|
||||
<Link to={`/flash/${ft.token}`} className="btn btn-primary btn-sm">
|
||||
⚡ 플래시
|
||||
</Link>
|
||||
)}
|
||||
{order.status === 'paid' && !ft?.isUsed && (
|
||||
<button className="btn btn-outline btn-sm" onClick={() => handleRefund(order.id)}>
|
||||
환불
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -5,11 +5,12 @@ import api from '../../api/client';
|
||||
export default function ProjectNew() {
|
||||
const navigate = useNavigate();
|
||||
const [form, setForm] = useState({
|
||||
title: '', description: '', difficultyLevel: 3, requiredParts: [],
|
||||
title: '', description: '', difficultyLevel: 3, chipFamily: 'ESP32-S3', requiredParts: [],
|
||||
});
|
||||
const [partRow, setPartRow] = useState({ name: '', quantity: '', link: '' });
|
||||
const [files, setFiles] = useState([]);
|
||||
const [fileType, setFileType] = useState('image');
|
||||
const [flashOffset, setOffset] = useState('0x0');
|
||||
const [dragging, setDragging] = useState(false);
|
||||
const [error, setError] = useState('');
|
||||
const [step, setStep] = useState(1); // 1:기본정보, 2:파일, 3:완료
|
||||
@@ -35,6 +36,7 @@ export default function ProjectNew() {
|
||||
title: form.title,
|
||||
description: form.description,
|
||||
difficultyLevel: form.difficultyLevel,
|
||||
chipFamily: form.chipFamily,
|
||||
requiredParts: form.requiredParts,
|
||||
});
|
||||
setProjectId(data.id);
|
||||
@@ -53,6 +55,7 @@ export default function ProjectNew() {
|
||||
try {
|
||||
const fd = new FormData();
|
||||
fd.append('fileType', fileType);
|
||||
if (fileType === 'firmware') fd.append('flashOffset', flashOffset);
|
||||
files.forEach(f => fd.append('files', f));
|
||||
await api.post(`/projects/${projectId}/files`, fd, {
|
||||
headers: { 'Content-Type': 'multipart/form-data' },
|
||||
@@ -114,11 +117,24 @@ export default function ProjectNew() {
|
||||
onChange={e => setForm(f => ({ ...f, description: e.target.value }))}
|
||||
placeholder="프로젝트 목적, 기능, 특징을 설명해주세요" rows={6} />
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label>난이도</label>
|
||||
<select value={form.difficultyLevel} onChange={e => setForm(f => ({ ...f, difficultyLevel: parseInt(e.target.value) }))}>
|
||||
{[1,2,3,4,5].map(d => <option key={d} value={d}>{d} — {['입문','초급','중급','고급','전문가'][d-1]}</option>)}
|
||||
</select>
|
||||
<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
|
||||
<div className="form-group">
|
||||
<label>난이도</label>
|
||||
<select value={form.difficultyLevel} onChange={e => setForm(f => ({ ...f, difficultyLevel: parseInt(e.target.value) }))}>
|
||||
{[1,2,3,4,5].map(d => <option key={d} value={d}>{d} — {['입문','초급','중급','고급','전문가'][d-1]}</option>)}
|
||||
</select>
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label>ESP 칩 패밀리</label>
|
||||
<select value={form.chipFamily} onChange={e => setForm(f => ({ ...f, chipFamily: e.target.value }))}>
|
||||
<option value="ESP32-S3">ESP32-S3 (권장)</option>
|
||||
<option value="ESP32-S2">ESP32-S2</option>
|
||||
<option value="ESP32-C3">ESP32-C3</option>
|
||||
<option value="ESP32-C6">ESP32-C6</option>
|
||||
<option value="ESP32-H2">ESP32-H2</option>
|
||||
<option value="ESP32">ESP32</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 필요 부품 */}
|
||||
@@ -150,15 +166,29 @@ export default function ProjectNew() {
|
||||
{step === 2 && (
|
||||
<div className="card">
|
||||
<h3 style={{ marginBottom: 20 }}>파일 업로드</h3>
|
||||
<div className="form-group">
|
||||
<label>파일 종류</label>
|
||||
<select value={fileType} onChange={e => setFileType(e.target.value)}>
|
||||
<option value="image">이미지 (jpg, png, webp)</option>
|
||||
<option value="video">영상 (mp4, mov)</option>
|
||||
<option value="wiring">배선도 (jpg, png, pdf)</option>
|
||||
<option value="stl">3D 케이스 STL</option>
|
||||
<option value="firmware">펌웨어 (.bin)</option>
|
||||
</select>
|
||||
<div style={{ display: 'grid', gridTemplateColumns: fileType === 'firmware' ? '1fr 1fr' : '1fr', gap: 12 }}>
|
||||
<div className="form-group">
|
||||
<label>파일 종류</label>
|
||||
<select value={fileType} onChange={e => setFileType(e.target.value)}>
|
||||
<option value="image">이미지 (jpg, png, webp)</option>
|
||||
<option value="video">영상 (mp4, mov)</option>
|
||||
<option value="wiring">배선도 (jpg, png, pdf)</option>
|
||||
<option value="stl">3D 케이스 STL</option>
|
||||
<option value="firmware">펌웨어 (.bin)</option>
|
||||
</select>
|
||||
</div>
|
||||
{fileType === 'firmware' && (
|
||||
<div className="form-group">
|
||||
<label>플래시 오프셋</label>
|
||||
<select value={flashOffset} onChange={e => setOffset(e.target.value)}>
|
||||
<option value="0x0">0x0 — merged.bin (권장)</option>
|
||||
<option value="0x10000">0x10000 — app.bin만</option>
|
||||
<option value="0x0000">0x0000 — bootloader</option>
|
||||
<option value="0x8000">0x8000 — partition table</option>
|
||||
<option value="0xe000">0xe000 — boot_app0</option>
|
||||
</select>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className={`dropzone${dragging ? ' over' : ''}`}
|
||||
onDragOver={e => { e.preventDefault(); setDragging(true); }}
|
||||
|
||||
184
platform/frontend/src/pages/Flash.jsx
Normal file
184
platform/frontend/src/pages/Flash.jsx
Normal file
@@ -0,0 +1,184 @@
|
||||
import { useEffect, useRef, useState } from 'react';
|
||||
import { useParams, Link } from 'react-router-dom';
|
||||
import api from '../api/client';
|
||||
|
||||
const CHIP_LABELS = {
|
||||
'ESP32-S3': 'ESP32-S3', 'ESP32-S2': 'ESP32-S2', 'ESP32-C3': 'ESP32-C3',
|
||||
'ESP32-C6': 'ESP32-C6', 'ESP32-H2': 'ESP32-H2', 'ESP32': 'ESP32',
|
||||
};
|
||||
|
||||
export default function Flash() {
|
||||
const { token } = useParams();
|
||||
const [info, setInfo] = useState(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [flashDone, setFlashDone] = useState(false);
|
||||
const installRef = useRef(null);
|
||||
|
||||
const manifestUrl = `${window.location.origin}/api/flash/${token}/manifest`;
|
||||
|
||||
useEffect(() => {
|
||||
api.get(`/flash/${token}`)
|
||||
.then(r => setInfo(r.data))
|
||||
.catch(() => setInfo(null))
|
||||
.finally(() => setLoading(false));
|
||||
}, [token]);
|
||||
|
||||
// esp-web-tools 이벤트 — 플래시 완료/실패 시 서버에 기록
|
||||
useEffect(() => {
|
||||
const btn = installRef.current;
|
||||
if (!btn) return;
|
||||
|
||||
function onSuccess(e) {
|
||||
const mac = e.detail?.device?.macAddress || 'unknown';
|
||||
api.post(`/flash/${token}/consume`, {
|
||||
mac, chipFamily: info?.chipFamily, success: true,
|
||||
}).catch(() => {});
|
||||
setFlashDone(true);
|
||||
}
|
||||
function onFail(e) {
|
||||
api.post(`/flash/${token}/consume`, {
|
||||
mac: 'unknown', chipFamily: info?.chipFamily,
|
||||
success: false, errorMessage: e.detail?.message,
|
||||
}).catch(() => {});
|
||||
}
|
||||
|
||||
btn.addEventListener('state-changed', (e) => {
|
||||
if (e.detail?.state === 'finished') onSuccess(e);
|
||||
if (e.detail?.state === 'error') onFail(e);
|
||||
});
|
||||
}, [info, token]);
|
||||
|
||||
if (loading) return <div className="spinner" />;
|
||||
|
||||
// 유효하지 않은 토큰
|
||||
if (!info) {
|
||||
return (
|
||||
<div className="container page" style={{ maxWidth: 500 }}>
|
||||
<div className="card text-center" style={{ padding: 48 }}>
|
||||
<div style={{ fontSize: 48, marginBottom: 16 }}>❌</div>
|
||||
<h2 style={{ marginBottom: 8 }}>유효하지 않은 토큰</h2>
|
||||
<p className="text-muted">토큰을 찾을 수 없습니다.</p>
|
||||
<Link to="/dashboard/orders" className="btn btn-outline" style={{ marginTop: 20 }}>
|
||||
구매 내역으로
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// 이미 사용된 토큰
|
||||
if (info.isUsed) {
|
||||
return (
|
||||
<div className="container page" style={{ maxWidth: 500 }}>
|
||||
<div className="card text-center" style={{ padding: 48 }}>
|
||||
<div style={{ fontSize: 48, marginBottom: 16 }}>✅</div>
|
||||
<h2 style={{ marginBottom: 8 }}>이미 플래시됨</h2>
|
||||
<p className="text-muted" style={{ marginBottom: 8 }}>
|
||||
이 토큰은 {info.usedAt ? new Date(info.usedAt).toLocaleString('ko-KR') : ''}에 사용되었습니다.
|
||||
</p>
|
||||
<p className="text-muted" style={{ fontSize: 13 }}>1회용 토큰은 재사용할 수 없습니다.</p>
|
||||
<Link to="/dashboard/orders" className="btn btn-outline" style={{ marginTop: 20 }}>
|
||||
구매 내역으로
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// 만료된 토큰
|
||||
if (info.expired) {
|
||||
return (
|
||||
<div className="container page" style={{ maxWidth: 500 }}>
|
||||
<div className="card text-center" style={{ padding: 48 }}>
|
||||
<div style={{ fontSize: 48, marginBottom: 16 }}>⏰</div>
|
||||
<h2 style={{ marginBottom: 8 }}>만료된 토큰</h2>
|
||||
<p className="text-muted">토큰 유효기간이 지났습니다.</p>
|
||||
<p className="text-muted" style={{ fontSize: 13 }}>고객센터에 문의해주세요.</p>
|
||||
<Link to="/dashboard/orders" className="btn btn-outline" style={{ marginTop: 20 }}>
|
||||
구매 내역으로
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// 펌웨어 없음
|
||||
if (!info.hasFirmware) {
|
||||
return (
|
||||
<div className="container page" style={{ maxWidth: 500 }}>
|
||||
<div className="card text-center" style={{ padding: 48 }}>
|
||||
<div style={{ fontSize: 48, marginBottom: 16 }}>⚠️</div>
|
||||
<h2 style={{ marginBottom: 8 }}>펌웨어 파일 없음</h2>
|
||||
<p className="text-muted">판매자가 아직 펌웨어를 업로드하지 않았습니다.</p>
|
||||
<p className="text-muted" style={{ fontSize: 13 }}>판매자에게 문의하거나 환불을 요청하세요.</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="container page" style={{ maxWidth: 600 }}>
|
||||
<div className="card">
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 24 }}>
|
||||
<div style={{ fontSize: 36 }}>⚡</div>
|
||||
<div>
|
||||
<h2 style={{ marginBottom: 2 }}>{info.productName}</h2>
|
||||
<span className="text-muted" style={{ fontSize: 13 }}>
|
||||
{CHIP_LABELS[info.chipFamily] || info.chipFamily} · 만료: {new Date(info.expiresAt).toLocaleDateString('ko-KR')}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{flashDone ? (
|
||||
<div className="alert alert-success" style={{ textAlign: 'center', padding: 24 }}>
|
||||
<div style={{ fontSize: 32, marginBottom: 8 }}>🎉</div>
|
||||
<strong>플래시 완료!</strong>
|
||||
<p style={{ marginTop: 8, fontSize: 13 }}>펌웨어가 성공적으로 ESP32에 기록되었습니다.</p>
|
||||
<div style={{ marginTop: 16, display: 'flex', gap: 8, justifyContent: 'center' }}>
|
||||
<Link to="/dashboard/orders" className="btn btn-outline btn-sm">구매 내역</Link>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<div className="alert alert-info" style={{ marginBottom: 20 }}>
|
||||
<strong>플래시 전 확인사항</strong>
|
||||
<ul style={{ marginTop: 8, paddingLeft: 16, fontSize: 13, lineHeight: 2 }}>
|
||||
<li>Chrome 또는 Edge 브라우저를 사용하고 있나요?</li>
|
||||
<li>ESP32를 USB 케이블로 PC에 연결했나요?</li>
|
||||
<li>이 토큰은 <strong>1회만</strong> 사용 가능합니다</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 16, padding: '24px 0' }}>
|
||||
<esp-web-install-button
|
||||
ref={installRef}
|
||||
manifest={manifestUrl}
|
||||
style={{ '--esp-tools-button-color': '#6366f1', '--esp-tools-button-text-color': '#fff' }}
|
||||
>
|
||||
<button slot="activate" className="btn btn-primary"
|
||||
style={{ fontSize: 16, padding: '12px 32px' }}>
|
||||
⚡ ESP32 플래시 시작
|
||||
</button>
|
||||
<span slot="unsupported" style={{ color: 'var(--danger)', fontSize: 14 }}>
|
||||
Chrome 또는 Edge 브라우저가 필요합니다
|
||||
</span>
|
||||
</esp-web-install-button>
|
||||
<p className="text-muted" style={{ fontSize: 12, textAlign: 'center' }}>
|
||||
버튼 클릭 후 팝업에서 ESP32 포트를 선택하세요
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="divider" />
|
||||
<details style={{ fontSize: 13, color: 'var(--text2)' }}>
|
||||
<summary style={{ cursor: 'pointer', marginBottom: 8 }}>토큰 정보 (고급)</summary>
|
||||
<code style={{ wordBreak: 'break-all', display: 'block', background: 'var(--bg3)', padding: 8, borderRadius: 4 }}>
|
||||
{token}
|
||||
</code>
|
||||
<p style={{ marginTop: 8 }}>매니페스트 URL: <code style={{ fontSize: 11 }}>{manifestUrl}</code></p>
|
||||
</details>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,5 +1,5 @@
|
||||
import { useEffect, useState } from 'react';
|
||||
import { useParams, useNavigate } from 'react-router-dom';
|
||||
import { useParams, useNavigate, Link } from 'react-router-dom';
|
||||
import { useAuth } from '../hooks/useAuth';
|
||||
import api from '../api/client';
|
||||
|
||||
@@ -13,6 +13,8 @@ export default function ProductDetail() {
|
||||
const { user } = useAuth();
|
||||
const [product, setProduct] = useState(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [buying, setBuying] = useState(false);
|
||||
const [buyError, setBuyError] = useState('');
|
||||
const [imgIdx, setImgIdx] = useState(0);
|
||||
|
||||
useEffect(() => {
|
||||
@@ -22,6 +24,46 @@ export default function ProductDetail() {
|
||||
.finally(() => setLoading(false));
|
||||
}, [id]);
|
||||
|
||||
async function handleBuy() {
|
||||
if (!user) {
|
||||
navigate('/auth/login', { state: { from: `/shop/${id}` } });
|
||||
return;
|
||||
}
|
||||
setBuyError('');
|
||||
setBuying(true);
|
||||
try {
|
||||
// 1. 주문 생성
|
||||
let orderId, flashToken;
|
||||
try {
|
||||
const res = await api.post('/orders', { productId: product.id });
|
||||
orderId = res.data.orderId;
|
||||
// 이미 구매한 경우 바로 Flash 페이지로
|
||||
if (res.data.flashToken) {
|
||||
navigate(`/flash/${res.data.flashToken}`);
|
||||
return;
|
||||
}
|
||||
} catch (err) {
|
||||
// 이미 결제 완료된 주문
|
||||
if (err.response?.data?.flashToken) {
|
||||
navigate(`/flash/${err.response.data.flashToken}`);
|
||||
return;
|
||||
}
|
||||
throw err;
|
||||
}
|
||||
|
||||
// 2. 모의 결제 처리
|
||||
const payRes = await api.post(`/orders/${orderId}/mock-pay`);
|
||||
flashToken = payRes.data.flashToken;
|
||||
|
||||
// 3. Flash 페이지로 이동
|
||||
navigate(`/flash/${flashToken}`);
|
||||
} catch (err) {
|
||||
setBuyError(err.response?.data?.error || '구매 처리 중 오류가 발생했습니다');
|
||||
} finally {
|
||||
setBuying(false);
|
||||
}
|
||||
}
|
||||
|
||||
if (loading) return <div className="spinner" />;
|
||||
if (!product) return null;
|
||||
|
||||
@@ -31,7 +73,7 @@ export default function ProductDetail() {
|
||||
|
||||
return (
|
||||
<div className="container page">
|
||||
<div style={{ display: 'grid', gridTemplateColumns: '1fr 340px', gap: 32 }}>
|
||||
<div style={{ display: 'grid', gridTemplateColumns: '1fr 340px', gap: 32, alignItems: 'start' }}>
|
||||
{/* 왼쪽 */}
|
||||
<div>
|
||||
{images.length > 0 && (
|
||||
@@ -52,7 +94,7 @@ export default function ProductDetail() {
|
||||
|
||||
<h1 style={{ fontSize: 24, marginBottom: 8 }}>{product.project.title}</h1>
|
||||
<div className="text-muted" style={{ fontSize: 13, marginBottom: 8 }}>
|
||||
by {product.project.user.nickname}
|
||||
by {product.project.user.nickname} · 칩: {product.project.chipFamily}
|
||||
</div>
|
||||
{avgRating && (
|
||||
<div style={{ marginBottom: 16 }}>
|
||||
@@ -98,8 +140,8 @@ export default function ProductDetail() {
|
||||
</div>
|
||||
|
||||
{/* 오른쪽 — 구매 패널 */}
|
||||
<div>
|
||||
<div className="card" style={{ position: 'sticky', top: 80 }}>
|
||||
<div style={{ position: 'sticky', top: 80 }}>
|
||||
<div className="card">
|
||||
<div style={{ fontSize: 30, fontWeight: 700, color: 'var(--accent2)', marginBottom: 4 }}>
|
||||
₩{product.price.toLocaleString()}
|
||||
</div>
|
||||
@@ -109,22 +151,34 @@ export default function ProductDetail() {
|
||||
|
||||
{product.isOnSale ? (
|
||||
<>
|
||||
{user ? (
|
||||
<button className="btn btn-primary" style={{ width: '100%', justifyContent: 'center', fontSize: 16 }}
|
||||
onClick={() => alert('결제 기능은 2단계에서 구현됩니다')}>
|
||||
구매하기
|
||||
</button>
|
||||
) : (
|
||||
<button className="btn btn-primary" style={{ width: '100%', justifyContent: 'center' }}
|
||||
onClick={() => navigate('/auth/login', { state: { from: `/shop/${id}` } })}>
|
||||
로그인 후 구매
|
||||
</button>
|
||||
)}
|
||||
{buyError && <div className="alert alert-error" style={{ fontSize: 13 }}>{buyError}</div>}
|
||||
|
||||
<button
|
||||
className="btn btn-primary"
|
||||
style={{ width: '100%', justifyContent: 'center', fontSize: 16, padding: '12px' }}
|
||||
onClick={handleBuy}
|
||||
disabled={buying}
|
||||
>
|
||||
{buying ? '처리 중...' : user ? '지금 구매하기' : '로그인 후 구매'}
|
||||
</button>
|
||||
|
||||
<div className="divider" />
|
||||
|
||||
{/* 테스트 모드 안내 */}
|
||||
<div style={{ background: 'rgba(245,158,11,.1)', border: '1px solid rgba(245,158,11,.3)', borderRadius: 'var(--radius)', padding: '10px 12px', marginBottom: 12 }}>
|
||||
<div style={{ fontSize: 12, color: 'var(--warn)', fontWeight: 600, marginBottom: 4 }}>
|
||||
🧪 테스트 모드
|
||||
</div>
|
||||
<div style={{ fontSize: 12, color: 'var(--text2)' }}>
|
||||
현재 모의 결제로 동작합니다. 실제 요금이 청구되지 않습니다.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ul style={{ color: 'var(--text2)', fontSize: 13, paddingLeft: 16 }}>
|
||||
<li>구매 즉시 플래시 토큰 발급</li>
|
||||
<li>USB 연결 후 브라우저에서 플래시</li>
|
||||
<li>구매 즉시 1회용 플래시 토큰 발급</li>
|
||||
<li>USB 연결 후 브라우저에서 직접 플래시</li>
|
||||
<li>플래시 완료 후 환불 불가</li>
|
||||
<li>토큰 유효기간: 30일</li>
|
||||
</ul>
|
||||
</>
|
||||
) : (
|
||||
|
||||
Reference in New Issue
Block a user