Borolo Frontend

📌 개요

• 이 저장소는 Borolo의 프론트엔드 레포지토리입니다. React 기반으로 사용자 인터페이스를 구현하고, 백엔드 API와 연동하여 서비스를 제공합니다.

🛠️ 기술 스택

• Framework / Library

  • React 19 (CRA 기반, react-scripts 5 사용)
  • React Router DOM 7 (라우팅)

• 상태 관리

  • React Hooks (useState, useEffect 등 기본 훅으로 상태 및 사이드이펙트 관리)

• Styling

  • CSS 모듈 방식: 각 컴포넌트별 .css 파일 생성 후 import하여 사용

• API 통신

  • Axios

• 빌드 & 실행

  • CRA (Create React App) 기반 빌드 툴 (react-scripts)

📂 폴더 구조

src/
├── assets/                    # 이미지 파일들
│   ├── herolmg.png
│   └── profile.jpg
│
├── components/                # 공통 컴포넌트 모음
│   ├── Auth/                  # 회원가입/로그인/비밀번호 관련 컴포넌트
│   │   ├── ConfirmPW.js          # 비밀번호 확인용(회원 정보 수정 전에 비밀번호 재입력 요구)
│   │   ├── EditProfile.js        # 프로필 수정 페이지용 컴포넌트
│   │   ├── FindPassword.js       # 이메일 입력 후 인증코드 받는 페이지
│   │   ├── Login.js              # 로그인 폼 UI 및 API 연동
│   │   ├── Register.js           # 회원가입 폼 UI 및 입력값 처리
│   │   ├── ResetPW.js            # 인증코드 확인 후 비밀번호 재설정 폼
│   │   └── Auth.css              # 위 인증 페이지들의 공통 스타일
│   │
│   ├── cards/                 # 카드 형태의 UI 컴포넌트들
│   │   ├── styles/            # 각 카드별 CSS 파일이 담긴 폴더
│   │   ├── ItemDetailCard.js        # 물품 상세정보 카드
│   │   ├── ProfileCard.js           # 유저 프로필 카드
│   │   ├── RegisteredItemCard.js    # 내가 등록한 물품 카드
│   │   ├── RentalItemCard.js        # 내가 대여 중인 물품 카드
│   │   ├── RequestItemCard.js       # 대여 요청 받은 물품 카드
│   │   └── ReviewCard.js            # 리뷰 정보 카드
│   │
│   ├── lists/                 # 카드들의 리스트 컴포넌트
│   │   ├── favorites.js             # 찜한 물품 목록
│   │   ├── ItemList.js              # 전체 물품 리스트
│   │   ├── RegisteredItemList.js    # 등록한 물품들 목록
│   │   ├── RentalItemList.js        # 대여 중인 물품들 목록
│   │   └── ReviewCardList.js        # 리뷰 카드들 목록
│   │
│   ├── MyMenu/                # 마이페이지 관련 기능 UI 모음
│   │   ├── RegisteredItem/
│   │   │   ├── ItemRegister.js      # 물품 등록 폼
│   │   │   ├── RegisteredItem.js    # 내가 등록한 물품 목록 출력
│   │   │   ├── ItemRegister.css
│   │   │   └── RegisteredItem.css
│   │   ├── RentalHistory/
│   │   │   ├── RentalHistory.js     # 대여 기록 확인 컴포넌트
│   │   │   └── RentalHistory.css
│   │   ├── ReviewList/
│   │   │   ├── ReviewList.js        # 내가 작성한 리뷰 리스트
│   │   │   └── ReviewList.css
│   │   │
│   │   ├── ReviewWrite.js           # 리뷰 작성 폼
│   │   ├── MyPage.js                # 마이페이지 메인 화면
│   │   └── MyPage.css
│   │
│   ├── RequestModal/          # 모달 관련 UI
│   │   ├── RentalRequest.js      # 대여 요청 폼
│   │   ├── ReportUser.js         # 사용자 신고 폼
│   │   ├── RequestModal.js       # 모달의 기본 레이아웃 및 상태 관리
│   │   └── RequestModal.css      # 모달 관련 스타일
│   │
│   ├── Header.js              # 상단 바
│   ├── Sidebar.js             # 좌측 메뉴(위치 설정, 카테고리)
│   └── SideModal.js           # 우측에서 나오는 모달
│
├── hooks/                     # 커스텀 훅
│   ├── useCityName.js             # 현재 위치를 기반으로 도시명 추출
│   └── useGeoLocation.js          # 브라우저 위치 정보 수집 기능
│
├── pages/                     # 각 라우트 화면
│   ├── Home.js                    # 메인 홈 화면
│   ├── ItemDetail.js              # 물품 상세 페이지
│   ├── Onboarding.js              # 첫 접속 시 유저 온보딩 화면
│   ├── Payment.js                 # 결제 페이지
│   └── RequestItem.js             # 물품 대여 요청 처리 페이지
│
├── styles/                    # 화면 전체 또는 특정 페이지 단위의 스타일 파일들
│   ├── Home.css  
│   ├── ItemDetail.css  
│   ├── ItemList.css  
│   ├── Onboarding.css       
│   ├── Payment.css        
│   ├── RequestItem.css
│   ├── Sidebar.css
│   └── SideModal.css 
│
├── App.css                    # 전체 앱 공통 스타일
├── App.jsx                    # 루트 컴포넌트
└── index.js                   # 진입점

🚀 프로젝트 실행 방법

• Node.js와 npm이 설치되어 있어야 실행 가능합니다.

1. 저장소 클론

git clone https://github.com/borrowLocal/frontend.git
cd frontend

2. 의존성 설치

프로젝트 루트 디렉토리에서 다음 명령어로 필요한 패키지를 설치합니다.

npm install

3. 개발 서버 실행

아래 명령어로 개발 서버를 실행할 수 있습니다.

npm start

4. 브라우저에서 확인

개발 서버가 실행되면, 브라우저에서 아래 주소로 접속하여 프로젝트를 확인할 수 있습니다.

http://localhost:3000

🖼️ 구현 화면

온보딩

로그인

비밀번호 찾기

비밀번호 재설정

회원가입

홈

물품 정보 상세 조회

대여 신청 모달

메뉴

비밀번호 확인

회원정보 수정

대여내역 조회

결제

리뷰 작성

거래 후기 조회

등록 물품 조회

물품 등록

대여 요청 목록

리뷰 작성 모달

사용자 신고 모달