[💻 코드스테이츠 FE 44기] 솔로 프로젝트 - 끝 (상품 리스트, 북마크 리스트 구현)

✔️ 시작

마지막인 상품 리스트, 북마크 리스트를 작업을 진행했다.
재사용이 있는 상품 컴포넌트 작업을 마무리하니 나머지는 그래도 많은 시간?을 들이지 않았았던거 같다.

---

📍 작업 현황

상품 리스트, 북마크 리스트에 페이지는 구조가 동일하기 때문에 하나만 만들면 거의 끝났다고 볼 수 있었다.

✔️ 상품 리스트 페이지

상단에 탭메뉴가 있고 해당 메뉴를 클릭 시 필터링 되어서 아래 화면이 나온다.

✔️ 탭 메뉴 구현

맨처음 들었던 생각은 라우터를 이용하면 금방하겠다! 생각했다.

근데 왠걸? 생각 보다 내가 원하는대로 구현 되지도 않았고
클릭 했을 땐 아무런 화면도 나오지 않았다.

이러다 라우터로 시간 낭비하겠다는 생각이 들었다.

그러다 구글링 했을 때 객체 형식을 만들어 인덱스 값에 따라 화면을 보여주는게 내용이 있었다.
"아! 이거다!" 싶었다.

const [isTapmenu, setIsTapmenu] = useState(0)
const tabContArr = [
    { name: "전체", type: "all", src: imgAll, content: "1" },
    { name: "상품", type: "brand", src: imgBrand, content: "2" },
    { name: "카테고리", type: "category", src: imgCategory, content: "3" },
    { name: "기획전", type: "exhibition", src: imgExhibition, content: "4" },
    { name: "브랜드", type: "product", src: imgProduct, content: "5" },
  ];

const handleFilter = (idx) => {
	setIsTapmenu(idx)
}
.
.
.
<TabListCont>
        {tabContArr.map((el, idx) => (
          <TabList key={idx} id={idx} tabContArr={el} isTapmenu={isTapmenu} handleFilter={handleFilter} />
        ))}
</TabListCont>
<div>
	{tabContArr[isTapmenu].content}
</div>

isTapmenu는 탭메뉴의 인덱스 값을 저장한다.
tabContArr는 탭메뉴의 이름, 타입, 이미지 경로, 컨텐츠(테스트용)을 추가해 주었다.

map()메서드를 이용해 화면에 보이도록 작업했다.
버튼 클릭시 handleFilter의 인자에 인덱스 값이 전달되어 해당 인덱스 값에 맞춰 컨텐츠 내용이 변경 되도록 진행했다.

이거 하나 완성했는데 되게 뿌듯했다 ㅎㅎ

✔️ 상품 리스트 뿌리기

상품 리스트는 상품의 타입을 필터링해서 화면에 노출시키면 되겠다 생각했다.
조건문을 줘서 productItem요소의 type중 tabContArr각 요소의 type과 일치하는 상품이 있을 경우 filterItem에 담고 이를 화면에 보여주게하려고 했다.

일단 클릭 시 잘 보였지만 두번 클릭 해야하는 문제점이 있었다.
이 때 useEffect()를 사용해 해결할 수 있었다.

const [isFilterType, setIsFilterItem] = useState('')
const [filterItem, setFilterItem] = useState(productItem)
const [isTapmenu, setIsTapmenu] = useState(0)

 const tabContArr = [
    { name: "전체", type: "all", src: imgAll, content: "1" },
    { name: "상품", type: "brand", src: imgBrand, content: "2" },
    { name: "카테고리", type: "category", src: imgCategory, content: "3" },
    { name: "기획전", type: "exhibition", src: imgExhibition, content: "4" },
    { name: "브랜드", type: "product", src: imgProduct, content: "5" },
  ];

const handleFilter = (idx, type) => {
	setIsTapmenu(idx);
	setIsFilterItem(type);
};

  useEffect(() => {
    if (filterItem.length === 0) {
      setFilterItem(productItem)
    }
    let filteredItem = productItem.filter((el) => tabContArr[isTapmenu].type === el.type);
    setFilterItem([...filteredItem]);
  }, [isTapmenu]);

