From 7acb3af1a910e9dc9c2b0cc7555d60fc7388cb37 Mon Sep 17 00:00:00 2001 From: Choi JunHo Date: Wed, 14 Aug 2024 10:50:44 +0900 Subject: [PATCH 1/8] Refactor: move file directory delete user folder --- .../chat-form/chat-form.stories.tsx | 0 .../{user => }/chat-form/chat-form.tsx | 0 .../{user => chat-form}/header/header.tsx | 2 +- src/ui/components/molecule/header/header.tsx | 52 +++++++++++++++++++ 4 files changed, 53 insertions(+), 1 deletion(-) rename src/ui/components/molecule/{user => }/chat-form/chat-form.stories.tsx (100%) rename src/ui/components/molecule/{user => }/chat-form/chat-form.tsx (100%) rename src/ui/components/molecule/{user => chat-form}/header/header.tsx (96%) create mode 100644 src/ui/components/molecule/header/header.tsx diff --git a/src/ui/components/molecule/user/chat-form/chat-form.stories.tsx b/src/ui/components/molecule/chat-form/chat-form.stories.tsx similarity index 100% rename from src/ui/components/molecule/user/chat-form/chat-form.stories.tsx rename to src/ui/components/molecule/chat-form/chat-form.stories.tsx diff --git a/src/ui/components/molecule/user/chat-form/chat-form.tsx b/src/ui/components/molecule/chat-form/chat-form.tsx similarity index 100% rename from src/ui/components/molecule/user/chat-form/chat-form.tsx rename to src/ui/components/molecule/chat-form/chat-form.tsx diff --git a/src/ui/components/molecule/user/header/header.tsx b/src/ui/components/molecule/chat-form/header/header.tsx similarity index 96% rename from src/ui/components/molecule/user/header/header.tsx rename to src/ui/components/molecule/chat-form/header/header.tsx index a2ba20a..b7abc85 100644 --- a/src/ui/components/molecule/user/header/header.tsx +++ b/src/ui/components/molecule/chat-form/header/header.tsx @@ -3,7 +3,7 @@ import { useNavigate } from 'react-router-dom'; import { ReactComponent as RefreshIcon } from '../../../../../assets/Refresh.svg'; import { ReactComponent as MenuIcon } from '../../../../../assets/Menu.svg'; import maruEgg from '../../../../../assets/maru-egg.png'; -import IconButton from '../../../atom/icon/icon-button'; +import IconButton from '../../atom/icon/icon-button'; interface HeaderProps { type: null | 'SUSI' | 'PYEONIP' | 'JEONGSI'; diff --git a/src/ui/components/molecule/header/header.tsx b/src/ui/components/molecule/header/header.tsx new file mode 100644 index 0000000..b7abc85 --- /dev/null +++ b/src/ui/components/molecule/header/header.tsx @@ -0,0 +1,52 @@ +import React, { useState } from 'react'; +import { useNavigate } from 'react-router-dom'; +import { ReactComponent as RefreshIcon } from '../../../../../assets/Refresh.svg'; +import { ReactComponent as MenuIcon } from '../../../../../assets/Menu.svg'; +import maruEgg from '../../../../../assets/maru-egg.png'; +import IconButton from '../../atom/icon/icon-button'; + +interface HeaderProps { + type: null | 'SUSI' | 'PYEONIP' | 'JEONGSI'; +} + +const Header = ({ type }: HeaderProps) => { + const [menuOpen, setMenuOpen] = useState(false); + + const handleRefreshClick = () => { + window.location.reload(); + console.log('새로고침'); + }; + + const handleMenuClick = () => { + setMenuOpen(!menuOpen); + }; + + return ( +
+ + + +
+ 마루에그 캐릭터 +
명지대학교 입학처 챗봇
+ {type && ( +
    +
  • +
    +

    + {type === 'SUSI' ? '수시' : type === 'JEONGSI' ? '정시' : '편입'}  +

    +

    질문중

    +
    +
    • +
+ )} +
+ + + +
+ ); +}; + +export default Header; From fc1aaee26ab7375f37ddc3758992abeebc3286f1 Mon Sep 17 00:00:00 2001 From: Choi JunHo Date: Wed, 14 Aug 2024 10:51:29 +0900 Subject: [PATCH 2/8] refactor: remove page-test file remove --- src/ui/pages/page-test.tsx | 101 ------------------------------------- 1 file changed, 101 deletions(-) delete mode 100644 src/ui/pages/page-test.tsx diff --git a/src/ui/pages/page-test.tsx b/src/ui/pages/page-test.tsx deleted file mode 100644 index a9a10ad..0000000 --- a/src/ui/pages/page-test.tsx +++ /dev/null @@ -1,101 +0,0 @@ -import React from 'react'; -import ChatForm from '../components/molecule/user/chat-form/chat-form'; -import ChatCard from '../components/atom/chat-card/chat-card'; - -const PageTest: React.FC = () => { - return ( -
- -
-
- - - - - -
-
- ); -}; - -export default PageTest; From 1b0cba158821a99e97ab67fecf55c66903141bdf Mon Sep 17 00:00:00 2001 From: Choi JunHo Date: Wed, 14 Aug 2024 10:52:20 +0900 Subject: [PATCH 3/8] Refactor: add maxHeight for chatcard page height --- tailwind.config.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/tailwind.config.js b/tailwind.config.js index 9e8b706..8ad0cca 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -23,6 +23,10 @@ module.exports = { body2: ['16px', { lineHeight: '24px', fontWeight: '500' }], body3: ['14px', { lineHeight: '20px', fontWeight: '500' }], title: ['24px', { lineHeight: '32px', fontWeight: '700' }], + mobile_title: ['16px', { lineHeight: '24px', fontWeight: '600' }], + }, + maxHeight: { + 'screen-minus-header': 'calc(100vh - 1.75rem)', }, }, }, From c5c805e15cecef1edece500584b260335820394c Mon Sep 17 00:00:00 2001 From: Choi JunHo Date: Wed, 14 Aug 2024 10:52:45 +0900 Subject: [PATCH 4/8] Refactor: add maxHeight tailwindCSS --- src/ui/pages/maru-egg.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/ui/pages/maru-egg.tsx b/src/ui/pages/maru-egg.tsx index 2ed92ec..f830f59 100644 --- a/src/ui/pages/maru-egg.tsx +++ b/src/ui/pages/maru-egg.tsx @@ -1,8 +1,8 @@ import React from 'react'; -import Header from '../components/molecule/user/header/header'; +import Header from '../components/molecule/header/header'; import useTypeStore from '../../store/type-store'; import ChatCard from '../components/atom/chat-card/chat-card'; -import ChatForm from '../components/molecule/user/chat-form/chat-form'; +import ChatForm from '../components/molecule/chat-form/chat-form'; import useChatStore from '../../store/chat-store'; import PresetButton from '../components/atom/preset/preset-button'; @@ -17,10 +17,10 @@ const MaruEgg: React.FC = () => { }; return ( -
+
-
+
Date: Wed, 14 Aug 2024 10:55:07 +0900 Subject: [PATCH 5/8] Refactor: remove header extra file --- .../molecule/chat-form/header/header.tsx | 52 ------------------- 1 file changed, 52 deletions(-) delete mode 100644 src/ui/components/molecule/chat-form/header/header.tsx diff --git a/src/ui/components/molecule/chat-form/header/header.tsx b/src/ui/components/molecule/chat-form/header/header.tsx deleted file mode 100644 index b7abc85..0000000 --- a/src/ui/components/molecule/chat-form/header/header.tsx +++ /dev/null @@ -1,52 +0,0 @@ -import React, { useState } from 'react'; -import { useNavigate } from 'react-router-dom'; -import { ReactComponent as RefreshIcon } from '../../../../../assets/Refresh.svg'; -import { ReactComponent as MenuIcon } from '../../../../../assets/Menu.svg'; -import maruEgg from '../../../../../assets/maru-egg.png'; -import IconButton from '../../atom/icon/icon-button'; - -interface HeaderProps { - type: null | 'SUSI' | 'PYEONIP' | 'JEONGSI'; -} - -const Header = ({ type }: HeaderProps) => { - const [menuOpen, setMenuOpen] = useState(false); - - const handleRefreshClick = () => { - window.location.reload(); - console.log('새로고침'); - }; - - const handleMenuClick = () => { - setMenuOpen(!menuOpen); - }; - - return ( -
- - - -
- 마루에그 캐릭터 -
명지대학교 입학처 챗봇
- {type && ( -
    -
  • -
    -

    - {type === 'SUSI' ? '수시' : type === 'JEONGSI' ? '정시' : '편입'}  -

    -

    질문중

    -
    -
    • -
- )} -
- - - -
- ); -}; - -export default Header; From b6981a71ccbff6dcde271de7a68144809c619210 Mon Sep 17 00:00:00 2001 From: Choi JunHo Date: Wed, 14 Aug 2024 14:11:15 +0900 Subject: [PATCH 6/8] Feat: menu-drawer file add --- .../molecule/menu-drawer/menu-drawer.tsx | 61 +++++++++++++++++++ 1 file changed, 61 insertions(+) create mode 100644 src/ui/components/molecule/menu-drawer/menu-drawer.tsx diff --git a/src/ui/components/molecule/menu-drawer/menu-drawer.tsx b/src/ui/components/molecule/menu-drawer/menu-drawer.tsx new file mode 100644 index 0000000..7797959 --- /dev/null +++ b/src/ui/components/molecule/menu-drawer/menu-drawer.tsx @@ -0,0 +1,61 @@ +import React, { useEffect } from 'react'; +import { Drawer } from 'antd'; +import PresetButton from '../../atom/preset/preset-button'; +import useTypeStore from '../../../../store/type-store'; +import { ReactComponent as XIcon } from '../../../../assets/X.svg'; +import IconButton from '../../atom/icon/icon-button'; + +interface MenuDrawerProps { + open: boolean; + onClose: () => void; +} + +const MenuDrawer = ({ open, onClose }: MenuDrawerProps) => { + const [selectedButton, setSelectedButton] = React.useState<'SUSI' | 'PYEONIP' | 'JEONGSI' | null>(null); + const { type } = useTypeStore(); + + useEffect(() => { + setSelectedButton(type); + }, [type]); + const handleButtonClick = (selectedType: 'SUSI' | 'PYEONIP' | 'JEONGSI') => { + setSelectedButton(selectedType); + }; + return ( + +
+
+
+ handleButtonClick('SUSI')} isSelected={selectedButton === 'SUSI'}> + 수시 + + handleButtonClick('PYEONIP')} isSelected={selectedButton === 'PYEONIP'}> + 편입 + + handleButtonClick('JEONGSI')} isSelected={selectedButton === 'JEONGSI'}> + 정시 + +
+ + + +
+
+
+ FAQ 바로가기 +
+
+ 입시결과 바로가기 +
+
+ 모집요강 바로가기 +
+
+ 학생부교과, 실기/실적위주, 기타 문의------입학관리팀 : 02)300-1799, 1800
+ 학생부종합 문의 ------------------------인재발굴팀 : 02)300-1797, 1844 +
+
+ + ); +}; + +export default MenuDrawer; From 66420c6dfc3b1b83f2d2401af3f0f7ed34e59ae9 Mon Sep 17 00:00:00 2001 From: Choi JunHo Date: Wed, 14 Aug 2024 14:11:36 +0900 Subject: [PATCH 7/8] Refactor: chat-form import folder redirect --- .../components/molecule/chat-form/chat-form.tsx | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/src/ui/components/molecule/chat-form/chat-form.tsx b/src/ui/components/molecule/chat-form/chat-form.tsx index 2d88302..c83f721 100644 --- a/src/ui/components/molecule/chat-form/chat-form.tsx +++ b/src/ui/components/molecule/chat-form/chat-form.tsx @@ -1,12 +1,12 @@ import React, { useState } from 'react'; -import TextInput from '../../../atom/text-input/text-input'; -import IconButton from '../../../atom/icon/icon-button'; -import { ReactComponent as SendIcon } from '../../../../../assets/Send.svg'; -import { postQuestion } from '../../../../../api/post-question'; -import { cn } from '../../../../../utils/style'; -import useChatStore from '../../../../../store/chat-store'; -import { useAutoComplete } from '../../../../../hooks/use-auto-complete.hooks'; -import AutoCompleteList from '../../../atom/auto-complete/auto-complete'; +import TextInput from '../../atom/text-input/text-input'; +import IconButton from '../../atom/icon/icon-button'; +import { ReactComponent as SendIcon } from '../../../../assets/Send.svg'; +import { postQuestion } from '../../../../api/post-question'; +import { cn } from '../../../../utils/style'; +import useChatStore from '../../../../store/chat-store'; +import { useAutoComplete } from '../../../../hooks/use-auto-complete.hooks'; +import AutoCompleteList from '../../atom/auto-complete/auto-complete'; interface ChatFormProps { type: 'SUSI' | 'PYEONIP' | 'JEONGSI'; From 08001a5c2660feebae21c2db9f99769334d97ffe Mon Sep 17 00:00:00 2001 From: Choi JunHo Date: Wed, 14 Aug 2024 14:11:49 +0900 Subject: [PATCH 8/8] Refactor: add MenuDrawer --- src/ui/components/molecule/header/header.tsx | 13 +++++++++---- 1 file changed, 9 insertions(+), 4 deletions(-) diff --git a/src/ui/components/molecule/header/header.tsx b/src/ui/components/molecule/header/header.tsx index b7abc85..52eaff2 100644 --- a/src/ui/components/molecule/header/header.tsx +++ b/src/ui/components/molecule/header/header.tsx @@ -1,9 +1,9 @@ import React, { useState } from 'react'; -import { useNavigate } from 'react-router-dom'; -import { ReactComponent as RefreshIcon } from '../../../../../assets/Refresh.svg'; -import { ReactComponent as MenuIcon } from '../../../../../assets/Menu.svg'; -import maruEgg from '../../../../../assets/maru-egg.png'; +import { ReactComponent as RefreshIcon } from '../../../../assets/Refresh.svg'; +import { ReactComponent as MenuIcon } from '../../../../assets/Menu.svg'; +import maruEgg from '../../../../assets/maru-egg.png'; import IconButton from '../../atom/icon/icon-button'; +import MenuDrawer from '../menu-drawer/menu-drawer'; interface HeaderProps { type: null | 'SUSI' | 'PYEONIP' | 'JEONGSI'; @@ -21,6 +21,10 @@ const Header = ({ type }: HeaderProps) => { setMenuOpen(!menuOpen); }; + const handleCloseDrawer = () => { + setMenuOpen(false); + }; + return (
@@ -45,6 +49,7 @@ const Header = ({ type }: HeaderProps) => { +
); };