refactor: 모든 페이지 기능 보안 및 리팩토링

design-system/stories/ChoiceChip.stories.tsx

@@ -29,7 +29,10 @@ export default meta;
 export const TwoOptions: Story = {
   args: {
     label: '',
-    options: ['선착순', '주최자 선별'],
+    options: [
+      { label: '선착순', value: 'FIRST_COME' },
+      { label: '주최자 선별', value: 'SELECTION' },
+    ],
     onSelect: (selected: string) => {
       console.log(`Selected option: ${selected}`);
     },
@@ -39,7 +42,11 @@ export const TwoOptions: Story = {
 export const ThreeOptions: Story = {
   args: {
     label: '',
-    options: ['객관식', '주관식', '여러 개 선택'],
+    options: [
+      { label: '객관식', value: 'MULTIPLE_CHOICE' },
+      { label: '주관식', value: 'SUBJECTIVE' },
+      { label: '여러 개 선택', value: 'MULTI_SELECT' },
+    ],
     onSelect: (selected: string) => {
       console.log(`Selected option: ${selected}`);
     },

design-system/ui/ChoiceChip.tsx

@@ -1,8 +1,8 @@
 import { useEffect, useState } from 'react';
 
 interface ChoiceChipOption {
-  label?: string; // UI에 보여질 한국어
-  value?: string; // 서버에서 오는 값
+  label: string; // UI에 보여질 한국어
+  value: string; // 서버에서 오는 값
 }
 
 interface ChoiceChipProps {
@@ -24,7 +24,7 @@ const ChoiceChip = ({
   buttonClassName = '',
   value,
 }: ChoiceChipProps) => {
-  const [selected, setSelected] = useState(value || options[0]);
+  const [selected, setSelected] = useState<string>(value || options[0].value || '');
 
   useEffect(() => {
     if (value) {

design-system/ui/Profile.tsx

@@ -7,12 +7,21 @@ interface ProfileProps {
   id?: number;
   name?: string;
   profile?: Profile;
+  profileImageUrl?: string;
   className: string;
   onClick?: (id: number) => void;
   children?: React.ReactNode;
 }
 
-const ProfileCircle = ({ id, name, profile = 'userProfile', className = '', onClick, children }: ProfileProps) => {
+const ProfileCircle = ({
+  id,
+  name,
+  profile = 'userProfile',
+  profileImageUrl,
+  className = '',
+  onClick,
+  children,
+}: ProfileProps) => {
   const profileClassName = profile === 'userProfile' ? `bg-main ${className}` : `bg-gray4 ${className}`;
 
   // 기존 userProfile 크기: lg:w-10 lg:h-10 md:h-9 md:w-9 sm:h-8 sm:w-8 lg:text-sm md:text-xs sm:text-xs
@@ -32,7 +41,13 @@ const ProfileCircle = ({ id, name, profile = 'userProfile', className = '', onCl
     >
       <div className="flex items-center">
         <div className={`${profileClassName}  flex items-center justify-center rounded-full`}>
-          {profile === 'userProfile' && name && <span className="font-bold text-white">{name}</span>}
+          {profileImageUrl ? (
+            <img src={profileImageUrl} alt="프로필 이미지" className="object-cover w-full h-full rounded-full" />
+          ) : (
+            <div className={`${profileClassName} flex items-center justify-center rounded-full w-full h-full`}>
+              {profile === 'userProfile' && name && <span className="font-bold text-white">{name}</span>}
+            </div>
+          )}
         </div>
         {children && <span className="ml-2 text-black">{children}</span>}
       </div>

design-system/ui/textFields/MultilineTextField.tsx

@@ -6,6 +6,8 @@ interface MultilineTextFieldProps {
   value?: string;
   onChange?: (e: React.ChangeEvent<HTMLTextAreaElement>) => void;
   onKeyDown?: (e: React.KeyboardEvent<HTMLTextAreaElement>) => void;
+  onCompositionStart?: (e: React.CompositionEvent<HTMLTextAreaElement>) => void;
+  onCompositionEnd?: (e: React.CompositionEvent<HTMLTextAreaElement>) => void;
   disabled?: boolean;
   placeholder?: string;
   className?: string;
@@ -20,6 +22,8 @@ const MultilineTextField = forwardRef<HTMLTextAreaElement, MultilineTextFieldPro
       value,
       onChange,
       onKeyDown,
+      onCompositionStart,
+      onCompositionEnd,
       disabled = false,
       placeholder = '',
       className = '',
@@ -39,6 +43,8 @@ const MultilineTextField = forwardRef<HTMLTextAreaElement, MultilineTextFieldPro
           value={value}
           onChange={onChange}
           onKeyDown={onKeyDown}
+          onCompositionStart={onCompositionStart}
+          onCompositionEnd={onCompositionEnd}
           disabled={disabled}
           placeholder={placeholder}
           {...rest}

src/entities/event/hook/useEventHook.ts

@@ -12,7 +12,7 @@ const useEventDetail = () => {
   const { data } = useQuery({
     queryKey: ['eventDetail', eventId],
     queryFn: () => eventDetail({ eventId, userId: user?.id }),
-    enabled: !!user?.id,
+    enabled: !!user?.id && !!eventId,
   });
 
   return { data };

src/entities/event/hook/useEventListHook.ts

@@ -1,4 +1,4 @@
-import { EventList } from '../../../features/event/event-list/model/eventList';
+import { EventList } from '../../../features/event/model/event';
 import { useInfiniteScroll } from '../../../shared/hooks/useInfiniteScroll';
 import { getAllEventsInfinite } from '../api/eventDetail';
 

src/features/event/lib/stripHtml.ts

@@ -0,0 +1,7 @@
+const stripHtml = (html: string): string => {
+  const tmp = document.createElement('div');
+  tmp.innerHTML = html;
+  return tmp.textContent || tmp.innerText || '';
+};
+
+export default stripHtml;

src/features/event/ui/DatePicker.tsx

@@ -3,6 +3,7 @@ import DatePicker from 'react-datepicker';
 import { ko } from 'date-fns/locale';
 import 'react-datepicker/dist/react-datepicker.css';
 import { FunnelState } from '../model/FunnelContext';
+import { formatISO } from '../../../shared/lib/date';
 
 interface DatePickerProps {
   className?: string;
@@ -25,8 +26,11 @@ const EventDatePicker = ({
   onEndDateChange,
   isLabel = false,
 }: DatePickerProps) => {
-  const [startDate, setStartDate] = useState<Date | null>(null);
-  const [endDate, setEndDate] = useState<Date | null>(null);
+  const [startDate, setStartDate] = useState<Date | null>(
+    eventState?.startDate ? new Date(eventState.startDate) : new Date()
+  );
+  const [endDate, setEndDate] = useState<Date | null>(eventState?.endDate ? new Date(eventState.endDate) : new Date());
+
   const [startTime, setStartTime] = useState<string>('06:00');
   const [endTime, setEndTime] = useState<string>('23:00');
 
@@ -67,17 +71,8 @@ const EventDatePicker = ({
 
   useEffect(() => {
     if (startDate && endDate) {
-      const [startHour, startMin] = startTime.split(':').map(Number);
-      const [endHour, endMin] = endTime.split(':').map(Number);
-
-      const start = new Date(startDate);
-      start.setHours(startHour, startMin, 0, 0);
-
-      const end = new Date(endDate);
-      end.setHours(endHour, endMin, 0, 0);
-
-      const startISO = new Date(start.getTime() + 9 * 60 * 60 * 1000).toISOString();
-      const endISO = new Date(end.getTime() + 9 * 60 * 60 * 1000).toISOString();
+      const startISO = formatISO(startDate, startTime);
+      const endISO = formatISO(endDate, endTime);
 
       if (setEventState) {
         setEventState(prev => ({
@@ -109,6 +104,7 @@ const EventDatePicker = ({
               onChange={(date: Date | null) => setStartDate(date)}
               locale={ko}
               dateFormat="MM월 dd일"
+              autoComplete="off"
               className="w-20 h-9 md:w-24 md:h-10 border border-placeholderText text-sm md:text-md rounded-[5px] p-2"
               renderCustomHeader={({
                 date,
@@ -156,6 +152,7 @@ const EventDatePicker = ({
               onChange={(date: Date | null) => setEndDate(date)}
               locale={ko}
               dateFormat="MM월 dd일"
+              autoComplete="off"
               className="w-20 h-9 md:w-24 md:h-10 border border-placeholderText text-sm md:text-md rounded-[5px] p-2"
               renderCustomHeader={({
                 date,

src/features/event/ui/EventTag.tsx

@@ -9,6 +9,7 @@ interface EventTagProps {
 
 const EventTag = ({ eventState, setEventState }: EventTagProps) => {
   const [inputValue, setInputValue] = useState('');
+  const [isComposing, setIsComposing] = useState(false);
   const MAX_TAGS = 5;
 
   const handleInputChange = (e: ChangeEvent<HTMLTextAreaElement>) => {
@@ -18,7 +19,7 @@ const EventTag = ({ eventState, setEventState }: EventTagProps) => {
   const hashtags = eventState?.hashtags || [];
 
   const handleKeyDown = (e: KeyboardEvent<HTMLTextAreaElement>) => {
-    if (e.key === 'Enter' && inputValue.trim()) {
+    if (e.key === 'Enter' && !isComposing && inputValue.trim()) {
       e.preventDefault();
 
       if (hashtags.length >= MAX_TAGS) {
@@ -57,6 +58,8 @@ const EventTag = ({ eventState, setEventState }: EventTagProps) => {
           value={inputValue}
           onChange={handleInputChange}
           onKeyDown={handleKeyDown}
+          onCompositionStart={() => setIsComposing(true)} // ✅ 한글 조합 시작
+          onCompositionEnd={() => setIsComposing(false)}
           placeholder="엔터를 이용해 태그를 입력하세요"
           className="w-full h-40"
           disabled={hashtags.length >= MAX_TAGS}

src/features/event/ui/FileUpload.tsx

@@ -1,7 +1,6 @@
 import FileUploadImage from '../../../../public/assets/event-manage/creation/FileUpload.svg';
-import { useEffect, useRef, useState } from 'react';
-import { uploadFile } from '../hooks/usePresignedUrlHook';
 import { FunnelState } from '../model/FunnelContext';
+import useImageUpload from '../../../shared/hooks/useImageUpload';
 
 interface FileUploadProps {
   value?: string;
@@ -10,62 +9,13 @@ interface FileUploadProps {
 }
 
 const FileUpload = ({ value, onChange, setEventState }: FileUploadProps) => {
-  const [isDragging, setIsDragging] = useState(false);
-  const [previewUrl, setPreviewUrl] = useState<string | null>(null);
-  const fileInputRef = useRef<HTMLInputElement>(null);
-
-  const handleFileUpload = async (file: File) => {
-    if (file.size > 500 * 1024) {
-      alert('파일 크기는 500KB를 초과할 수 없습니다.');
-      return;
-    }
-
-    if (!['image/jpg', 'image/jpeg', 'image/png'].includes(file.type)) {
-      alert('jpg, jpeg, png 파일만 업로드 가능합니다.');
-      return;
-    }
-
-    try {
-      const imageUrl = await uploadFile(file);
-      setPreviewUrl(imageUrl);
-      onChange?.(imageUrl);
-      if (setEventState) {
-        setEventState(prev => ({ ...prev, bannerImageUrl: imageUrl }));
-      }
-    } catch (error) {
-      console.error('파일 업로드 실패:', error);
-    }
-  };
-
-  const handleDragOver = (e: React.DragEvent) => {
-    e.preventDefault();
-    setIsDragging(true);
-  };
-
-  const handleDragLeave = (e: React.DragEvent) => {
-    e.preventDefault();
-    setIsDragging(false);
-  };
-
-  const handleDrop = (e: React.DragEvent) => {
-    e.preventDefault();
-    setIsDragging(false);
-    const file = e.dataTransfer.files[0];
-    if (file) handleFileUpload(file);
-  };
-
-  const handleClick = () => {
-    fileInputRef.current?.click();
-  };
-
-  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const file = e.target.files?.[0];
-    if (file) handleFileUpload(file);
-  };
-
-  useEffect(() => {
-    if (value) setPreviewUrl(value);
-  }, [value]);
+  const { previewUrl, fileInputRef, handleFileChange, handleDrop, setIsDragging, isDragging } = useImageUpload({
+    value, // 서버에서 받아온 기본 이미지
+    onSuccess: url => {
+      onChange?.(url);
+      setEventState?.(prev => ({ ...prev, bannerImageUrl: url }));
+    },
+  });
 
   return (
     <div className="flex flex-col justify-start gap-1">
@@ -75,10 +25,16 @@ const FileUpload = ({ value, onChange, setEventState }: FileUploadProps) => {
         className={`flex flex-col items-center justify-center h-44 border border-dashed ${
           isDragging ? 'border-main bg-dropdown' : 'border-placeholderText bg-gray3'
         } rounded-[10px] mb-4 cursor-pointer`}
-        onDragOver={handleDragOver}
-        onDragLeave={handleDragLeave}
+        onDragOver={e => {
+          e.preventDefault();
+          setIsDragging(true);
+        }}
+        onDragLeave={e => {
+          e.preventDefault();
+          setIsDragging(false);
+        }}
         onDrop={handleDrop}
-        onClick={handleClick}
+        onClick={() => fileInputRef.current?.click()}
       >
         <input
           type="file"

src/features/event/ui/ShareEventModal.tsx

@@ -1,26 +1,28 @@
-import profile from '../../../../public/assets/banners/1.png';
 import link from '../../../../public/assets/event-manage/details/Link.svg';
 import kakao from '../../../../public/assets/event-manage/details/KaKao.svg';
 import { shareToKakao } from '../../../shared/lib/kakaoShare';
+import stripHtml from '../lib/stripHtml';
 
 interface ShareEventModalProps {
   closeModal: () => void;
-  eventName: string;
+  title: string;
   eventDescription?: string;
   eventImageUrl?: string;
   eventUrl?: string;
 }
 
 const ShareEventModal = ({
   closeModal,
-  eventName,
+  title,
   eventDescription = '',
   eventImageUrl = '',
   eventUrl = window.location.href,
 }: ShareEventModalProps) => {
+  const description = stripHtml(eventDescription);
+
   const handleKakaoShare = async () => {
     try {
-      await shareToKakao(eventName, eventDescription, eventImageUrl, eventUrl);
+      await shareToKakao(title, description, eventImageUrl, eventUrl);
     } catch (error) {
       console.error('카카오 공유 실패:', error);
       alert('카카오 공유하기에 실패했습니다.');
@@ -69,8 +71,8 @@ const ShareEventModal = ({
         </div>
         <h1 className="font-semibold text-xl text-center mb-6">공유하기</h1>
         <div className="flex items-center gap-5 mb-8">
-          <img src={profile} alt="프로필 사진" className="w-20 h-20 rounded-[5px]" />
-          <span className="font-semibold text-lg">{eventName}</span>
+          <img src={eventImageUrl} alt="프로필 사진" className="w-20 h-20 rounded-[5px]" />
+          <span className="font-semibold text-lg">{title}</span>
         </div>
         <div className="flex flex-col gap-4 py-3">
           <div onClick={handleCopyLink} className="flex items-center gap-4 cursor-pointer">

src/features/home/ui/EventSliderSection.tsx

@@ -31,12 +31,12 @@ const EventSliderSection = ({ title, events }: EventSliderSectionProps) => {
   const eventsToShow =
     events.length > 0
       ? events
-        .slice(startIndex, startIndex + maxCardsToShow)
-        .concat(
-          startIndex + maxCardsToShow > events.length
-            ? events.slice(0, (startIndex + maxCardsToShow) % events.length)
-            : []
-        )
+          .slice(startIndex, startIndex + maxCardsToShow)
+          .concat(
+            startIndex + maxCardsToShow > events.length
+              ? events.slice(0, (startIndex + maxCardsToShow) % events.length)
+              : []
+          )
       : [];
   return (
     <div className="relative w-full px-6">
@@ -55,7 +55,7 @@ const EventSliderSection = ({ title, events }: EventSliderSectionProps) => {
                 dDay={event.remainDays}
                 host={event.hostChannelName}
                 eventDate={event.startDate}
-                location={event.address}
+                location={event.onlineType}
                 hashtags={event.hashtags}
                 onClick={() => navigate(`/event-details/${event.id}`)}
               />