📌 Quostomize-fe: 우리 커스터마이징

📝 프로젝트 소개

우리 커스터마이징(QUOSTOMIZE) 은 사용자가 매달 자신의 생활 패턴과 취향에 맞게 카드 혜택과 포인트 사용처를 직접 선택할 수 있는 서비스입니다.

사용자가 직접 결정하는 맞춤형 혜택 제공을 통해 기존 카드 서비스의 한계를 뛰어넘고, 변화하는 소비 트렌드에 유연하게 대응합니다.

👉🏻 시연영상 바로가기

👉🏻 사이트 바로가기

🚀 주요 설계 방향

본 프로젝트는 서비스 보안과 안정성 강화를 주요 설계 방향으로 두고 개발되었습니다.

1. 보안과 안정성 강화

• Next.js + Auth.js
  • 토큰을 브라우저 쿠키 대신 서버 세션에 저장하여 데이터 직접 노출 방지
• Next.js API Route
  • 클라이언트-백엔드 간 직접 통신을 차단해 헤더 정보 및 API 주소 보호
• JWT 보안 강화
  • 비밀번호는 단방향 암호화, 개인정보는 양방향 암호화 적용
  • Acess/Refresh Token 검증 및 Blacklist 로직 추가로 보안 수준 향상

2. 멱등성 적용

• Redis를 활용한 멱등키 관리로 카드 생성 요청 중복 처리 방지
• 동일한 요청은 캐시된 응답 반환으로 효율성과 안정성 확보

3. 대량 데이터 처리

• 배치 프로세스: 복권 응모 데이터를 매일 정해진 시간에 처리
  • Redaer: 1000명 데이터 읽어오기
  • Processor: 응모자 중 당첨자 선정
  • Writer: 당첨 결과 기록

4. 코드 품질 관리

• SonarQube를 통한 정적 코드 분석으로 코드 품질 유지
• DB Lock으로 동시성 문제 해결
• 비동기 처리 강화로 안정적인 예외 처리 구현

🔧 주요 기능

1. 카드 혜택 - 혜택 선택의 자유

• 상위분류 혜택: 5가지 상위분류 선택 시 모든 가맹점에서 3% 적립
• 맞춤형 혜택: 세부 가맹점 그룹 선택 시 최대 4% 적립
• 유연한 변경: 30일마다 혜택 변경 가능

2. 포인트 사용처 - 포인트 사용의 다양성

• 페이백: 카드 결제일에 포인트를 현금처럼 사용
• 조각투자: 원하는 주식을 설정하고 포인트로 주식 매수
• 일일복권: 매일 자정 추첨으로 최대 1만 포인트 지급

3. 카드 생성 - 실제 카드 생성 프로세스와 멱등성을 적용한 생성 기능

4. 주식 기능

• RestClient를 활용한한국투자증권 OPENAPI와 연동
• Access Token 발급 & 보유 주식 정보 기능
• S3를 활용한 주식 이미지 다운로드

5. 복권 기능

• Spring Batch를 활용해 복권 기능을 활성화한 사용자 집계
• 자정(00:00)에 1/1000 확률로 포인트 획득

---

⚙️ 기술 스택

🌐 프론트 배포 파이프라인

관리자 페이지는 Vercel을 이용해 배포를 진행하였습니다. Vercel 대시보드를 통해 배포 상태를 한눈에 확인할 수 있습니다.

배포 과정

1. 커밋 푸시: Github에 브랜치로 푸시합니다.
2. Vercel 배포: 메인 브랜치 병합 후 Vercel에 배포합니다.
3. 실시간 업데이트: Vercel을 통해 관리자 사이트가 즉시 업데이트됩니다.

📊 인프라 구조도

🗂️ 주요 폴더 구조

root/
├── app/
│   ├── (fullscreen)/
│   │   ├── card-benefit-details/
│   │   ├── create-card/
│   │   ├── my-page/
│   │   ├── sign-up/
│   │   └── layout.jsx
│   ├── (nav)/
│   │   ├── benefit-change/
│   │   ├── find-id/
│   │   ├── find-password/
│   │   ├── home/
│   │   ├── login/
│   │   ├── lotto/
│   │   ├── my-card/
│   │   ├── piece-stock/
│   │   ├── qna/
│   │   └── layout.jsx
│   └── api/
│       ├── auth/
│       └── API 연결이 필요한 서비스
│           ├── (fullscreen 관련 API)
│           ├── (nav 관련 API)
│           └── 기타 공통 API
├── components/
│   ├── box/
│   ├── bubble/
│   ├── button/
│   ├── calendar/
│   ├── card/
│   ├── graph/
│   ├── header/
│   ├── navigationbar/
│   └── overlay/
├── public/
│   ├── cards-images/
│   ├── icons/
│   ├── images/
│   └── lotties/
├── utils/
│   ├── loginValid.js
│   └── getYYYYMMDDDate.js
├── auth.js
├── middleware.js
├── jsconfig.json
├── next.config.mjs
├── tailwind.config.js
├── .env.local
├── package.json
├── pnpm-lock.yaml
└── postcss.config.js

📅 진행 일정 (20Days)

• 프로젝트 시작일: 2024.11.19.
• 프로젝트 종료일: 2024.12.08.

💻 개발 환경

