#5.Project(개발회고-핵심성분페이지)

Seongjae Hwang·2021년 12월 12일
0

weasly-project

목록 보기
5/5
post-thumbnail


핵심성분페이지는 제일 마지막에 작업하게 되었는데, 시간적으로 구독하기와 기본적인 커머스 기능에 더 집중하기로 하여 처음에 계획하였던 ingredientAPI에 GET통신은 못하였고, 대신 mockdata로 UI를 그려주었다.

핵심성분페이지

컴포넌트


핵심성분페이지에서는 크게 Ingredient가 있고, 그안에 title 컴포넌트와 list컴포넌트로 구분지었다.

Ingredient API GET

function Ingredient() {
  const [ingredients, setIngredients] = useState([]);

  useEffect(() => {
    fetch('/data/ingredientData.json', {
      method: 'GET',
    })
      .then(res => res.json())
      .then(data => {
        setIngredients(data);
      });
  }, []);

  return (
    <>
      <IngredientTitle />
      {ingredients.map(product => {
        return <IngredientList key={product.id} product={product} />;
      })}
    </>
  );
}

이런식으로 먼저, 카테고리로 나누어지고, 그안에 products_list로 구분된 mockdata를 만들고 이를 GET요청하고 ingredients라는 state에 담아 관리해주었다. 그리고 이를 map을 사용하여 반복되는 UI를 만들어 주고, 각각의 데이터를 props로 전달해주었다.

translateX 값 state로 관리하기 & 일정 수준이상 도달시 초기화하기

const SLIDE_LEFT_DIRECTION = 'left';
const SLIDE_RIGHT_DIRECTION = 'right';

function IngredientList({ product }) {
  
  const [xPos, setXpos] = useState(0);

  const clickLeftorRight = direction => {
    if (xPos === 300 || xPos === -600) return setXpos(0);

    direction === SLIDE_LEFT_DIRECTION
      ? setXpos(x => x + 100)
      : setXpos(x => x - 100);
  };

  return (
    <>
      <h3 className="ingredientCategory">클렌징폼</h3>
      <button
        className="leftButton ingredientBtn"
        onClick={() => clickLeftorRight(SLIDE_LEFT_DIRECTION)}
      ></button>
      <button
        className="rightButton ingredientBtn"
        onClick={() => clickLeftorRight(SLIDE_RIGHT_DIRECTION)}
      ></button>
      <div className="container">
        <ul
          className="ingredientList"
          style={{
            transform: `translateX(${xPos}px)`,
          }}
        >
          {product.products_list.map(ingredient => {
            return (
              <li
                key={ingredient.id}
                className="ingredient"
                style={{ backgroundImage: 'url(' + ingredient.img + ')' }}
              >
                <p className="type">
                  {ingredient.type}
                  <h4 className="name">{ingredient.name}</h4>
                </p>
              </li>
            );
          })}
        </ul>
      </div>
    </>
  );
}

먼저, translateX의 값을 xPos라는 state로 관리하였다. 그리고, 자주 쓰이는 left나 right는 변수로 함수밖에서 지정하였고, 버튼 클릭시 오른쪽을 클릭했는지 왼쪽을 클릭했는지 판별하고 state의 값을 변경하는 함수인 clickLeftorRight함수를 실행하고, 먼저 얼리 리턴 패턴을 사용하여 state값이 지정한 마지노선에 도달하면 state값을 초기화 시켜 원래의 위치로 돌아오게 하고, 그렇지 않다면 클릭한 버튼의 direction이 SLIDE_LEFT_DIRECTION인지 아닌지 판단해 왼쪽을 클릭했다면 state값을 current값보다 100 증가시키고, 오른쪽이라면 current값을 -100해주었다.

아쉬운점

처음에 페이지를 제작할때는 성분박스를 클릭하면 모달창을 만들어, 아래와 같이GET요청을 보내고 성분의 id에 맞는 각각의 정보를 보여주고 싶었지만, 시간적으로 부족하여 구현하지 못해서 완성도면에서 높지 않았던 것 같다.

profile
Always Awake

0개의 댓글