[리팩토링: 1차프로젝트] Aside 페이지

 

완성도있는 프로젝트를 위해 기록한 리팩토링 로그

 

Aside 페이지에서  추가, 또는 수정사항들

1. 카테고리 리스트 항목을 상수데이터로 변경
2. 리스트 항목 클릭시 '엑티브 효과'  추가
3. listLanging 페이지 추가

 

 

전체적으로 1차 프로젝트의 경우엔 백엔드의 의존도가 높은편이라, 

페이지별로 목데이터와 상수데이터로 변경해주었다.

 

 

 

카테고리 리스트 항목을 상수데이터로 변경

기존에 만들어놓았던 상수데이터를 활용하였다.

 

✏️상수 데이터 

✏️작성코드

카테고리 리스트와 그안에 카테고리 타입도 map을 사용해서 뿌려주었다.

 

 

 

 

항목 클릭시 '엑티브 효과'  추가

✏️작성코드

 const [countIndex, setCountIndex] = useState(0);
 const handleOnClick = (id) => {
    setCountIndex(id);
  };
.
.
.
.
 {types.map(({ id, name }) => {
                return (
                  <li
                    key={id}
                    className={countIndex === id ? 'categoryType' : 'btnBold'}
                    onClick={e => {
                      productList(id);
                      handleOnClick(id);
                      goToListLanding(id);
                    }}
                  >
                    {name}
                  </li>
                );
              })}

카운터 state를 하나 만들고 초기값을 0으로 설정해주었다. (상수데이터 index가 0부터 시작하기때문)

handleOnClick함수를 만들어서 인자로 id를 받는다.

id값이 변경될때마다 함수를 실행시키고, countIndex와 원래의 id값을 비교해서 같으면 '카테고리타입' 스타일을

보여주고 그게아니라면 '볼드' 속성을 보여주면 된다.

 

 

 

listLanging 페이지 추가

남성니트와 여성니트 탭에 해당하는 첫번째 페이지들만 만들었기때문에 다른 페이지들은

클릭해도 어떤 이벤트가 발생하지 않았다.

조금 더 완성도를 높이고 싶어 '상품 준비중' 이라는 페이지를 만들어 navigate 훅을 사용하여 연결해주었다.

 

✏️작성코드

 const goToListLanding = id => {
   (id !== 0) & (id !== 5) && navigate('/products/listlanding');
 };
.
.
.
  
<li
   key={id}
   className={countIndex === id ? 'categoryType' : 'btnBold'}
   onClick={e => {
     productList(id);
     handleOnClick(id);
     goToListLanding(id);
    }}
  >
   {name}
 </li>

기존의 남성복페이지(index:0)와 여성복페이지(index:5)을 제외해주어야하기때문에 id가 0이 아니고,

5가 아닐때라는 조건을 주어서 네비게이트 훅을 연결해주었다.