카테고리	라이브러리	설명
프레임워크 & 코어	Next.js (v15.0.2)	React 기반의 풀스택 웹 프레임워크로 SSR 및 SSG를 지원
	React (v18.3.1)	선언형 사용자 인터페이스를 개발하기 위한 라이브러리
UI & 아이콘콘	Emotion (v11.13)	CSS-in-JS 방식을 지원하여 동적 스타일링을 간단하게 구현
	Material-UI (v6.1.7)	Google의 Material Design 기반 UI 컴포넌트 라이브러리
	Headless UI (v2.2.0)	접근성 표준을 준수하는 UI 컴포넌트 라이브러리, 디자인 커스터마이징 용이
	Floating UI (v0.26.28)	팝오버, 툴팁 등 UI 요소의 위치를 정교하게 제어
	Lucide React (v0.460.0)	모던한 스타일의 오픈소스 아이콘 세트
	React Icons (v5.3.0)	다양한 스타일의 아이콘을 지원하는 React 아이콘 라이브러리
	Material Icons (v1.13.12)	Google의 Material Design 가이드 기반 아이콘
인증	NextAuth.js (v5.0.0-beta.25)	OAuth, Credentials 등 다양한 인증 방식을 간편하게 구현
애니메이션 & 시각 효과	GSAP (v3.12.5)	고성능 애니메이션, 타임라인 기반의 애니메이션 구현
	Lottie Web (v5.12.2)	After Effects 애니메이션을 웹에서 JSON 파일로 쉽게 재생
	Canvas Confetti (v1.9.3)	캔버스를 활용한 가벼운 컨페티 효과 제공
	React Slot Counter (v3.0.1)	숫자를 애니메이션으로 카운팅하는 기능 제공
데이터 시각화	Chart.js (v4.4.6)	반응형 차트를 쉽게 생성할 수 있는 데이터 시각화 라이브러리
	Chartjs Plugin Datalabels (v2.2.0)	차트에 데이터 라벨을 추가하여 정보를 시각적으로 강조
유틸리티	UUID (v11.0.3)	중복되지 않는 고유 식별자를 생성
	js-cookie (v3.0.5)	브라우저 쿠키를 간편하게 설정하고 관리
	React Intersection Observer (v9.13.1)	특정 요소가 뷰포트에 들어왔는지 감지하여 lazy loading 등 기능 구현
E2E 테스트	Cypress (v13.16.1)	브라우저 기반의 End-to-End(E2E) 테스트 수행

✍️ 컨벤션

커밋 컨벤션

• {Tag}/{작업 내용}

Feat/input : 비밀번호 숨김 처리

• 커밋 규칙

Tag Name	Description
Feat	새로운 기능을 추가
Fix	버그 수정
Design	CSS 등 사용자 UI 디자인 변경
!BREAKING CHANGE	커다란 API 변경의 경우
!HOTFIX	치명적인 버그 긴급 수정
Style	코드 포맷 변경, 세미콜론 누락 등
Refactor	프로덕션 코드 리팩토링
Comment	주석 추가 및 변경
Docs	문서 수정
Test	테스트 코드 추가 또는 수정
Chore	빌드 업무 수정 및 패키지 관리 업데이트
Rename	파일/폴더명 수정
Remove	파일/폴더 삭제

초기 협업 시 주의사항

• 패키지 매니저는 pnpm을 사용합니다.
  • npm install -g pnpm
  • pnpm install
• navbar가 존재하는 페이지 구현 시 app/(nav) 폴더 하위에 작성합니다.
• navbar가 없는 페이지 구현 시 app/(fullscreen) 폴더 하위에 작성합니다.
• 중복 가능성이 있거나 페이지가 너무 길어져서 분리가 필요한 컴포넌트의 경우 분리한 파일은 components 폴더의 같은 이름을 가지는 하위 폴더에 생성합니다.
• 만약 화면에 표시하는 것 외의 로직이 길어지면 필요하면 utils 폴더에 js파일 작성합니다.
• 아이콘 사용 시 https://marella.me/material-icons/demo/ 페이지에서 탐색 후 없으면 파일로 대체합니다.

🧑‍🤝‍🧑 팀원 소개

기남석	김영성	김현우
총괄 팀장 Frontend 팀장 FullStack 개발	FullStack 개발 팀원	Backend 팀장 FullStack 개발
프론트 프로젝트 세팅 프론트 인증/인가 프론트 CI/CD 기타 UI/기능 구현	투자 페이지 구현 회원가입 페이지 구현 투자 API 연결 회원가입 API 연결	카드 생성 페이지 구현 카드 생성 API 연결 UUID로 멱등키 생성

방성경	오선민	홍찬의
FullStack 개발 팀원	PM FullStack 개발 팀원	FullStack 개발 팀원
- - -	카드 상세 혜택 페이지 구현 카드 생성 페이지 구현 나의 카드 페이지 API 연결 카드 혜택 변경 API 연결 카드 및 차트 애니메이션 구현	카드 생성 페이지 SMS 인증 페이지 로그인 페이지 API 연결 QnA 페이지 API 연결

---

📝 회고

팀원 최종 회고 작성

---

요구사항 정의서.pdf

서비스 요구사항 정의서.pdf

비즈니스프로세스모델.pdf

WBS.pdf

DB 설계서.pdf

🔗 관련 문서 링크

• Quostomize-BE
• Quostomize-admin
• HeadlessUI