feat: 호스트 API 연동

design-system/ui/buttons/IconButton.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 
 export interface IconButtonProps {
   iconPath: React.ReactElement;
-  onClick: () => void;
+  onClick: (event: React.MouseEvent<HTMLButtonElement>) => void;
   size?: 'small' | 'medium' | 'large';
 }
 

design-system/ui/textFields/DefaultTextField.tsx

@@ -11,6 +11,7 @@ interface DefaultTextFieldProps {
   onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
   onKeyDown?: (e: KeyboardEvent<HTMLInputElement>) => void;
   placeholder?: string;
+  errorMessage?: string;
   className?: string;
   labelClassName?: string;
 }
@@ -28,6 +29,7 @@ const DefaultTextField = forwardRef<HTMLInputElement, DefaultTextFieldProps>(
       placeholder = '',
       className = '',
       labelClassName = '',
+      errorMessage,
       ...rest
     },
     ref
@@ -45,10 +47,13 @@ const DefaultTextField = forwardRef<HTMLInputElement, DefaultTextFieldProps>(
             onKeyDown={onKeyDown}
             placeholder={placeholder}
             {...rest}
-            className={`w-full border border-placeholderText rounded-[3px] px-2 py-1 outline-none placeholder:text-placeholderText text-xs font-light resize-none ${className}`}
+            className={`w-full border border-placeholderText rounded-[3px] px-2 py-1 outline-none placeholder:text-placeholderText text-xs font-light resize-none ${className} ${
+              errorMessage ? 'border-red-500' : ''
+            }`}
           />
           {rightContent && <div className="ml-3">{rightContent}</div>}
         </div>
+        {errorMessage && <p className="absolute px-1 text-10 md:text-xs text-red-500">{errorMessage}</p>}
       </div>
     );
   }

design-system/ui/textFields/MultilineTextField.tsx

