[INQUIRY] 문의하기 페이지 기능

src/api/inquiry/entity.ts

@@ -47,6 +47,13 @@ export interface InquirySort {
 export interface InquiryProps {
   queryType: string;
   dateCursor: string | null;
-  idCursor: number | null;
+  idCursor: number | 0;
   size: number;
 }
+
+export interface SubmitInquiry {
+  title: string;
+  content: string;
+  inquiryImages?: InquiryImage[];
+  isSecret: boolean;
+}

src/api/inquiry/inquire/index.ts

@@ -0,0 +1,26 @@
+import { SubmitInquiry } from '../entity';
+import inquiryApi from '../inquiryApiClient';
+
+const submitInquiry = async (inquiryData: SubmitInquiry) => {
+  const formData = new FormData();
+
+  formData.append('title', inquiryData.title);
+  formData.append('content', inquiryData.content);
+  formData.append('isSecret', String(inquiryData.isSecret));
+
+  if (inquiryData.inquiryImages) {
+    inquiryData.inquiryImages.forEach((imageData) => {
+      formData.append('inquiryImages', imageData.imageUrl);
+    });
+  }
+
+  const response = await inquiryApi.post('/inquiry', formData, {
+    headers: {
+      'Content-Type': 'multipart/form-data',
+    },
+  });
+
+  return response.data;
+};
+
+export default submitInquiry;

src/api/inquiry/inquiry/index.ts

@@ -0,0 +1,12 @@
+import { GetInquiryResponse, InquiryProps } from '../entity';
+import inquiryApi from '../inquiryApiClient';
+
+const getInquiry = async ({
+  queryType, dateCursor, idCursor, size,
+}: InquiryProps) => {
+  const queryParams = `${queryType}?dateCursor=${dateCursor}&idCursor=${idCursor}&size=${size}`;
+  const { data } = await inquiryApi.get<GetInquiryResponse>(`/inquiry${queryParams}`);
+  return data;
+};
+
+export default getInquiry;

src/api/inquiry/inquiryApiClient.ts

@@ -7,4 +7,13 @@ const inquiryApi = axios.create({
   timeout: 2000,
 });
 
+inquiryApi.interceptors.request.use(
+  (config) => {
+    const accessToken = sessionStorage.getItem('accessToken');
+    // eslint-disable-next-line no-param-reassign
+    if (config.headers && accessToken) config.headers.Authorization = `Bearer ${accessToken}`;
+    return config;
+  },
+);
+
 export default inquiryApi;

src/pages/Inquiry/Inquire/components/InquireForm/InquireForm.module.scss

@@ -85,6 +85,10 @@ $disabled: #c4c4c4;
     border-bottom-right-radius: 3px;
     position: relative;
 
+    &--attached {
+      height: 122px;
+    }
+
     > svg {
       cursor: pointer;
       position: absolute;
@@ -94,12 +98,43 @@ $disabled: #c4c4c4;
   }
 
   &__upload-button {
+    color: transparent;
+    cursor: pointer;
+    position: absolute;
+    top: 16px;
+    left: 16px;
+    width: 16px;
+    height: 16px;
+  }
+
+  &__input {
     display: none;
   }
 
   &__images {
+    height: 90px;
     position: absolute;
     left: 48px;
+    display: flex;
+    flex-direction: row;
+  }
+
+  &__image-box {
+    margin-right: 32px;
+    position: relative;
+  }
+
+  &__image {
+    width: 90px;
+    height: 90px;
+    border-radius: 10px;
+  }
+
+  &__delete-button {
+    position: absolute;
+    top: -7px;
+    right: -7px;
+    cursor: pointer;
   }
 
   &__description {
@@ -139,18 +174,23 @@ $disabled: #c4c4c4;
     justify-content: center;
     width: 176px;
     height: 44px;
-    background: $highlight;
+    background: $disabled;
     border: none;
     appearance: none;
     border-radius: 22px;
     font-weight: 700;
     font-size: 16px;
     text-decoration: none;
     color: white;
-    cursor: pointer;
+    cursor: default;
     box-shadow: 2px 3px 12px 1px rgba(0 0 0 / 10%);
     margin-top: 48px;
     position: absolute;
     right: 0;
+
+    &--active {
+      background: $highlight;
+      cursor: pointer;
+    }
   }
 }

