const handleSubmit = async () => {
  try {
    if (mode === 'edit') {
      await updateSurvey({ surveyData: preferences, userId: user.id });
      handleOpenModal();
    } else {
      await saveSurveyData(preferences);
      router.push('/preferences/result');
    }
  } catch (error) {
    throw new Error(error.message); // `error.tsx`로 넘어가지 않음
  }
};

import { useState } from 'react';

const MyComponent = () => {
  const [submitError, setSubmitError] = useState(null);

  const handleSubmit = async () => {
    try {
      if (mode === 'edit') {
        await updateSurvey({ surveyData: preferences, userId: user.id });
        handleOpenModal();
      } else {
        await saveSurveyData(preferences);
        router.push('/preferences/result');
      }
    } catch (error) {
      setSubmitError(error.message); // 상태 업데이트
    }
  };

  if (submitError) throw new Error(submitError); // 렌더링 과정에서 에러 발생

  return <button onClick={handleSubmit}>제출</button>;
};

export const productCardVariants = {
  default: {
    mobile: {
      container: 'w-[124px] h-[186px]',
      image: 'w-[124px] h-[152px]',
      marginName: 'mt-3',
    },
    desktop: {
      container: 'xl:w-[224px] xl:h-[333px]',
      image: 'xl:w-[224px] xl:h-[291px]',
      marginName: 'xl:mt-5',
    },
  },
  result: {
    mobile: {
      container: 'w-[124px] h-[186px]',
      image: 'w-[124px] h-[186px]',
      marginName: '',
    },
    desktop: {
      container: 'xl:w-[160px] xl:h-[222px]',
      image: 'xl:w-[160px] xl:h-[222px]',
      marginName: '',
    },
  },
  search: {
    mobile: {
      container: 'w-[163px] h-[241px]',
      image: 'w-[163px] h-[207px]',
      marginName: 'mt-3',
    },
    desktop: {
      container: 'xl:w-[224px] xl:h-[333px]',
      image: 'xl:w-[224px] xl:h-[291px]',
      marginName: 'xl:mt-5',
    },
  },
  like: {
    mobile: {
      container: 'w-[163px] h-[241px]',
      image: 'w-[163px] h-[207px]',
      marginName: 'mt-3',
    },
    desktop: {
      container: 'xl:w-[224px] xl:h-[333px]',
      image: 'xl:w-[224px] xl:h-[291px]',
      marginName: 'xl:mt-5',
    },
  },
} as const;

export type ProductCardScenario = keyof typeof productCardVariants;

'use client';

import Link from 'next/link';
import React from 'react';
import { twMerge } from 'tailwind-merge'; // tailwind merge용 라이브러리(optional)

import LikeButton from './LikeButton';
import OptimizedImage from './OptimizedImage';
import {
  productCardVariants,
  ProductCardScenario,
} from '@/constants/productCardVariants';

type ProductCardProps = {
  /** 전통주 id */
  id: string;
  /** 전통주 이름 */
  name: string;
  /** 이미지 URL */
  imageUrl: string;
  /** 좋아요 여부 */
  isLiked: boolean;
  /** 좋아요 토글 함수 */
  onToggleLike: () => void;
  /** 데스크탑 & 모바일에서 적용할 사이즈 시나리오 */
  scenario?: ProductCardScenario; // 추가
  /** 술 이름 노출 여부 */
  isNameVisible?: boolean;
};

/**
 * 모바일 & 데스크탑에 대응 가능한 Product Card
 */
const ProductCard: React.FC<ProductCardProps> = ({
  id,
  name,
  imageUrl,
  isLiked,
  onToggleLike,
  scenario = 'default', // 기본값
  isNameVisible = true,
}) => {
  // scenario 에 해당하는 class들 가져오기
  const classes = productCardVariants[scenario];

  return (
    <div
      // container 부분
      className={twMerge(
        'relative flex flex-col', // 공통
        classes.mobile.container, // 모바일 사이즈
        classes.desktop.container, // 데스크탑 사이즈
      )}
    >
      {/* 좋아요 버튼 */}
      <div className="absolute bottom-[34px] right-0 z-10">
        <LikeButton isLiked={isLiked} onClick={onToggleLike} />
      </div>

      {/* 상세 페이지 링크 */}
      <Link href={`/drink/${id}`} className="flex flex-col">
        {/* 이미지 영역 */}
        <div
          className={twMerge(
            // 공통적인 스타일(테두리, 배경 등)
            'relative overflow-hidden rounded-[8px] border border-grayscale-200 bg-gray-100 bg-opacity-50',
            // scenario별로 image 스타일
            classes.mobile.image,
            classes.desktop.image,
          )}
        >
          <OptimizedImage
            src={imageUrl}
            alt={name}
            fill
            className="rounded-lg object-cover"
          />
        </div>

        {/* 이름 */}
        {isNameVisible && (
          <div
            className={twMerge(
              // scenario별 margin top
              classes.mobile.marginName,
              classes.desktop.marginName,
              // 공통적으로 들어가는 스타일
              'w-full overflow-hidden text-ellipsis whitespace-nowrap text-left text-title-mm',
            )}
          >
            {name}
          </div>
        )}
      </Link>
    </div>
  );
};

