피드백
1주차가 지나가고 멘토님들에게 목업페이지를 통해서 우리가 어떤 서비스를 기획하고 만들었는지 그 이유가 뭔지에 대해서 알려주고 피드백을 받을 수 있었다.
피드백으로는 생각보다 페이지가 적기 떄문에 새로운 기능에 대해서 도전을 해보면 좋을 것,
관리자나 유저 페이지 둘중 한페이지를 좀 더 깊게 들어가서 새로운 기능을 추가해 보는 것이 좋을 것 같다.
라는 피드백을 받아서 팀회의를 통해 관리자보다는 유저쪽으로 친화적으로 다가가면서 챗봇을 이용해서 실시간으로 소통을 하거나 간단한 문의나 공지사항 등을 자동으로 응답해보는 기능을 추가하기로 했다.
그리고 지점이 한눈에 보이는 부분이 부족하다는 피드백을 받아서 헤더에서 드롭다운 메뉴로 메뉴페이지 들어가는 부분에 드롭다운으로 지점을 한눈에 보이게 만들어 보기로 했다.
드롭다운
드롭다운 메뉴를 만드는 부분을 내가 맡기로 했는데 드롭다운 메뉴에서 지점안에 또 방이 여러개 있는데 그 방까지 다 보이게 만들면 생각보다 지저분 하게 나오는 것을 느껴서 지점만 보여주게 하고 그 지점을 클릭했을 때는 그 지점에서 별점이 가장 높은 방을 먼저 보여주는 식으로 하기로 했다.
카카오맵
카카오맵 또한 내가 구현한 기능중에 하나였는데 이제 데이터를 한번 넣어보고 싶어서 연동을 하고 있었는데 백엔드 쪽에서는 경도와 위도까지 받는 Mutation 이었다.
근데 카카오맵을 만들때 경도와 위도로 위치를 마커로 찍어주기보다 다음포스트와 연동해서 다음포스트에서 받은 주소로 주소검색을 통해 카카오맵을 보여주는 식으로 컴포넌트를 뺴놔서 굳이 경도와 위도가 저장될 필요성을 느끼지 못해서 지워달라는 요청을 했다.
랜딩페이지와 그외(디테일, 관리자)페이지 카카오맵
렌딩페이지에서의 카카오맵을 통해 보여주는 부분은 지점에 위치만 전체적으로 나오면 되는부분이고 디테일 페이지에서의 카카오맵은 그 지점에 대한 위치만 나오면 될거 같아 랜딩에서 쓰는 지도와 디테일페이지에서의 지도를 나누었다.
랜딩에서의 지도가 움직이는 것에 있어서 굳이 움직여서 사용자에게 혼란을 줄 필요 없을 것 같다 라는 의견이 나왔다.
그래서 랜딩페이지에서 쓰는 지도는 disabled 처리해서 고정을 시켜놨다.
아쉬운점: 랜딩 지도는 움직이지 않아서 지도인지 이미지인지 알 수가 없다.
디테일 Nav bar 수정
그전에는 퍼블리싱만 되어있던 디테일 Nav 에 데이터를 연결 시켜서 수정하는 작업을 진행했다.
헤더를 데이터 연결하던 도중 지점안에 있는 방들에 대한 데이터를 받아올 수 있는 것이 없다는 것을 알게 되었다.
이렇게 된다면 id 와 branch(지점이름) 을 통해서 지점이름은 같지만 id가 다른 것들을 확인해서 디테일 페이지 메뉴를 만들어야 된다. 이런 방식으로 하면 굉장히 비효율적이라고 생각했고 idAll 이라는 room 들의 id 값들이 들어있는 데이터를 추가로 요청했다.
하지만 room들의 id가 배열이 아닌 string 형으로 들어오게 되어서 split을 써서 ,를 기준으로 문자를 짤라서 배열을 만들고 그 배열안에 router.asPath 주소가 있다면 목록을 보여주는 알고리즘을 작성해서 Nav바를 만들었다.
메인 페이지에서 디테일 페이지로 라우터 이동할 때를 생각하면서 작성했다.
우리 홈페이지 메인은 베스트 게시물을 보여주고 있기 때문에 베스트 게시물 id
idAll 이라는 배열에 들어 있다면 idAll 을 Nav로 보여주는 것.
후기등록
후기등록 버튼을 누르면 Modal 창이 나와서 후기 등록과 별점을 줄 수 있게 구현했다.
무한스크롤을 걸어놔서 후기가 10개 이상이라면 자동으로 옆에 스크롤바가 생기고 무한스크롤을 구현해놨다.
Modal 에 OK 버튼에 로그인이 되어있는지 권한분기도 걸어놔서 로그인한 유저가 아니라면 후기를 작성할 수 없도록 권한도 판단을 해놔서 실제 사용자들이나 회원들이 작성한 후기를 볼 수 있도록 해놨다.
아쉬운점:
- 후기란 실제 사용했던 사람들이 쓸 수 있는 것이기 때문에 회원으로 권한을 판단하는 것이 아닌 실제 사용했던 사람인지를 판단했어야 했다.
- 후기 등록을 안하거나 하고나서 내용이 남는 (스테이츠값이 계속 남아있음) 오류가 있었는데 Antd Modal
destroyOnClose="true"라는 속성을 주어서 해결했다.
관리자 페이지
MUI 가 현업에서 많이 쓰이고 우리가 써본 라이브러리는 Antd 밖에 없었기 때문에 MUI를 적용해보자고 의견을 제시했다.
팀원들도 긍정적인 반응을 해주어서 관리자 페이지에서는 MUI 라이브러리가 어느정도 들어갔다.
관리자 홈, 사이드 바, 문의내역 등에 MUI 라이브러리가 쓰여졌다.
내가 써본 MUI 라이브러리는 Nav, Side 바 정도 였는데 DB연동까지 확인해서 메세지를 띄우거나 카드 형식으로 데이터들을 보여주는 부분까지 팀원들이 만들었다. 팀플을 하면서 서로의 코드를 보는 것은 정말 힘들지만 내가 안써본 것들의 코드를 볼 수 있는 점은 상당히 좋은 장점중에 하나인 것 같다. 오늘도 하나 배워갑니다🤔
