문의하기 api 적용

frontend/src/api/contact.ts

@@ -0,0 +1,13 @@
+import { END_POINTS } from '@/routes';
+
+import { apiClient } from './config';
+
+export interface ContactBody {
+  message: string;
+  email: string | null;
+  name: string | null;
+  memberId: number | null;
+}
+
+export const postContact = async (contactBody: ContactBody) =>
+  await apiClient.post(`${END_POINTS.CONTACT}`, contactBody);

frontend/src/components/ContactUs/ContactUs.tsx

@@ -1,5 +1,6 @@
 import { useState } from 'react';
 
+import { postContact } from '@/api/contact';
 import { Button, Input, LoadingBall, Modal, Text, Textarea } from '@/components';
 import { useInput, useInputWithValidate, useToggle, useToast } from '@/hooks';
 import { useAuth } from '@/hooks/authentication';
@@ -23,9 +24,11 @@ const ContactUs = () => {
     memberInfo: { name, memberId },
   } = useAuth();
 
-  const { successAlert } = useToast();
+  const { successAlert, failAlert } = useToast();
 
-  const isValidContents = message.trim().length !== 0;
+  const MIN_CONTENTS_LENGTH = 10;
+  const MAX_CONTENTS_LENGTH = 10000;
+  const isValidContents = message.trim().length >= MIN_CONTENTS_LENGTH && message.length <= MAX_CONTENTS_LENGTH;
 
   const handleSubmit = (e: React.FormEvent<HTMLFormElement> | React.MouseEvent<HTMLButtonElement>) => {
     e.preventDefault();
@@ -41,29 +44,20 @@ const ContactUs = () => {
     setIsSending(true);
     toggleModal();
 
-    const res = await sendData();
+    const contactBody = { message, email: email || null, name: name ?? null, memberId: memberId ?? null };
 
-    if (res) {
+    try {
+      await postContact(contactBody);
       successSubmit();
-      successAlert('보내기 완료! 소중한 의견 감사합니다:)');
+    } catch {
+      failAlert('문의 보내기에 실패하였습니다. 다시 시도하시거나 이메일로 직접 문의해주세요');
+    } finally {
+      setIsSending(false);
     }
   };
 
-  const sendData = () => {
-    const URL = process.env.GOOGLE_URL || '';
-
-    return fetch(URL, {
-      method: 'POST',
-      mode: 'no-cors',
-      body: JSON.stringify({ message, email, name, memberId }),
-      headers: {
-        'Content-Type': 'application/json',
-      },
-    });
-  };
-
   const successSubmit = () => {
-    setIsSending(false);
+    successAlert('보내기 완료! 소중한 의견 감사합니다:)');
     resetForm();
   };
 
@@ -89,10 +83,11 @@ const ContactUs = () => {
               이미지 등을 함께 보내실 경우 [email protected]으로 직접 이메일을 보내실 수 있습니다.
             </Text.Medium>
             <Textarea id='voc' variant='outlined'>
-              <Textarea.Label htmlFor={'voc'}>무엇을 도와드릴까요?</Textarea.Label>
+              <Textarea.Label htmlFor={'voc'}>무엇을 도와드릴까요? (10글자 이상 작성해주세요)</Textarea.Label>
               <Textarea.TextField
                 minRows={5}
                 maxRows={10}
+                maxLength={MAX_CONTENTS_LENGTH}
                 value={message}
                 onChange={handleMessage}
                 disabled={isSending}

frontend/src/mocks/handlers/contact.ts

@@ -0,0 +1,7 @@
+import { http } from 'msw';
+
+import { API_URL } from '@/api';
+import { END_POINTS } from '@/routes';
+import { mockResponse } from '@/utils/mockResponse';
+
+export const contactHandlers = [http.get(`${API_URL}${END_POINTS.CONTACT}`, () => mockResponse({ status: 201 }))];

frontend/src/routes/endPoints.ts

@@ -28,6 +28,9 @@ export const END_POINTS = {
   LOGOUT: '/logout',
   LOGIN_CHECK: '/login/check',
   CHECK_NAME: '/check-name',
+
+  // contact
+  CONTACT: '/contact',
 } as const;
 
 export const ROUTE_END_POINT = {