EventDetailsPage.tsx

import { useEffect, useState } from 'react';
import { useNavigate } from 'react-router-dom';
import OrganizerInfo from '../../../widgets/event/ui/OrganizerInfo';
import Header from '../../../../design-system/ui/Header';
import IconButton from '../../../../design-system/ui/buttons/IconButton';
import share from '../../../../public/assets/event-manage/details/Share.svg';
import like from '../../../../public/assets/event-manage/details/Like.svg';
import liked from '../../../../public/assets/event-manage/details/ClickedLike.svg';
import TicketInfo from '../../../widgets/event/ui/TicketInfo';
import linkIcon from '../../../../public/assets/event-manage/details/Link.svg';
import ShareEventModal from '../../../features/event/ui/ShareEventModal';
import participantsImg from '../../../../public/assets/event-manage/details/People.svg';
import dateImg from '../../../../public/assets/event-manage/details/Date.svg';
import timeImg from '../../../../public/assets/event-manage/details/Time.svg';
import locationImg from '../../../../public/assets/event-manage/details/Location.svg';
import KakaoMap from '../../../shared/ui/KakaoMap';
import { useCreateBookmark, useDeleteBookmark } from '../../../features/bookmark/hook/useBookmarkHook';
import { formatDate, formatTime } from '../../../shared/lib/date';
import { useEventDetail } from '../../../entities/event/hook/useEventHook';
import useAuthStore from '../../../app/provider/authStore';
import HomeButton from '../../../../public/assets/bottomBar/HomeIcon.svg';
const EventDetailsPage = () => {
  const navigate = useNavigate();
  const [title, setTitle] = useState('');
  const [isModalOpen, setIsModalOpen] = useState(false);
  const isLoggedIn = useAuthStore(state => state.isLoggedIn);
  const { data: event } = useEventDetail();

  const handleShareClick = (title: string) => {
    setTitle(title);
    setIsModalOpen(true);
  };
  const closeModal = () => {
    setIsModalOpen(false);
  };
  const { mutate: createBookmark } = useCreateBookmark();
  const { mutate: deleteBookmark } = useDeleteBookmark();

  const handleLikeClick = () => {
    if (event.result.bookmarked) {
      if (event.result.bookmarkId === null) {
        return;
      }
      deleteBookmark({ eventId: event.result.id, bookmarkId: event.result.bookmarkId });
    } else {
      createBookmark(event.result.id);
    }
  };

  useEffect(() => {
    if (isModalOpen) {
      document.body.style.overflowY = 'hidden';
    } else {
      document.body.style.overflowY = 'scroll';
    }
  }, [isModalOpen]);

  return (
    <>
      <Header
        leftButtonClassName="text-xl hover:no-underline z-30"
        leftButtonClick={() => navigate('/')}
        leftButtonLabel={<img src={HomeButton} />}
        centerContent="같이가요"
      />
      {event ? (
        <>
          <img src={event.result.bannerImageUrl} alt="이벤트 배너" className="w-full h-64 mb-6" />
          <div className="flex flex-col gap-3 px-4 md:px-6">
            <div key={event.result.id} className="flex flex-col gap-2">
              <h1 className="text-xl md:text-2xl font-bold">{event.result.title}</h1>
              <div className="flex justify-between items-center gap-1">
                <div className="flex gap-2">
                  <img src={participantsImg} alt="인원수 이미지" />
                  <span className="font-bold text-base md:text-lg py-2">
                    현재 {event.result.participantCount}명이 참가 신청했습니다.
                  </span>
                </div>
                <div className="flex gap-3">
                  <IconButton
                    iconPath={<img src={share} alt="공유하기 버튼" />}
                    onClick={() => handleShareClick(event.result.title)}
                  />
                  {isLoggedIn && (
                    <IconButton
                      iconPath={<img src={event.result.bookmarked ? liked : like} alt="좋아요 버튼" />}
                      onClick={handleLikeClick}
                    />
                  )}
                </div>
              </div>
              <div className="flex gap-2">
                <img src={dateImg} alt="달력 이미지" />
                <span className="text-sm md:text-base">
                  {formatDate(event.result.startDate)} ~ {formatDate(event.result.endDate)}
                </span>
              </div>
              <div className="flex gap-2">
                <img src={timeImg} alt="시간 이미지" />
                <span className="text-sm md:text-base">
                  {formatTime(event.result.startDate)} ~ {formatTime(event.result.endDate)}
                </span>
              </div>
              {event.result.address && (
                <div className="flex gap-2">
                  <img src={locationImg} alt="위치 이미지" />
                  <span className="text-sm md:text-base">
                    {event.result.address} {event.result.detailAddress}
                  </span>
                </div>
              )}
              <div
                className="prose prose-sm md:prose-base py-3 max-w-none"
                dangerouslySetInnerHTML={{ __html: event.result.description }}
              />
            </div>

            {event.result.onlineType !== 'ONLINE' &&
              event.result.locationLat !== 0.0 &&
              event.result.locationLng !== 0.0 && (
                <>
                  <h2 className="font-bold text-xl">위치</h2>
                  <KakaoMap lat={event.result.locationLat} lng={event.result.locationLng} />
                </>
              )}

            <OrganizerInfo
              name={event.result.hostChannelName}
              description={event.result.hostChannelDescription}
              phone={event.result.organizerPhoneNumber}
              email={event.result.organizerEmail}
            />

            <h2 className="font-bold text-xl">티켓 옵션</h2>
            <TicketInfo eventId={event.result.id} />

            {event.result.referenceLinks && event.result.referenceLinks.length > 0 && (
              <div className="flex flex-col gap-2">
                <h2 className="font-bold text-xl">관련 링크</h2>
                <div className="flex flex-col gap-3 mb-4">
                  {event.result.referenceLinks.map((link: { title: string; url: string }) => (
                    <div key={link.url} className="flex items-center gap-2">
                      <img src={linkIcon} alt="링크 이모지" />
                      <a href={link.url} target="_blank" rel="noopener noreferrer" className="text-blue-500 underline">
                        {link.title}
                      </a>
                    </div>
                  ))}
                </div>
              </div>
            )}
          </div>
        </>
      ) : (
        <div className="flex justify-center items-center h-screen">로딩 중...</div>
      )}
      {isModalOpen && (
        <ShareEventModal
          closeModal={closeModal}
          title={title}
          eventDescription={event?.result.description}
          eventImageUrl={event?.result.bannerImageUrl}
          eventUrl={window.location.href}
        />
      )}
    </>
  );
};
export default EventDetailsPage;