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