refactor: 전반적인 기능 및 오류 수정

design-system/ui/modals/QrModal.tsx

@@ -5,7 +5,8 @@ import { flexColumnCenter, flexColumn, flexRowSpaceBetweenCenter } from '../../s
 import qr_calendar from '../../icons/QrCalendar.svg';
 import qr_location from '../../icons/QrLocation.svg';
 import qr_ticket from '../../icons/QrTicket.svg';
-import qr_check from '../../icons/QrCheck.svg';
+import qr_check from '../../../public/assets/menu/completed.svg';
+import qr_pending from '../../../public/assets/menu/pending.svg';
 
 interface QrModalProps {
   isChecked: boolean; // QR 상태
@@ -57,7 +58,17 @@ const QrModal = ({
       <div>
         {iconPath1 && <div className="w-full">{iconPath1}</div>}
         <div className={`ml-[5%] -mt-[180%] ${isChecked ? '' : 'opacity-50'}`}>
-          <img src={`data:image/png;base64,${ticketQrCode}`} alt="QR Code" className="w-60 h-60" />
+          {ticketQrCode ? (
+            <img
+              src={`data:image/png;base64,${ticketQrCode}`}
+              alt="QR Code"
+              className="w-60 h-60"
+            />
+          ) : (
+            <div className="w-60 h-60 flex items-center justify-center bg-deDayBgLight rounded-md border border-deDayTextDark text-deDayTextDark text-sm text-center px-4">
+              주최자의 승인이 완료되면<br /> QR이 발급됩니다.
+            </div>
+          )}
         </div>
         <div className={`${flexColumn} justify-start px-6 ${isChecked ? '' : 'opacity-50'}`}>
           <div className={`${flexRowSpaceBetweenCenter} w-full mt-[22%]`}>
@@ -68,33 +79,33 @@ const QrModal = ({
           <div className="space-y-1 text-deDayTextDark">
             <IconText
               size="xSmall"
-              iconPath={<img src={qr_calendar} alt="qr_calendar" className='mr-1'/>}
+              iconPath={<img src={qr_calendar} alt="qr_calendar" className='mr-1' />}
               children={formattedDate}
               className="text-11"
             ></IconText>
             <IconText
               size="xSmall"
-              iconPath={<img src={qr_location} alt="qr_location" className='mr-1'/>}
+              iconPath={<img src={qr_location} alt="qr_location" className='mr-1' />}
               children={location}
               className="text-11"
             ></IconText>
             <IconText
               size="xSmall"
-              iconPath={<img src={qr_ticket} alt="qr_ticket" className='mr-1'/>}
+              iconPath={<img src={qr_ticket} alt="qr_ticket" className='mr-1' />}
               children={ticketName}
               className="text-11"
             ></IconText>
             <span className="text-sm font-bold">{formattedPrice}원</span>
             <hr />
             <IconText
               size="xSmall"
-              iconPath={<img src={qr_check} alt="qr_check" className='mr-1'/>}
+              iconPath={<img src={orderStatus === 'COMPLETED' ? qr_check : qr_pending} alt="qr_check" className='mr-1' />}
               children={orderStatus === 'COMPLETED' ? '승인됨' : '대기 중'}
               className="text-11"
             ></IconText>
             <IconText
               size="xSmall"
-              iconPath={<img src={qr_check} alt="qr_check" className='mr-1'/>}
+              iconPath={<img src={isCheckIn ? qr_check : qr_pending} alt="qr_check" className='mr-1' />}
               children={isCheckIn ? '체크인 완료' : '체크인 미완료'}
               className="text-11"
             ></IconText>

design-system/ui/textFields/UnderlineTextField.tsx

@@ -1,6 +1,6 @@
-import { ChangeEvent, forwardRef } from 'react';
+import { ChangeEvent, forwardRef, InputHTMLAttributes } from 'react';
 
-interface UnderlineTextFieldProps {
+interface UnderlineTextFieldProps extends InputHTMLAttributes<HTMLInputElement> {
   label: string;
   type?: string;
   value?: string;

design-system/ui/texts/Countdown.tsx

@@ -21,7 +21,10 @@ const Countdown = ({ children, isChecked }: CountdownProps) => {
     border-[0.1px] font-medium ${flexCenter} 
   `;
 
-  return <button className={`${baseStyles} ${isChecked ? activeStyles : inactiveStyles}`}>{children}</button>;
+  const isEnded = children === 'false';
+  const displayText = isEnded ? '종료' : children;
+
+  return <button className={`${baseStyles} ${isChecked && !isEnded ? activeStyles : inactiveStyles}`}>{displayText}</button>
 };
 
 export default Countdown;

src/features/dashboard/ui/ResponsesList.tsx

@@ -63,6 +63,9 @@ const ResponsesList = ({ listType, ticketOptionResponses, ticketId }: ResponsesL
         if (isLoading) return <p>로딩 중...</p>;
         if (error || !data?.result) return <p>데이터를 불러오지 못했습니다.</p>;
         const allOrders = data.result.flatMap(user => user.orders);
+        if (allOrders.length === 0) {
+          return <p className="text-center text-gray-500">응답이 없습니다.</p>;
+        }
         return (
           <IndividualResponseViewer orders={allOrders} currentIndex={currentIndex} setCurrentIndex={setCurrentIndex} />
         );

src/features/event/ui/EventFunnel.tsx

@@ -12,10 +12,11 @@ import { EventFunnelInterface, StepNames } from '../../../shared/types/funnelTyp
 import { useFunnelState } from '../model/FunnelContext';
 import { useEventCreation } from '../hooks/useEventHook';
 import { useHostCreation } from '../../host/hook/useHostHook';
+import { HostCreationRequest } from '../../host/model/host';
 
 const EventFunnel = ({ onNext, onPrev, Funnel, Step, currentStep }: EventFunnelInterface) => {
   const navigate = useNavigate();
-  const { eventState, hostState } = useFunnelState();
+  const { eventState, hostState, setHostState } = useFunnelState();
   const { mutate: createEvent } = useEventCreation();
   const { mutate: createHost } = useHostCreation();
 
@@ -33,10 +34,17 @@ const EventFunnel = ({ onNext, onPrev, Funnel, Step, currentStep }: EventFunnelI
       onNext(nextStep);
     }
   };
+  const initialHostState: HostCreationRequest = {
+    profileImageUrl: '',
+    hostChannelName: '',
+    hostEmail: '',
+    channelDescription: '',
+  };
 
   const handleHostCreation = () => {
     createHost(hostState, {
       onSuccess: () => {
+        setHostState(initialHostState);
         handleNext(String(currentStep - 1));
       },
     });

src/features/event/ui/TextEditor.tsx

@@ -8,31 +8,22 @@ interface TextEditorProps {
   value?: string;
   onChange?: (value: string) => void;
   setEventState?: React.Dispatch<React.SetStateAction<FunnelState['eventState']>>;
+  onValidationChange?: (isValid: boolean) => void;
 }
 
+const MAX_LENGTH = 2000;
+const IMAGE_WEIGHT = 200;
+
 const formats = [
-  'font',
-  'header',
-  'bold',
-  'italic',
-  'underline',
-  'strike',
-  'blockquote',
-  'list',
-  'bullet',
-  'indent',
-  'link',
-  'image',
-  'align',
-  'color',
-  'background',
-  'size',
-  'h1',
+  'font', 'header', 'bold', 'italic', 'underline', 'strike', 'blockquote',
+  'list', 'bullet', 'indent', 'link', 'image', 'align', 'color', 'background',
+  'size', 'h1',
 ];
 
-const TextEditor = ({ value, onChange, setEventState }: TextEditorProps) => {
-  const [content, setContent] = useState('');
+const TextEditor = ({ value = '', onChange, setEventState, onValidationChange }: TextEditorProps) => {
+  const [content, setContent] = useState(value);
   const quillRef = useRef<ReactQuill | null>(null);
+  const [isOverLimit, setIsOverLimit] = useState(false);
 
   const imageHandler = async () => {
     if (!quillRef.current) return;
@@ -58,6 +49,15 @@ const TextEditor = ({ value, onChange, setEventState }: TextEditorProps) => {
       }
     };
   };
+  const getImageCount = (htmlContent: string): number => {
+    const matches = htmlContent.match(/<img [^>]*src="[^"]*"[^>]*>/g);
+    return matches ? matches.length : 0;
+  };
+  const getTotalContentLength = (htmlContent: string): number => {
+    const textLength = getPlainText(htmlContent).length;
+    const imageCount = getImageCount(htmlContent);
+    return textLength + imageCount * IMAGE_WEIGHT;
+  };
 
   const modules = useMemo(
     () => ({
@@ -79,19 +79,38 @@ const TextEditor = ({ value, onChange, setEventState }: TextEditorProps) => {
     }),
     []
   );
+  const getPlainText = (htmlContent: string): string => {
+    return htmlContent.replace(/<[^>]*>/g, '').trim();
+  };
 
   const handleChange = (value: string) => {
-    setContent(value);
-    onChange?.(value);
-    if (setEventState) {
-      setEventState(prev => ({ ...prev, description: value }));
+    const totalLength = getTotalContentLength(value);
+
+    if (totalLength <= MAX_LENGTH) {
+      setContent(value);
+      onChange?.(value);
+      setEventState?.(prev => ({ ...prev, description: value }));
+      onValidationChange?.(getPlainText(value).length > 0);
+      setIsOverLimit(false);
+    } else {
+      const editorInstance = quillRef.current?.getEditor();
+      if (editorInstance) {
+        editorInstance.setContents(editorInstance.clipboard.convert(content));
+      }
+      setIsOverLimit(true);
     }
   };
 
   useEffect(() => {
-    setContent(value ?? '');
+    setContent(value); // 외부 value가 바뀌면 내부에 반영
+    const plainText = getPlainText(value);
+    onValidationChange?.(plainText.length > 0);
   }, [value]);
 
+  const totalLength = getTotalContentLength(content);
+  const imageCount = getImageCount(content);
+
+
   return (
     <div className="flex flex-col justify-start gap-2 mb-4">
       <h1 className="font-bold text-black text-lg">이벤트에 대한 상세 설명</h1>
@@ -104,7 +123,19 @@ const TextEditor = ({ value, onChange, setEventState }: TextEditorProps) => {
         onChange={handleChange}
         className="custom-quill-editor"
       />
+      <div className="flex justify-between items-center mt-1">
+        <p className={`text-sm ${isOverLimit ? 'text-red-500' : 'text-gray-500'}`}>
+          {totalLength} / {MAX_LENGTH}자
+          {imageCount > 0 && ` (이미지 ${imageCount}개 포함)`}
+        </p>
+        {isOverLimit && (
+          <p className="text-sm text-red-500 font-medium">
+            {MAX_LENGTH}자를 초과할 수 없습니다.
+          </p>
+        )}
+      </div>
     </div>
   );
 };
+
 export default TextEditor;

src/features/event/ui/TimePicker.tsx

@@ -3,13 +3,34 @@ import DatePicker from 'react-datepicker';
 import 'react-datepicker/dist/react-datepicker.css';
 
 interface TimePickerProps {
+  value?: string;
   onChange: (datetime: string) => void;
 }
 
-const TimePicker = ({ onChange }: TimePickerProps) => {
-  const [selectedDate, setSelectedDate] = useState<Date | null>(new Date());
-  const [selectedHour, setSelectedHour] = useState<string>('00');
-  const [selectedMinute, setSelectedMinute] = useState<string>('00');
+const parseUtcToKst = (utcString: string): Date => {
+  const utcDate = new Date(utcString);
+  const kstTimestamp = utcDate.getTime() + 9 * 60 * 60 * 1000;
+  return new Date(kstTimestamp);
+};
+
+const TimePicker = ({ value, onChange }: TimePickerProps) => {
+  const initialKstDate = value ? parseUtcToKst(value) : new Date();
+  const [selectedDate, setSelectedDate] = useState<Date | null>(initialKstDate);
+  const [selectedHour, setSelectedHour] = useState<string>(
+    initialKstDate.getHours().toString().padStart(2, '0')
+  );
+  const [selectedMinute, setSelectedMinute] = useState<string>(
+    initialKstDate.getMinutes().toString().padStart(2, '0')
+  );
+
+  useEffect(() => {
+    if (value) {
+      const date = new Date(value);
+      setSelectedDate(date);
+      setSelectedHour(date.getHours().toString().padStart(2, '0'));
+      setSelectedMinute(date.getMinutes().toString().padStart(2, '0'));
+    }
+  }, [value]);
 
   // 날짜, 시간 바뀔 때마다 업데이트
   useEffect(() => {

src/features/join/api/user.ts

@@ -1,5 +1,5 @@
 import { axiosClient } from '../../../shared/types/api/http-client';
-import { UserInfoRequest, UserInfoResponse } from '../model/userInformation';
+import { TermsAgreementRequest, UserInfoRequest, UserInfoResponse } from '../model/userInformation';
 
 export const readUser = async (): Promise<UserInfoResponse> => {
   const response = await axiosClient.get<{ result: UserInfoResponse }>('/users', {
@@ -14,3 +14,11 @@ export const updateUser = async (data: UserInfoRequest): Promise<UserInfoRespons
   });
   return response.data;
 };
+
+// 이용 약관
+export const agreeTerms = async (data: TermsAgreementRequest) => {
+  const response = await axiosClient.post('/terms', data, {
+    headers: { isPublicApi: true },
+  });
+  return response.data;
+};

src/features/join/hooks/useUserHook.ts

@@ -1,5 +1,5 @@
 import { useMutation, useQuery } from '@tanstack/react-query';
-import { readUser, updateUser } from '../api/user';
+import { agreeTerms, readUser, updateUser } from '../api/user';
 import { UserInfoRequest, UserInfoResponse } from '../model/userInformation';
 
 export const useUserInfo = (enabled: boolean = true) => {
@@ -15,3 +15,16 @@ export const useUserUpdate = () => {
     mutationFn: updateUser,
   });
 };
+
+export const useAgreeTerms = () => {
+  return useMutation({
+    mutationFn: agreeTerms,
+    onSuccess: () => {
+      alert('이용약관 동의 완료');
+    },
+    onError: (error) => {
+      alert('동의 처리 실패');
+      console.error('이용약관 동의 실패', error);
+    }
+  });
+};

src/features/join/model/agreementStore.ts

@@ -13,6 +13,12 @@ interface AgreementState {
   agreements: Agreements;
   toggleAgreement: (key: keyof Agreements) => void; // 특정 항목 상태 토글
   isAllRequiredAgreed: () => boolean; // 필수 항목 체크 여부
+  getAgreementStates: () => {
+    serviceAgreed: boolean;
+    privacyPolicyAgree: boolean;
+    personalInfoUsageAgreed: boolean;
+    marketingAgreed: boolean;
+  };
 }
 
 export const useAgreementStore = create<AgreementState>((set, get) => ({
@@ -56,4 +62,13 @@ export const useAgreementStore = create<AgreementState>((set, get) => ({
     const { agreements } = get();
     return agreements.terms && agreements.privacy && agreements.dataUsage;
   },
+  getAgreementStates: () => {
+    const { agreements } = get();
+    return {
+      serviceAgreed: agreements.terms,
+      privacyPolicyAgree: agreements.privacy,
+      personalInfoUsageAgreed: agreements.dataUsage,
+      marketingAgreed: agreements.marketing,
+    };
+  },
 }));

src/features/join/model/userInformation.ts

@@ -9,4 +9,11 @@ export interface UserInfoRequest {
     name: string;
     phoneNumber: string;
     email: string;
+}
+
+export interface TermsAgreementRequest {
+  serviceAgreed: boolean;
+  privacyPolicyAgree: boolean;
+  personalInfoUsageAgreed: boolean;
+  marketingAgreed: boolean;
 }