📊 Q-Market

메이플스토리 월드의 샌드박스(유저 제작) 게임 '큐플레이 아카이브'의 실시간 아이템 거래 현황, 시세 정보를 제공합니다.

---

🔗 배포 링크

https://q-market.kr

---

✨ 주요 기능

• 아이템 판매/구매 게시글 CRUD
• 아이템 시세 변동 내역 데이터 시각화
• 실거래 완료 데이터 기반 아이템별 시세 집계
• 디스코드 간편 로그인

---

📚 기술 스택

기술	카테고리	용도
	프레임워크	멀티 렌더링 전략을 통한 렌더링 성능 최적화, SEO
	UI 개발	컴포넌트 기반 선언적 UI 개발
	언어	정적 타이핑을 통한 코드 안정성 확보 및 런타임 에러 방지
	폼 관리	비제어 컴포넌트 기반 폼 상태 관리 및 렌더링 최적화
	유효성 검사	스키마 기반 검사 로직 분리로 관심사 분리 및 TS 타입 추론
	데이터 페칭	서버 데이터 캐싱, 동기화 및 선언적 데이터 상태 관리
	스타일	Utility-first 기반 스타일 생산성 향상
	UI 컴포넌트	공용 컴포넌트 개발 속도, 생산성, 접근성 확보
	UI 컴포넌트	캐러셀 구현 편의성 도구
	유틸리티	new Date()보다 경량화된 날짜 데이터 처리
	Database	PostgreSQL, Storage
	Redis Upstash	일일 아이템 등록 제한 관리, 인기 검색어 순위 집계
	Cloud Storage	유저 업로드 이미지 저장
	배포	GitHub 연동 CI/CD 자동화

---

📁 프로젝트 구조

src/
├── app/                       # Next.js App Router (라우팅 계층)
│   ├── (auth)/                # 인증 관련 페이지
│   ├── (admin)/               # 관리자 페이지
│   ├── (global)/              # 서비스 주요 페이지 그룹
│   ├── (terms)/               # 약관 페이지
│   ├── api/                   # API Routes (SSR / ISR)
│   ├── actions/               # Server Actions
│   └── middleware.ts
│
├── features/                  # 도메인 중심 기능 모듈
│   ├── auth/
│   ├── items/
│   ├── market/
│   ├── user/
│   └── admin/
│
├── shared/                    # 전역 공통 리소스
│   ├── ui/
│   ├── hooks/
│   ├── lib/
│   ├── api/
│   └── providers/
│
├── globals.css
└── public/

---

🧭 주요 디렉토리

src/app/

Next.js 14+ App Router를 사용하는 라우팅 구조입니다.
괄호로 묶인 폴더는 라우트 그룹으로, URL에 영향을 주지 않고 레이아웃을 공유합니다.

• (auth): 인증 관련 페이지 (디스코드 OAuth 등)
• (event): 이벤트 페이지
• (global): 서비스 메인 기능 페이지
• (terms): 이용약관, 개인정보 처리방침 페이지
• actions: Next.js Server Actions
• api: Next.js API Routes (RESTful 엔드포인트)

src/features/

Feature-Sliced Design(FSD) 개념을 참고하여, 도메인 단위로 기능을 분리한 구조입니다.

• auth: 인증 (디스코드 로그인, 세션 관리)
• item: 개별 아이템 상세 정보 및 관리
• items: 아이템 목록 및 필터링
• market: 시세 집계
• user: 사용자 프로필, 회원 기능

src/shared/

프로젝트 전반 '공유 리소스' 폴더입니다.
UI 컴포넌트, 유틸리티 함수, API 클라이언트 등이 포함됩니다.

• api: Supabase, Redis 등 외부 서비스 클라이언트
• assets: svgr 이미지 컴포넌트
• config: 상수, 폰트 공용 설정
• hooks: React Custom Hooks
• lib: 유틸리티 함수 및 헬퍼
• providers: 전역 상태, 데이터 패칭 Provider
• ui: shadcn/ui 기반 공통 UI 컴포넌트

---

🏗️ 구조 설계

Feature-Sliced Design (FSD) 아키텍처를 적용했으나, 프로젝트 규모에 맞춰 일부 수정했습니다.

1. app/: 라우팅 및 페이지 레이아웃
2. features/: 비즈니스 로직이 포함된 기능 모듈
3. shared/: 공통으로 사용되는 리소스

• model, ui: 필요에 따라 상태·비즈니스 로직과 프레젠테이션 레이어 분리

DB, Storage 설정

- Supabase: 메인 DB (아이템 판매/구매 현황, 아이템 등록 요청 목록, 거래 내역, 유저 데이터, 게임 아이템 정보 등)
  - Supabase Storage: 아이템 미리보기 이미지
- Redis Upstash: 보조 데이터 스토어 (일일 아이템 등록 횟수 관리, 인기 검색어 순위 집계)
- AWS S3: 유저 이미지 업로드 (거래 인증샷, 베스트 드레서 이미지 등록)

Getting Started

npm run dev
# or
yarn dev
# or
pnpm dev

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying app/page.tsx. The page auto-updates as you edit the file.

This project uses next/font to automatically optimize and load Geist, a new font family for Vercel.

Contribute

@asksa1256

Powered by