🚀 deploy: 최종 배포!

env.d.ts

@@ -2,6 +2,7 @@ interface ImportMetaEnv {
   readonly NEXT_PUBLIC_API_BASE_URL: string;
   readonly NEXT_PUBLIC_OAUTH_APP_KEY: string;
   readonly NEXT_PUBLIC_APP_URL: string;
+  readonly NEXT_PUBLIC_KAKAO_MAP_KEY: string;
 }
 
 interface ImportMeta {

src/api/types/activities.ts

@@ -154,7 +154,7 @@ export interface ActivityRegisterPayload {
   price: number;
   bannerImageUrl: string;
   subImageUrls: string[];
-  schedule: ActivityRegisterSchedule[];
+  schedules: ActivityRegisterSchedule[];
 }
 
 export interface ActivityRegisterSchedule {

src/api/types/myActivities.ts

@@ -1,20 +1,24 @@
 // refactoring 필요
-export type Category =
-  | '문화 · 예술'
-  | '식음료'
-  | '스포츠'
-  | '투어'
-  | '관광'
-  | '웰빙';
+export const CATEGORY = [
+  '문화 · 예술',
+  '식음료',
+  '스포츠',
+  '투어',
+  '관광',
+  '웰빙',
+] as const;
+export type Category = (typeof CATEGORY)[number];
 
 // refactoring 필요
 // ReservationResponse, ReservationWithActivityResponse 에 사용
-export type ReservationStatus =
-  | 'pending'
-  | 'confirmed'
-  | 'declined'
-  | 'canceled'
-  | 'completed';
+export const RESERVATION_STATUS = [
+  'pending',
+  'confirmed',
+  'declined',
+  'canceled',
+  'completed',
+] as const;
+export type ReservationStatus = (typeof RESERVATION_STATUS)[number];
 
 // refactoring 필요
 export interface CreateScheduleBody {

src/app/[activityId]/_components/ActivityDescription.tsx

@@ -1,22 +1,15 @@
 'use client';
 
 import { useActivityDescription } from '@/app/[activityId]/_hooks/useActivityDescription';
-import {
-  getImageColumnWrapperClass,
-  getImageContainerClass,
-  getSubImageClass,
-} from '@/app/[activityId]/_utils/getImageClass';
 
 type Props = {
   activityId: number;
 };
 
 export default function ActivityDescription({ activityId }: Props) {
-  const { description, bannerImageUrl, subImages, errorMessage, isLoading } =
+  const { description, isLoading, errorMessage } =
     useActivityDescription(activityId);
 
-  const isSingleSubImage = subImages.length === 1;
-
   if (isLoading) {
     return (
       <div className='border-primary-500 size-50 animate-spin rounded-full border-2 border-t-transparent' />
@@ -28,50 +21,7 @@ export default function ActivityDescription({ activityId }: Props) {
   }
 
   return (
-    <section className='my-40 flex flex-col gap-24'>
-      <div className='flex w-full gap-12'>
-        {bannerImageUrl && (
-          <div className={getImageContainerClass(isSingleSubImage)}>
-            <img
-              alt='배너 이미지'
-              className='h-full w-full rounded-tl-[24px] rounded-bl-[24px] object-cover'
-              src={bannerImageUrl}
-            />
-          </div>
-        )}
-
-        <div
-          className={`flex ${getImageColumnWrapperClass(isSingleSubImage)} flex-col gap-12`}
-        >
-          {subImages[0] && (
-            <div className='aspect-[6/3] flex-1 overflow-hidden'>
-              <img
-                alt='서브 이미지 1'
-                className={getSubImageClass({
-                  isSingle: isSingleSubImage,
-                  isFirst: true,
-                  isLast: subImages.length === 1,
-                })}
-                src={subImages[0]}
-              />
-            </div>
-          )}
-          {subImages[1] && !isSingleSubImage && (
-            <div className='aspect-[6/3] flex-1 overflow-hidden'>
-              <img
-                alt='서브 이미지 2'
-                className={getSubImageClass({
-                  isSingle: false,
-                  isFirst: false,
-                  isLast: true,
-                })}
-                src={subImages[1]}
-              />
-            </div>
-          )}
-        </div>
-      </div>
-
+    <section className='flex flex-col gap-24'>
       <div className='md:txt-18_B txt-16_B'>체험 설명</div>
       <p className='txt-16_M whitespace-pre-line text-gray-950'>
         {description}

src/app/[activityId]/_components/ActivityDetailImage.tsx

@@ -0,0 +1,109 @@
+'use client';
+
+import FallbackImage from '@/app/[activityId]/_components/FallbackImage';
+import { useActivityDescription } from '@/app/[activityId]/_hooks/useActivityDescription';
+import {
+  getImageColumnWrapperClass,
+  getSubImageClass,
+} from '@/app/[activityId]/_utils/getImageClass';
+
+type Props = {
+  activityId: number;
+};
+
+export default function ActivityDetailImage({ activityId }: Props) {
+  const { bannerImageUrl, subImages, errorMessage, isLoading } =
+    useActivityDescription(activityId);
+
+  const isSingleSubImage = subImages.length === 1;
+
+  if (isLoading) {
+    return (
+      <div className='border-primary-500 size-50 animate-spin rounded-full border-2 border-t-transparent' />
+    );
+  }
+
+  if (errorMessage) {
+    return <div className='text-center text-red-500'>{errorMessage}</div>;
+  }
+
+  const showOnlyFallbackImage =
+    !bannerImageUrl && (!subImages || subImages.length === 0);
+
+  return (
+    <section className='flex w-full gap-12'>
+      {showOnlyFallbackImage ? (
+        <div className='aspect-[6/3] w-full overflow-hidden rounded-[24px]'>
+          <FallbackImage
+            alt='기본 이미지'
+            className='h-full w-full object-cover'
+            src=''
+          />
+        </div>
+      ) : (
+        <>
+          {/* 배너 이미지 */}
+          {bannerImageUrl && (
+            <div
+              className={`aspect-[6/3] overflow-hidden ${
+                subImages.length === 0 ? 'w-full' : 'w-1/2'
+              }`}
+            >
+              <FallbackImage
+                alt='배너 이미지'
+                className={`h-full w-full rounded-tl-[24px] object-cover ${
+                  subImages.length === 0
+                    ? 'rounded-tr-[24px] rounded-br-[24px] rounded-bl-[24px]'
+                    : 'rounded-bl-[24px]'
+                }`}
+                src={bannerImageUrl}
+              />
+            </div>
+          )}
+
+          {/* 서브 이미지 */}
+          {subImages.length > 0 && (
+            <div
+              className={`flex flex-col gap-12 ${getImageColumnWrapperClass(
+                isSingleSubImage,
+              )}`}
+            >
+              {subImages[0] && (
+                <div
+                  className={`${
+                    isSingleSubImage
+                      ? 'h-full flex-1 overflow-hidden'
+                      : 'aspect-[6/3] flex-1 overflow-hidden'
+                  }`}
+                >
+                  <FallbackImage
+                    alt='서브 이미지 1'
+                    className={getSubImageClass({
+                      isSingle: isSingleSubImage,
+                      isFirst: true,
+                      isLast: subImages.length === 1,
+                    })}
+                    src={subImages[0]}
+                  />
+                </div>
+              )}
+              {subImages[1] && !isSingleSubImage && (
+                <div className='aspect-[6/3] flex-1 overflow-hidden'>
+                  <FallbackImage
+                    alt='서브 이미지 2'
+                    className={getSubImageClass({
+                      isSingle: false,
+                      isFirst: false,
+                      isLast: true,
+                    })}
+                    src={subImages[1]}
+                  />
+                </div>
+              )}
+            </div>
+          )}
+        </>
+      )}
+    </section>
+  );
+}

src/app/[activityId]/_components/ActivityReviews.tsx

@@ -23,7 +23,8 @@ export default function ActivityReviews({ activityId }: Props) {
   } = useActivityReviews({ activityId });
 
   const getRatingText = (rating: number) => {
-    if (rating >= 0 && rating <= 1) return '매우 불만족';
+    if (rating === 0) return '평점이 아직 없습니다.';
+    if (rating > 0 && rating <= 1) return '매우 불만족';
     if (rating > 1 && rating <= 2) return '불만족';
     if (rating > 2 && rating <= 3) return '보통';
     if (rating > 3 && rating <= 4) return '만족';
@@ -32,7 +33,7 @@ export default function ActivityReviews({ activityId }: Props) {
   };
 
   return (
-    <div className='my-40'>
+    <div className='py-40'>
       <div className='txt-16_B md:txt-18_B flex flex-row gap-10 leading-19 md:leading-21'>
         체험 후기
         <span className='md:txt-16_B txt-14_M leading-20 font-semibold text-gray-500 md:leading-20'>

src/app/[activityId]/_components/ActivitySummary.tsx

@@ -71,15 +71,15 @@ export default function ActivitySummary({ activityId }: Props) {
   const { averageRating, totalCount } = review;
 
   return (
-    <section className='relative my-20 flex flex-col gap-6 md:my-40'>
+    <section className='relative flex flex-col gap-6'>
       {isMyActivity && (
         <div className='absolute top-0 right-0'>
           <DropDown
             items={[
               {
                 text: '수정하기',
                 onClick: () =>
-                  router.push(`/mypage/add-activity?id={activityId}`),
+                  router.push(`/mypage/add-activity?id=${activityId}`),
               },
               {
                 text: '삭제하기',
@@ -121,6 +121,7 @@ export default function ActivitySummary({ activityId }: Props) {
       {isModalOpen && (
         <div className='fixed inset-0 z-50 flex items-center justify-center bg-black/50'>
           <WarningContent
+            confirmText='삭제하기'
             message='체험을 삭제하시겠습니까?'
             variant='warning'
             onCancel={() => setIsModalOpen(false)}

src/app/[activityId]/_components/FallbackImage.tsx

@@ -0,0 +1,30 @@
+import { SyntheticEvent } from 'react';
+
+type FallbackImageProps = {
+  src?: string;
+  alt: string;
+  className?: string;
+  fallbackSrc?: string; // 커스텀 fallback 이미지도 허용
+};
+
+export default function FallbackImage({
+  src,
+  alt,
+  className,
+  fallbackSrc = '/images/logo-lg.png',
+}: FallbackImageProps) {
+  const handleError = (e: SyntheticEvent<HTMLImageElement, Event>) => {
+    const target = e.currentTarget;
+    target.src = fallbackSrc;
+  };
+
+  return (
+    <img
+      alt={alt}
+      className={className}
+      draggable={false}
+      src={src || fallbackSrc}
+      onError={handleError}
+    />
+  );
+}