From 2b975a09ebdaa4a354ca9a4253638962f0d855a6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EA=B9=80=EC=84=B1=EA=B2=BD?= Date: Tue, 21 Apr 2026 14:43:35 +0900 Subject: [PATCH] =?UTF-8?q?=EB=9E=9C=EB=94=A9=20=ED=8E=98=EC=9D=B4?= =?UTF-8?q?=EC=A7=80=20UI=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.css | 71 ++++++++++++------------ src/components/Tutorial/tutorialSteps.ts | 2 +- src/pages/Landing/DisplaySection.tsx | 6 +- src/pages/Landing/HeroSection.tsx | 4 -- 4 files changed, 38 insertions(+), 45 deletions(-) diff --git a/index.css b/index.css index 61944e8..c3d9b51 100644 --- a/index.css +++ b/index.css @@ -86,6 +86,7 @@ } .landing-section { + background: var(--Color-teal-800, #002224); min-height: 100dvh; width: 100%; } @@ -4248,6 +4249,7 @@ align-items: center; z-index: 10; position: relative; + margin-top: 50px; } .hero-logo { @@ -4313,8 +4315,9 @@ /* Hero Form */ .hero-form { + padding-top: 50px; width: 100%; - max-width: 400px; + max-width: 375px; display: flex; flex-direction: column; align-items: center; @@ -4344,17 +4347,14 @@ } .hero-input-wrapper { - width: 100%; - background-color: #ffffff; - border-radius: 999px; - padding: 11px 24px; display: flex; + width: 100%; + height: 48px; + padding: 11px 24px; align-items: center; gap: 10px; - transition: box-shadow 0.2s ease; - box-sizing: border-box; - overflow: visible; - position: relative; + border-radius: 999px; + background: var(--Color-white, #FFF); } .hero-input-wrapper.focused { @@ -4554,7 +4554,7 @@ font-weight: 400; color: #CEE5E6; letter-spacing: -0.006em; - margin-bottom: 24px; + margin: 10px; white-space: pre-line; } @@ -4565,6 +4565,12 @@ } .hero-button { + display: flex; + height: 48px; + padding: 11px 16px; + justify-content: center; + align-items: center; + gap: 10px; width: 100%; padding: 11px 16px; border-radius: 999px; @@ -4701,7 +4707,7 @@ align-items: center; justify-content: center; width: 100%; - padding: 4rem 1rem 6rem; + padding: 6rem 1rem 6rem; position: relative; } @@ -4785,7 +4791,7 @@ @media (min-width: 640px) { .feature-grid { - gap: 1.5rem; + gap: 1rem; } } @@ -4794,7 +4800,7 @@ flex-direction: row; gap: 24px; justify-content: center; - padding: 0 2rem; + padding: 0 1rem; } } @@ -4810,7 +4816,7 @@ position: relative; background-color: #01393B; border-radius: 40px; - padding: 24px 32px; + padding: 24px 24px; display: flex; flex-direction: column; align-items: center; @@ -4826,7 +4832,7 @@ max-width: 280px; min-height: 340px; padding: 24px 24px; - gap: 20px; + gap: 16px; } } @@ -4834,8 +4840,8 @@ .feature-card { max-width: 500px; min-height: 440px; - padding: 24px 40px; - gap: 24px; + padding: 24px 24px; + gap: 16px; } } @@ -5152,6 +5158,7 @@ flex-direction: column; align-items: center; justify-content: center; + padding: 50px 16px 0 16px; } /* Display Frames Container */ @@ -5160,7 +5167,7 @@ flex-direction: row; justify-content: center; align-items: center; - gap: 1rem; + gap: 2rem; margin-bottom: 2rem; width: 100%; max-width: 72rem; @@ -5168,14 +5175,13 @@ @media (min-width: 640px) { .display-frames { - gap: 1.5rem; + gap: 1rem; } } @media (min-width: 768px) { .display-frames { - gap: 2rem; - margin-bottom: 3rem; + gap: 1rem; } } @@ -5188,32 +5194,22 @@ /* Display Frame - 가로 크기는 feature-card와 일치, 세로는 9:16 비율 */ .display-frame { display: flex; - width: 120px; - height: 213px; + aspect-ratio: 9 / 16; border-radius: 2.5rem; overflow: hidden; position: relative; transition: all var(--transition-normal); } -@media (min-width: 640px) { - .display-frame { - width: 160px; - height: 284px; - } -} - @media (min-width: 768px) { .display-frame { width: 280px; - height: 498px; } } @media (min-width: 1024px) { .display-frame { - width: 340px; - height: 604px; + width: 360px; } } @@ -5392,7 +5388,7 @@ transition: all var(--transition-normal); border: none; cursor: pointer; - margin-bottom: 2rem; + margin-top: 30px; } @media (min-width: 768px) { @@ -7217,7 +7213,7 @@ /* Landing Footer */ .landing-footer { width: 100%; - background-color: #002224; + background: var(--Color-teal-800, #002224); padding: 40px 1.5rem; } @@ -7229,7 +7225,7 @@ @media (min-width: 1024px) { .landing-footer { - padding: 60px 148px; + padding: 60px 100px; } } @@ -7251,6 +7247,7 @@ } .footer-left { + min-width: 262px; display: flex; flex-direction: column; gap: 1rem; @@ -7271,6 +7268,7 @@ } .footer-right { + max-width: 600px; display: flex; flex-direction: column; gap: 4px; @@ -7429,7 +7427,6 @@ align-items: center; justify-content: center; text-align: center; - padding: 0 1rem; } diff --git a/src/components/Tutorial/tutorialSteps.ts b/src/components/Tutorial/tutorialSteps.ts index 9c105f9..accfeaf 100644 --- a/src/components/Tutorial/tutorialSteps.ts +++ b/src/components/Tutorial/tutorialSteps.ts @@ -77,7 +77,7 @@ export const tutorialSteps: TutorialStepDef[] = [ titleKey: 'tutorial.landing.button.title', descriptionKey: 'tutorial.landing.button.desc', position: 'right', - clickToAdvance: false, + clickToAdvance: true, noSpotlight: true, variant: 'bubble', }, diff --git a/src/pages/Landing/DisplaySection.tsx b/src/pages/Landing/DisplaySection.tsx index 3cf0c50..8ca0633 100755 --- a/src/pages/Landing/DisplaySection.tsx +++ b/src/pages/Landing/DisplaySection.tsx @@ -11,9 +11,9 @@ const DisplaySection: React.FC = ({ onStartClick }) => { const { t } = useTranslation(); // YouTube Shorts 영상 ID들 const videos = [ - { id: 1, videoId: 'OZJ8X4P82OA' }, - { id: 2, videoId: 'hNzMO21O40c' }, - { id: 3, videoId: 'dM8_d6Aud68' }, + { id: 1, videoId: 'trnN0SQBTiI' }, + { id: 2, videoId: '96HO497HsQI' }, + { id: 3, videoId: 'XziImxVICIk' }, ]; return ( diff --git a/src/pages/Landing/HeroSection.tsx b/src/pages/Landing/HeroSection.tsx index 0b9f6e6..0db12a5 100755 --- a/src/pages/Landing/HeroSection.tsx +++ b/src/pages/Landing/HeroSection.tsx @@ -155,10 +155,6 @@ const HeroSection: React.FC = ({ onAnalyze, onAutocomplete, on setShowAutocomplete(false); setAutocompleteResults([]); setHighlightedIndex(-1); - // LANDING_NAME 튜토리얼 진행 중이면 다음 힌트로 이동 - if (tutorial.isActive && tutorial.tutorialKey === TUTORIAL_KEYS.LANDING_NAME) { - tutorial.nextHint(); - } }; // 키보드 네비게이션 핸들러