DSbookstore

• 학과 내 소개 링크: 데이터사이언스학과 학생들만을 위한 책 거래 어플리케이션 '데사책방' 출시

프로젝트 개요

• 데사책방은 학과 학생들이 전공서, 비전공서, 기타 서적을 서로 거래할 수 있도록 만든 모바일 중고 도서 거래 앱입니다.

• Expo 기반 React Native 앱이 프론트엔드를 담당하고, Firebase Authentication, Cloud Firestore, Firebase Storage가 인증, 게시글 데이터, 이미지 업로드를 담당합니다.

• 앱의 주요 흐름입니다.

  1. 이메일 기반 회원가입 및 로그인
  2. 전체 책 목록 조회 및 카테고리별 탐색
  3. 책 제목 또는 과목명 기준 검색
  4. 사진과 함께 판매 게시글 등록
  5. 관심 도서 찜하기
  6. 상세 화면에서 판매자에게 문자 보내기
  7. 마이페이지에서 내가 올린 책 조회 및 판매완료 처리

스크린샷

실행 방법

프론트엔드 실행

cd frontend
npm install
npm start

Firebase Functions 실행

cd backend/functions
npm install
npm run serve

핵심 기능

1. 인증

• Landing.js에서 Firebase Auth로 이메일/비밀번호 로그인을 처리합니다.
• Register.js에서 회원가입 후 Firestore users 컬렉션에 사용자 이름과 이메일을 저장합니다.
• App.js는 firebase.auth().onAuthStateChanged로 로그인 여부를 확인하고, 인증 상태에 따라 인증 화면 또는 메인 앱으로 분기합니다.

2. 홈 피드와 카테고리 탐색

• Main.js 진입 시 Redux 액션을 통해 사용자 정보와 게시글 목록을 불러옵니다.
• 홈 화면은 HomeMain.js의 Drawer Navigation으로 구성되어 있으며 전체, 전공, 비전공, 기타 탭을 제공합니다.
• Home.js에서는 제목과 과목명을 기준으로 로컬 검색을 수행합니다.

3. 게시글 등록과 수정

• Add.js에서 기기 갤러리 권한을 요청하고 expo-image-picker로 이미지를 선택합니다.
• 선택한 이미지는 Firebase Storage에 업로드되고, 다운로드 URL과 함께 게시글 메타데이터가 Firestore posts 컬렉션에 저장됩니다.
• BookDetail.js와 BookEdit.js를 통해 게시글 상세 조회 및 작성자 본인 수정이 가능합니다.

4. 관심 목록과 판매 상태

• 각 게시글의 찜 정보는 posts/{postId}/likes/{userId} 경로에 저장됩니다.
• Like.js는 Redux 피드 중 currentUserLike가 true인 항목만 모아 관심 목록 화면을 구성합니다.
• Profile.js와 MyBookItem.js에서는 내가 등록한 게시글을 모아 보여주며, selling 필드를 기준으로 판매완료 상태를 반영합니다.

5. 판매자 연락

• BookDetail.js는 expo-sms를 사용해 판매자에게 미리 작성된 문자 메시지를 보낼 수 있게 합니다.
• 프로필 하단에서는 이용안내 링크와 Q&A 링크를 외부 URL로 연결합니다.

폴더 구조

개발 중 생성되는 .expo, 로그 파일 등은 제외하고 핵심 구조만 정리하면 아래와 같습니다.

DSbookstore/
├── README.md
├── Screenshots/
│   ├── appstore.png
│   ├── bookdetail.jpeg
│   ├── home.jpeg
│   ├── login.jpeg
│   └── profile.jpeg
├── frontend/
│   ├── App.js
│   ├── app.json
│   ├── config.js
│   ├── assets/
│   ├── components/
│   │   ├── Main.js
│   │   ├── auth/
│   │   │   ├── Landing.js
│   │   │   └── Register.js
│   │   └── main/
│   │       ├── Add.js
│   │       ├── BookDetail.js
│   │       ├── Home.js
│   │       ├── HomeMain.js
│   │       ├── Like.js
│   │       ├── Profile.js
│   │       ├── Home/
│   │       │   ├── BookEdit.js
│   │       │   ├── BookItem.js
│   │       │   ├── Comment.js
│   │       │   ├── Search.js
│   │       │   └── HomeScreen/
│   │       ├── Like/
│   │       └── Profile/
│   └── redux/
│       ├── actions/
│       ├── constants/
│       └── reducers/
└── backend/
    ├── firebase.json
    └── functions/
        ├── index.js
        ├── package.json
        └── package-lock.json

폴더별 설명

• frontend/ Expo 기반 React Native 앱 본체
• frontend/components/auth 비로그인 사용자를 위한 인증 화면
• frontend/components/main 로그인 이후 실제 기능 화면
• frontend/redux 전역 상태와 Firebase 연동 액션을 관리
• frontend/assets 로고, 아이콘, 상태 이미지 등 앱 정적 리소스를 보관
• backend/functions Firebase Cloud Functions 확장 포인트
• Screenshots README에 사용하는 앱 화면 이미지 모음

화면 구성

인증 영역

• Landing 로그인 화면
• Register 회원가입 화면

메인 영역

• HomeMain Drawer 기반 홈 컨테이너
• Home 전체 게시글 + 검색
• MajorScreen 전공 카테고리
• NonMajorScreen 비전공 카테고리
• EtcScreen 기타 카테고리
• Add 게시글 작성
• Like 관심 목록
• Profile 내 정보 및 판매 내역

상세/보조 영역

• BookDetail 게시글 상세 모달
• BookEdit 게시글 수정 모달
• MyBookItem, BookItem, LikeBookItem 리스트 렌더링용 아이템 컴포넌트