팀명 : headbanger
Product Manager: 장인석(B)
Project Manager: 탁호진(B)
Teammates: 이지은(B), 김준섭(F), 김태원(F), 이수빈(F), 이소진(F)
-
개발자로서 능동적인 소통을 중요시하는 팀 !
-
마치 록 가수 처럼 다른 사람이 말하면 잘 듣고 이해하여 고개를 끄덕인다 라는 의미를 담고 있습니다.
-
페이지 이름 : CVG
-
매일 매일 반복되는 피곤한 일상에서부터의 getaway
-
잠시 동안만이라도, 평소 boundary에서 벗어나, 휴식을 취할 수 있는 기회를 제공
- : 캠핑 존, 각 지역 캠핑 존
- :꼭 휴가철만이 아니더라도, 가족들과 함께 떠나고 싶은 직장인들, 친구들과 함께 추억을 쌓으러 오는 대학생들, 느긋하게 자연을 즐기려는 장년층, 남녀노소할 것 없이 모두가 즐기는 서비스 주 고객층(결제를 진행하는 사람): 20중후반부터
[ALL]
- 기능정의서로 활용
- 프&백 데이터의 형식이 필요하거나, 어떠한 데이터가 필요할때 작성하여 소통
- 서로 맡은 기능적인 부분을 명확히 명시하여 불필요한 혼동 제거
- Category의 순번, 이름등을 적어서 명시
- figma툴을 사용하여 전체적인 layout 논의
- 프론트만이 아닌 백엔드도 참가하여 기능적인 부분 논의
- 프&백 서로 소통에서 중요한 부분에 대한 포인트를 표시하고 확인
- trello를 사용하여 티켓을 발급하고 난이도에 맞는 티켓을 분배
- 매일 오전 10시 stand-up-meeting을 통해 진척도 체크, 블락컨 요소 공유
- 진척도 체크를 위해 back-log / sprint / in-progress / in-review / done 으로 나눠 미팅떄마다 퍼센트로 체크
- 2주 프로젝트에서 스프린트 미팅을 2번 실행하여 각 스프린트 기간동안 목표%를 설정하고 진행, 스프린트 기간이 지나면 부족한 부분 보완하는 회의 진행
- 각 flow 별로 구현해야할 기능에 맞는 라이브러리 적용하여 사용
- 각 flow 대로 맡은 기능 UNIT TEST 작성 후 업로드
- QUARY 문을 이해하고자 직접적으로 QUERY문 작성
- 동적 필터링 적용을 위해 조건절을 모듈화하여 전역으로 사용하고자 함
- 위치 인자가 아닌 name 인자로서 사용하도록 인자는 객체로 저장
- 동적 필터링만이 아닌 정적 필터링에서도 쓰고자 노력함
- 가장 대중적인 카카오 소셜 로그인 REST API를 사용하여 사용자의 편의성을 높힘
- 로그인 과정에서 발생할 수 있는 대기 시간을 적극적으로 활용하기 위해 로딩 마이크로 애니메이션 페이지 추가
- OAuth 2.0의 플로우를 사용한 Kakao RestAPI 방식의 소셜 로그인
- 캐러셀
- 카테고리별 캠프 노출
- 테마별 캠프 노출
- 제주도 지역 ( 추천 매달 달라질 예정 ) 캠프 노출
- 카테고리별 캠프 데이터 반환
- 프로튼에서 하드 코딩이 아닌 직접적으로 COUNT 쿼리를 이용하여 직접적으로 계산
- 테마별 캠프 데이터 반환
- 프론트에서 하드 코딩이 아닌 직접적으로 COUNT 쿼리를 이용하여 직접적으로 계산
- 제주도 등 (매달 달라질 데이터) 필요한 데이터 반환
- campId를 랜덤으로 뽑아주는 로직을 구상하였으나 시간이 부족하여 구현을 못하였고, 특정 지역을 광고하는 형식으로 구상
- 사용자 인터페이스의 부드러움을 최대화하기 위해 무한 스크롤 기능 구현
- offset과 limit 값을 API에 전달하여 특정 구간에 도달하면 자동으로 상품이 로드되어
추가적인 클릭이나 페이지 로딩 시간 없이 원활하게 컨텐츠를 탐색할 수 있어 사용자 경험을 향상 시킴
- 사용자가 체크박스 선택시 실시간으로 필터링 결과를 확인할 수 있게 하였고,
다중 선택 필터링을 가능하게 하여 사용자가 원하는 상품을 쉽게 찾을 수 있도록 구현 - 로컬 스토리지를 활용하여 사용자의 체크박스 선택 상태를 기억하고, 해당 상태가 변경될 때마다
동적으로 로컬 스토리지와 URL의 검색 파라미터 업데이트
- 검색 기능을 제공하여 사용자가 원하는 캠프를 빠르게 찾을 수 있도록 구현
- 사용자가 검색창에 입력하면 해당 검색어를 포함하는 캠프의 리스트를 필터링하고, 선택된 검색어는 URL의
검색 파라미터로 추가되어 상품 리스트 페이지가 적절하게 업데이트 되도록 구현
- 사용자의 선택에 따라 인기도 또는 가격순에 따라 상품을 정렬하는 기능을 제공하여,
더욱 개인화된 사용자 경험을 제공하도록 구현
- 동적 필터링 구현
- ORM을 사용하지 않고 직접적으로 동적 필터링을 구현
- baseQuery, whereQuery, orderQuery등 조건부로 달라지는 query를 변수에 저장하고 갈아끼우는 형식
- theme , region , amenity 기준으로 원하는 데이터를 반환
- 체크박스 기준으로 여러 카테고리를 선택할 시 중복적으로 필터링이 적용되게 구현
- 하나의 필터만 적용되는 것이 아니라 여러 조건이 들어와도 필요한 데이터를 반환할 수 있도록 구현
- 정렬이 없거나 가격순, 인기순으로 정렬가능하게 쿼리문 구현
- 정렬 조건이 들어오지 않는 다면, id순으로, 아니라면, 가격순, 인기순으로 정렬
- 인기순으로 정렬하기 위해 쿼리문에서 COUNT를 사용하여 wish를 상품마다 집계하도록 구현
- 로그인했을 시 사용자가 찜한목록을( wish ) 볼 수 있도록 데이터를 반환
- api는 만들었으나 시간 부족으로 인해 프론트에서 구현을 하지 못함
- 로그인을 하지 않았다면, 토큰이 없기 떄문에, 그 때는 wish데이터 반환하지 않음
- 로그인을 했더라면, 찜한 상품일 경우 1로, 아닐 경우 null로 반환
전체적인 데이터들을 리덕스를 활용해 props를 덜 사용하고 추후 리스트페이지에서 쉽게 데이터 접근이 가능토록 했음 선택된 데이터들로 쿼리문을 활용해 상품리스트로 연결되며 리덕스에 저장된 데이터를 활용해 메인페이지에서 선택된 내용이 리스트에서도 똑같이 보이도록함
전체적인 데이터들을 리덕스를 활용해 props를 덜 사용하고 추후 결제페이지에서 쉽게 데이터 접근이 가능토록 했음 (상품상세 데이터, 시작날짜 끝날짜, 결제해야할 가격, 인원수, 선택한 존 데이터)
- 5장의 사진을 고객에게 노출시키기 위해 Grid 와 flex로 배치, 호버시 어두워지는 효과 구현 차후 반응형 구현시 thumnail 사진 한장과 더보기 모달창 기능구현예정
- useRef를 활용해 컴포넌트 자체의 높낮이에 따라 나타나는 토글바 구현하여 길이가 짧을때는 더보기 토글바가 나타나지않음(current.scrollHeight 223px)
- 토글바로 더보기 하는 박스에 애니매이션 효과부여
- 길이가 짧을때는 linear-gradient 를 제거하는 로직 구현 예정
- 백엔드에서 들어오는 배열에 있는것들은 앞쪽으로 나열하고 배열에 없는것들은 뒤쪽에 나열한뒤 취소선을 긋기위한 로직 구현
- 1의 로직을 구현하기 위해 includes를 활용하였으나 아무것도 없는 빈배열일때 문제가 생기는 현상 발견함 추후 로직을 바꿔야함
- Nav바와 상품상세에서 활용하는 날짜의 값을 일치하기 위해 redux를 활용
- 시작날짜를 선택한후 끝날짜를 선택하면 그 사이의 값은 모두 선택되기위해 datepicker라이브러리의 selectranges메서드 활용
- 날짜 선택시 useeffect를 통해 자리에 관한 데이터를 다시 받는 로직구현
- 백엔드로부터 받은 각존마다 4점의 위치값을 받은 후 그에맞게 직사각형을 만드는 방식으로 조감도 구현
- 들어온 데이터에따라 예약가능한 존과 불가능한 존을 구별이 쉽도록 불가능한 존의경우 사선을 그어 표시
- 호버시 각 존의 가격과 수용인원을 노출시킬수 있는 박스 구현
- 선택시 선택된 존의 정보를 redux에 저장하고 재선택시 redux에서 제거하는 로직 구현
- 예약과 관련된 모든 정보를 한곳에 모아 쉽게 정보를 얻을 수 있도록 함
- redux에 저장된 startday와 endday를 보여주며 값이 없을시 노출하고 있는 상자를 클릭하면 달력으로 이동할 수 있도록함
- redux에 저장된 selectedzone에 대한 정보를 보여주며 값이 없을시 노출하고 있는 상자를 클릭하면 조감도로 이동할 수 있도록함
- 가격 노출시 선택된 존이 없으면 해당캠핑장의 최소가격을보여주어 (최소가격)~부터 라고 뜨도록 하며 선택된 존이 있으면 1박당 가격을 알수 있도록함
- 들어온 데이터에 키즈존이 없으면 유아와 아이를 막도록 했으며 펫존이 없으면 반려동물을 선택할 수
- 최종 가격은 1박당 가격 x 묶는 밤의 길이로 구했으며 redux에 저장해 결제단에서 용이토록함
- 선택된 존의 총 수용가능인원과 선택된 총 인원수를 비교해 선택된 총인원수가 많을시 결제가 되지않으며 존을 더 선택할 수 있도록 유도함
- localstorage에 토큰이 있다면 결제로 넘어갈 수 있도록 했지만 올바른 방법이 아니라 생각되어 추후 수정할 필요가 있음
- 레이더 차트 구현을 위한 Query를 사용한 평균값 계산
- 프론트의 하드 코딩이 아닌, DB에서 보내주는 조감도와, 조감도의 각 좌표를 이용한, 예약 가능/불가능 Zone 표기
-고객이 얘약 내역/취소내역/과거 내역/위시리스트를 이동 없이 확인할 수 있도록 메뉴 탭 기능 적용
- 로그아웃 버튼을 누르면 한 번 더 확인을 요청하는 모달창이 띄워지고 이후 로그아웃 진행되는 기능 구현
- 유저의 예약 내역을 예정된 예약, 지난 예약, 취소된 예약으로 분류하여 데이터 반환
- 유저의 프로필 이미지 등록을 위해 S3, Multer로 이미지 업로드 구현
- wish 리스트 노출
- 사용자가 로그인을 하고 마이페이지로 진입시, 사용자가 찜한 목록을 노출시키는 api 작성
- 카카오페이를 통한 간편결제
- 카카오로그인/ 카카오맵 / 카카오결제로 이어지도록 하는 Flow 제공
- 결제 전 구매하고자 하는 상품에 대한 정보를 한 번에 확인할 수 있는 기능 제공
- 간편결제 시 필수로 있어야 하는 중간 페이지에 결제 중이라는 애니메이션을 적용하여 페이지 가 이동하는 과정에서 고객이 혼란이 생기지 않도록 함
- 결제 완료 시 결제 완료 모달창을 띄워 고객이 결제 진행 상황이 완료되었음을 알 수 있는 기능을 제공
- 카카오 결제 API를 이용하여 결제 구현
- 결제 시, 결제 정보 및 예약 내역 DB에
- 5개의 점수중 가장 높은 점수의 항목을 매칭할 수 있는 로직 구현 - 나타나는 문구는 상수데이터로 구현하여 유지보수에 용이하게함
- 지역 카테고리와 테마 카테고리에 맞는 항목을 매칭할 수 있는 로직구현 - 나타나는 문구는 상수데이터로 구현하여 유지보수에 용이하게함
- 5,4,3,2,1 각 점수를 잇는 정오각형을 svg 형식으로 구현 후 부모로부터 받은 각 5점의 위치에 점을찍고 생성된 오각형 안에 색상을 칠하는 방식
- 레이더 차트의 재사용성을 위해 5개의 점수와 그래프 사이즈를 props로 받아 재사용에 용이하도록함
- 추후 안쪽 점수로 만들어진 오각형에 애니메이션 효과 구현 예정
- 레이더 차트가 밑에서도 활용시 부자연스러울거같아 5점일 경우 너비가 98%인 div바 배경을 만들고 각 점수에 맞게 그 바를 채우는 방식으로 점수 노출 그래프 생성
- 레이더 차트를 활용해 각 리뷰의 사람들이 부여한 점수를 한눈에 볼 수 있도록 함
- 리뷰어가 4명이상인 경우 페이지네이션을 생성하도록함
- 리뷰내용이 길어지는 경우에 대해 생각하지않아 추후 개선해야할 필요가 있음
- 리뷰의 길이를 측정해 페이지네이션을 하는 방식을 채택했는데 리뷰의 갯수가 늘어날경우 올바른 방법이 아니라 백엔드로부터 리뷰카운트를 받는 방식으로 리펙토링 해야함
- 고객이 이용한 내역에 대해 리뷰를 남기고 공유할 수 있는 기능을 제공
- 리뷰 작성 버튼을 누르면 모달창을 띄워 페이지 이동 없이 리뷰를 작성할 수 있도록 구현
- 정해진 항목에 대한 별점과 텍스트로도 추가적인 내용을 작성하여 리뷰를 남길 수 있도록 함
-
리뷰 작성시 필요한 스코어, coment를 받아서 데이터로 저장
-
각 데이터 반환
- 각 리뷰점수, coment, 각 점수별로 평균, 각 상품별로 점수 평균을 반환
- 하드 코딩이 아닌 쿼리문에서 sum / 5 을 사용
- 각 리뷰점수는 객체로서 반환하기 위해 JSON_OBJECT 사용
- 상품id를 path params로 받아옴