Merge pull request #299 from GDSC-PKNU-Official/feat/#298

feat/#294 : 건의사항 페이지 구현

src/App.tsx

@@ -7,6 +7,7 @@ import Home from '@pages/Home';
 import MajorDecision from '@pages/MajorDecision';
 import MapPage 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';
@@ -25,6 +26,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 path="/map" element={<MapPage />} />
       </Routes>

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;

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};
+  }
+`;