🏡 집 꾸미기 제품 리스트 소개

📝 과제 설명

• 설 연휴 동안 선택과제로써 혼자서 작업하는 개인 프로젝트로 진행 되었다.

• 과제를 확인 후에 실제 '집 꾸미기'에서 사용되고 있는 페이지임을 확인했고
  기업에서 API까지 제공해 주었다.

• 메인 이미지 Section과 하단 제품 리스트 Section으로 나누어 작업하였고
  레이아웃과 로직에 집중하기로 생각하고 하단 제품 리스트에 들어가는 케러셀 라이브러리는 자체 생략하여 진행했다.

⚙️ 기술 스택

• React, React Hooks
• JavaScript, Styled-Component
• Git & GitHub, Build Tool (Create React App)

💻 기능 구현

• 메인 이미지 Section / 제품 리스트 Section

🏞 메인 이미지 Section

• 지금까지와는 다르게 이번에는 fetch가 아닌, axios를 통해서 데이터를 받아와보았다.

  const fetchProduct = async () => {
    try {
      setError(null);
      setProduct(null);
      setLoading(true);
      const response = await axios.get(
        '제공받은 데이터 URL'
      );
      setProduct(response.data);
    } catch (e) {
      setError(e);
    }
    setLoading(false);
  };

• currentId라는 상태 값을 만든 뒤에 제공받은 데이터 값과 확인하는 비교연산자를 통한 로직 구현 방식이 많았다. ex) currentId === product.productId

🛤 제품 리스트 Section

• 각 제품과 아이콘에 주어진 제품 Id가 있었기에 섹션이 나누어있어도 Props를 통한 currentId 상태 값 하나로 로직 구현이 가능했다.

• 리팩토링 사항으로 태그 안에서 로직을 구현한 부분을 함수로 뺄 수 있다는 것을 인지했으나, 첫 작업은 나만의 코드 이해도를 높이기 위해서 태그 내에 작성을 하였고 차후에 수정할 예정이다.

       <ProductListBox>
        {product.productList.map(product => (
          <ProductDiv key={product.productId}>
            <ProductBox
              src={product.imageUrl}
              alt="집꾸미기 제품"
              productId={product.productId}
              currentId={currentId} //Props로 받아온 값
              onClick={() => {
                if (currentId === product.productId) {
                  setCurrentId(0); // 제품 선택 상태 로직
                } else {
                  setCurrentId(product.productId);
                }
              }}
            />
            {product.discountRate > 0 && ( // 할인율 표시를 위한 로직
              <DisCountBox>
                {product.discountRate}
                <span>%</span>
              </DisCountBox>
            )}
          </ProductDiv>
        ))}
      </ProductListBox>
           

🌅 최종 구현

개인과제를 통해서 생각하는 힘을 더 기른 것 같다. 무작정 코드를 작성하는 것이 아니라, 시작 전에 글로 작업 순서를 적고 기능을 구현하기 위한 흐름과 중요도를 체크한 뒤에 작업을 시작하는 법을 배울 수 있었던 좋은 시간이었다.🏆