클론코딩

AirBnB

프로젝트 설명: 에어비앤비 클론코딩

📆 기간: 2022.08.19 ~ 2022.08.25


🔧 STACK

  • Client

  • UI

  • Server & Deploy


🔎 Function

📄 메인 페이지

스크린샷 2022-08-25 오후 2 55 53

호스트가 작성한 게시글들을 볼 수 있다. 게시글을 상단에서 검색할수 있고, 항목에 따라 게시글을 볼 수 있다. 사진을 옆에 버튼을 클릭하여 슬라이드로 여러가지 사진을 볼 수 있다. 하트를 눌러서 wishlist에 저장할 수 있다.

📄 회원가입과 로그인 모달

스크린샷 2022-08-25 오후 2 58 27

스크린샷 2022-08-25 오후 3 00 51

회원가입과 로그인 페이지는 모달로 처리하였다.

📄 작성 페이지

스크린샷 2022-08-25 오후 3 02 10

작성 페이지는 원하는 항목을 클릭하고 다음으로 넘어가도록 처리하였다

📄 상세페이지와 댓글

스크린샷 2022-08-25 오후 2 56 17

스크린샷 2022-08-25 오후 5 11 46

스크린샷 2022-08-25 오후 5 12 05

상단에는 사진, 하부에는 상세 내용을 넣었다.

댓글에는 미리보기가 있으며, 전부 보기위해 모달창을 띄어서 수정과 삭제를 할수 있다.

📁 File Directory

/src
  ├── app // 리덕스 폴더
  │   ┝── slice  각종 slice 파일들 첨부         
  │   │                                     
  │   ┕── store.jsx  리덕스 store 파일         
  │
  │
  ┝── components  ──┬──── calendar 달력을 위한 컴퍼넌트 모음 폴더
  │                 │
  │                 ┝──── category 카테고라를 위한 컴퍼넌트 모음 폴더
  │                 │
  │                 ┝──── comments 댓글을 위한 컴퍼넌트 모음 폴더
  │                 │
  │                 ┝──── common 공통사항들을 위한 컴퍼넌트 모음 폴더
  │                 │
  │                 ┝──── css Css모음 폴더
  │                 │
  │                 ┝──── DetailDetail 상세페이지를 위한 컴퍼넌트 모음 폴더
  │                 │
  │                 ┝──── WriteDetail 작성페이지를 위한 컴퍼넌트 모음 폴더 ( 예비용, 사용하지 않음 ) 
  │                 │
  │                 ┝──── WriteDetail2 상세페이지를 위한 컴퍼넌트 모음 폴더 ( 현재 적용중 )
  │                 │
  │                 ┕─── componentsfiles...jsx 그 외 각종 컴퍼넌트 파일들
  │            
  │ 
  │ 
  ┝── pages ───────┬───── Detail.jsx 메인 상세페이지 파일
  │                │          
  │                ┝───── Home.jsx 메인 메인페이지 파일
  │                │          
  │                ┝───── Wish.jsx 첫번째 위시페이지 파일
  │                │          
  │                ┝───── WishList.jsx 두번째 위시페이지 파일
  │                │          
  │                ┝───── Write.jsx 작성페이지 파일 ( 미사용 )
  │                │          
  │                ┕───── WriteTwo.jsx 작성페이지 파일 ( 사용중 )
  │                                                
  │                 
  ├── shared ───── Router.jsx 라우터 파일
  │   
  ├── utils 각종 기능을 넣어놓은 파일            
  │
  ┕──────── app.js , index.js ...

🧑🏻‍💻 Members

이름 담당 API 역할
박종현 메인페이지, 로그인, 회원가입, WishPage, 지도 가입과 로그인, WishList
김윤철 댓글 CRUD 댓글 관련
문동환 게시글 CRUD 게시글 관련 담당