From 9f8688e7e5843e2566953d0ed9a43d584541461e Mon Sep 17 00:00:00 2001
From: hwinkr <dnddl8280@naver.com>
Date: Sat, 23 Dec 2023 22:46:40 +0900
Subject: [PATCH 1/3] =?UTF-8?q?refactor(add=20suggestion=20page):=20?=
 =?UTF-8?q?=EA=B1=B4=EC=9D=98=EC=82=AC=ED=95=AD=20=ED=8E=98=EC=9D=B4?=
 =?UTF-8?q?=EC=A7=80=20=EB=9D=BC=EC=9A=B0=ED=8C=85=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/App.tsx b/src/App.tsx
index f7d013ef..afc66018 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -7,6 +7,7 @@ import Home from '@pages/Home';
 import MajorDecision from '@pages/MajorDecision';
 import Map from '@pages/Map';
 import My from '@pages/My';
+import SuggestionPage from '@pages/Suggestion';
 import Tip from '@pages/Tip';
 import RouteChangeTracker from '@utils/routeChangeTracker';
 import { Routes, Route } from 'react-router-dom';
@@ -27,6 +28,7 @@ const App = () => {
           <Route path="/my" element={<My />} />
           <Route path="/tip/:type" element={<Tip />} />
           <Route path="/FAQ" element={<FAQPage />} />
+          <Route path="/suggestion" element={<SuggestionPage />} />
         </Route>
         <Route element={<OverlayProvider />}>
           <Route path="/map" element={<Map />} />

From fd8d5d5a7449f7748806d8ad7067d4becd93522e Mon Sep 17 00:00:00 2001
From: hwinkr <dnddl8280@naver.com>
Date: Sat, 23 Dec 2023 22:47:06 +0900
Subject: [PATCH 2/3] =?UTF-8?q?feat(post=20suggestion=20function):=20?=
 =?UTF-8?q?=EA=B1=B4=EC=9D=98=EC=82=AC=ED=95=AD=EC=9D=84=20=EB=B3=B4?=
 =?UTF-8?q?=EB=82=B4=EB=8A=94=20api=20=ED=95=A8=EC=88=98=20=EB=B6=84?=
 =?UTF-8?q?=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/apis/suggestion/post-suggestion.ts | 18 ++++++++++++++++++
 1 file changed, 18 insertions(+)
 create mode 100644 src/apis/suggestion/post-suggestion.ts

diff --git a/src/apis/suggestion/post-suggestion.ts b/src/apis/suggestion/post-suggestion.ts
new file mode 100644
index 00000000..7905f71a
--- /dev/null
+++ b/src/apis/suggestion/post-suggestion.ts
@@ -0,0 +1,18 @@
+import http from '@apis/http';
+import { SERVER_URL } from '@config/index';
+
+const postSuggestion = async (value: string | undefined) => {
+  await http.post(
+    `${SERVER_URL}/api/suggestion`,
+    {
+      content: value,
+    },
+    {
+      headers: {
+        'Content-Type': 'application/json',
+      },
+    },
+  );
+};
+
+export default postSuggestion;

From 0d59aad93b7b8d0f8fb7283077ee65e56d1761be Mon Sep 17 00:00:00 2001
From: hwinkr <dnddl8280@naver.com>
Date: Sat, 23 Dec 2023 22:47:42 +0900
Subject: [PATCH 3/3] =?UTF-8?q?feat(SuggestionPage):=20=EA=B1=B4=EC=9D=98?=
 =?UTF-8?q?=EC=82=AC=ED=95=AD=20=ED=8E=98=EC=9D=B4=EC=A7=80=20=EA=B5=AC?=
 =?UTF-8?q?=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 모달 합성 컴포넌트로 변경 필요
---
 src/pages/Suggestion/index.tsx | 79 ++++++++++++++++++++++++++++++++++
 1 file changed, 79 insertions(+)
 create mode 100644 src/pages/Suggestion/index.tsx

diff --git a/src/pages/Suggestion/index.tsx b/src/pages/Suggestion/index.tsx
new file mode 100644
index 00000000..9c80b82e
--- /dev/null
+++ b/src/pages/Suggestion/index.tsx
@@ -0,0 +1,79 @@
+import postSuggestion from '@apis/suggestion/post-suggestion';
+import Button from '@components/Common/Button';
+import InformUpperLayout from '@components/InformUpperLayout';
+import { MODAL_BUTTON_MESSAGE, MODAL_MESSAGE } from '@constants/modal-messages';
+import PLCACEHOLDER_MESSAGES from '@constants/placeholder-message';
+import { css } from '@emotion/react';
+import styled from '@emotion/styled';
+import useModals, { modals } from '@hooks/useModals';
+import { THEME } from '@styles/ThemeProvider/theme';
+import React, { useRef, useState } from 'react';
+
+const SuggestionPage = () => {
+  const { openModal, closeModal } = useModals();
+  const areaRef = useRef<HTMLTextAreaElement>(null);
+  const [isInValidInput, setIsInValidInput] = useState<boolean>(true);
+
+  const onChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    if (!e.currentTarget.value || e.currentTarget.value.length < 5) {
+      setIsInValidInput(true);
+      return;
+    }
+    setIsInValidInput(false);
+  };
+
+  const onButtonClick = () => {
+    postSuggestion(areaRef.current?.value);
+    openModal<typeof modals.alert>(modals.alert, {
+      message: MODAL_MESSAGE.SUCCEED.POST_SUGGESTION,
+      buttonMessage: MODAL_BUTTON_MESSAGE.CONFIRM,
+      onClose: () => closeModal(modals.alert),
+    });
+  };
+
+  return (
+    <>
+      <InformUpperLayout>
+        <InformUpperLayout.InformTitle title="건의사항" />
+        <InformUpperLayout.InformSubTitle subTitle="부림이 서비스 관련 문의사항은 언제든지 건의사항에 남겨주세요!" />
+      </InformUpperLayout>
+      <StyledTextArea
+        minLength={5}
+        placeholder={PLCACEHOLDER_MESSAGES.SUGGESTION}
+        rows={10}
+        ref={areaRef}
+        onChange={onChange}
+      />
+      <Button
+        disabled={isInValidInput}
+        onClick={onButtonClick}
+        css={css`
+          width: 50%;
+          margin: 0 auto;
+        `}
+      >
+        작성 완료
+      </Button>
+    </>
+  );
+};
+
+export default SuggestionPage;
+
+const StyledTextArea = styled.textarea`
+  display: block;
+  padding: 20px;
+  width: 80%;
+  margin: 0 auto;
+  margin-bottom: 2rem;
+  line-height: 1.5;
+  resize: none;
+  font-size: 16px;
+  border-radius: 20px;
+  overflow-y: scoll;
+  border: 1px solid ${THEME.TEXT.GRAY};
+
+  &::placeholder {
+    color: ${THEME.TEXT.GRAY};
+  }
+`;