각각의 탭메뉴 클릭시handleFilter 함수가 진행된다.
useEffect에서 isTapmenu의 상태가 변경 될 때 실해하도록 진행했다.

그랬더니 두번 클릭해야하는 적용되는 문제를 해결 할 수 있었다.

useEffect잘 사용하지 않아서 흐름 파악이 어려웠는데
이번 기회를 통해 어느 정도 이해 할 수 있게 된 거 같다.

완성되는 화면을 보니 뿌듯하다 ㅎㅎㅎ
상품 버튼 클릭 시 화면이 깜박이는 이슈가 있다.

이건 나중에 로딩화면을 추가해 주면 좋을 것 같다. (이건 요구사항에 없는 내용으로 추후 업데이트해보면 좋을 듯 싶다.)

✔️ 북마크 리스트

북마크 리스트는 상품 리스트와 스타일이나 구조가 동일해
오랜 시간이 걸리지 않았다.

상품 리스트 영역에 localStorage에 저장된 상품을 구분 짓는 코드를 추가해 주었다.

  useEffect(() => {
    if (filterItem.length === 0) {
      setFilterItem(productItem)
    } else if (storedData.length === 0) {
      setFilterStoredItem(storedData)
    }
    let filteredItem = productItem.filter((el) => tabContArr[isTapmenu].type === el.type);
    let filterStoredItem = storedData.filter((el) => tabContArr[isTapmenu].type === el.type);
    setFilterItem([...filteredItem]);
    setFilterStoredItem([...filterStoredItem]);
  }, [isTapmenu]);

filteredItem는 상품 리스트
filterStoredItem는 localStorage에 저장된 상품 리스트이다.

이렇게 작업해 주고
filterStoredItem를 map()을 이용해 화면에 넣어주었다.

영상 용량 마다 gif 사이즈가 작은지 모르겠다...

그렇게 북마크 리스트 페이지도 구현 완료!

[요구사항]

• 북마크 버튼 클릭 시 토스트 알람 창 나오기
• 무한 스크롤 구현

이 두 가지는 주어진 기간 안에 구현하지 못했다.

현재 내가 할 수 있는 범위까지 구현하는 것과 깃헙에 대해 배운 것에 의미를 두었다.
그래서 이 프로젝트는 리덕스가 아닌 useState로 관리되어 props로 덕지 덕지 붙어 있다.

리덕스에 좀 더 익숙해진 다음 리팩토링해도 괜찮겠다 생각했다.

그 때 토스트 알람창과 무한 스크롤도 같이 구현하면 좋겠다 생각한다.
.
.
.

번외

gif 화면 너무 작긴 한데...
북마크 상품이 아무것도 없으면 비어있어서
북마크 상품이 없을 경우의 컴포넌트를 넣어주었다.

---

✏️ 마치며

이번 솔로 프로젝트를 진행하면서 혼자 하다 보니 문제가 닥쳤을 때
오랜 시간이 걸렸던거 같다.

중간 중간 페어 활동에서 페어님 도움을 받을 수 있다는 점이 좋았다.

또한 주어진 조건을 전부 구현하지 못했다. 시간이 부족하기도 했고 아직 내 실력엔 난이도가 높지 않을까 싶었다.

그리고 리덕스로 관리하는게 아닌 useState를 이용해 진행한거라 props가 덕지 덕지 붙어 있어 지저분하기도 하다.

나중에 시간을 들여 리팩토링할 예정이다.

그 때 버그나 구현하지 못했던 점 등을 같이 진행해 보면 좋겠다고 생각한다.

4일 동안 짧지만 프로젝트를 간접 체험한 것 같고 깃헙 branch 등에 대해 좀 더 알 수 있었던 시간이였다.

남은 기간도 힘내보자...

솔로 프로젝트 깃헙 주소

🔗 https://github.com/jieun419/fe-sprint-coz-shopping