@@ -9,10 +9,25 @@ interface MultilineTextFieldProps {
   disabled?: boolean;
   placeholder?: string;
   className?: string;
+  errorMessage?: string;
 }
 
 const MultilineTextField = forwardRef<HTMLTextAreaElement, MultilineTextFieldProps>(
-  ({ label, detail, value, onChange, onKeyDown, disabled = false, placeholder = '', className = '', ...rest }, ref) => {
+  (
+    {
+      label,
+      detail,
+      value,
+      onChange,
+      onKeyDown,
+      disabled = false,
+      placeholder = '',
+      className = '',
+      errorMessage,
+      ...rest
+    },
+    ref
+  ) => {
     return (
       <div className={`${className}`}>
         <label className="block px-1 font-semibold text-base lg:text-lg md:mb-2">{label}</label>
@@ -27,8 +42,11 @@ const MultilineTextField = forwardRef<HTMLTextAreaElement, MultilineTextFieldPro
           disabled={disabled}
           placeholder={placeholder}
           {...rest}
-          className={`w-full h-full border border-placeholderText rounded-[3px] px-2 py-1 outline-none placeholder:text-placeholderText text-xs font-light resize-none`}
+          className={`w-full h-full border border-placeholderText rounded-[3px] px-2 py-1 outline-none placeholder:text-placeholderText text-xs font-light resize-none ${
+            errorMessage ? 'border-red-500' : ''
+          }`}
         />
+        {errorMessage && <p className="absolute px-1 text-10 md:text-xs text-red-500">{errorMessage}</p>}
       </div>
     );
   }

package.json

@@ -19,6 +19,7 @@
     "axios": "^1.8.1",
     "date-fns": "^4.1.0",
     "framer-motion": "^12.4.7",
+    "js-cookie": "^3.0.5",
     "lodash": "^4.17.21",
     "postcss": "^8.4.49",
     "react": "^18.3.1",
@@ -47,6 +48,7 @@
     "@storybook/react": "^8.4.6",
     "@storybook/react-vite": "^8.4.6",
     "@storybook/test": "^8.4.6",
+    "@types/js-cookie": "^3.0.6",
     "@types/lodash": "^4.17.13",
     "@types/node": "^22.10.5",
     "@types/react": "^18.3.12",

src/app/provider/authStore.ts

@@ -0,0 +1,15 @@
+import { create } from 'zustand';
+
+interface AuthStore {
+  isModalOpen: boolean;
+  openModal: () => void;
+  closeModal: () => void;
+}
+
+const useAuthStore = create<AuthStore>(set => ({
+  isModalOpen: false,
+  openModal: () => set({ isModalOpen: true }),
+  closeModal: () => set({ isModalOpen: false }),
+}));
+
+export default useAuthStore;

src/features/event-manage/event-create/api/eventCreation.ts → src/features/event-manage/event-create/api/event.ts

@@ -1,8 +1,7 @@
 import { axiosClient } from '../../../../shared/types/api/http-client';
 import { CreateEventRequest } from '../model/eventCreation';
 
-const createEvent = async (data: CreateEventRequest) => {
+export const createEvent = async (data: CreateEventRequest) => {
   const response = await axiosClient.post('/events', data);
   return response.data;
 };
-export default createEvent;

src/features/event-manage/event-create/api/host.ts

@@ -0,0 +1,12 @@
+import { axiosClient } from '../../../../shared/types/api/http-client';
+import { HostCreationRequest } from '../model/hostCreation';
+
+export const createHost = async (data: HostCreationRequest) => {
+  const response = await axiosClient.post('/host-channels', data);
+  return response.data;
+};
+
+export const deleteHost = async (hostChannelId: number) => {
+  const response = await axiosClient.delete(`/host-channels/${hostChannelId}`);
+  return response.data;
+};

src/features/event-manage/event-create/hooks/useEventCreationHook.ts → src/features/event-manage/event-create/hooks/useEventHook.ts

@@ -1,14 +1,13 @@
 import { AxiosError } from 'axios';
 import { ApiResponse } from '../../../../shared/types/api/apiResponse';
-import createEvent from '../api/eventCreation';
+import { createEvent } from '../api/event';
 import { CreateEventRequest } from '../model/eventCreation';
 import { useMutation } from '@tanstack/react-query';
 
-const useEventCreation = () => {
+export const useEventCreation = () => {
   return useMutation<ApiResponse<null>, AxiosError, CreateEventRequest>({
     mutationFn: async (requestBody: CreateEventRequest) => {
       return await createEvent(requestBody);
     },
   });
 };
-export default useEventCreation;

src/features/event-manage/event-create/hooks/useHostHook.ts

@@ -0,0 +1,20 @@
+import { useMutation } from '@tanstack/react-query';
+import { createHost, deleteHost } from '../api/host';
+import { HostCreationRequest } from '../model/hostCreation';
+import { ApiResponse } from '../../../../shared/types/api/apiResponse';
+
+export const useHostCreation = () => {
+  return useMutation<ApiResponse<null>, Error, HostCreationRequest>({
+    mutationFn: async (requestBody: HostCreationRequest) => {
+      return await createHost(requestBody);
+    },
+  });
+};
+
+export const useHostDeletion = () => {
+  return useMutation<ApiResponse<null>, Error, number>({
+    mutationFn: async (hostChannelId: number) => {
+      return await deleteHost(hostChannelId);
+    },
+  });
+};

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

@@ -1,34 +1,53 @@
 import React, { createContext, ReactNode, useContext, useState } from 'react';
 import { CreateEventRequest } from './eventCreation';
+import { HostCreationRequest } from './hostCreation';
 
 export interface FunnelState {
-  formState: CreateEventRequest;
-  setFormState: React.Dispatch<React.SetStateAction<FunnelState['formState']>>;
+  hostState: HostCreationRequest;
+  eventState: CreateEventRequest;
+  setHostState: React.Dispatch<React.SetStateAction<FunnelState['hostState']>>;
+  setEventState: React.Dispatch<React.SetStateAction<FunnelState['eventState']>>;
+  setHostChannelId: (hostChannelId: number) => void;
 }
 
 const FunnelContext = createContext<FunnelState | undefined>(undefined);
 
 export const FunnelProvider = ({ children }: { children: ReactNode }) => {
-  const [formState, setFormState] = useState<FunnelState['formState']>({
+  const [hostState, setHostState] = useState<FunnelState['hostState']>({
+    profileImageUrl: '',
+    hostChannelName: '',
+    hostEmail: '',
+    channelDescription: '',
+  });
+
+  const [eventState, setEventState] = useState<FunnelState['eventState']>({
     hostChannelId: 0,
     title: '',
     startDate: '',
-    startTime: '',
     endDate: '',
+    startTime: '',
     endTime: '',
-    organizerEmail: '',
-    organizerPhoneNumber: '',
     bannerImageUrl: '',
     description: '',
     referenceLinks: [],
     onlineType: 'ONLINE',
     address: '',
-    location: { lat: 37.5665, lng: 126.978 },
+    location: { lat: 0.0, lng: 0.0 },
     category: '',
     hashtags: [],
+    organizerEmail: '',
+    organizerPhoneNumber: '',
   });
 
-  return <FunnelContext.Provider value={{ formState, setFormState }}>{children}</FunnelContext.Provider>;
+  const setHostChannelId = (hostChannelId: number) => {
+    setEventState(prev => ({ ...prev, hostChannelId }));
+  };
+
+  return (
+    <FunnelContext.Provider value={{ hostState, eventState, setHostState, setEventState, setHostChannelId }}>
+      {children}
+    </FunnelContext.Provider>
+  );
 };
 
 export const useFunnelState = () => {

src/features/event-manage/event-create/model/hostCreation.ts

@@ -0,0 +1,6 @@
+export interface HostCreationRequest {
+  profileImageUrl: string;
+  hostChannelName: string;
+  hostEmail: string;
+  channelDescription: string;
+}

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

@@ -6,18 +6,18 @@ import { FunnelState } from '../model/FunnelContext';
 
 interface DatePickerProps {
   className?: string;
-  formState?: FunnelState['formState'];
-  setFormState?: React.Dispatch<React.SetStateAction<FunnelState['formState']>>;
+  eventState?: FunnelState['eventState'];
+  setEventState?: React.Dispatch<React.SetStateAction<FunnelState['eventState']>>;
   isLabel?: boolean;
 }
 
-const EventDatePicker = ({ className, formState, setFormState, isLabel = false }: DatePickerProps) => {
+const EventDatePicker = ({ className, eventState, setEventState, isLabel = false }: DatePickerProps) => {
   const [startDate, setStartDate] = useState<Date | null>(
-    formState?.startDate ? new Date(formState.startDate) : new Date()
+    eventState?.startDate ? new Date(eventState.startDate) : new Date()
   );
-  const [endDate, setEndDate] = useState<Date | null>(formState?.endDate ? new Date(formState.endDate) : new Date());
-  const [startTime, setStartTime] = useState<string>(formState?.startTime || '06:00');
-  const [endTime, setEndTime] = useState<string>(formState?.endTime || '23:00');
+  const [endDate, setEndDate] = useState<Date | null>(eventState?.endDate ? new Date(eventState.endDate) : new Date());
+  const [startTime, setStartTime] = useState<string>(eventState?.startTime || '06:00');
+  const [endTime, setEndTime] = useState<string>(eventState?.endTime || '23:00');
 
   const generateTimeOptions = () => {
     const options = [];
@@ -42,16 +42,16 @@ const EventDatePicker = ({ className, formState, setFormState, isLabel = false }
   const timeOptions = generateTimeOptions();
 
   useEffect(() => {
-    if (setFormState) {
-      setFormState(prev => ({
+    if (setEventState) {
+      setEventState(prev => ({
         ...prev,
-        startDate: startDate ? formatDate(startDate) : undefined,
-        endDate: endDate ? formatDate(endDate) : undefined,
+        startDate: startDate ? formatDate(startDate) : '',
+        endDate: endDate ? formatDate(endDate) : '',
         startTime,
         endTime,
       }));
     }
-  }, [startDate, endDate, startTime, endTime, setFormState]);
+  }, [startDate, endDate, startTime, endTime, setEventState]);
 
   return (
     <div className={`flex flex-col w-full ${className}`}>

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

@@ -8,11 +8,11 @@ interface Category {
 }
 
 interface EventCategoryProps {
-  formState?: FunnelState['formState'];
-  setFormState?: React.Dispatch<React.SetStateAction<FunnelState['formState']>>;
+  eventState?: FunnelState['eventState'];
+  setEventState?: React.Dispatch<React.SetStateAction<FunnelState['eventState']>>;
 }
 
-const EventCategory = ({ formState, setFormState }: EventCategoryProps) => {
+const EventCategory = ({ eventState, setEventState }: EventCategoryProps) => {
   const [open, setOpen] = useState(false);
 
   const categories: Category[] = [
@@ -23,16 +23,16 @@ const EventCategory = ({ formState, setFormState }: EventCategoryProps) => {
   ];
 
   const [selectedCategory, setSelectedCategory] = useState<Category | null>(
-    formState?.category
-      ? { id: formState.category, name: categories.find(c => c.id === formState.category)?.name || '' }
+    eventState?.category
+      ? { id: eventState.category, name: categories.find(c => c.id === eventState.category)?.name || '' }
       : null
   );
 
   const handleSelect = (category: Category) => {
     setSelectedCategory(category);
     setOpen(false);
-    if (setFormState) {
-      setFormState(prev => ({ ...prev, category: category.id }));
+    if (setEventState) {
+      setEventState(prev => ({ ...prev, category: category.id }));
     }
   };
 
@@ -58,7 +58,7 @@ const EventCategory = ({ formState, setFormState }: EventCategoryProps) => {
                 key={category.id}
                 onClick={() => handleSelect(category)}
                 className={`p-2 cursor-pointer hover:bg-dropdown transition-colors ${
-                  formState?.category === category.id ? 'bg-dropdown' : ''
+                  eventState?.category === category.id ? 'bg-dropdown' : ''
                 }`}
               >
                 {category.name}