Skip to content
Merged
Show file tree
Hide file tree
Changes from 2 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion apps/landing/src/App.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,11 +5,12 @@ import FeatureBookmarkSection from './components/FeatureBookmarkSection';
import FeatureReminderSection from './components/FeatureReminderSection';
import FeatureRewardSection from './components/FeatureRewardSection';
import FinalCTASection from './components/FinalCTASection';
import Header from './components/Header';

function App() {
return (
<div className="h-dvh snap-y snap-mandatory overflow-y-scroll scroll-smooth">
{/* <Header /> */}
<Header />

{/* 각 섹션들 */}
<section className="h-dvh snap-start">
Expand Down
15 changes: 15 additions & 0 deletions apps/landing/src/components/Header.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
import { Icon } from '@pinback/design-system/icons';
import { Button } from '@pinback/design-system/ui';

const Header = () => {
return (
<header className="fixed left-0 right-0 top-0 z-50 flex h-[7.4rem] w-full items-center justify-between px-[8rem]">
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

모바일에서 좌우 패딩 과다로 레이아웃 깨짐 가능

px-[8rem](128px)은 작은 뷰포트에서 요소가 겹치거나 넘칠 수 있습니다. 반응형 패딩으로 조정하세요.

-    <header className="fixed left-0 right-0 top-0 z-50 flex h-[7.4rem] w-full items-center justify-between px-[8rem]">
+    <header className="fixed left-0 right-0 top-0 z-50 flex h-[7.4rem] w-full items-center justify-between px-4 md:px-8">
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
<header className="fixed left-0 right-0 top-0 z-50 flex h-[7.4rem] w-full items-center justify-between px-[8rem]">
<header className="fixed left-0 right-0 top-0 z-50 flex h-[7.4rem] w-full items-center justify-between px-4 md:px-8">
🤖 Prompt for AI Agents
In apps/landing/src/components/Header.tsx around line 6 the header uses a fixed
large horizontal padding `px-[8rem]` which can break layout on small viewports;
replace the hardcoded padding with responsive utility classes (e.g., small fixed
padding on mobile and progressively larger paddings on wider breakpoints) or use
a centered container with responsive horizontal padding (container/mx-auto +
responsive px) so the header no longer overflows on mobile.

<Icon name={'logo'} width={87} height={24} />
<div>
{/*TODO: onClick 추가 */}
<Button>다운로드</Button>
</div>
</header>
);
};
export default Header;
3 changes: 1 addition & 2 deletions apps/landing/src/components/HeroSection.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,6 @@ const HeroSection = () => {

return (
<section className="bg-white-bg flex h-dvh w-full flex-col items-center justify-center px-[17.2rem] text-center">
{/* 텍스트 오버레이 */}
<div className="flex flex-col items-center justify-center">
<div className="flex flex-row flex-nowrap items-end justify-center gap-[3rem]">
<img src={landing_icon} alt="Landing Icon" />
Expand Down Expand Up @@ -56,7 +55,7 @@ const HeroSection = () => {
?.scrollIntoView({ behavior: 'smooth' });
}}
>
스트롤하기
스크롤하기
</Button>
</div>
</div>
Expand Down
Loading