From f0c184b17f69365d3b0ca6251cf11f88dfab5a65 Mon Sep 17 00:00:00 2001 From: cod0216 Date: Thu, 11 Jun 2026 07:52:43 +0900 Subject: [PATCH 1/8] feat: add mobile hamburger menu to navbar --- src/shared/navbar/Navbar.module.scss | 59 ++++++++++++++++++++++++++++ src/shared/navbar/Navbar.tsx | 28 ++++++++++++- 2 files changed, 85 insertions(+), 2 deletions(-) diff --git a/src/shared/navbar/Navbar.module.scss b/src/shared/navbar/Navbar.module.scss index 2b54471..1af37bd 100644 --- a/src/shared/navbar/Navbar.module.scss +++ b/src/shared/navbar/Navbar.module.scss @@ -27,6 +27,7 @@ font-weight: $font-bold; color: $black; } + .navLinks { display: flex; gap: 24px; @@ -75,4 +76,62 @@ } } } + + .hamburger { + display: none; + background: none; + border: none; + cursor: pointer; + color: $black; + padding: 4px; + line-height: 0; + } + + .mobileMenu { + display: none; + } + + @media (max-width: 768px) { + .logoTitle { + display: none; + } + + .navLinks { + display: none; + } + + .actions { + display: none; + } + + .hamburger { + display: flex; + align-items: center; + } + + .mobileMenu { + display: flex; + flex-direction: column; + position: fixed; + top: 60px; + left: 0; + right: 0; + background-color: $bg-white; + border-bottom: 1px solid $gray-1; + padding: 8px 0; + + div { + font-size: $font-md; + font-weight: $font-medium; + color: $black; + cursor: pointer; + padding: 14px 24px; + + &:hover { + background-color: $gray-1; + } + } + + } + } } diff --git a/src/shared/navbar/Navbar.tsx b/src/shared/navbar/Navbar.tsx index 36be659..4ee4162 100644 --- a/src/shared/navbar/Navbar.tsx +++ b/src/shared/navbar/Navbar.tsx @@ -6,9 +6,11 @@ * @create 2025.08.18 * @note * - 2025.08.18: 최초 생성 (khaelilm1311) - * - 2026.05.12: 로그인 버튼 주석 (eunchang) + * - 2026.05.12: 로그인 버튼 주석 (cod0216) + * - 2026.06.10: 모바일 햄버거 메뉴 추가 (cod0216) */ -import React from 'react'; +import React, { useState } from 'react'; +import { RiMenuLine, RiCloseLine } from 'react-icons/ri'; import CustomButton from '@/shared/custombutton/CustomButton'; import styles from '@/shared/navbar/Navbar.module.scss'; import { useNavbar } from '@/hooks/useNavbar'; @@ -18,6 +20,15 @@ import { useNavbar } from '@/hooks/useNavbar'; */ const Navbar: React.FC = () => { const { goHome, goSupport, goHelp, goIntro, handleDownload } = useNavbar(); + const [isMenuOpen, setIsMenuOpen] = useState(false); + + /** + * + */ + const handleNavClick = (action: () => void) => { + action(); + setIsMenuOpen(false); + }; return (
@@ -25,6 +36,7 @@ const Navbar: React.FC = () => { 문제어때
+
소개
도움말
@@ -35,6 +47,18 @@ const Navbar: React.FC = () => { {/* */}
+ + + + {isMenuOpen && ( +
+
handleNavClick(goIntro)}>소개
+
handleNavClick(goHelp)}>도움말
+
handleNavClick(goSupport)}>고객센터
+
+ )} ); }; From be5d8163491c8a0cbf009b3caca6cf6d2c2f245b Mon Sep 17 00:00:00 2001 From: cod0216 Date: Thu, 11 Jun 2026 07:57:56 +0900 Subject: [PATCH 2/8] feat: add responsive styles to landing page --- src/pages/landing/Landing.module.scss | 51 ++++++++++++++++++++++++++- 1 file changed, 50 insertions(+), 1 deletion(-) diff --git a/src/pages/landing/Landing.module.scss b/src/pages/landing/Landing.module.scss index d515d21..0163dbd 100644 --- a/src/pages/landing/Landing.module.scss +++ b/src/pages/landing/Landing.module.scss @@ -324,6 +324,10 @@ .hero { grid-template-columns: 1fr; + + .heroText { + max-width: 100%; + } } .featuresCard { @@ -340,15 +344,60 @@ gap: 72px; } + .hero { + text-align: center; + + .heroText { + max-width: 100%; + + h2 { + font-size: $font-3xl; + } + + .heroButtons { + justify-content: center; + + > * { + font-size: $font-md; + padding: 8px 16px; + } + } + } + + .heroImage { + max-width: 200px; + margin: 0 auto; + } + } + .featuresCard { padding: 36px 20px 48px; } + .featuresTitle { + font-size: $font-2xl; + } + .featuresTabs { gap: 12px; } - .featureDetailCard, + .featureDetailCard { + grid-template-columns: 1fr; + + .featureDetailContent { + order: 2; + } + + .featureDetailImage { + order: 1; + } + } + + .featureDetailTitle { + font-size: $font-xl; + } + .previewStats, .previewChartArea { grid-template-columns: 1fr; From 762c4487a402106e850d9fee7069ac014bdba145 Mon Sep 17 00:00:00 2001 From: cod0216 Date: Thu, 11 Jun 2026 08:04:41 +0900 Subject: [PATCH 3/8] feat: add responsive styles to help page with floating sidebar toggle --- src/pages/help/Help.module.scss | 58 +++++++++++++++++ src/pages/help/Help.tsx | 12 ++++ .../help/components/HelpSidebar.module.scss | 34 ++++++++++ src/pages/help/components/HelpSidebar.tsx | 63 ++++++++++++------- 4 files changed, 145 insertions(+), 22 deletions(-) diff --git a/src/pages/help/Help.module.scss b/src/pages/help/Help.module.scss index 8734e48..fd4106a 100644 --- a/src/pages/help/Help.module.scss +++ b/src/pages/help/Help.module.scss @@ -65,3 +65,61 @@ flex-direction: column; gap: 64px; } + +.floatingBtn { + display: none; + position: fixed; + bottom: 28px; + left: 24px; + z-index: 198; + width: 52px; + height: 52px; + border-radius: 50%; + border: none; + cursor: pointer; + background-color: $bg-white; + box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15); + padding: 0; + overflow: hidden; + transition: transform 0.2s ease, box-shadow 0.2s ease; + + img { + width: 100%; + height: 100%; + object-fit: cover; + } + + &:hover { + transform: scale(1.08); + box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2); + } +} + +@media (max-width: 768px) { + .main { + padding: 40px 24px 80px; + } + + .heroTitle { + font-size: $font-2xl; + } + + .heroDesc { + font-size: $font-md; + } + + .categoryTitle { + font-size: $font-xl; + margin-bottom: 24px; + } + + .sectionList { + gap: 48px; + } + + .floatingBtn { + display: flex; + align-items: center; + justify-content: center; + } +} diff --git a/src/pages/help/Help.tsx b/src/pages/help/Help.tsx index 02b7bc9..f7d9ad8 100644 --- a/src/pages/help/Help.tsx +++ b/src/pages/help/Help.tsx @@ -13,6 +13,7 @@ import styles from '@/pages/help/Help.module.scss'; const Help: React.FC = () => { const firstStepId = helpCategories[0].steps[0].id; const [activeStepId, setActiveStepId] = useState(firstStepId); + const [isSidebarOpen, setIsSidebarOpen] = useState(false); const sectionRefs = useRef>(new Map()); useEffect(() => { @@ -69,6 +70,8 @@ const Help: React.FC = () => { categories={helpCategories} activeStepId={activeStepId} onStepClick={handleStepClick} + isOpen={isSidebarOpen} + onClose={() => setIsSidebarOpen(false)} />
@@ -96,6 +99,15 @@ const Help: React.FC = () => {
+ + +