[💻 코드스테이츠 FE 44기] 솔로 프로젝트 - 3 (4개의 컴포넌트 작업..ing)

✔️ 시작

헤더, 푸터 작업이 끝나고 메인 화면을 진행했다..
하지만! 메인 화면을 작업하려면 결국엔 각 4개의 상품을 작업해야한다.
상품만 있는게 아닌 각 타입 마다 스타일이 다르고, 상품 클릭시 모달창도 나오고, 북마크 버튼도 존재한다.

---

📍 작업 현황

✔️ 4개의 컴포넌트 작업

음... 작업하긴 했는데...
하긴 했는데 결과가 없다..

해당 작업 영역 나에겐 아직은 난이도가 높은거 같다ㅠ

북마크 기능과, 화면 클리 시 모달 창도 나와야하는 점과
각 타입 마다 스타일이 다른점이 있어 진짜 하루 종일 작업 했지만 끝내지 못했다.

바로 API로 데이터를 가져오기 보다는
더미 데이터를 만들어 각각의 컴포넌트의 조건에 맞춰 작업을 했다.

이런식으로 더미 데이터를 만들어어서 작업해 주었다.

상품의 경우 재사용성이 많아 하나의 컴포넌트로 빼주었다.
보여주는 내용이 각 type마다 달라서 삼항 연산자를 사용해 type에 따라 스타일링을 다르게 해주었다.

<div className="right-area">
	{/* Category, Exhibition */}
	{!productItem.discountPercentage && null}
	{/* Brand */}
	{productItem.type !== "Brand" || <strong>관심고객수</strong>}
	{/* Product*/}
	{productItem.type !== "Product" || <strong className="product">{`${productItem.discountPercentage}%`}</strong>}
	<span>{!productItem.price ? numComma(productItem.follower) :`${numComma(productItem.price)}원`}</span>
</div>

삼항 연산자 진짜 유용하게 사용한 거 같다.

그렇게 각 상품 타입에 따라 다르게 해준 모습이다.

그리고 그 다음 문제는 모달과 북마크 기능이다...

일단 둘 중 비교 했을 때 모달 창이 더 쉬울 거 같아 작업해 주었다.
모달 창 또한 재사용이 많아 컴포넌트로 따로 작업해 처리해 주었다.

[해당 사진은 이미 구현한 모습에서 기능만 캡처한 것이다.]

해당 상품 클릭 시 모달창이 뜨고 상품 이미지, 이름, 북마크 버튼, 닫기 버튼이 존재해야한다.
이미 각 상품을 map()를 이용해 적용해 둔 상태로 내부에 모달 창을 넣고 작업해 주면 동일한 사진이 나온다.

const [isModal, setIsModal] = useState(false)
const showModal = () => {
	setIsModal(!isModal)
}
.
.
.
 {isModal ? <Modal/> : null }
.
.
.
 <img onClick={showModal} />

useState를 이용해 모달 상태를 관리하고
이미지 클리 시 false에서 true가 되게 작업했다.

삼항 연산자를 이용해 true이면 모달창이 나오고 아니면 안 나오게 진행했다.

진짜 여기까지 작업하면서 오.. 생각보다 금방 됐는데?이랬다.

이제 대망의 북마크이다...
일단 버튼 클릭 시 버튼 on,off는 모달처럼 상태를 주어 관리하면 되기에 쉽게 구현할 수 있었다.

문제는 북마크 추가시 localStorage에 저장되 북마크 리스트 영역에 노출되어야한다.
또한 모달창에 있는 북마크도 같이 추가 되어야 한다.

이때 생각했던거 북마크 클릭시 localStorage에 추가하고
localStorage의 데이터를 이용해 북마크 리스트 정보를 불러오면 되겠구나!

그렇다. 말이 쉽지 구현하는데 머리 엄청 돌렸다.

const [isBookMark, setIsBookMark] = useState(false)
const [dataState, setDataState] = useState([])
const BOOKMARK = "BOOKMARK"

const storedData = JSON.parse(localStorage.getItem(BOOKMARK));
  
const handleBookmarkToggle = (item) => {
    if (dataState.includes(item) || storedData.includes(item)) {
      const filterData = dataState.filter(el => el.id !== item.id)
      setDataState(filterData)
      localStorage.setItem(BOOKMARK, JSON.stringify(filterData))
    } else {
      setDataState([...dataState, item])
      localStorage.setItem(BOOKMARK, JSON.stringify([...dataState, item]))
    }
  }

아직 리덕스는 공부를 제대로 못해서 State로 작업을 진행했다.

dataState에 북마크에 클릭된 데이터를 저장하는 값으로 해당 값을
localStorage에 넣을 예정이다.

storedData는 localStorage의 데이터를 불러오게 미리 만들었다.

dataState와 storedData에 item이 존재할 경우와 그렇지 않을 경우의 조건을 주었고
그 값을 locaStorage에 저장해 주었다.

이 때 저장은 잘 되었다...!

문제는 북마크 클릭 시 localStorage에 추가는 되지만 새로고침 후 다른 상품 클릭 시 기존 상품 초기화 후 추가되는 이슈가 있었다...ㅠ

혼자 끙끙 앓아 뭐가 문제지..?

이 부분은 페어님과 같이 페어 코드리뷰를 진행하면서
페어님이 도움을 주셔서 해결 되었다! 진짜 감사합니다.ㅠ.ㅠ🙇‍♀️

이부분은 다음 블로깅으로...

to be continued...

---

✏️ 마치며

사실 상품 섹션은 내부에 모달 창, 북마크 기능이 같이 포함되어 있어서
많은 시간을 잡아 두었다.

또한 주어진 시간에 처리해 보자는 생각으로 학습 이후에 작업을 별로하지 않..으려고 했으나...!

와! 이거 이러다가 메인 화면만 잡다가 끝나겠구나...! 생각을 했다.
그리고 다른 동기 분들과 대화를 하면서 진행한게 아니라 혼자 하다가 막히면
chat GPT에게 물어보았다. (어쩌면 CPT가 나의 동기가 아닐까 싶다.)

GPT가 가끔 질문의 의도와 반대로 갈 때도 있지만 오타 찾거나 메서드 어떤걸 사용해야하는지 부분에서 많은 도움을 얻었다.