[FE] feat: 채팅, 문제보기 오류 처리

frontEnd/src/components/room/QuizViewSection.tsx

@@ -11,11 +11,25 @@ import useInput from '@/hooks/useInput';
 function QuizViewSection() {
   const inputRef = useRef<HTMLInputElement>(null);
   const [url, setURL] = useState('');
-  const { data, isLoading } = useQuery({ queryKey: [QUERY_KEYS, url], queryFn: () => getQuizData(url), enabled: !!url });
-  const { inputValue, onChange } = useInput(url);
+  const { data, isLoading, error } = useQuery({ queryKey: [QUERY_KEYS, url], queryFn: () => getQuizData(url), enabled: !!url });
+  const { inputValue, onChange, resetInput } = useInput(url);
 
   const handleSubmit = (e: React.FormEvent) => {
     e.preventDefault();
+
+    const isURL = inputValue.match(/^(http(s)?:\/\/)[^\s@.][\w\s@.]+[.][^\s@.]+$/);
+
+    if (!isURL && inputRef.current) {
+      inputRef.current.placeholder = '잘못된 URL입니다!';
+      resetInput();
+      setTimeout(() => {
+        if (inputRef.current) inputRef.current.placeholder = '링크를 입력하세요';
+      }, 1000);
+      return;
+    }
+
+    if (!inputValue) return;
+
     setURL(inputValue);
   };
 
@@ -27,7 +41,7 @@ function QuizViewSection() {
 
   return (
     <Section>
-      <div className="flex flex-col w-full h-full gap-4 p-4">
+      <div className="flex flex-col items-center justify-center w-full h-full gap-4 p-4">
         <form onSubmit={handleSubmit} className="w-full ">
           <input
             ref={inputRef}
@@ -38,7 +52,7 @@ function QuizViewSection() {
             placeholder="링크를 입력하세요"
           />
         </form>
-        {data && url ? <QuizIframe htmlData={data} /> : <ClickToQuizInput handleClick={handleClick} />}
+        {data && url ? <QuizIframe htmlData={data} /> : <ClickToQuizInput handleClick={handleClick} error={error} />}
       </div>
     </Section>
   );

frontEnd/src/components/room/chatting/ChattingInput.tsx

@@ -28,7 +28,7 @@ export default function ChattingInput({ usingAi, setUsingAi, postingAi, setPosti
   const { roomId } = useParams();
 
   const handleMessageSend = () => {
-    if (!socket) return;
+    if (!socket || !message) return;
 
     if (usingAi) {
       setPostingAi(true);
@@ -52,7 +52,7 @@ export default function ChattingInput({ usingAi, setUsingAi, postingAi, setPosti
   };
 
   return (
-    <form className="w-full p-2 rounded-b-lg bg-base">
+    <div className="w-full p-2 rounded-b-lg bg-base">
       <ToggleAi usingAi={usingAi} setUsingAi={setUsingAi} />
       <div className="flex items-center w-full h-[72px] rounded-lg drop-shadow-lg">
         <textarea
@@ -66,7 +66,8 @@ export default function ChattingInput({ usingAi, setUsingAi, postingAi, setPosti
           placeholder={usingAi ? 'AI에게 질문해보세요' : 'Message'}
         />
         <button
-          type="submit"
+          type="button"
+          onClick={handleMessageSend}
           className={`font-normal rounded-e-lg whitespace-nowrap w-16 flex items-center justify-center h-full ${
             usingAi ? 'bg-point-blue text-white' : 'bg-primary text-black'
           }`}
@@ -75,6 +76,6 @@ export default function ChattingInput({ usingAi, setUsingAi, postingAi, setPosti
           <SendButtonText usingAi={usingAi} postingAi={postingAi} />
         </button>
       </div>
-    </form>
+    </div>
   );
 }

frontEnd/src/components/room/quizView/ClickToQuizInput.tsx

@@ -1,18 +1,21 @@
 import clickSrc from '@/assets/click.svg';
+import ErrorView from './ErrorView';
 
 interface ClickToQuizInputProps {
   handleClick: () => void;
+  error: Error | null;
 }
 
-export default function ClickToQuizInput({ handleClick }: ClickToQuizInputProps) {
+export default function ClickToQuizInput({ handleClick, error }: ClickToQuizInputProps) {
   return (
     <div className="flex flex-col items-center justify-center w-full h-full gap-1 px-2 pt-2">
-      <button type="button" className="flex flex-col items-center justify-center h-full" onClick={handleClick}>
+      <button type="button" className="flex flex-col items-center justify-center w-full h-full" onClick={handleClick}>
         <img src="/main.png" alt="logo" width="150px" />
         <div className="flex items-center justify-center ">
           <img src={clickSrc} width="20px" alt="clickIcon" />
           <div>클릭해서 링크 입력하기</div>
         </div>
+        {error && <ErrorView error={error} />}
       </button>
     </div>
   );

frontEnd/src/components/room/quizView/ErrorView.tsx

@@ -0,0 +1,10 @@
+import { isAxiosError } from 'axios';
+
+export default function ErrorView({ error }: { error: Error }) {
+  if (isAxiosError(error) && error.response && error.response.status === 500) {
+    return <div className="font-bold text-point-red animate-[vibration_.5s_linear]">오류가 발생했습니다!</div>;
+  }
+  if (isAxiosError(error) && error.response && error.response.status === 404) {
+    return <div className="font-bold text-point-red animate-[vibration_.5s_linear]">페이지를 찾을 수 없습니다!</div>;
+  }
+}