[새싹x코딩온] 웹 개발자 부트캠프 과정 2차 팀프로젝트 회고 #1 | 리액트 라우터 세팅, 공통 UI 레이아웃(Header, Footer, Main) 세팅

 

1. 리액트 라우터 세팅

 

라우터를 세팅할 때 페이지별 공통으로 사용되는 Header 와 Footer 등은 중첩라우팅과 Outlet 컴포넌트를 사용해서 어느 페이지에 가도 저 Header 와 Footer 컴포넌트들이 보이게 하여 코드의 재사용성을 높였다.

 

2. Header

웹뷰

모바일뷰

헤더는 사실상 두 파트로 나뉘는데,

로고/검색창/로그인을 비롯한 회원 기능 관련 버튼들이 있는 파트와

카테고리 별 링크로 나눠져 있는 파트로 나누었다.

가장 많이 벤치마킹한 곳은 중고나라였다. 검색창 부분이 깔끔하고 명확해서 편리한 사용자 경험을 제공할 것이라 생각했다.

카테고리 부분을 개선했는데, 중고나라나 번개장터의 경우는 모든 중고 물품을 다루다보니 카테고리가 많았다.

하지만 우리의 서비스는 대상이 명확했기 때문에 카테고리를 그 대상에 따라 줄여서 보여줄 필요가 있었다.

그래서 명확한 대상을 설정해서 보여주는 구조로 보여줘서 사용자 편의성을 높이고 정보 접근성을 개선하고자 했다.

 

헤더에서 할 수 있는 기능은 

1. 로고를 클릭해서 메인 페이지로 이동
2. 검색창에서 상품을 검색하고 그 검색에 대한 결과를 볼 수 있는 검색 결과 페이지로 이동
3. 로그인/로그아웃
4. 로그인 했을경우 장바구니 페이지나 마이 페이지로 이동
5. 판매하기 버튼을 눌렀을 때 판매글 작성 페이지로 이동(판매자인 경우) 
   
   1. 판매자로 등록이 되어 있지 않다면 마이페이지의 판매자 등록 페이지로 이동
6. 카테고리 별로 클릭해서 카테고리에 해당하는 상품들 목록을 볼 수 있는 페이지로 이동

이 정도였다.

 

 

내가 여기서 한 기능은

1. 헤더의 전체적인 레이아웃 잡기(이건 나만 한것은 아니고 다른 프론트분들과 같이 하긴함)
2. 검색 결과를 반영한 페이지로 이동 시키기(이건 다음 포스팅에서 다루겠음)
3. 회원정보 버튼들을 눌렀을 때의 액션 
   1. useNavigate() 를 이용해서 해당되는 url로 이동시킴(장바구니 이동, 마이페이지 이동 등)
   2. 로그인/로그아웃에 대한 상태 및 권한 관리(이건 로그인/로그아웃 맡으신 분이랑 같이함)
4. 카테고리 별로 클릭해서 카테고리에 해당하는 상품들의 목록으로 이동(이거도 다음 포스팅에서 다루겠음)

정도 인 것 같다.

 

그리고 추가하자면 반응형으로 해서 모바일뷰에서 보여지는 헤더의 레이아웃?도 했다.

모바일뷰에서는 웹뷰에서 보여지는 것만큼 많은 정보를 한꺼번에 보여지기에는 너무 많아서 햄버거 버튼을 따로 만들어서 해당 버튼을 눌렀을 때 카테고리 버튼들이나 검색창이 보이게 하는등의 기능을 구현했다.

햄버거 버튼을 누르면

헤더의 메뉴들이 나타남! 화살표를 누르면 다시 닫힘

 

회원정보 버튼들 아이콘은 폰트어썸의 아이콘을 사용했다.

회원가입과 마이페이지의 아이콘이 같아서 헷갈린다는 리더님의 피드백을 받았는데, 

각 대응하는 아이콘은 하나씩인것이 좋다는 의견을 수용해서 해당하는 부분은 후에 리팩토링 하기로 했다..

(아이콘 바꾸는 정도야 쉬우니깐..)

 

3. Footer

만약 우리가 상용중인 서비스라면 사이트맵이나 개인정보처리방침 등.. 이런 것을 넣었겠지만 프로젝트 용이라 단순하게 만들었다. 

프로젝트 이름과 깃허브 링크를 넣어줬다.

그런데 푸터에서 사이트맵같은 것이 있었으면 좋았겠다는 피드백을 받았었다.

다음 프로젝트 하게 되면 받은 피드백을 참고해야 겠다는 생각이 들었다.