NoSleepPlace 팀 프로젝트 소개

HourPlace 사이트를 어떤식으로 이름을 바꿔볼까 하다가 잠을자지 말고 만들어보자 하다 NoSleepPlace라는 팀명이 만들어 졌습니다!

📆프로젝트 기간

• 2021.10.18 ~ 2021.10.29

👨‍👩‍👧‍👦팀원 소개

Front_End

• 해호님 Main,장소 상세 페이지 구현
• 성구님 카카오 소셜로그인,장소 리스트 페이지
• 태양(본인) Nav,Footer,예약 페이지,예약 조회 페이지

Back-End

• 승준님 카카오 소셜 로그인 API , 예약 캘린더 API, 예약 신청 및 조회 API
• 주현님 상품 리스트API(필터링,검색,정렬), 상품상세 API
• 공통 데이터 구축, 데이터 모델링

💻기술 스택

개발도구

• React
• JavaScript
• HTML, CSS
• Styled Components
• Slick Slider Library
• Datepicker Library

🛠협업 도구

• Trello Agile 방식으로 프로젝트를 진행하기 위해 이번주에 할 일들을 정하고 또 각자 하루에 할 일들을 정하면서 일정을 관리 했습니다
  
• Git & Github 서로 작성한 코드들을 합쳐볼수 있고 전체적인 버전 관리를 위해서 사용했습니다.
• Slack 서로 바로바로 궁금한것들을 물어 볼수있고 소통을 하기위해 사용했습니다.
• Erdcloud 데이터 모델링을 공유하기 위해 사용했습니다.
  
• PostMan API 명세 공유를 위해 사용
  

구현 기능

구현한 페이지

• Nav (상단바) 태양(본인)
• Main (메인 페이지) 해호님
• Footer (페이지 하단) 태양(본인)
• Login (로그인 페이지) 성구님
• ProductList (장소 리스트 페이지) 성구님
• Product (장소 상세 페이지) 해호님
• Reservation (예약 페이지) 태양(본인)
• ReservationDetail (예약 조회 페이지) 태양(본인)

Nav (상단바)

• 필터링 기능을 이용해 장소 이름들로 검색할수 있도록 구현
• 로그인 or 로그아웃일때 레이아웃 변경 구현
• 모든 카테고리 클릭시 카테고리 모달창이 나오고 카테고리를 클릭하면 쿼리파라미터로 장소 리스트 페이지로
  이동하도록 구현
• 로그인 버튼 클릭시 모달창 나오도록 구현
  

Main (메인 페이지)

• Slick Slider Library 를 이용해 버튼 클릭시 슬라이더 기능 구현
• 쿼리 파라미터를 이용해 카테고리 버튼 클릭시 상품 상페 페이지로 이동 구현
  

Footer (페이지 하단)

• HTML , Styled Components 를 이용해 레이아웃 작업
  

Login (로그인 페이지)

• JWT와 로컬스토리지를 사용한 로그인 기능 구현
• 카카오 소셜 로그인 API를 이용
  

ProductList (장소 리스트 페이지)

• 패스파라미터를 이용해 장소클릭시 장소 상세로 넘어가게 구현
• 쿼리 파라미터에 따라 카테고리 바뀌게 구현
  

Product (장소 상세 페이지)

• Datepicker Library를 이용해 달력과 시간 선택창 구현
• 버튼클릭시 모달창 나오도록 구현
• 예약하기 버튼을 클릭할시 조건부랜더링으로 예약페이지 나오도록 구현
  

Reservation (예약 페이지)

• 장소 상세페이지에서 받아온 데이터를 가공해 출력
• 여러 인풋 값들 name,value로 관리
• 조건부 랜더링으로 예약 페이지들 버튼으로 컨트롤
• 예약에 필요한 데이터들을 POST로 서버로 전송
  

ReservationDetail (예약 조회 페이지)

• GET로 서버에 있는 데이터들을 받아오기 구현
• 쿼리 파라미터와 useLocation을 이용해 예약 카테고리를 클릭시 이용중, 대기중 , 취소 , 전체에 따른 값 출력
  

코드 공유

처음 쿼리 파라미터를 접하게 되어서 처음에는 그냥 인터넷을 하면서 보이는 url만 바뀌면 데이터들이 바뀌는줄 알았다 하지만 그건 나만의 착각이였고
바뀌는 url을 백엔드 데이터에 POST로 보내야 그 값을 받아 올수 있다는걸 알게 되어서 useLocation 을 사용해 봤습니다.

import React, { useState, useEffect } from 'react';
import { useLocation } from 'react-router-dom';

function ReservationDetails({ match }) {
  const [contentList, setContentList] = useState([]);

  const location = useLocation();
  useEffect(() => {
    fetch(`API주소/books${location.search}`, {
      method: 'GET',
      headers: {
        Authorization: localStorage.getItem('token'),
      },
    })
      .then(res => res.json())
      .then(res => setContentList(res.result));
  }, [location.search]);

위에처럼 fetch 주소에 location.search이라는게 보이는데
location = useLocation() 을 해서 담아준후 아래처엄 키값 search를 백엔드분들한테 보내주어야 데이터를 받아올수 있어 저렇게 적용을 해봤습니다.

프로젝트를 하며 좋았던점

팀프로젝트를 고작 2번째 해보는 거지만 동기 동료분들이 좋으신 분들이여서 그런지 프로젝트 기간내내 화를 내거나 서운한점, 불편한점이 하나도 없이 너무 좋았었다. 2주동안 힘들게 동고동락을 해온 동기들이라 그런지 더 끈끈함이 생기기도 한거 같고 이제 서로 얼굴을 잘 못볼거라 생각하니 서운함도 들고 나중에 꼭 다시 모여서 리펙토링도 해보고 얘기도 해보고 싶다는 생각이 드는 프로젝트 였습니다.

프로젝트를 하며 아쉬운점

Agile 방식을 지키며 할려고 했지만 1차 프로젝트를 해서 그런지 조금더 자신을 높게 평가해 한주 목표를 너무 크고 많이 활당을해 그주 목표를 이루지 못하게 되었었습니다 .그리고 조금더 우선순위를 두고 작업을 했으면 조금더 빨리 구현을해 다른 추가구현도 할수 있지 않았을까 하는 아쉬움이 있습니다.

깃or유튜브 주소

GitHub
YouTube