빌리쥐(Billage)는 안전한 거래를 위한 채팅 기능을 제공하는 렌탈 플랫폼입니다.
사용자는 채팅을 통해 정확한 렌탈 일정, 렌탈료, 거래 방법을 논의할 수 있으며, 제공되는 프로세스 가이드를 따라 쉽고 안전하게 거래를 진행할 수 있습니다.
간단한 정보 입력만으로 렌탈 용품을 등록할 수 있고, 렌탈 중인 상품과 렌탈 받은 상품 목록을 한눈에 확인할 수 있습니다.
현재 빌리지의 '빌려드려요', 'EVENT' 페이지를 제작하고 있으며, Next.js를 기반으로 한 프론트엔드 개발을 진행하고 있습니다. 사용자들이 쉽고 직관적으로 서비스를 이용할 수 있도록 반응형 디자인을 적용하고, 효율적인 상태 관리와 데이터 처리를 구현하고 있습니다.
- Next.js 15.0.3
- React 19.0.0
- TypeScript 5.0
- ESLint 8.0
- React DOM 19.0.0
이 프로젝트는 Next.js 15의 앱 디렉토리 구조를 도입하여 클라이언트 컴포넌트와 서버 컴포넌트를 분리하였습니다.
이를 통해 서버 측 렌더링과 클라이언트 측 렌더링을 효과적으로 활용하고, 코드의 가독성과 유지보수성을 높일 수 있었습니다.
billage
├── app // Next.js 앱 디렉토리 (라우트와 서버 컴포넌트 관리)
│ ├── event // Event 페이지 관련 서버 컴포넌트
│ └── lend // '빌려드려요' 페이지 관련 서버 컴포넌트
├── public // 정적 파일 (이미지, 아이콘 등) 저장
├── src // 클라이언트 측 컴포넌트 및 로직 관리
│ ├── components // 재사용 가능한 컴포넌트 모음
│ │ ├── common // 공통으로 사용되는 컴포넌트
│ │ ├── event // Event 페이지 관련 컴포넌트
│ │ ├── icons // SVG 및 아이콘 컴포넌트
│ │ ├── layout // 레이아웃 구성 컴포넌트
│ │ ├── product // 상품 관련 컴포넌트
│ │ └── container // 페이지 내 주요 컨테이너 컴포넌트
│ ├── services // API 호출 및 데이터 처리 로직
├── styles // 프로젝트 전역 및 컴포넌트 스타일 정의
├── types // TypeScript 타입 정의
- 서버 컴포넌트 개발
- Next.js App Router 활용
- 서버-클라이언트 컴포넌트 분리
- 클라이언트 컴포넌트 개발
- 컨테이너 컴포넌트 패턴 적용
- API 서비스 레이어 구현
- 상태 관리 및 데이터 페칭 로직 구현
- 스타일링 및 반응형 디자인 적용 진행중
- Event 코드 리팩토링 진행중
이 프로젝트는 ICT 인턴십 과정에서 부여받은 과제로 2024년 11월부터 시작되었으며, 현재까지 진행하고 있습니다.
기능 구현과 함께 지속적인 리팩토링과 성능 최적화를 관심을 두고 개발하고 있습니다.