ZIGU FE

📦 캠퍼스에서 물건을 단기로 대여하는 P2P 대여 플랫폼

대학생들은 낯선 이에게 물건을 빌려주기에는 불안하고, 필요한 물품을 즉시 빌릴 마땅한 곳도 없습니다.
ZIGU(지구)는 학교 인증과 실시간 채팅을 통해 안전하고 빠른 대여 경험을 제공하는 P2P 대여 플랫폼입니다.

🙇‍♀️ 서비스 소개

우리는 불필요한 소비, 공간 낭비, 신뢰 부족한 거래로부터 벗어나 대학생 커뮤니티 내에서 믿고 빌리고, 빌려주는 순환 플랫폼을 만들고자 합니다.

As-Is	To-Be
자주 쓰지 않는 물건이지만 팔기엔 가끔 필요해서, 결국 공간만 차지하게 됨.	자주 쓰지 않는 물건을 필요한 순간에만 빌려주어 자산화 할 수 있음
모르는 사람과 거래하고 파손, 분실에 대한 심리적 부담이 큼	같은 대학교 커뮤니티 안에서, 신원이 보장되어 안심하고 물건을 빌려줄 수 있음
필요한 물건을 구하기 위해 오프라인 지인 의존이나 직접 발품을 팔아야 함	플랫폼에서 원하는 물건을 검색하고, 온라인으로 즉시 대여 신청 가능
일회성 사용을 위해 반복적으로 불필요한 물건을 구매하게 됨	필요할 때만 빌려 쓰며, 불필요한 소비와 자원 낭비를 줄일 수 있음

💡 기능

🏃‍♂️‍➡️ 랜딩 화면으로 ZIGU가 어떤 서비스인지 미리 알 수 있어요!	🔑 회원가입 화면에서 오직 대학생만 ZIGU에 가입할 수 있어요!
🏠 홈 화면을 통해 내가 필요로하는 물건을 찾거나 안쓰는 물건을 등록할 수 있어요!	📝 물건 등록하기를 통해 팔긴 아깝지만 잘 안쓰는 물건들을 빌려줄 수 있어요 ☃️!
📦 Product 페이지 (등록한 이후) | (홈 → 내 게시물 클릭)을 통해 다시 한번 확인하고 삭제·수정할 수 있어요!	🔍 채팅방 입장하기를 통해 소통할 수 있어요! (만날 장소, 시간 등)
📑 대여 시작하기를 클릭해서 대여 신청서를 작성해보세요!	📑 대여 내역의 대여 요청, 빌려준 내역, 빌린 내역을 통해 신청 수락 & 거절과 대여 중 상태 확인이 가능해요!

🧑‍🧑‍🧒‍🧒 Contributor

최지우 PM	이수민 Designer	서경미 Server(백엔드)
이건우 Web(프론트엔드)	조형민 Web(프론트엔드)	이태윤 Web(프론트엔드)

Frontend 기술 스택

Backend 기술 스택

협업 도구

🔧 ZIGU Frontend 파일 구조

GZ 대여 서비스 플랫폼 (Frontend)

GZ는 **Next.js 15 (Pages Router)**와 TypeScript를 기반으로 한 대여 서비스 플랫폼의 프론트엔드 코드입니다. 사용자 경험을 고려한 실시간 채팅, 이미지 최적화 등 다양한 UI/UX 기능을 포함하고 있습니다.

📋 목차

• 프로젝트 개요
• 디렉터리 구조
• 기술 스택
• 주요 기능

프로젝트 개요

• 프레임워크: Next.js 15 (Pages Router)
• 언어: TypeScript
• 스타일링: Tailwind CSS
• 실시간 채팅: SendBird
• 이미지 최적화: OptimizedImage 컴포넌트

디렉터리 구조

GZ/src/
├── pages/                  # Page Router 기반 페이지
│   ├── _app.tsx            # 앱 초기화
│   ├── _document.tsx       # 커스텀 Document
│   ├── cert/               # 인증 (로그인/회원가입)
│   ├── home/               # 홈 화면
│   ├── detail/             # 상품 상세
│   ├── items/              # 내 물건 관리
│   ├── rentals/            # 거래 내역
│   ├── profile/            # 프로필
│   └── channels.tsx        # 채팅 채널 리스트
├── components/             # 재사용 UI 컴포넌트
│   ├── home-header.tsx
│   ├── Footer.tsx
│   ├── chat-components/    # 채팅 UI
│   ├── detail/             # 상세 페이지 컴포넌트
│   ├── Term-components/    # 약관 컴포넌트
│   ├── loading-components/ # 로딩 컴포넌트
│   └── OptimizedImage.tsx  # 이미지 최적화
├── lib/                    # 유틸리티 및 설정
│   ├── api.ts              # API 호출 함수
│   ├── firebase.ts         # Firebase 클라이언트 초기화 설정
│   ├── firebase-functions.ts # Firebase Functions 호출 래퍼
│   ├── sendbird.ts         # SendBird 설정
│   ├── rentals.types.ts    # 타입 정의
│   └── hooks/              # 커스텀 훅
├── styles/                 # 스타일
│   ├── globals.css         # 전역 스타일
│   ├── detail.module.css   # 상품 상세 스타일
│   └── onboarding.module.css # 온보딩 스타일
└── utils/                  # 유틸리티 함수
    └── imageCompression.ts # 이미지 압축 유틸리티

Firebase 설정 구조 (src/lib)

src/lib/
├── firebase.ts            # Firebase 앱 초기화 설정 (프로젝트 키, 인증 등)
└── firebase-functions.ts  # Firebase Functions 호출 래퍼 (sendCode, verifyCode 등)

주요 기능

• 🔐 인증: 대학생 인증
• 🏠 홈 & 상품 검색: 물건 등록, 검색, 필터 기능
• 📄 상품 상세: 상세 정보 조회, 이미지 최적화
• 📦 내 물건 관리: 등록한 물건 보기/수정/삭제
• ✔️ 신청 수락: 메일을 통해 수락 여부 확인
• 📜 거래 내역: 대여 기록 확인
• 💬 채팅: SendBird 기반 실시간 채팅
• 🖼️ 이미지 처리: 압축, Progressive Loading

---

프론트엔드 개발을 시작하려면 src/ 디렉터리를 확인해주세요.