[INQUIRY] 문의하기 UI 수정

src/App.tsx

@@ -17,8 +17,8 @@ import Setting from 'pages/Setting';
 import IdChange from 'pages/Setting/Mobile/IdChange';
 import AuthRoute from 'components/common/AuthRoute';
 import Withdrawal from 'pages/Setting/Withdrawal';
-import Inquiry from 'pages/Inquiry';
-import Myinquiry from 'pages/Inquiry/Myinquiry';
+import Inquiry from 'pages/Inquiry/Inquiry';
+import Inquire from 'pages/Inquiry/Inquire';
 import Notice from 'pages/Notice';
 import KakaoLogin from 'pages/Auth/OAuth/KakaoLogin';
 import NaverLogin from 'pages/Auth/OAuth/NaverLogin';
@@ -35,8 +35,9 @@ export default function App(): JSX.Element {
           <Route path="/search" element={<Search />} />
           <Route path="/search/:keyword" element={<SearchDetails />} />
           <Route path="/search/not-found" element={<NotFoundPage />} />
-          <Route path="/inquiry" element={<Inquiry />} />
-          <Route path="/myinquiry" element={<Myinquiry />} />
+          <Route path="/inquiry/:type" element={<Inquiry />} />
+          <Route path="/inquiry/search/:keyword" element={<Inquiry />} />
+          <Route path="/inquiry/inquire" element={<Inquire />} />
           <Route path="/notice" element={<Notice />} />
         </Route>
         <Route element={<AuthRoute needAuth redirectRoute="/login" />}>

src/api/inquiry/entity.ts

@@ -0,0 +1,52 @@
+export interface GetInquiryResponse {
+  content: InquiryContent[];
+  empty: boolean;
+  first: boolean;
+  last: boolean;
+  number: number;
+  numberOfElements: number;
+  pageable: InquiryPageable;
+  size: number;
+  sort: InquirySort;
+  totalElements: number;
+  totalPages: number;
+}
+
+export interface InquiryContent {
+  answer: string;
+  content: string;
+  createdAt: string;
+  createdBy: string;
+  id: number;
+  inquiryImages: InquiryImage[];
+  isSecreted: number;
+  title: string;
+}
+
+export interface InquiryImage {
+  imageUrl: string;
+  originalName: string;
+  path: string;
+}
+
+export interface InquiryPageable {
+  offset: number;
+  pageNumber: number;
+  pageSize: number;
+  paged: boolean;
+  sort: InquirySort;
+  unpaged: boolean;
+}
+
+export interface InquirySort {
+  empty: boolean;
+  sorted: boolean;
+  unsorted: boolean;
+}
+
+export interface InquiryProps {
+  typePath: string;
+  dateCursor: string | null;
+  idCursor: number | null;
+  size: number;
+}

src/api/inquiry/index.ts

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

src/api/inquiry/inquiryApiClient.ts

@@ -0,0 +1,9 @@
+import axios from 'axios';
+import { API_PATH } from 'config/constants';
+
+const inquiryApi = axios.create({
+  baseURL: `${API_PATH}`,
+  timeout: 2000,
+});
+
+export default inquiryApi;

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

@@ -0,0 +1,33 @@
+$default: #222222;
+$highlight: #ff7f23;
+$back: white;
+$normal: #666666;
+$disabled: #c4c4c4;
+
+.container {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  flex-direction: row;
+}
+
+.box {
+  width: 947px;
+}
+
+.menu {
+  width: 227px;
+  height: 100%;
+
+  &__link {
+    display: block;
+    margin: 160px 0 32px;
+    background-color: transparent;
+    font-size: 32px;
+    font-weight: 700;
+    text-decoration: none;
+    color: $highlight;
+    cursor: pointer;
+  }
+}

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

@@ -0,0 +1,23 @@
+$default: #222222;
+$highlight: #ff7f23;
+$back: white;
+$normal: #666666;
+$disabled: #c4c4c4;
+
+.explain {
+  cursor: default;
+
+  &__title {
+    color: $default;
+    font-size: 16px;
+    font-weight: 500;
+    line-height: 19.97px;
+  }
+
+  &__small-title {
+    color: $normal;
+    font-size: 11px;
+    font-weight: 400;
+    line-height: 13.73px;
+  }
+}

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

@@ -0,0 +1,21 @@
+import React from 'react';
+import { ReactComponent as WriteInquiryIcon } from 'assets/svg/inquiry/write-inquiry.svg';
+import styles from './Explain.module.scss';
+
+export default function Explain({ className }: { className: string }): JSX.Element {
+  return (
+    <div className={className}>
+      <div className={styles.explain}>
+        <div className={styles.explain__svg}>
+          <WriteInquiryIcon />
+        </div>
+        <div className={styles.explain__title}>
+          쩝쩝박사 이용 중에 생긴 불편한 점이나 문의사항을 등록해주세요.
+        </div>
+        <div className={styles['explain__small-title']}>
+          확인 후 순차적으로 답변 드리겠습니다.
+        </div>
+      </div>
+    </div>
+  );
+}

src/pages/Inquiry/Inquire/index.tsx

@@ -0,0 +1,25 @@
+import { Link } from 'react-router-dom';
+import Explain from './components/Explain';
+import styles from './Inquire.module.scss';
+
+export default function Inquiry(): JSX.Element {
+  return (
+    <div className={styles.container}>
+      <div className={styles.box}>
+        <div className={styles.menu}>
+          <Link to="/inquiry/all" className={styles.menu__link}>
+            <div className={styles['menu__title-text']}>
+              문의하기
+            </div>
+          </Link>
+
+          <Explain className={styles.menu__explain} />
+        </div>
+
+        <div className={styles.form}>
+          a
+        </div>
+      </div>
+    </div>
+  );
+}