Skip to content

Commit 95dd4a6

Browse files
committed
refactor: header graident
1 parent e5321ae commit 95dd4a6

File tree

2 files changed

+26
-15
lines changed

2 files changed

+26
-15
lines changed

src/app/globals.css

+4
Original file line numberDiff line numberDiff line change
@@ -66,4 +66,8 @@ body {
6666
.invitation-gradient {
6767
background: linear-gradient(180deg, rgba(33, 33, 36, 0%) 0%, #212124 30%);
6868
}
69+
70+
.header-gradient {
71+
background: linear-gradient(180deg, #212124 70%, rgba(33, 33, 36, 0%) 100%);
72+
}
6973
}

src/app/recommendation/page.tsx

+22-15
Original file line numberDiff line numberDiff line change
@@ -60,6 +60,7 @@ const Recommendation = () => {
6060
const [chats, setChats] = useState<Chat[]>([initialRecommendChat])
6161
const [isFinish, setIsFinish] = useState(false)
6262
const [isLoading, setIsLoading] = useState(false)
63+
const [, setIsOpenShowModal] = useState(false)
6364
const bottomChat = useRef<HTMLDivElement>(null)
6465
const router = useSafeRouter()
6566

@@ -179,23 +180,29 @@ const Recommendation = () => {
179180
return (
180181
<>
181182
<div className="flex min-h-dvh flex-col bg-neutral-700">
182-
<header className="relative flex items-center pt-4">
183-
<AccessibleIconButton
184-
icon={{ type: 'caretLeft', size: 'xl' }}
185-
label="이전 페이지"
186-
className="p-[10px]"
187-
onClick={() => router.safeBack()}
188-
/>
189-
<Typography
190-
className="absolute left-1/2 translate-x-[-50%]"
191-
as="h1"
192-
size="body0"
193-
>
194-
AI 맛집 추천받기
195-
</Typography>
183+
<header className="fixed w-full h-[80px] px-[10px] header-gradient z-[100]">
184+
<div className='w-full relative h-[80px] flex justify-between items-center'>
185+
<AccessibleIconButton
186+
icon={{ type: 'caretLeft', size: 'xl' }}
187+
label="이전 페이지"
188+
onClick={() => router.safeBack()}
189+
/>
190+
<Typography
191+
className="absolute left-1/2 translate-x-[-50%]"
192+
as="h1"
193+
size="body0"
194+
>
195+
AI 맛집 추천받기
196+
</Typography>
197+
<AccessibleIconButton
198+
icon={{ type: 'info', size: 'xl' }}
199+
label="사용 정보 확인하기"
200+
onClick={() => setIsOpenShowModal(true)}
201+
/>
202+
</div>
196203
</header>
197204

198-
<section className="no-scrollbar max-h-[calc(100vh-156px)] flex-1 overflow-y-scroll">
205+
<section className="no-scrollbar max-h-[calc(100vh-156px)] flex-1 overflow-y-scroll mt-[80px]">
199206
<div className="relative flex flex-col items-center justify-center gap-4 pb-6">
200207
<img
201208
src="/images/ai.png"

0 commit comments

Comments
 (0)