From 65845c42ddafb34d708300238970930f7b2d672d Mon Sep 17 00:00:00 2001 From: hwinkr Date: Mon, 17 Jul 2023 20:49:43 +0900 Subject: [PATCH 1/7] =?UTF-8?q?Chore:=20Button=20=EC=BB=B4=ED=8F=AC?= =?UTF-8?q?=EB=84=8C=ED=8A=B8=20=EC=8A=A4=ED=83=80=EC=9D=BC=20=EC=88=98?= =?UTF-8?q?=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Button/index.tsx | 13 +++++++++++-- 1 file changed, 11 insertions(+), 2 deletions(-) diff --git a/src/components/Button/index.tsx b/src/components/Button/index.tsx index 5b8adb6d..b4ba9351 100644 --- 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,6 +19,10 @@ 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%; @@ -25,14 +30,18 @@ const StyledButton = styled.button` 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; + } `; From 1e736ffdaf4b6a5bfd2af302c9772e7c6083416f Mon Sep 17 00:00:00 2001 From: hwinkr Date: Mon, 17 Jul 2023 20:50:45 +0900 Subject: [PATCH 2/7] =?UTF-8?q?Style:=20Modal=20=EC=BB=B4=ED=8F=AC?= =?UTF-8?q?=EB=84=8C=ED=8A=B8=20=EA=B3=B5=ED=86=B5=EB=90=9C=20=EC=8A=A4?= =?UTF-8?q?=ED=83=80=EC=9D=BC=20=EC=B6=94=EC=83=81=ED=99=94?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Modal/index.tsx | 25 ++++++++++++++++--------- 1 file changed, 16 insertions(+), 9 deletions(-) diff --git a/src/components/Modal/index.tsx b/src/components/Modal/index.tsx index d497a574..97c746b0 100644 --- 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 ( -
- {children} -
+ {children} ); }; @@ -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; From ac101f6aca9c02faa2196ace2d0b56a7dd230477 Mon Sep 17 00:00:00 2001 From: hwinkr Date: Mon, 17 Jul 2023 20:51:51 +0900 Subject: [PATCH 3/7] =?UTF-8?q?Style:=20MMajorModal=20=EC=BB=B4=ED=8F=AC?= =?UTF-8?q?=EB=84=8C=ED=8A=B8=20=EC=8A=A4=ED=83=80=EC=9D=BC=20=EC=88=98?= =?UTF-8?q?=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Modal/MajorModal/index.tsx | 28 +++-------------------- 1 file changed, 3 insertions(+), 25 deletions(-) diff --git a/src/components/Modal/MajorModal/index.tsx b/src/components/Modal/MajorModal/index.tsx index f54ca996..475985f8 100644 --- 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 ( - + <> @@ -28,31 +28,9 @@ const MajorModal = ({ onClose, routerTo }: MajorModalProps) => { 학과 선택하기 - + ); }; 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; - } -`; From 3848a96315623acbbbbec6edfa10b1c3e3e6fda6 Mon Sep 17 00:00:00 2001 From: hwinkr Date: Mon, 17 Jul 2023 20:53:28 +0900 Subject: [PATCH 4/7] =?UTF-8?q?Refactor:=20=EA=B1=B4=EC=9D=98=EC=82=AC?= =?UTF-8?q?=ED=95=AD=20=EC=9E=91=EC=84=B1,=20=20=EA=B0=90=EC=82=AC=20?= =?UTF-8?q?=EB=A9=94=EC=84=B8=EC=A7=80=20=EC=BB=B4=ED=8F=AC=EB=84=8C?= =?UTF-8?q?=ED=8A=B8=20=EB=B6=84=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Modal/SuggestionModal/index.tsx | 89 ++----------------- 1 file changed, 9 insertions(+), 80 deletions(-) diff --git a/src/components/Modal/SuggestionModal/index.tsx b/src/components/Modal/SuggestionModal/index.tsx index 5743348c..8aa0ee9a 100644 --- a/src/components/Modal/SuggestionModal/index.tsx +++ b/src/components/Modal/SuggestionModal/index.tsx @@ -1,12 +1,7 @@ -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 { @@ -14,82 +9,16 @@ interface SuggestionModalProps { } const SuggestionModal = ({ onClose }: SuggestionModalProps) => { - const areaRef = useRef(null); - const [isEmtpy, setIsEmpty] = useState(true); - - const onChange = (e: React.ChangeEvent) => { - if (e.currentTarget.value) setIsEmpty(false); - else setIsEmpty(true); - }; - const onResize = (e: React.KeyboardEvent) => { - 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(false); return ( - - - 건의사항 - - - - + {isSended ? ( + + ) : ( + + )} ); }; 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; - } -`; From 7212d06f4414c933f50ed57343b61ac5b25232b3 Mon Sep 17 00:00:00 2001 From: hwinkr Date: Mon, 17 Jul 2023 20:54:13 +0900 Subject: [PATCH 5/7] =?UTF-8?q?Feat:=20=EA=B1=B4=EC=9D=98=EC=82=AC?= =?UTF-8?q?=ED=95=AD=20=EC=9E=91=EC=84=B1=20=EC=BB=B4=ED=8F=AC=EB=84=8C?= =?UTF-8?q?=ED=8A=B8=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Modal/SuggestionModal/SuggestionInput.tsx | 87 +++++++++++++++++++ 1 file changed, 87 insertions(+) create mode 100644 src/components/Modal/SuggestionModal/SuggestionInput.tsx diff --git a/src/components/Modal/SuggestionModal/SuggestionInput.tsx b/src/components/Modal/SuggestionModal/SuggestionInput.tsx new file mode 100644 index 00000000..05f8999b --- /dev/null +++ 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>; +} + +const SuggestionInput = ({ setIsSended }: SuggestionInputProps) => { + const areaRef = useRef(null); + const [isInvalid, setIsInvalid] = useState(true); + + const onChange = (e: React.ChangeEvent) => { + if (!e.currentTarget.value || e.currentTarget.value.length < 5) { + setIsInvalid(true); + return; + } + setIsInvalid(false); + }; + const onResize = (e: React.KeyboardEvent) => { + 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 ( + <> + + 건의사항 + + + + + ); +}; + +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; + } +`; From c7d9116b738e5d1bc6fbcf92905d3f0ddc0c6324 Mon Sep 17 00:00:00 2001 From: hwinkr Date: Mon, 17 Jul 2023 20:54:34 +0900 Subject: [PATCH 6/7] =?UTF-8?q?Feat:=20=EA=B1=B4=EC=9D=98=EC=82=AC?= =?UTF-8?q?=ED=95=AD=20=EA=B0=90=EC=82=AC=20=EB=A9=94=EC=84=B8=EC=A7=80=20?= =?UTF-8?q?=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../SuggestionModal/SuggestionThxMessage.tsx | 20 +++++++++++++++++++ 1 file changed, 20 insertions(+) create mode 100644 src/components/Modal/SuggestionModal/SuggestionThxMessage.tsx diff --git a/src/components/Modal/SuggestionModal/SuggestionThxMessage.tsx b/src/components/Modal/SuggestionModal/SuggestionThxMessage.tsx new file mode 100644 index 00000000..88e0ecf0 --- /dev/null +++ b/src/components/Modal/SuggestionModal/SuggestionThxMessage.tsx @@ -0,0 +1,20 @@ +import { css } from '@emotion/react'; + +const SuggestionThxMessage = () => { + return ( + <> + + 🙇‍♂️ 건의사항을 남겨 주셔서 정말 감사드립니다! 🙇‍♂️
더 좋은 서비스를 + 제공할 수 있도록 노력하겠습니다. + + + ); +}; + +export default SuggestionThxMessage; From 995d75352ef7d5520f19b6470521a2ea5552b3ba Mon Sep 17 00:00:00 2001 From: hwinkr Date: Mon, 17 Jul 2023 20:55:28 +0900 Subject: [PATCH 7/7] =?UTF-8?q?Chore:=20=EB=A7=88=EC=9D=B4=ED=8E=98?= =?UTF-8?q?=EC=9D=B4=EC=A7=80=20=EC=8A=A4=ED=83=80=EC=9D=BC=20=EC=88=98?= =?UTF-8?q?=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/My/index.tsx | 10 ---------- 1 file changed, 10 deletions(-) diff --git a/src/pages/My/index.tsx b/src/pages/My/index.tsx index ac714c81..9008b428 100644 --- a/src/pages/My/index.tsx +++ b/src/pages/My/index.tsx @@ -21,7 +21,6 @@ const My = () => { setIsModalOpen((prev) => !prev)} /> )}

마이페이지

- 전공
svg { - margin-right: 15px; - } - } `;