Merge pull request #92 from GDSC-PKNU-21-22/feat/#88

Feat/#88: 건의사항 작성시 감사 메세지 구현
GDSC-PKNU-Official · Jul 18, 2023 · 681d324 · 681d324
2 parents 8d44614 + 995d753
commit 681d324
Show file tree

Hide file tree

Showing 7 changed files with 146 additions and 126 deletions.
diff --git a/src/components/Button/index.tsx b/src/components/Button/index.tsx
@@ -1,4 +1,5 @@
 import styled from '@emotion/styled';
+import { THEME } from '@styles/ThemeProvider/theme';
 import { ReactNode } from 'react';
 
 interface ButtonProps {
@@ -18,21 +19,29 @@ const Button = ({ children, disabled = false, ...props }: ButtonProps) => {
 export default Button;
 
 const StyledButton = styled.button`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
   cursor: pointer;
 
   width: 100%;
   height: 50px;
   margin: 4px 0;
 
   border-radius: 8px;
+  padding: 10px;
 
-  background-color: #71bc5c;
+  background-color: ${THEME.BUTTON.GREEN};
   color: #ffffff;
   font-weight: bold;
 
   &:disabled {
-    background-color: #e7e7e7;
+    background-color: ${THEME.BUTTON.GRAY};
     color: #868686;
     cursor: auto;
   }
+  & > svg {
+    margin-right: 5px;
+  }
 `;
diff --git a/src/components/Modal/MajorModal/index.tsx b/src/components/Modal/MajorModal/index.tsx
@@ -1,7 +1,6 @@
 import Button from '@components/Button';
 import Icon from '@components/Icon';
 import { css } from '@emotion/react';
-import styled from '@emotion/styled';
 import { THEME } from '@styles/ThemeProvider/theme';
 
 import Modal from '..';
@@ -14,11 +13,12 @@ interface MajorModalProps {
 const MajorModal = ({ onClose, routerTo }: MajorModalProps) => {
   return (
     <Modal onClose={onClose}>
-      <ModalContent>
+      <>
         <span
           css={css`
             color: ${THEME.TEXT.GRAY};
             font-weight: bold;
+            margin: 0 auto;
             margin-bottom: 15px;
           `}
         >
@@ -28,31 +28,9 @@ const MajorModal = ({ onClose, routerTo }: MajorModalProps) => {
           <Icon kind="plus" color={THEME.TEXT.WHITE} />
           <span>학과 선택하기</span>
         </Button>
-      </ModalContent>
+      </>
     </Modal>
   );
 };
 
 export default MajorModal;
-
-const ModalContent = styled.div`
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-
-  background-color: ${THEME.TEXT.WHITE};
-  padding: 30px;
-  border-radius: 15px;
-
-  Button {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    padding: 20px;
-
-    flex: 0 0 15%;
-    width: 15;
-  }
-`;
diff --git a/src/components/Modal/SuggestionModal/SuggestionInput.tsx b/src/components/Modal/SuggestionModal/SuggestionInput.tsx
@@ -0,0 +1,87 @@
+import http from '@apis/http';
+import Button from '@components/Button';
+import { SERVER_URL } from '@config/index';
+import { css } from '@emotion/react';
+import styled from '@emotion/styled';
+import { THEME } from '@styles/ThemeProvider/theme';
+import { areaResize } from '@utils/styles/textarea-resize';
+import React, { Dispatch, SetStateAction, useRef, useState } from 'react';
+
+interface SuggestionInputProps {
+  setIsSended: Dispatch<SetStateAction<boolean>>;
+}
+
+const SuggestionInput = ({ setIsSended }: SuggestionInputProps) => {
+  const areaRef = useRef<HTMLTextAreaElement>(null);
+  const [isInvalid, setIsInvalid] = useState<boolean>(true);
+
+  const onChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    if (!e.currentTarget.value || e.currentTarget.value.length < 5) {
+      setIsInvalid(true);
+      return;
+    }
+    setIsInvalid(false);
+  };
+  const onResize = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+    areaResize(e.currentTarget);
+  };
+
+  const onSuggest = async () => {
+    setIsSended((prev) => !prev);
+    await http.post(
+      `${SERVER_URL}/api/suggestion`,
+      {
+        content: areaRef.current?.value,
+      },
+      {
+        headers: {
+          'Content-Type': 'application/json',
+        },
+      },
+    );
+  };
+
+  return (
+    <>
+      <span
+        css={css`
+          color: ${THEME.TEXT.BLACK};
+          font-weight: bold;
+          margin-bottom: 15px;
+        `}
+      >
+        건의사항
+      </span>
+      <TextArea
+        minLength={5}
+        placeholder="건의사항을 5글자 이상 남겨주세요."
+        rows={1}
+        ref={areaRef}
+        onKeyDown={onResize}
+        onKeyUp={onResize}
+        onChange={onChange}
+      ></TextArea>
+      <Button onClick={onSuggest} disabled={isInvalid}>
+        보내기
+      </Button>
+    </>
+  );
+};
+
+export default SuggestionInput;
+
+const TextArea = styled.textarea`
+  line-height: 1.5;
+  padding: 10px;
+  resize: none;
+  overflow-y: hidden;
+
+  font-size: 16px;
+  font-weight: bold;
+  border-radius: 8px;
+
+  &::placeholder {
+    color: ${THEME.TEXT.GRAY};
+    font-weight: lighter;
+  }
+`;
diff --git a/src/components/Modal/SuggestionModal/SuggestionThxMessage.tsx b/src/components/Modal/SuggestionModal/SuggestionThxMessage.tsx
@@ -0,0 +1,20 @@
+import { css } from '@emotion/react';
+
+const SuggestionThxMessage = () => {
+  return (
+    <>
+      <span
+        css={css`
+          display: flex;
+          justify-content: center;
+          line-height: 30px;
+        `}
+      >
+        🙇‍♂️ 건의사항을 남겨 주셔서 정말 감사드립니다! 🙇‍♂️ <br />더 좋은 서비스를
+        제공할 수 있도록 노력하겠습니다.
+      </span>
+    </>
+  );
+};
+
+export default SuggestionThxMessage;
diff --git a/src/components/Modal/SuggestionModal/index.tsx b/src/components/Modal/SuggestionModal/index.tsx
@@ -1,95 +1,24 @@
-import http from '@apis/http';
-import Button from '@components/Button';
-import { SERVER_URL } from '@config/index';
-import { css } from '@emotion/react';
-import styled from '@emotion/styled';
-import { THEME } from '@styles/ThemeProvider/theme';
-import { areaResize } from '@utils/styles/textarea-resize';
-import React, { useRef, useState } from 'react';
+import React, { useState } from 'react';
 
+import SuggestionInput from './SuggestionInput';
+import SuggestionThxMessage from './SuggestionThxMessage';
 import Modal from '..';
 
 interface SuggestionModalProps {
   onClose: () => void;
 }
 
 const SuggestionModal = ({ onClose }: SuggestionModalProps) => {
-  const areaRef = useRef<HTMLTextAreaElement>(null);
-  const [isEmtpy, setIsEmpty] = useState<boolean>(true);
-
-  const onChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
-    if (e.currentTarget.value) setIsEmpty(false);
-    else setIsEmpty(true);
-  };
-  const onResize = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
-    areaResize(e.currentTarget);
-  };
-
-  const onSuggest = async () => {
-    await http.post(
-      `${SERVER_URL}/api/suggestion`,
-      {
-        content: areaRef.current?.value,
-      },
-      {
-        headers: {
-          'Content-Type': 'application/json',
-        },
-      },
-    );
-  };
-
+  const [isSended, setIsSended] = useState<boolean>(false);
   return (
     <Modal onClose={onClose}>
-      <ModalContent>
-        <span
-          css={css`
-            color: ${THEME.TEXT.BLACK};
-            font-weight: bold;
-            margin-bottom: 15px;
-          `}
-        >
-          건의사항
-        </span>
-        <TextArea
-          placeholder="건의사항을 남겨주세요."
-          rows={1}
-          ref={areaRef}
-          onKeyDown={onResize}
-          onKeyUp={onResize}
-          onChange={onChange}
-        ></TextArea>
-        <Button onClick={onSuggest} disabled={isEmtpy}>
-          보내기
-        </Button>
-      </ModalContent>
+      {isSended ? (
+        <SuggestionThxMessage />
+      ) : (
+        <SuggestionInput setIsSended={setIsSended} />
+      )}
     </Modal>
   );
 };
 
 export default SuggestionModal;
