8/25 마우스 이벤트와 드롭다운, 카테고리 계층화, Grid 및 Layout 관리

1. 마우스 이벤트 (onMouseEnter & onMouseLeave)

• 문제: 드롭다운 메뉴를 만들 때, onMouseEnter와 onMouseLeave를 활용해 마우스가 특정 요소 위에 있을 때만 메뉴가 표시되도록 했음. 하지만, 하위 요소로 마우스가 이동할 때 드롭다운이 사라지는 문제가 발생했음.
• 해결: 이 문제는 부모 요소와 자식 요소 간의 onMouseLeave 이벤트가 발생하면서 드롭다운이 닫히는 것이 원인임. 이를 해결하기 위해 hover 상태를 관리하는 변수를 추가해 드롭다운이 유지되도록 설정.
• 코드:

  <li
    onMouseEnter={() => setHoveredCategory(largeCategory.name)}
    onMouseLeave={() => setHoveredCategory(null)}
    className="relative"
  >
    {largeCategory.name.toUpperCase()}
    {hoveredCategory === largeCategory.name && (
      <ul className="absolute top-full left-0">
        {/* 드롭다운 내용 */}
      </ul>
    )}
  </li>

2. 카테고리 계층화

• 문제: 처음에는 카테고리를 계층 없이 배열에 모두 넣어 관리했지만, 복잡도가 높아졌음.
• 해결: 카테고리를 대분류, 중분류, 소분류로 계층화하여 중첩된 배열 형태로 관리함으로써 드롭다운을 쉽게 구현할 수 있었음.
• 기존:

  const categories = [
    { name: "women", type: "large" },
    { name: "men", type: "large" },
    // 중분류와 소분류도 같은 배열에 존재
  ];

• 변경 후:

  const categories = [
    {
      name: "women",
      type: "large",
      subcategories: [
        {
          name: "의류",
          type: "medium",
          subcategories: [
            { name: "상의", type: "small" },
            { name: "바지", type: "small" },
          ],
        },
      ],
    },
    // 다른 대분류도 유사한 구조로 계층화
  ];

3. Grid와 Span 사용

• 문제: Grid 레이아웃에서 특정 요소가 원하는 만큼의 열과 행을 차지하도록 설정하는 방법을 찾고 있었음.
• 해결 : col-span, row-span을 사용해 각 요소가 차지할 열과 행의 비율을 조정함.
• 코드:

  <ul className="grid grid-cols-7 grid-rows-2 gap-3 h-full">
    <li className="bg-amber-100 col-span-2 row-span-2">new</li>
    <li className="bg-purple-200 col-span-2 row-span-2">popular</li>
    <li className="bg-blue-200 col-span-3 row-span-1">interior</li>
    <li className="bg-rose-200 col-span-3 row-span-1">beauty</li>
  </ul>

4. 마지막 자식 요소 (last-child) 스타일링

• 문제: Grid 내에서 마지막 자식 요소에 대한 스타일을 적용해야 했음.
• 해결: last: 유틸리티를 사용해 마지막 자식 요소에만 특정 스타일을 적용함
• 코드:

  <li className="last:mb-0">
    {/* 마지막 자식 요소에만 적용되는 스타일 */}
  </li>

5. Aspect Ratio 관리

• 문제: 이미지를 포함하는 요소의 가로와 세로 비율을 유지하면서, 이미지가 찌그러지지 않도록 해야 했음.
  -해결:aspect-w-1 aspect-h-1를 사용하려고 했으나 비율 적용이 정상적으로 되지 않음. 대신 aspect-square를 사용함. aspect-square 클래스를 사용하면 어떤 화면 크기에서도 해당 요소가 항상 정사각형으로 유지됨.
• 기존 코드:

  <div className="relative w-40 aspect-w-1 aspect-h-1">
    <Image src={product.thumbnailUrls[0]} alt={product.name} fill />
  </div>

• 변경 코드:

  <div className="relative w-40 aspect-square">
    <Image src={product.thumbnailUrls[0]} alt={product.name} fill />
  </div>