[Team 28 FE Maeve & JinJeon] Airbnb 프로젝트 3주차(금요일) PR #324
Conversation
Co-authored-by: JinJeon <JinJeon@users.noreply.github.com>
* refactor : 캘린더 스타일 지정 위치 변경 * test : slide 기능 구현 위해 테스트 코드 작성 * feat : animation으로 일회성 슬라이딩 구현 * feat : 캘린더 슬라이드 기능 구현 * refactor : 특정 간격에 대한 월, 연도를 구하는 형식으로 변경 * refactor : 연도, 월 계산 함수 통해 이벤트 함수 통합 * fix : 1월이 13월으로 나오는 버그 해결 * fix : 월 표시 문제 수정 * refactor : 스타일 컴포넌트 및 적용된 컴포넌트 이름 수정, 적용 * refactor : 연도, 월 표시 부분 리펙토링 * refactor : CalCell 부분 이름 변경 및 적용 * fix : 검색창, 모달창에 해당 월이 한 달 적게 표시되는 문제 해결 * fix : 달력 마지막 날이 토요일에 걸리는 경우 그라데이션 안되는 오류 해결
* feat : MiniSearchBar 컴포넌트 생성 * feat : 미니바 애니메이션 구현 * feat : 미니바 애니메이션 * fix : 미니바 position 수정 * fix : 미니바 애니메이션 수정 * feat : StyledSearchBarWrapper 로 미니바, 서치바 랩핑 * refactor : props 받아오는 것 수정 * refactor : 미니바에 context를 사용하여 정보 표시 * feat : Modal 에 Background 추가 * feat : modal 외부 클릭 시 modal 창 닫히는 기능 구현 * fix : 모달 클릭 시에도 모달이 꺼지는 문제 해결 모달 자체에 onClick * feat : Portal 을 사용하여 모달 창 닫기 기능 구현 * fix : portal 사용 시 모달 레이아웃이 깨지는 문제 해결 box-sizing: border-box; 을 추가했다. * feat : 검색 버튼 클릭 시 모달 닫기 * fix : 모달 Background 로 인한 GNB z-index 수정 * fix : 모달 Background 로 인한 GNB z-index 수정 테스트를 위한 border 삭제
* feat : 이미지 및 데이터 추가 및 위치 이동 * feat : hotels api 추가 및 수정 * fix : 이미지, api 이동에 따른 파일 수정 * feat : Search Desc의 필터된 정보란 설정 * feat : 검색 결과 상세값 및 가격 불러오기 일부 설정 * feat : 결과창 금액란 생성 * feat : 숙소별 이미지를 불러오기 위한 api 생성 및 적용 * refactor : 페이지 수 지정
* feat : 미니바 slide-in 애니메이션 추가 Co-authored-by: JinJeon <JinJeon@users.noreply.github.com> * fix : 반응형 미니바 구현 완료 검색바 외부를 클릭하면 반응형으로 검색바를 미니바로 바꾼다. * refactor : miniSearchBarIsHidden & searBarIsHidden 상태를 selectedSearchBar 상태 하나로 통합 Co-authored-by: JinJeon <JinJeon@users.noreply.github.com>
* feat : map 생성 및 컴포넌트 분리를 위한 상태 위치 변경 * feat : 지도 영역 분리 및 데이터에 따른 지도 표시 구현 * feat : 검색 지도가 스크롤 시 고정이 유지되도록 설정
* fix : 캘린더 hover 시 색상 변경되도록 수정 * fix : PR 내용 반영 및 수정
There was a problem hiding this comment.
안녕하세요 카일입니다 :)
maeve, jinjeon 두 분 모두 3주 동안 고생하셨어요! 타입스크립트를 처음 사용하시면 어려운점이 한두개가 아닐 텐데 많이 익숙해지고 있으신 것 같네요! 리뷰를 한번에 적용하는건 당연하게 어려운 것 같아요. 인지만 해놓고 리팩토링 또는 다음 프로젝트 때 적용해보려고 시도하면 좋지 않을까 생각해봅니다!
두분 다 기능을 정말 빠르고 구현하셨는데도 코드가 되게 깔끔하고 잘 읽혔습니다! 정말 빠르게 성장하고 계신 것 같네요 👍
이번에 api에서 try catch를 적용하셨던데 반환하는 에러 객체를 활용해서 에러처리하는 것 까지 구현하시면 정말 좋을 것 같습니다!
3주동안 수고 많으셨습니다~!
| try { | ||
| const response = await client.get("/"); | ||
| return response.data; | ||
| } catch (error) { | ||
| return error.response; | ||
| } |
There was a problem hiding this comment.
에러처리를 시도하신게 정말 좋네요!!
다만 사용하는 곳을 보니 error.response를 사용해서는 어떤 처리를 하지 않으신 것 같아요. (잘못 봤을 수도 있어요🥲)
그 부분까지 꼭 해보셨으면 좋겠어요 :)
| changeDates: any; | ||
| changeDates: (direction: "prev" | "next") => void; |
| declare global { | ||
| interface Window { | ||
| kakao: any; | ||
| } | ||
| } |
There was a problem hiding this comment.
global타입을 같은 파일에 두어도 좋지만 global.d.ts라는 파일에서 관리해도 좋을 것 같아요~!
| } | ||
| } | ||
|
|
||
| type Thotel = { |
There was a problem hiding this comment.
이 호텔타입은 백엔드 API타입이 맞겠죠?? 저희팀에서는 주로 API함수와 같이 관리하거나 따로 model이라는 폴더에 분리해서 관리하고 있어요.
이 타입을 자주 import해서 사용할 수 있는데요. 컴포넌트에 두면 혹시 모를 순환참조 이슈를 대비해 그렇게 진행하고 있습니다!
| const [miniBarIsClicked, setMiniBarIsClicked] = useState(false); | ||
| const [selectedSearchBar, setSelectedSearchBar] = useState("searchBar"); |
There was a problem hiding this comment.
selectedSearchBar 타입도 구체화 해주면 좋을 것 같아요~! 현재는 string으로 추론될 것 같네요!
|
|
||
| const ModalPortal = ({ children }) => { | ||
| const el = document.getElementById("modal"); | ||
| return reactDom.createPortal(children, el); | ||
| }; | ||
|
|
| const checkModal = useContext(CheckModalContext); | ||
|
|
||
| const handleModalPopup = () => { | ||
| if (modal !== "empty") checkModal("empty"); |
There was a problem hiding this comment.
이 로직이 많이 반복되는 것 같아요. 이와 연관되는 로직을 커스텀훅으로 빼봐도 좋겠네요!
|
|
||
| return ( | ||
| <SearchDescWrapper> | ||
| <SearchLists props={searchListsProps} /> |
안녕하세요 카일~ 벌써 마지막 리뷰네요! 시간이 참 빠릅니다...😥
타입스크립트 관련 여러가지 피드백을 주셨는데 적용하기 급급해 제대로 된 답변을 드리지 못했던 점 정말x100 죄송했습니다!!!
(결국 타입스크립트 적용은 여러모로 실패해 PR에서 말씀해주신 여러 사항은 따로 더 공부를 해보려고 합니다🔥)
사실, 리펙토링하는 데에만 시간을 써도 모자란데 괜히 구현하고 싶은 마음이 저희 둘 다 앞서서 리펙토링을 많이 못한게 아쉽습니다...
데모 페이지는 올리려고 했으나 마지막에 카카오맵을 불러오는 과정에서 문제가 생겨 두 번째 페이지를 보여주지 못해 급히 종료를 했습니다! 그래서 아래에 여러
.gif로 일단 대체해 올리겠습니다..!3주 동안 너무너무 감사했습니다!! 🥺
🏃 진행 상황 🏃♀️
1. 모달 외부 클릭 시 창 닫기 기능 구현
2. 반응형 미니바 기능 수정
3. 검색 후 숙소 리스트 구현
4. 검색 결과 지도에 표시