우리 커스터마이징(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 대시보드를 통해 배포 상태를 한눈에 확인할 수 있습니다.
배포 과정
- 커밋 푸시: Github에 브랜치로 푸시합니다.
- Vercel 배포: 메인 브랜치 병합 후 Vercel에 배포합니다.
- 실시간 업데이트: 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
- 프로젝트 시작일: 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 pnpmpnpm 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 연결 UUID로 멱등키 생성 |
|
|
|
| 방성경 | 오선민 | 홍찬의 |
| FullStack 개발 팀원 | PM FullStack 개발 팀원 |
FullStack 개발 팀원 |
|
- - - |
카드 상세 혜택 페이지 구현 카드 생성 페이지 구현 나의 카드 페이지 API 연결 카드 혜택 변경 API 연결 카드 및 차트 애니메이션 구현 |
카드 생성 페이지 SMS 인증 페이지 로그인 페이지 API 연결 QnA 페이지 API 연결 |