JaeUpSu / chatting_front

🏘️ BANGSAM

부동산 채팅 WEB/APP

---

✏️ 요약

기존의 부동산 WEB 형식에 Custom 하게 채팅 기능을 추가

---

⚙️ Dependency

• axios

• js-cookie

• react-hook-form,

• @tanstack/react-query

• @tanstack/react-query-devtools

• react-helmet

• react-js-pagination

• styled-components

• react-slick

• @chakra-ui/react

• slick-carousel

• react-icons

• @fortawesome/free-brands-svg-icons

• @fortawesome/free-regular-svg-icons

• @fortawesome/free-solid-svg-icons

• @fortawesome/react-fontawesome

---

📄 페이지 & 컴포넌트

• 로딩

• 헤더

  • WEB

    • 홈
    • 검색
      • 주소 검색
        • 도 / 시 + 구 + 동
    • 채팅목록
    • 마이 페이지
    
    

• 홈 페이지

  • Brand name
  • Icon Buttons
    • 방 종류
  • TopViews (조회순)
  
  

• 회원가입 페이지

  • User model 기입
  • 가입하기
  • 카카오, 네이버 가입
  
  

• 로그인 페이지

  • ID / PW 기입
  • 로그인하기
    • ID/PW 유효성 검사
  • ID / 비번찾기 / 회원가입
  • 카카오, 네이버 가입
  
  

• 마이 페이지

  • 프로필 정보

  • 최근 본 리스트

  • 위시 리스트

  • 판매 내역

    • 모든 판매 내역
    • 판매중 내역
    • 판매완료 내역
  
  

• 하우스 리스트 페이지

  • 옵션 리스트

    • 메뉴
      • Responsive 햄버거

  • 방 목록

    • 대표 이미지
    • 좋아요
    • 주소
    • 방 종류
    • 전세/월세/매매
    • 가격
    
    

• 지역 상세 페이지

  • 이미지

  • 정보 창

    • 좋아요

    • 설명

    • 찜 버튼

    • 주소

    • 월세/전세/매매 표시 (가격)

    • 평수

    • 집 종류

    • 추가 옵션

    • 안전 옵션

    • 요약 정보 모달

      • 채팅
    
    

• 채팅 페이지

  • 리스트

    • 유저 프로필
    • 제목
    • 읽지 않은 채팅 개수 표시
    • 최신 날짜
    • 삭제 Button

  • 채팅창

• 집 판매 페이지

• 집 수정 페이지

• 회원가입 페이지

• 아이디 찾기 페이지

• 비밀번호 찾기 페이지

---

기능 목록

• 로그인

  • post api
  • validate

• 회원가입

  • post api
  • validate

• 아이디 찾기

  • post api
  • validate

• 비밀번호 찾기

  • post api
  • validate

• 로그아웃

  • post api
  • validate

• 판매하기

  • 이미지 url 만들기
    • post url api
      • url 만들기
      • 이미지 model post
  • post api
  • validate

• 수정하기

  • get api
  • put api
  • validate

• HouseList

  • useInfiniteScroll

    • scroll handler
    • requestAnimationFrame 이벤트 제한 함수
    • params 변할 시 가진 state 초기화 및 api call

  • Grid

    • HouseCard
    • Responsive

📋 DB Model Diagram