24. 08. 08 TIL

card-flip 카드 뒤집어지는 효과

'use client';

import React, { useState } from 'react';
import ReactCardFlip from 'react-card-flip';
import { useRouter } from 'next/navigation';
import Image from 'next/image';
import { Tour } from '../../types/flipCardType';

const CardCom = ({ tour }: { tour: Tour }) => {
  const [isFlipped, setIsFlipped] = useState(false);
  const router = useRouter();

  const handleMouseEnter = () => setIsFlipped(true);
  const handleMouseLeave = () => setIsFlipped(false);
  const handleClick = (e: React.MouseEvent) => {
    e.preventDefault();
    router.push(`/details/${tour.id}`); // 특정 투어의 ID로 이동
  };

  return (
    <div className='w-[300px] h-[300px] m-2 '>
      <ReactCardFlip isFlipped={isFlipped} flipDirection='horizontal'>
        <div
          // className='text-center border w-72 h-48 p-4 m-2'
          className=' w-[300px] h-[300px] text-center border p-4  '
          onMouseEnter={handleMouseEnter}
          onMouseLeave={handleMouseLeave}
        >
          <p>{tour.planets.name}</p>
          <Image
            src={tour.planets.planet_img}
            alt={tour.planets.name}
            width={100}
            height={100}
            className='w-full h-24 object-cover'
          />

          <button onClick={handleClick} className='mt-4'>
            Click to flip
          </button>
        </div>

        <div
          // className='text-center border w-72 h-48 p-4 m-2'
          className='w-[300px] h-[300px] text-center border p-4     '
          onMouseEnter={handleMouseEnter}
          onMouseLeave={handleMouseLeave}
        >
          <p>{tour.description}</p>
          <p>Price: {tour.price}</p>
          <button onClick={handleClick} className='mt-4'>
            Click to flip
          </button>
        </div>
      </ReactCardFlip>
    </div>
  );
};

export default CardCom;

'use client';
import { createClient } from '@/supabase/client';
import { useEffect, useState } from 'react';
import CardCom from './CardCom';

interface Tour {
  id: string;
  price: number;
  description: string;
}

const CardFlip = () => {
  const [tours, setTours] = useState<Tour[]>([]);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    const fetchTours = async () => {
      const supabase = createClient();
      const { data: tours, error } = await supabase.from('tours').select(`
        id,
        price, 
        description,
        planets (
          name, 
          planet_img
        )
      `);

      if (error) {
        console.error('Error fetching tours:', error.message, error.details);
        setError(error.message);
      } else {
        setTours(tours);
      }
    };

    fetchTours();
  }, []);

  if (error) {
    return <div>Error loading tours: {error}</div>;
  }

  return (
    <div className='flex justify-center items-center mt-[5%] flex-wrap'>
      {tours.map((tour) => (
        <CardCom key={tour.id} tour={tour} />
      ))}
    </div>
  );
};

export default CardFlip;