export default ProductCard;

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
  /* ======================== default 시나리오 ======================== */
  .product-card-default {
    @apply relative flex h-[186px] w-[124px] flex-col;
  }
  .product-card-default-image {
    @apply relative h-[152px] w-[124px] overflow-hidden rounded-lg border border-grayscale-200 bg-gray-100 bg-opacity-50;
  }
  /* 좋아요 버튼 (default) */
  .product-card-default-likeBtn {
    @apply absolute bottom-[34px] right-0 z-10;
  }

  @screen xl {
    .product-card-default {
      @apply h-[333px] w-[224px];
    }
    .product-card-default-image {
      @apply h-[291px] w-[224px];
    }
    /* 데스크톱에서만 bottom-44px, right-8px */
    .product-card-default-likeBtn {
      @apply bottom-[44px] right-[8px];
    }
  }

  /* ======================== result 시나리오 ======================== */
  .product-card-result {
    @apply relative flex h-[186px] w-[124px] flex-col;
  }
  .product-card-result-image {
    @apply relative h-[186px] w-[124px] overflow-hidden rounded-lg border border-grayscale-200 bg-gray-100 bg-opacity-50;
  }
  /* 좋아요 버튼 (result) → bottom:0, right:0 */
  .product-card-result-likeBtn {
    @apply absolute bottom-0 right-0 z-10;
  }

  @screen xl {
    .product-card-result {
      @apply h-[222px] w-[160px];
    }
    .product-card-result-image {
      @apply h-[222px] w-[160px];
    }
    /* result 시나리오에서 데스크톱도 그대로 bottom-0 right-0
       => 별도 추가 스타일이 없다면 비워둬도 됨
    */
  }

  /* ======================== search 시나리오 ======================== */
  .product-card-search {
    @apply relative flex h-[241px] w-[163px] flex-col;
  }
  .product-card-search-image {
    @apply relative h-[207px] w-[163px] overflow-hidden rounded-lg border border-grayscale-200 bg-gray-100 bg-opacity-50;
  }
  /* 좋아요 버튼도 default와 동일한 위치라 가정 */
  .product-card-search-likeBtn {
    @apply absolute bottom-[34px] right-0 z-10;
  }

  @screen xl {
    .product-card-search {
      @apply h-[333px] w-[224px];
    }
    .product-card-search-image {
      @apply h-[291px] w-[224px];
    }
    /* desktop 시 위치 */
    .product-card-search-likeBtn {
      @apply bottom-[44px] right-[8px];
    }
  }

  /* ======================== like 시나리오 ======================== */
  .product-card-like {
    @apply relative flex h-[241px] w-[163px] flex-col;
  }
  .product-card-like-image {
    @apply relative h-[207px] w-[163px] overflow-hidden rounded-lg border border-grayscale-200 bg-gray-100 bg-opacity-50;
  }
  /* 좋아요 버튼도 default와 동일한 위치라 가정 */
  .product-card-like-likeBtn {
    @apply absolute bottom-[34px] right-0 z-10;
  }

  @screen xl {
    .product-card-like {
      @apply h-[333px] w-[224px];
    }
    .product-card-like-image {
      @apply h-[291px] w-[224px];
    }
    .product-card-like-likeBtn {
      @apply bottom-[44px] right-[8px];
    }
  }
}

'use client';

import Image from 'next/image';
import Link from 'next/link';

import LikeButton from './LikeButton';

type ProductCardScenario = 'default' | 'result' | 'search' | 'like';

type ProductCardProps = {
  id: string;
  name: string;
  imageUrl: string;
  isLiked: boolean;
  onToggleLike: () => void;
  scenario?: ProductCardScenario;
  isNameVisible?: boolean;
};

const scenarioToClass = (scenario: ProductCardScenario) => {
  switch (scenario) {
    case 'default':
      return {
        container: 'product-card-default',
        image: 'product-card-default-image',
        likeBtn: 'product-card-default-likeBtn',
      };
    case 'result':
      return {
        container: 'product-card-result',
        image: 'product-card-result-image',
        likeBtn: 'product-card-result-likeBtn',
      };
    case 'search':
      return {
        container: 'product-card-search',
        image: 'product-card-search-image',
        likeBtn: 'product-card-search-likeBtn',
      };
    case 'like':
      return {
        container: 'product-card-like',
        image: 'product-card-like-image',
        likeBtn: 'product-card-like-likeBtn',
      };
    default:
      return {
        container: 'product-card-default',
        image: 'product-card-default-image',
        likeBtn: 'product-card-default-likeBtn',
      };
  }
};

const ProductCard = ({
  id,
  name,
  imageUrl,
  isLiked,
  onToggleLike,
  scenario = 'default',
  isNameVisible = true,
}: ProductCardProps) => {
  const classes = scenarioToClass(scenario);

  return (
    <div className={classes.container}>
      {/* 좋아요 버튼 */}
      <div className={classes.likeBtn}>
        <LikeButton isLiked={isLiked} onClick={onToggleLike} />
      </div>

      {/* 상세 페이지 링크 */}
      <Link href={`/drink/${id}`} className="flex flex-col">
        {/* 이미지 영역 */}
        <div className={classes.image}>
          {/* fill 모드 */}
          <Image
            src={imageUrl}
            alt={name}
            fill
            className="rounded-lg object-cover"
          />
        </div>

        {/* 이름 */}
        {isNameVisible && (
          <div className="mt-3 w-full overflow-hidden text-ellipsis whitespace-nowrap text-left text-title-mm xl:mt-5">
            {name}
          </div>
        )}
      </Link>
    </div>
  );
};

export default ProductCard;