-
-const ModalContent = styled.div`
-  display: flex;
-  flex-direction: column;
-
-  background-color: ${THEME.TEXT.WHITE};
-  padding: 30px;
-  border-radius: 15px;
-`;
-
-const TextArea = styled.textarea`
-  line-height: 1.5;
-  padding: 10px;
-  resize: none;
-  overflow-y: hidden;
-
-  font-size: 16px;
-  font-weight: bold;
-  border-radius: 8px;
-
-  &::placeholder {
-    color: ${THEME.TEXT.GRAY};
-    font-weight: lighter;
-  }
-`;
diff --git a/src/components/Modal/index.tsx b/src/components/Modal/index.tsx
@@ -1,5 +1,6 @@
-import { css, keyframes } from '@emotion/react';
+import { keyframes } from '@emotion/react';
 import styled from '@emotion/styled';
+import { THEME } from '@styles/ThemeProvider/theme';
 import React, { useState } from 'react';
 
 interface ModalProps {
@@ -19,14 +20,7 @@ const Modal = ({ children, onClose }: ModalProps) => {
 
   return (
     <ModalBackground onClick={onClick}>
-      <div
-        css={css`
-          animation: ${isOpen ? modalIn : modalOut} 0.3s ease-out;
-          width: 80%;
-        `}
-      >
-        {children}
-      </div>
+      <ModalContent isOpen={isOpen}>{children}</ModalContent>
     </ModalBackground>
   );
 };
@@ -46,6 +40,19 @@ const ModalBackground = styled.div`
   z-index: 9999;
 `;
 
+const ModalContent = styled.div<{ isOpen: boolean }>`
+  display: flex;
+  flex-direction: column;
+
+  animation: ${({ isOpen }) => (isOpen ? modalIn : modalOut)} 0.3s ease-out;
+  width: 80%;
+  padding: 30px;
+  border-radius: 15px;
+  background-color: ${THEME.TEXT.WHITE};
+  color: ${THEME.TEXT.GRAY};
+  font-weight: bold;
+`;
+
 const modalIn = keyframes`
   from{
     opacity: 0;

diff --git a/src/pages/My/index.tsx b/src/pages/My/index.tsx
@@ -21,7 +21,6 @@ const My = () => {
         <SuggestionModal onClose={() => setIsModalOpen((prev) => !prev)} />
       )}
       <h1>마이페이지</h1>
-
       <Major>
         <span>전공</span>
         <div
@@ -68,13 +67,4 @@ const Suggestion = styled.div`
   bottom: 100px;
   left: 50%;
   transform: translate(-50%, -50%);
-
-  Button {
-    display: flex;
-    align-items: center;
-    padding: 10px;
-    & > svg {
-      margin-right: 15px;
-    }
-  }
 `;