src/pages/Inquiry/Inquire/components/InquireForm/index.tsx

@@ -1,24 +1,100 @@
-import { useState } from 'react';
+import {
+  useCallback, useEffect, useMemo, useState,
+} from 'react';
+import { useLocation } from 'react-router-dom';
 
+import { InquiryImage, SubmitInquiry } from 'api/inquiry/entity';
+import { ReactComponent as DeleteIcon } from 'assets/svg/inquiry/image-delete.svg';
 import { ReactComponent as UploadIcon } from 'assets/svg/inquiry/image-upload.svg';
 import ToggleButton from 'components/common/ToggleButton';
-import RequiredLabel from 'pages/Inquiry/Inquire/components/InquireForm/components/RequiredLabel/index';
-import useBooleanState from 'utils/hooks/useBooleanState';
+import useSubmitInquiry from 'pages/Inquiry/hooks/useSubmitInquiry';
+import RequiredLabel from 'pages/Inquiry/Inquire/components/InquireForm/RequiredLabel';
+import cn from 'utils/ts/classNames';
+import makeToast from 'utils/ts/makeToast';
 
 import styles from './InquireForm.module.scss';
 
+const MAX_LENGTH = 500;
+
 export default function InquireForm(): JSX.Element {
-  const [content, setContent] = useState('');
-  const maxLength = 500;
-  const [isSecret, , , toggle] = useBooleanState(false);
+  const submit = useSubmitInquiry();
+  const location = useLocation();
+
+  const [inquiry, setInquiry] = useState<SubmitInquiry>({
+    title: '',
+    content: '',
+    inquiryImages: [],
+    isSecret: false,
+  });
+
+  const isAttached = useMemo(
+    () => !!inquiry.inquiryImages && inquiry.inquiryImages.length > 0,
+    [inquiry.inquiryImages],
+  );
+
+  const isSubmissionReady = useMemo(
+    () => !!(inquiry.title.trim() && inquiry.content.trim()),
+    [inquiry.title, inquiry.content],
+  );
+
+  const handleUpload = useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
+    if (event.target.files && event.target.files.length > 0) {
+      const url = URL.createObjectURL(event.target.files[0]);
+      const data: InquiryImage = {
+        imageUrl: url,
+        originalName: url, // 적당한 값
+        path: url, // 적당한 값
+      };
 
-  const handleContentChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
-    setContent(event.target.value);
-  };
+      if (inquiry.inquiryImages && inquiry.inquiryImages.length < 3) {
+        setInquiry((prev) => (
+          prev.inquiryImages
+            ? { ...prev, inquiryImages: [...prev.inquiryImages, data] }
+            : { ...prev, inquiryImages: [data] }
+        ));
+      }
+    }
+  }, [inquiry.inquiryImages, setInquiry]);
+
+  const handleDeleteImage = useCallback((event: React.MouseEvent<HTMLButtonElement>) => {
+    const index = parseInt(event.currentTarget.name, 10);
+    setInquiry((prev) => ({
+      ...prev,
+      inquiryImages: prev.inquiryImages ? prev.inquiryImages.filter((_, i) => i !== index) : [],
+    }));
+  }, [setInquiry]);
+
+  const handleSubmit = useCallback((event: React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    if (isSubmissionReady) {
+      sessionStorage.removeItem('inquiryForm');
+      submit(inquiry);
+    } else {
+      makeToast('error', '필수 항목을 기입해주세요.');
+    }
+  }, [isSubmissionReady, inquiry, submit]);
+
+  useEffect(() => {
+    const savedData = sessionStorage.getItem('inquiryForm');
+    if (savedData) {
+      setInquiry(JSON.parse(savedData));
+    }
+  }, [location]);
+
+  useEffect(() => {
+    const debouncedSave = setTimeout(() => {
+      sessionStorage.setItem('inquiryForm', JSON.stringify(inquiry));
+    }, 1000);
+
+    return () => clearTimeout(debouncedSave);
+  }, [inquiry]);
 
   return (
     <div className={styles.container}>
-      <form className={styles.form}>
+      <form
+        className={styles.form}
+        onSubmit={handleSubmit}
+      >
         <div className={styles.title}>
           <RequiredLabel text="제목" />
           <input
@@ -29,13 +105,15 @@ export default function InquireForm(): JSX.Element {
             id="inquiryTitle"
             maxLength={50}
             placeholder="제목을 작성해주세요."
+            value={inquiry.title}
+            onChange={(e) => setInquiry((prev) => ({ ...prev, title: e.target.value }))}
           />
         </div>
 
         <div className={styles.contents}>
           <RequiredLabel text="문의 내용" />
           <div className={styles.contents__length}>
-            {`${content.length}/${maxLength}`}
+            {`${inquiry.content.length}/${MAX_LENGTH}`}
           </div>
         </div>
         <div className={styles.contents__inputs}>
@@ -47,19 +125,52 @@ export default function InquireForm(): JSX.Element {
             rows={10}
             maxLength={500}
             placeholder="문의 내용을 작성해주세요."
-            value={content}
-            onChange={handleContentChange}
+            value={inquiry.content}
+            onChange={(e) => setInquiry((prev) => ({ ...prev, content: e.target.value }))}
           />
-          <div className={styles.contents__attach}>
-            <UploadIcon />
-            <input
+          <div className={cn({
+            [styles.contents__attach]: true,
+            [styles['contents__attach--attached']]: isAttached,
+          })}
+          >
+            {/* eslint-disable-next-line jsx-a11y/label-has-associated-control */}
+            <label
               className={styles['contents__upload-button']}
+              htmlFor="upload"
+            >
+              <UploadIcon />
+            </label>
+            <input
+              className={styles.contents__input}
+              id="upload"
               type="file"
               accept="image/*"
               aria-label="이미지 업로드"
+              onChange={handleUpload}
             />
-            <div className={styles.contents__images}>a</div>
-            <span className={styles.contents__description}>최대 3장 첨부 가능</span>
+            <div className={styles.contents__images}>
+              {inquiry.inquiryImages?.map((imageData, index) => (
+                <div className={styles['contents__image-box']} key={imageData.imageUrl}>
+                  <img
+                    className={styles.contents__image}
+                    src={imageData.imageUrl}
+                    alt={`문의 이미지${index}`}
+                  />
+                  <button
+                    className={styles['contents__delete-button']}
+                    type="button"
+                    aria-label="delete"
+                    name={`${index}`}
+                    onClick={handleDeleteImage}
+                  >
+                    <DeleteIcon />
+                  </button>
+                </div>
+              ))}
+            </div>
+            {isAttached ? null : (
+              <span className={styles.contents__description}>최대 3장 첨부 가능</span>
+            )}
           </div>
         </div>
 
@@ -69,16 +180,22 @@ export default function InquireForm(): JSX.Element {
           </span>
           <ToggleButton
             className={styles['secret__toggle-button']}
-            active={isSecret}
-            toggle={toggle}
+            active={inquiry.isSecret}
+            toggle={() => setInquiry((prev) => ({ ...prev, isSecret: !prev.isSecret }))}
           />
         </div>
         <div className={styles.secret__description}>
           비밀글을 나의 문의 내역에서만 볼 수 있어요.
         </div>
 
         <div className={styles.submit}>
-          <button type="submit" className={styles.submit__button}>
+          <button
+            className={cn({
+              [styles.submit__button]: true,
+              [styles['submit__button--active']]: isSubmissionReady,
+            })}
+            type="submit"
+          >
             등록하기
           </button>
         </div>