コアコンポーネントページは最後の作業であり、時間的にサブスクリプションや基本的なビジネス機能に集中しているため、当初計画されていたIngreedientAPIでGET通信に失敗し、代わりにmockdataでUIを描く.

コアコンポーネントページ

構成部品

コアコンポーネントページには、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} />;
      })}
    </>
  );
}

このように、まず、productリストで区切られたmockdataを作成し、GETを要求して「成分」というstateに入れて管理するカテゴリに分けます.次にmapを使用して重複UIを作成し、各データをpropsに渡します.

translate X値状態で管理&一定レベル以上に達したときに初期化

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>
    </>
  );
}

まず、translate Xの値をxPosという状態に管理します.次に、よく使用される左または右は、関数の外で指定された変数であり、ボタンをクリックしたときに右をクリックするか左をクリックしてステータス値を変更するclickLeftorRight関数を実行します.まずally returnモードを使用し、state値が指定したmageルートに達した場合、state値を初期化して元の位置に戻します.そうしないと、クリックしたボタンの方向がSLIDE LEFT DIRECTIONかどうかを判断し、左側をクリックするとstate値を100増加し、右側であればcurrent値を-100増加します.

残念な点

ページ作成を開始したばかりの頃は、成分枠をクリックするとモデルウィンドウが作成され、以下のようにGETリクエストが送られ、成分idに合った個々の情報を表示しようとしたが、時間が足りず実現しなかったため、完成図では高くないようだ.