fix: 카카오맵 지도 이미지 에러 수정

src/features/event-manage/event-create/model/FunnelContext.tsx

@@ -30,6 +30,7 @@ export const FunnelProvider = ({ children }: { children: ReactNode }) => {
     referenceLinks: [],
     onlineType: 'ONLINE',
     address: '',
+    detailAddress: '',
     locationLat: 0,
     locationLng: 0,
     category: 'DEVELOPMENT_STUDY',

src/features/event-manage/event-create/ui/EventType.tsx

@@ -25,22 +25,25 @@ const EventType = ({ className }: EventTypeProps) => {
     setAddress(address);
     setEventState(prev => ({
       ...prev,
-      address: `${address} ${detailAddress}`.trim(),
+      address,
+      detailAddress,
     }));
   };
 
   const handleDetailAddressChange = (detailAddress: string) => {
     setDetailAddress(detailAddress);
     setEventState(prev => ({
       ...prev,
-      address: `${address} ${detailAddress}`.trim(),
+      address,
+      detailAddress,
     }));
   };
 
-  const handleLocationChange = (lat: number, lng: number) => {
+  const handleLocationChange = (locationLat: number, locationLng: number) => {
     setEventState(prev => ({
       ...prev,
-      location: { lat, lng },
+      locationLat,
+      locationLng,
     }));
   };
 

src/features/event-manage/event-create/ui/LinkInput.tsx

@@ -13,8 +13,6 @@ interface LinkInputProps {
 export interface Link {
   title: string;
   url: string;
-  address: string;
-  detailAddress: string;
 }
 
 const LinkInput = ({ value, onChange, setEventState }: LinkInputProps) => {
@@ -36,8 +34,6 @@ const LinkInput = ({ value, onChange, setEventState }: LinkInputProps) => {
     const newLink = {
       title: '',
       url: '',
-      address: '',
-      detailAddress: '',
     };
     updateAll([...links, newLink]);
   };

src/pages/dashboard/ui/EventDetailPage.tsx

@@ -14,12 +14,14 @@ const EventDetailPage = () => {
   const { data } = useEventDetail();
   const { mutate } = useUpdateEventHook();
 
+  const [hostChannelId, setHostChannelId] = useState<number>(0);
   const [bannerImageUrl, setBannerImageUrl] = useState('');
   const [description, setDescription] = useState('');
   const [referenceLinks, setReferenceLinks] = useState<Link[]>([]);
 
   useEffect(() => {
     if (data?.result) {
+      setHostChannelId(data.result.hostChannelId || 0);
       setBannerImageUrl(data.result.bannerImageUrl || '');
       setDescription(data.result.description || '');
       setReferenceLinks(data.result.referenceLinks || []);
@@ -31,24 +33,22 @@ const EventDetailPage = () => {
 
     const formatData = formatEventRequest(data.result);
 
-    mutate(
-      {
-        ...formatData,
-        bannerImageUrl,
-        description,
-        referenceLinks,
-        hostChannelId: 1,
+    const finalPayload = {
+      ...formatData,
+      hostChannelId,
+      bannerImageUrl,
+      description,
+      referenceLinks: referenceLinks.map(({ title, url }) => ({ title, url })),
+    };
+    mutate(finalPayload, {
+      onSuccess: () => {
+        alert('이벤트 정보가 저장되었습니다.');
+        navigate(`/dashboard/${data?.result.id}`);
       },
-      {
-        onSuccess: () => {
-          alert('이벤트 정보가 저장되었습니다.');
-          navigate(`/dashboard/${data?.result.id}`);
-        },
-        onError: () => {
-          alert('저장에 실패했습니다.');
-        },
-      }
-    );
+      onError: () => {
+        alert('저장에 실패했습니다.');
+      },
+    });
   };
 
   return (

src/pages/dashboard/ui/EventInfoPage.tsx

@@ -3,13 +3,14 @@ import ChoiceChip from '../../../../design-system/ui/ChoiceChip';
 import DefaultTextField from '../../../../design-system/ui/textFields/DefaultTextField';
 import EventDatePicker from '../../../features/event-manage/event-create/ui/DatePicker';
 import DashboardLayout from '../../../shared/ui/backgrounds/DashboardLayout';
-import SearchBar from '../../../shared/ui/SearchBar';
 import { useNavigate } from 'react-router-dom';
 import Button from '../../../../design-system/ui/Button';
 import useEventDetail from '../../../entities/event/hook/useEventHook';
 import { useUpdateEventHook } from '../../../features/dashboard/hook/useEventHook';
 import { formatEventRequest } from '../../../shared/lib/formatEventRequest';
 import { OnlineType } from '../../../shared/types/baseEventType';
+import { AddressSearch } from '../../../shared/ui/AddressSearch';
+import KakaoMap from '../../../shared/ui/KakaoMap';
 
 const EventInfoPage = () => {
   const navigate = useNavigate();
@@ -22,25 +23,39 @@ const EventInfoPage = () => {
   };
 
   // 초기값 세팅을 위한 state
+  const [hostChannelId, setHostChannelId] = useState<number>(0);
   const [title, setTitle] = useState('');
   const [email, setEmail] = useState('');
   const [phone, setPhone] = useState('');
   const [onlineType, setOnlineType] = useState('');
   const [address, setAddress] = useState('');
+  const [detailAddress, setDetailAddress] = useState('');
+  const [locationLat, setLocationLat] = useState<number>(0);
+  const [locationLng, setLocationLng] = useState<number>(0);
 
   const handleSave = () => {
     if (!data?.result.id) return;
 
     const formatData = formatEventRequest(data.result);
 
+    const toIsoDateTime = (date: string, time: string) => {
+      return `${date}T${time}`;
+    };
+
     mutate(
       {
         ...formatData,
+        hostChannelId,
         title,
+        startDate: toIsoDateTime(data.result.startDate, data.result.startTime),
+        endDate: toIsoDateTime(data.result.endDate, data.result.endTime),
         organizerEmail: email,
         organizerPhoneNumber: phone,
         onlineType: selectedOption as OnlineType,
         address,
+        detailAddress,
+        locationLat,
+        locationLng,
       },
       {
         onSuccess: () => {
@@ -54,16 +69,19 @@ const EventInfoPage = () => {
     );
   };
 
-  // 초기 데이터 채우기
   useEffect(() => {
     if (data?.result) {
       const info = data.result;
+      setHostChannelId(data.result.hostChannelId || 0);
       setTitle(info.title);
       setEmail(info.organizerEmail);
       setPhone(info.organizerPhoneNumber);
-      setOnlineType(info.onlineType); // '온라인' or '오프라인'
-      setAddress(info.address);
+      setOnlineType(info.onlineType);
       setSelectedOption(info.onlineType);
+      setAddress(info.address);
+      setDetailAddress(info.detailAddress);
+      setLocationLat(info.locationLat || 0);
+      setLocationLng(info.locationLng || 0);
     }
   }, [data]);
 
@@ -104,9 +122,19 @@ const EventInfoPage = () => {
           value={selectedOption || onlineType}
         />
         {(selectedOption || onlineType) === 'OFFLINE' && (
-          <div className="space-y-2">
+          <div className="space-y-4">
             <h1 className="font-bold text-black text-lg">이벤트는 어디서 진행되나요?</h1>
-            <SearchBar placeholder="장소를 입력하세요." className="w-full" value={address} onChange={setAddress} />
+            <AddressSearch
+              address={address}
+              detailAddress={detailAddress}
+              setAddress={setAddress}
+              onLocationChange={(lat, lng) => {
+                setLocationLat(lat);
+                setLocationLng(lng);
+              }}
+              onDetailAddressChange={setDetailAddress}
+            />
+            {locationLat !== 0 && locationLng !== 0 && <KakaoMap lat={locationLat} lng={locationLng} />}
           </div>
         )}
       </div>

src/shared/lib/formatEventRequest.ts

@@ -4,14 +4,14 @@ export const formatEventRequest = (data: Partial<BaseEvent>): BaseEvent => ({
   title: data.title || '',
   startDate: data.startDate || '',
   endDate: data.endDate || '',
-  startTime: data.startTime || '',
-  endTime: data.endTime || '',
   bannerImageUrl: data.bannerImageUrl || '',
   description: data.description || '',
   referenceLinks: data.referenceLinks || [],
   onlineType: data.onlineType || 'ONLINE',
   address: data.address || '',
-  location: data.location || { lat: 0, lng: 0 },
+  detailAddress: data.detailAddress || '',
+  locationLat: data.locationLat || 0,
+  locationLng: data.locationLng || 0,
   category: data.category || 'DEVELOPMENT_STUDY',
   hashtags: data.hashtags || [],
   organizerEmail: data.organizerEmail || '',

src/shared/types/baseEventType.ts

@@ -13,6 +13,7 @@ export interface BaseEvent {
   }[];
   onlineType: OnlineType;
   address: string;
+  detailAddress: string;
   locationLat: number;
   locationLng: number;
   category: CategoryType;

src/shared/ui/AddressSearch.tsx

@@ -1,19 +1,30 @@
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import DaumPostcode, { Address } from 'react-daum-postcode';
 import SecondaryButton from '../../../design-system/ui/buttons/SecondaryButton';
 
 interface AddressSearchProps {
   address: string;
+  detailAddress?: string;
   setAddress: (address: string) => void;
   onLocationChange?: (lat: number, lng: number) => void;
   onDetailAddressChange?: (detailAddress: string) => void;
 }
 
-export const AddressSearch = ({ address, setAddress, onLocationChange, onDetailAddressChange }: AddressSearchProps) => {
+export const AddressSearch = ({
+  address,
+  detailAddress: initialDetailAddress = '',
+  setAddress,
+  onLocationChange,
+  onDetailAddressChange,
+}: AddressSearchProps) => {
   const [isModalOpen, setIsModalOpen] = useState(false);
   const [postcodeKey, setPostcodeKey] = useState(0);
   const [detailAddress, setDetailAddress] = useState('');
 
+  useEffect(() => {
+    setDetailAddress(initialDetailAddress);
+  }, [initialDetailAddress]);
+
   const handleComplete = (data: Address) => {
     setAddress(data.address);
     if (onLocationChange) {