From 65845c42ddafb34d708300238970930f7b2d672d Mon Sep 17 00:00:00 2001 From: hwinkr Date: Mon, 17 Jul 2023 20:49:43 +0900 Subject: [PATCH 1/9] =?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/9] =?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/9] =?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/9] =?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/9] =?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/9] =?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/9] =?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; - } - } `; From 840ede1953d4b45762c7b08920c8eb68d5d66298 Mon Sep 17 00:00:00 2001 From: pp449 Date: Tue, 18 Jul 2023 17:09:32 +0900 Subject: [PATCH 8/9] =?UTF-8?q?Fix:=20=EC=84=9C=EB=B2=84=20=EC=A3=BC?= =?UTF-8?q?=EC=86=8C=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/config/index.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/config/index.ts b/src/config/index.ts index ec92855b..01e6454c 100644 --- a/src/config/index.ts +++ b/src/config/index.ts @@ -1,4 +1,4 @@ -let SERVER_URL = 'http://13.209.91.5:8080'; +let SERVER_URL = 'https://burimi.store'; if (process.env.NODE_ENV === 'development') { SERVER_URL = 'http://localhost:8080'; } From f8bf0c7d99c9666cdbddbe2ed1e0742bf7a01f27 Mon Sep 17 00:00:00 2001 From: hwinkr Date: Tue, 18 Jul 2023 18:19:23 +0900 Subject: [PATCH 9/9] =?UTF-8?q?Chore:=20useRoter=20->=20useRouter=20?= =?UTF-8?q?=EC=98=A4=ED=83=80=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Card/InformCard/index.tsx | 4 ++-- src/components/FooterTab/index.tsx | 7 +++---- src/components/Header/index.tsx | 4 ++-- src/components/List/DepartmentList/index.tsx | 9 +++++---- src/hooks/useRouter.ts | 4 ++-- src/pages/My/index.tsx | 4 ++-- 6 files changed, 16 insertions(+), 16 deletions(-) diff --git a/src/components/Card/InformCard/index.tsx b/src/components/Card/InformCard/index.tsx index 329dbcad..3a11128a 100644 --- a/src/components/Card/InformCard/index.tsx +++ b/src/components/Card/InformCard/index.tsx @@ -3,7 +3,7 @@ import MajorModal from '@components/Modal/MajorModal'; import { css } from '@emotion/react'; import styled from '@emotion/styled'; import useMajor from '@hooks/useMajor'; -import useRoter from '@hooks/useRouter'; +import useRouter from '@hooks/useRouter'; import { THEME } from '@styles/ThemeProvider/theme'; import { IconKind } from '@type/styles/icon'; import { setSize } from '@utils/styles/size'; @@ -18,7 +18,7 @@ interface InformCardProps { const InformCard = ({ icon, title, path }: InformCardProps) => { const { major } = useMajor(); const [isModalOpen, setIsModalOpen] = useState(false); - const { routerTo } = useRoter(); + const { routerTo } = useRouter(); const onClick = () => { if (!major) { diff --git a/src/components/FooterTab/index.tsx b/src/components/FooterTab/index.tsx index 5cb15a89..3f4c262d 100644 --- a/src/components/FooterTab/index.tsx +++ b/src/components/FooterTab/index.tsx @@ -1,9 +1,8 @@ import Icon from '@components/Icon'; -import { css } from '@emotion/react'; import styled from '@emotion/styled'; +import useRouter from '@hooks/useRouter'; import { THEME } from '@styles/ThemeProvider/theme'; import { IconKind } from '@type/styles/icon'; -import { useNavigate } from 'react-router-dom'; const footerIcons = [ { kind: 'map', path: '/map' }, @@ -12,10 +11,10 @@ const footerIcons = [ ] as const; const FooterTab = () => { - const navigate = useNavigate(); + const { routerTo } = useRouter(); const handleIconClick = (kind: IconKind, path: string) => { - navigate(path); + routerTo(path); }; return ( diff --git a/src/components/Header/index.tsx b/src/components/Header/index.tsx index 8a321bf5..f1d2a88c 100644 --- a/src/components/Header/index.tsx +++ b/src/components/Header/index.tsx @@ -1,11 +1,11 @@ import Icon from '@components/Icon'; import { css } from '@emotion/react'; import styled from '@emotion/styled'; -import useRoter from '@hooks/useRouter'; +import useRouter from '@hooks/useRouter'; import React from 'react'; const Header = () => { - const { routerTo, goBack } = useRoter(); + const { routerTo, goBack } = useRouter(); return (
{ const [departmentList, setDepartmentList] = useState(); const [selected, setSelected] = useState(''); const [buttonDisable, setButtonDisable] = useState(true); - const router = useNavigate(); + const { routerTo, goBack } = useRouter(); const { setMajor } = useMajor(); const { college } = useParams(); const fetchData = async () => { const result = await http.get(`/api/majorDecision/${college}`); if (result.data === undefined) { - router(-1); + goBack(); } setDepartmentList(result.data); }; @@ -34,7 +35,7 @@ const DepartmentList = () => { localStorage.setItem('major', selected); setMajor(selected); alert('전공 선택 완료 !'); - router('/'); + routerTo('/'); }; useEffect(() => { diff --git a/src/hooks/useRouter.ts b/src/hooks/useRouter.ts index 16663cb6..8fba42fb 100644 --- a/src/hooks/useRouter.ts +++ b/src/hooks/useRouter.ts @@ -1,6 +1,6 @@ import { To, useNavigate } from 'react-router-dom'; -const useRoter = () => { +const useRouter = () => { const router = useNavigate(); return { @@ -10,4 +10,4 @@ const useRoter = () => { }; }; -export default useRoter; +export default useRouter; diff --git a/src/pages/My/index.tsx b/src/pages/My/index.tsx index 9008b428..fb94639e 100644 --- a/src/pages/My/index.tsx +++ b/src/pages/My/index.tsx @@ -4,13 +4,13 @@ import SuggestionModal from '@components/Modal/SuggestionModal'; import { css } from '@emotion/react'; import styled from '@emotion/styled'; import useMajor from '@hooks/useMajor'; -import useRoter from '@hooks/useRouter'; +import useRouter from '@hooks/useRouter'; import { THEME } from '@styles/ThemeProvider/theme'; import { useState } from 'react'; const My = () => { const { major } = useMajor(); - const { routerTo } = useRoter(); + const { routerTo } = useRouter(); const [isModalOpen, setIsModalOpen] = useState(false); const onClick = () => routerTo('/major-decision');