PEEPS Frontend

사용자 인증 정보 기반 커뮤니티 서비스 PEEPS의 프론트엔드 저장소. 한경국립대학교 캡스톤 디자인 우수상 수상작.

프로젝트 소개

PEEPS는 디지털 인증 뱃지와 커뮤니티 서클을 중심으로 한 소셜 플랫폼이다. 사용자는 이메일, 파일, 블록체인, 로그인 등 다양한 방식으로 소속/자격을 인증하고 뱃지를 발급받는다. 같은 뱃지를 가진 사용자들이 서클을 형성하여 피드를 공유하는 구조.

기술 스택

분류	기술
프레임워크	Next.js 14 (App Router)
언어	TypeScript
상태 관리	Recoil (전역), React Query v5 (서버)
스타일링	Tailwind CSS
폼	React Hook Form
HTTP 클라이언트	Axios
이미지 저장	AWS S3 (aws-sdk)
소셜 로그인	네이버, 카카오 OAuth
배포	Vercel

주요 기능

인증 뱃지 시스템

• 이메일 인증, 파일 업로드, 블록체인, 외부 로그인 4가지 인증 방식 지원
• 인증 완료 시 뱃지 자동 발급
• 관리자 페이지에서 뱃지 승인/관리

서클 (Circle)

• 뱃지 기반 커뮤니티 그룹
• 서클별 피드, 게시글, 댓글

사용자 프로필

• 프로필 이미지 업로드 (S3)
• 경력, 학력 정보 편집
• 보유 뱃지 목록 전시
• 팔로우/팔로잉

피드

• 게시글 CRUD
• 이미지 첨부
• 댓글
• 사용자별/서클별 피드 분리

관리자

• 뱃지 발급/승인 관리
• 회원 관리 테이블

폴더 구조

src/
├── app/
│   ├── (needSidebar)/          # 사이드바 포함 레이아웃
│   │   ├── feed/               # 메인 피드
│   │   ├── circle/[badgeName]/ # 서클 상세 (인증, 피드)
│   │   └── [user_seq]/         # 사용자 프로필, 탭 (피드/뱃지/정보/이미지)
│   ├── (other)/
│   │   ├── admin/              # 관리자 (뱃지 승인, 발급)
│   │   ├── login/              # 로그인 (네이버/카카오)
│   │   └── (mainPage)/         # 메인 페이지
│   └── api/post/image/         # 이미지 업로드 Route Handler
├── common/
│   ├── api/                    # Axios 인스턴스, API 모듈 (user, post, badge, circle, admin)
│   ├── components/             # 공통 컴포넌트 (Badge, Button, Input, Modal)
│   ├── hooks/                  # 커스텀 훅
│   ├── recoil/                 # Recoil Atoms (auth, badge, circle, user, owner, admin)
│   ├── types/                  # TypeScript 타입 정의
│   └── utils/                  # 유틸리티 (날짜, 유효성 검사)

실행 방법

yarn install
yarn dev       # 개발 서버
yarn build     # 프로덕션 빌드
yarn start     # 프로덕션 서버
yarn lint       # 린트

스타일 가이드

• 반응형 브레이크포인트: 825px, 675px, 450px
• 메인 컨텐츠 너비: 1140px
• 헤더 높이: 60px
• 기본 색상: blue.primary 계열