From 415cc29a72f789729992d980164ae2c25908df52 Mon Sep 17 00:00:00 2001
From: ohhalim <ohhalim777@gmail.com>
Date: Wed, 1 Jul 2026 11:53:20 +0900
Subject: [PATCH] =?UTF-8?q?fix(ui):=20LoginBanner=20=EC=B9=B4=EB=93=9C=20?=
 =?UTF-8?q?=ED=98=95=ED=83=9C=20=EB=B3=B5=EC=9B=90=20-=20=EA=B7=B8?=
 =?UTF-8?q?=EB=9D=BC=EB=94=94=EC=96=B8=ED=8A=B8=20=EC=A0=9C=EA=B1=B0?=
 =?UTF-8?q?=ED=95=98=EA=B3=A0=20=EB=8B=A8=EC=83=89=EC=9C=BC=EB=A1=9C=20(#7?=
 =?UTF-8?q?1)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/(main)/home/page.tsx | 28 +++++++++++++++++++++-------
 1 file changed, 21 insertions(+), 7 deletions(-)

diff --git a/src/app/(main)/home/page.tsx b/src/app/(main)/home/page.tsx
index 66daad3..59b4888 100644
--- a/src/app/(main)/home/page.tsx
+++ b/src/app/(main)/home/page.tsx
@@ -1,7 +1,7 @@
 'use client'
 
 import { useState, useEffect, useRef } from 'react'
-import { Search } from 'lucide-react'
+import { Search, BarChart2, Bell, TrendingUp } from 'lucide-react'
 import { Header } from '@/components/layout/Header'
 import { CourseCard } from '@/components/course/CourseCard'
 import { Skeleton } from '@/components/ui/Skeleton'
@@ -12,6 +12,12 @@ import type { CourseCategory } from '@/lib/types'
 
 const API_URL = process.env.NEXT_PUBLIC_API_URL ?? ''
 
+const FEATURES = [
+  { Icon: BarChart2, label: '시세 차트' },
+  { Icon: Bell,      label: '목표가 알림' },
+  { Icon: TrendingUp, label: '실시간 랭킹' },
+] as const
+
 function LoginBanner() {
   const [visible, setVisible] = useState(false)
 
@@ -23,16 +29,24 @@ function LoginBanner() {
   if (!visible) return null
 
   return (
-    <div className="flex items-center justify-between px-4 py-2.5 bg-gray-50 border-b border-gray-100">
-      <div>
-        <p className="text-xs font-semibold text-gray-800">여러 골프거래소 시세를 한눈에</p>
-        <p className="text-[11px] text-gray-400 mt-0.5">목표가 도달 시 즉시 알림</p>
+    <div className="mx-4 mt-3 mb-1 rounded-2xl bg-blue-50 border border-blue-100 px-4 py-4">
+      <p className="text-xs text-blue-500 font-semibold mb-0.5">여러 골프거래소 시세를 한눈에</p>
+      <p className="text-sm font-bold text-gray-900 mb-3">목표가 도달 시 즉시 알림</p>
+
+      <div className="flex gap-4 mb-4">
+        {FEATURES.map(({ Icon, label }) => (
+          <div key={label} className="flex items-center gap-1.5">
+            <Icon size={13} className="text-blue-400 flex-shrink-0" />
+            <span className="text-[11px] text-gray-600">{label}</span>
+          </div>
+        ))}
       </div>
+
       <button
         onClick={() => { window.location.href = `${API_URL}/oauth2/authorization/google` }}
-        className="flex items-center gap-1.5 bg-white border border-gray-200 rounded-lg px-3 py-1.5 text-xs font-medium text-gray-700 hover:bg-gray-50 transition-colors flex-shrink-0"
+        className="w-full flex items-center justify-center gap-2 bg-white border border-gray-200 rounded-xl py-2.5 text-sm font-medium text-gray-700 hover:bg-gray-50 transition-colors"
       >
-        <svg viewBox="0 0 24 24" width="12" height="12" xmlns="http://www.w3.org/2000/svg">
+        <svg viewBox="0 0 24 24" width="16" height="16" xmlns="http://www.w3.org/2000/svg">
           <g transform="matrix(1, 0, 0, 1, 27.009001, -39.238998)">
             <path fill="#4285F4" d="M -3.264 51.509 C -3.264 50.719 -3.334 49.969 -3.454 49.239 L -14.754 49.239 L -14.754 53.749 L -8.284 53.749 C -8.574 55.229 -9.424 56.479 -10.684 57.329 L -10.684 60.329 L -6.824 60.329 C -4.564 58.239 -3.264 55.159 -3.264 51.509 Z"/>
             <path fill="#34A853" d="M -14.754 63.239 C -11.514 63.239 -8.804 62.159 -6.824 60.329 L -10.684 57.329 C -11.764 58.049 -13.134 58.489 -14.754 58.489 C -17.884 58.489 -20.534 56.379 -21.484 53.529 L -25.464 53.529 L -25.464 56.619 C -23.494 60.539 -19.444 63.239 -14.754 63.239 Z"/>