Merge branch 'dev' of https://github.com/prgrms-web-devcourse-final-project/WEB6_7_codecrete_FE into feat/#187/planner

Author: garlatonic

src/app/(public)/concerts/[id]/page.tsx

@@ -75,6 +75,21 @@ export default async function Page({ params }: { params: Promise<{ id: string }>
     notFound();
   }
 
+  const now = new Date();
+
+  let isChatAvailable = false;
+
+  if (concertDetail.ticketTime) {
+    // ticketTime은 KST 기준 시간으로 내려온다고 가정
+    const ticketTime = new Date(concertDetail.ticketTime);
+    // 채팅은 티켓 오픈 시점 기준 ±3일 동안만 가능
+    const THREE_DAYS = 3 * 24 * 60 * 60 * 1000;
+
+    isChatAvailable =
+      now.getTime() >= ticketTime.getTime() - THREE_DAYS &&
+      now.getTime() <= ticketTime.getTime() + THREE_DAYS;
+  }
+
   return (
     <>
       <BreadcrumbNavbar
@@ -85,10 +100,10 @@ export default async function Page({ params }: { params: Promise<{ id: string }>
         ]}
       />
       <Suspense fallback={<ConcertHeaderSkeleton />}>
-        <ConcertHeader concertId={id} />
+        <ConcertHeader concertId={id} isLoggedIn={isLoggedIn} isChatAvailable={isChatAvailable} />
       </Suspense>
       <Suspense fallback={<ConcertDetailSkeleton />}>
-        <ConcertDetail concertId={id} isLoggedIn={isLoggedIn} />
+        <ConcertDetail concertId={id} isLoggedIn={isLoggedIn} isChatAvailable={isChatAvailable} />
       </Suspense>
       {similarConcerts.length > 0 && (
         <Suspense fallback={<ConcertSimilarSkeleton />}>

src/components/concert/detail/ConcertChatButton.tsx

@@ -18,11 +18,28 @@ import { useRouter } from "next/navigation";
 import { MessageSquareIcon } from "lucide-react";
 import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
 
-export default function ConcertChatButton({ concertId }: { concertId?: string }) {
+export default function ConcertChatButton({
+  concertId,
+  isLoggedIn,
+  isChatAvailable,
+}: {
+  concertId?: string;
+  isLoggedIn?: boolean;
+  isChatAvailable?: boolean;
+}) {
   const router = useRouter();
   const [chatDialogOpen, setChatDialogOpen] = useState(false);
 
-  const handleOpenChatModal = () => {
+  const handleClick = () => {
+    if (!isLoggedIn) {
+      toast.error("로그인이 필요합니다.");
+      router.push("/sign-in");
+      return;
+    }
+    if (!isChatAvailable) {
+      toast.error("지금은 채팅 가능 기간이 아닙니다.");
+      return;
+    }
     setChatDialogOpen(true);
   };
 
@@ -53,7 +70,7 @@ export default function ConcertChatButton({ concertId }: { concertId?: string })
             variant="outline"
             size="icon"
             className="border-border hover:bg-border group"
-            onClick={handleOpenChatModal}
+            onClick={handleClick}
           >
             <MessageSquareIcon className="h-4 w-4" />
           </Button>
@@ -73,8 +90,6 @@ export default function ConcertChatButton({ concertId }: { concertId?: string })
             <AlertDialogTitle>채팅에 참여하시겠어요?</AlertDialogTitle>
           </AlertDialogHeader>
           <AlertDialogDescription>
-            예매일이 임박한 공연이에요.
-            <br />
             채팅에 참여해 실시간 서버 시간과 다른 이용자들과의 이야기를 함께 나눠보세요.
           </AlertDialogDescription>
           <AlertDialogFooter>

src/components/concert/detail/ConcertDetail.tsx

@@ -14,9 +14,11 @@ import MobileQuickActions from "./MobileQuickActions";
 export default async function ConcertDetail({
   concertId,
   isLoggedIn,
+  isChatAvailable,
 }: {
   concertId: string;
   isLoggedIn: boolean;
+  isChatAvailable: boolean;
 }) {
   const [concertDetail, concertVenue, concertTicketing, isAuthenticated] = await Promise.all([
     getConcertDetail({ concertId }),
@@ -37,7 +39,7 @@ export default async function ConcertDetail({
 
   return (
     <section className="bg-bg-main lg:px-15 lg:py-10">
-      <div className="mx-auto flex w-full max-w-400 flex-col gap-5 lg:flex-row lg:gap-8">
+      <div className="mx-auto flex w-full max-w-400 flex-col gap-5 lg:flex-row xl:gap-8">
         <div className="flex-2 space-y-15 lg:space-y-20">
           <ConcertDetailInfo
             concertImageUrls={concertDetail?.concertImageUrls}
@@ -59,6 +61,8 @@ export default async function ConcertDetail({
                 concertEndDate={concertDetail?.endDate}
                 userData={userData}
                 isLiked={isLikedConcert?.isLike}
+                isLoggedIn={isLoggedIn}
+                isChatAvailable={isChatAvailable}
               />
             </div>
           </div>
@@ -73,6 +77,8 @@ export default async function ConcertDetail({
         concertEndDate={concertDetail?.endDate}
         userData={userData}
         isLiked={isLikedConcert?.isLike}
+        isLoggedIn={isLoggedIn}
+        isChatAvailable={isChatAvailable}
       />
     </section>
   );

src/components/concert/detail/ConcertHeader.tsx

@@ -19,7 +19,15 @@ import { getAuthStatus, getMe } from "@/lib/api/auth/auth.server";
 import ConcertChatButton from "./ConcertChatButton";
 import { PLACEHOLDER_IMAGE } from "@/components/home/upcoming-slider/constants";
 
-export default async function ConcertHeader({ concertId }: { concertId: string }) {
+export default async function ConcertHeader({
+  concertId,
+  isLoggedIn,
+  isChatAvailable,
+}: {
+  concertId: string;
+  isLoggedIn: boolean;
+  isChatAvailable: boolean;
+}) {
   const [concertDetail, concertTicketing, isAuthenticated] = await Promise.all([
     getConcertDetail({ concertId }),
     getTicketOfficesByConcertId({ concertId }),
@@ -41,11 +49,11 @@ export default async function ConcertHeader({ concertId }: { concertId: string }
   }
 
   return (
-    <section className="header bg-bg-sub pb-6 lg:px-15 lg:py-10">
+    <section className="header bg-bg-sub lg:px-15 lg:py-10">
       {/* 모바일: flex-col (세로), md 이상: flex-row (가로) */}
-      <div className="mx-auto flex w-full max-w-400 flex-col gap-5 lg:flex-row lg:items-start lg:gap-8">
+      <div className="mx-auto flex w-full max-w-400 flex-col gap-5 lg:flex-row lg:items-start xl:gap-8">
         {/* 포스터 영역: 모바일 w-full, md 이상 w-2/5 */}
-        <div className="border-border w-full flex-1 overflow-hidden lg:sticky lg:top-30 lg:rounded-2xl lg:border">
+        <div className="border-border w-full flex-1 overflow-hidden lg:sticky lg:top-30 lg:rounded-2xl lg:border xl:w-2/5">
           <AspectRatio ratio={320 / 426.5}>
             <Image
               src={concertDetail.posterUrl ?? PLACEHOLDER_IMAGE}
@@ -59,7 +67,7 @@ export default async function ConcertHeader({ concertId }: { concertId: string }
         </div>
 
         {/* 정보 영역 */}
-        <div className="bg-bg-main border-border sticky top-4 mx-5 flex flex-1 flex-col gap-4 rounded-2xl border p-5 lg:top-30 lg:mx-0 lg:gap-8 lg:p-10">
+        <div className="bg-bg-main border-border sticky top-4 mx-5 flex flex-1 flex-col gap-4 rounded-2xl border p-5 lg:top-30 lg:mx-0 xl:gap-8 xl:p-10">
           <div className="title flex items-start justify-between gap-4">
             <div className="flex flex-col gap-3 md:gap-4">
               {concertDetail.concertArtists.length > 0 && (
@@ -74,19 +82,18 @@ export default async function ConcertHeader({ concertId }: { concertId: string }
                   ))}
                 </div>
               )}
-              <div className="flex flex-col gap-1">
-                <h2 className="text-text-main text-2xl font-bold lg:text-4xl">
-                  {concertDetail.name}
-                </h2>
-                <p className="text-text-sub text-base md:text-lg lg:text-xl">
-                  {concertDetail.description}
-                </p>
-              </div>
+              <h2 className="text-text-main text-2xl font-bold xl:text-4xl">
+                {concertDetail.name}
+              </h2>
             </div>
 
             {/* 버튼 그룹: 모바일에서는 상단 우측 혹은 하단 배치 등 고려 가능 */}
             <div className="flex gap-2">
-              <ConcertChatButton concertId={concertDetail.concertId} />
+              <ConcertChatButton
+                concertId={concertDetail.concertId}
+                isLoggedIn={isLoggedIn}
+                isChatAvailable={isChatAvailable}
+              />
               <ConcertLikeButton
                 concertId={concertDetail.concertId}
                 isAuthenticated={isAuthenticated}
@@ -96,7 +103,7 @@ export default async function ConcertHeader({ concertId }: { concertId: string }
           </div>
 
           {/* 정보 그리드: 모바일 1열, md 이상 2열 */}
-          <div className="border-border grid grid-cols-1 gap-x-4 gap-y-4 border-y py-6 md:grid-cols-2 md:gap-y-6 md:py-8">
+          <div className="border-border grid grid-cols-1 gap-x-4 gap-y-4 border-y py-6 xl:grid-cols-2 xl:gap-y-6 xl:py-8">
             <ConcertHeaderInfo
               type="date"
               label="날짜 및 시간"

src/components/concert/detail/MobileQuickActions.tsx

@@ -22,6 +22,8 @@ interface MobileQuickActionsProps {
   concertEndDate?: string;
   userData: User | null;
   isLiked?: boolean;
+  isLoggedIn: boolean;
+  isChatAvailable: boolean;
 }
 
 export default function MobileQuickActions({
@@ -31,6 +33,8 @@ export default function MobileQuickActions({
   concertEndDate,
   userData,
   isLiked,
+  isLoggedIn,
+  isChatAvailable,
 }: MobileQuickActionsProps) {
   const [open, setOpen] = useState(false);
 
@@ -63,7 +67,7 @@ export default function MobileQuickActions({
           </SheetHeader>
           <div className="p-4 pt-15 pb-6">
             <SheetClose
-              className="bg-bg-sub border-border absolute top-4 left-1/2 h-2 w-40 -translate-x-1/2 rounded-lg border"
+              className="bg-muted absolute top-4 left-1/2 h-1.5 w-12 -translate-x-1/2 rounded-lg"
               aria-label="빠른 실행창 닫기"
             />
             <QuickActionsSection
@@ -73,6 +77,8 @@ export default function MobileQuickActions({
               concertEndDate={concertEndDate}
               userData={userData}
               isLiked={isLiked}
+              isLoggedIn={isLoggedIn}
+              isChatAvailable={isChatAvailable}
             />
           </div>
         </SheetContent>

src/components/concert/detail/QuickActionsSection.tsx

@@ -42,7 +42,7 @@ import { createNewPlan } from "@/lib/api/planner/planner.client";
 import { useRouter } from "next/navigation";
 import { User } from "@/types/user";
 import { postLikeConcert } from "@/lib/api/concerts/concerts.client";
-import { getConcertStartDate, isSameDay, dateToISOString } from "@/utils/helpers/handleDate";
+import { dateToISOString, getConcertStartDate, isSameDay } from "@/utils/helpers/handleDate";
 import { joinChatRoom } from "@/lib/api/chat/chat.client";
 
 export default function QuickActionsSection({
@@ -52,13 +52,17 @@ export default function QuickActionsSection({
   concertEndDate,
   userData,
   isLiked,
+  isLoggedIn,
+  isChatAvailable,
 }: {
   concertId?: string;
   concertTicketingData?: TicketOffice[] | null;
   concertStartDate?: string;
   concertEndDate?: string;
   userData: User | null;
   isLiked?: boolean;
+  isLoggedIn: boolean;
+  isChatAvailable: boolean;
 }) {
   // 링크 이동
   const router = useRouter();
@@ -105,6 +109,17 @@ export default function QuickActionsSection({
     setAlarmDialogOpen(true);
   };
   const handleOpenChatModal = () => {
+    if (!isLoggedIn) {
+      toast.error("로그인이 필요합니다.");
+      router.push("/sign-in");
+      return;
+    }
+    if (!isChatAvailable) {
+      toast.error("지금은 채팅 가능 기간이 아닙니다.");
+      return;
+    }
+    setChatDialogOpen(true);
+
     setChatDialogOpen(true);
   };
 
@@ -440,8 +455,6 @@ export default function QuickActionsSection({
             <AlertDialogTitle>채팅에 참여하시겠어요?</AlertDialogTitle>
           </AlertDialogHeader>
           <AlertDialogDescription>
-            예매일이 임박한 공연이에요.
-            <br />
             채팅에 참여해 실시간 서버 시간과 다른 이용자들과의 이야기를 함께 나눠보세요.
           </AlertDialogDescription>
           <AlertDialogFooter>