TicketPage.tsx

import { Button, Header, Image } from '@/components';
import { useNavigate } from 'react-router-dom';
import { useReviewStore } from '@/store';
import { useEffect } from 'react';
import { TicketAlt } from '@/assets';

export const TicketUploadStep = () => {
  const { setInitialized } = useReviewStore();
  const navigate = useNavigate();

  const handleNext = () => {
    navigate('/review/info');
  };

  useEffect(() => {
    // 리뷰 작성 시작 시 상태 초기화
    setInitialized();
  }, [setInitialized]);

  return (
    <div className="flex min-h-screen flex-col bg-gray-900 pt-11 pb-5">
      <div className="fixed top-0 right-0 left-0 z-50 bg-gray-900">
        <Header
          title=""
          onBackClick={() => navigate('/home')}
          showLike={false}
          showBookmark={false}
        />
      </div>
      {/* 상단 */}
      <div className="flex flex-col gap-6 px-5 pt-4">
        <div className="w-full max-w-[430px] text-left">
          <h2 className="text-title-2 leading-snug text-white">
            티켓을 인식하고 빠르게 후기 남겨봐요
          </h2>
        </div>

        {/* 로고 or 티켓 영역 자리 (임시 checker 배경) */}
        <div className="flex justify-center pt-15">
          <Image
            src={TicketAlt} // public/assets 경로에 있는 경우
            alt="티켓 캐릭터"
            className="w-full object-contain"
            aspectRatio=""
          />
        </div>
      </div>

      {/*버튼 영역*/}

      <div className="mt-auto flex flex-col items-start gap-[10px] px-[20px] py-[10px]">
        <Button
          fontType="title-3"
          className="w-full"
          //onClick={} <=티켓 있을 때 인식하는 페이지
        >
          티켓 올리기
        </Button>

        {/* 티켓 없을 때 선택 텍스트 버튼 */}
        <Button
          variant="text"
          fontType="body-1"
          className="w-full text-center"
          onClick={handleNext}
        >
          티켓이 없어요
        </Button>
      </div>
    </div>
  );
};