웹 메인페이지 헤더, 폰트, 헤시태그 레이아웃 수정

resources/css/web.css

@@ -8,38 +8,38 @@
     --color-bg-base: #FFFFFF;
     --color-bg-section: #F7F8FA; /* Very light grey for separation */
     --color-bg-tint: #EFF6FF; /* Blue tint for badges */
-    
+
     --color-text-primary: #111827;
     --color-text-secondary: #6B7280;
     --color-text-tertiary: #9CA3AF;
     --color-text-white: #FFFFFF;
 
     --color-border: #E5E7EB;
-    
+
     --color-accent-blue: #2563EB;
     --color-accent-blue-hover: #1D4ED8;
-    
+
     --color-footer-bg: #0B1220;
     --color-footer-text: #E5E7EB;
 
     /* Semantic */
     --color-danger: #EF4444;
-    
+
     /* Spacing & Layout */
     --container-width: 1280px;
     --header-height-desktop: 72px;
     --header-height-scroll: 56px;
-    
+
     /* Radius */
     --radius-card: 16px;
     --radius-pill: 9999px;
     --radius-sm: 8px;
-    
+
     /* Shadows */
     --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
     --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
     --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
-    
+
     /* Transitions */
     --transition-base: 200ms ease-out;
 }
@@ -81,6 +81,63 @@ img {
     max-width: 100%;
     display: block;
 }
+.logo{
+    display: flex;
+    align-items: center;
+    flex-shrink: 0;
+    margin-right: 16px;
+}
+
+.logo-img{
+    height: 50px;
+    width: auto;          /* 비율 유지 */
+    display: block;
+}
+
+/* Header layout fix */
+.site-header .container{
+    height: 100%;
+    display: flex;
+    align-items: center;          /* 전체 세로 가운데 */
+    justify-content: space-between;
+    gap: 16px;
+}
+
+.header-left{
+    display: flex;
+    align-items: center;          /* 로고+메뉴 세로 가운데 */
+    gap: 24px;
+    min-width: 0;
+}
+
+.desktop-nav{
+    display: flex;
+    align-items: center;          /* 메뉴 텍스트 세로 가운데 */
+    gap: 22px;
+}
+
+.nav-link{
+    display: inline-flex;         /* 텍스트도 박스로 잡아서 가운데 정렬 */
+    align-items: center;
+    height: 40px;                 /* 메뉴 높이 통일 */
+    font-weight: 700;
+    letter-spacing: 0.2px;
+}
+
+/* Exchange pill (더 자연스럽게) */
+.nav-link--exchange{
+    height: 40px;
+    padding: 0 14px;
+    border-radius: 9999px;
+    background: #EFF6FF;
+    border: 1px solid #BFDBFE;
+    color: #2563EB;
+}
+.nav-link--exchange:hover{
+    background: #2563EB;
+    border-color: #2563EB;
+    color: #fff;
+}
 
 .sr-only {
     position: absolute;
@@ -182,7 +239,7 @@ h1, h2, h3, h4, h5, h6 {
 }
 
 .nav-link {
-    font-size: 16px;
+    font-size: 17px;
     font-weight: 600;
     color: var(--color-text-primary);
 }
@@ -191,10 +248,12 @@ h1, h2, h3, h4, h5, h6 {
     color: var(--color-accent-blue);
 }
 
-.search-bar {
+.search-bar{
     position: relative;
-    max-width: 520px;
-    width: 100%;
+    flex: 0 1 300px;     /* 기본 360, 필요하면 줄어듦 */
+    max-width: 300px;    /* 상한 */
+    min-width: 220px;    /* 너무 작아지지 않게 */
+    width: auto;
 }
 
 .search-input {
@@ -207,6 +266,11 @@ h1, h2, h3, h4, h5, h6 {
     font-size: 15px;
     transition: all 0.2s;
 }
+/*.search-input{
+    height: 40px;
+    padding: 0 44px 0 16px;
+    font-size: 14px;
+}*/
 
 .search-input:focus {
     outline: none;
@@ -499,6 +563,102 @@ h1, h2, h3, h4, h5, h6 {
     color: white;
 }
 
+.auth-buttons{
+    white-space: nowrap;
+    flex: 0 0 auto;
+}
+
+.nav-link--exchange{
+    padding: 8px 12px;
+    border-radius: 9999px;
+    background: var(--color-bg-tint);
+    border: 1px solid #BFDBFE;
+    color: var(--color-accent-blue);
+    font-weight: 700;
+}
+
+.nav-link--exchange:hover{
+    background: var(--color-accent-blue);
+    border-color: var(--color-accent-blue);
+    color: #fff;
+}
+
+/* Hashtag chips */
+.tag-chips{
+    display:flex;
+    flex-wrap:wrap;
+    gap:10px;
+    margin-top: 8px;
+    margin-bottom: 12px;
+}
+
+.tag-chip{
+    display:inline-flex;
+    align-items:center;
+    height:36px;
+    padding:0 14px;
+    border-radius:9999px;
+    border:1px solid #E5E7EB;
+    background:#FFFFFF;
+    color:#111827;
+    font-weight:700;
+    font-size:13px;
+    letter-spacing:0.2px;
+    text-decoration:none;
+    transition: transform .18s ease, background-color .18s ease, border-color .18s ease, color .18s ease;
+}
+
+.tag-chip:hover{
+    transform: translateY(-1px);
+    background:#EFF6FF;
+    border-color:#93C5FD;
+    color:#2563EB;
+}
+
+/* 선택적으로 상위 4개만 컬러 포인트 */
+.tag-blue{ background:#EFF6FF; border-color:#93C5FD; color:#1D4ED8; }
+.tag-violet{ background:#F5F3FF; border-color:#DDD6FE; color:#6D28D9; }
+.tag-green{ background:#ECFDF5; border-color:#A7F3D0; color:#047857; }
+.tag-sky{ background:#F0F9FF; border-color:#BAE6FD; color:#0369A1; }
+
+@media (max-width: 480px) {
+    .logo-img{
+        height: 34px;       /* 모바일에선 낮춰서 공간 확보 */
+    }
+
+    .logo{
+        margin-right: 8px;  /* 여백 줄이기 */
+    }
+
+    /* ✅ 검색폼 거의 풀폭 */
+    .search-bar{
+        margin: 0 !important;     /* 양쪽 여백 제거 */
+        flex: 1 1 auto;
+        max-width: none;
+        min-width: 0;
+    }
+
+    .search-bar form{ width: 100%; }
+    .search-input{
+        width: 100%;
+        padding-left: 14px;
+        padding-right: 44px;
+    }
+
+    .tag-chips{
+        gap:8px;
+        margin-right: -12px;  /* 컨테이너 패딩 보정 원하면 */
+        padding-right: 12px;
+    }
+    .tag-chip{
+        height:34px;
+        padding:0 12px;
+        font-size:12.5px;
+    }
+}
+
+
+
 /* Mobile Breakpoint */
 @media (max-width: 768px) {
     :root {
@@ -511,16 +671,16 @@ h1, h2, h3, h4, h5, h6 {
     }
 
     .hero-title { font-size: 28px; }
-    
+
     .search-bar {
         display: none; /* Handle mobile search differently */
     }
-    
+
     .footer-grid {
         grid-template-columns: 1fr;
         gap: 32px;
     }
-    
+
     .category-chips, .snap-carousel {
         margin-right: -24px;
         padding-right: 24px;

resources/views/web/company/header.blade.php

@@ -2,16 +2,17 @@
     <div class="container" style="height: 100%; display: flex; align-items: center; justify-content: space-between;">
 
         <!-- Left: Logo & Nav -->
-        <div class="flex items-center gap-4">
-            <a href="/" class="logo"
-                style="font-size: 24px; font-weight: 800; color: var(--color-accent-blue); margin-right: 32px;">
-                GIFTICON
+        <div class="header-left">
+            <a href="{{ url('/') }}" class="logo" aria-label="홈으로">
+                <img src="{{ asset('assets/images/common/top_logo.png') }}"
+                     alt="사이트명"
+                     class="logo-img">
             </a>
 
-            <nav class="desktop-nav" style="display: flex; gap: 24px;">
-                <a href="/" class="nav-link">Home</a>
-                <a href="/shop" class="nav-link">Shop</a>
-                <a href="/exchange" class="nav-link">상품권현금교환</a>
+            <nav class="desktop-nav" aria-label="주요 메뉴">
+                <a href="/" class="nav-link">HOME</a>
+                <a href="/shop" class="nav-link">SHOP</a>
+                <a href="/exchange" class="nav-link nav-link--exchange">상품권현금교환</a>
                 <a href="/mypage" class="nav-link">마이페이지</a>
                 <a href="/cs" class="nav-link">고객센터</a>
             </nav>
@@ -51,14 +52,34 @@
 <style>
     @media (max-width: 1024px) {
 
+        /* 메뉴/로그인만 숨김 */
         .desktop-nav,
-        .search-bar,
         .auth-buttons {
             display: none !important;
         }
 
+        /* 검색은 유지 + 모바일 폭 최적화 */
+        .search-bar {
+            display: block !important;
+            flex: 1 1 auto;
+            max-width: none;
+            min-width: 0;
+            margin: 0 10px;
+        }
+        .search-bar form { width: 100%; }
+        .search-input { width: 100%; }
+
+        /* 햄버거 버튼 표시 */
         .mobile-menu-btn {
             display: block !important;
         }
     }
+
+    @media (max-width: 480px) {
+        .site-header .container{
+            padding-left: 12px;
+            padding-right: 12px;
+        }
+    }
 </style>
+

resources/views/web/main/quick-categories.blade.php

@@ -1,23 +1,21 @@
 <div class="container">
-    <div class="category-chips">
-        <a href="/shop?category=googleplay" class="chip">
-            <img src="https://via.placeholder.com/20/2563EB/FFFFFF?text=G" alt="" style="border-radius: 4px;"> Google
-            Play
-        </a>
-        <a href="/shop?category=paper" class="chip">
-            <img src="https://via.placeholder.com/20/purple/FFFFFF?text=C" alt="" style="border-radius: 4px;"> 문상/해피/도서
-        </a>
-        <a href="/shop?category=online" class="chip">
-            <img src="https://via.placeholder.com/20/orange/FFFFFF?text=O" alt="" style="border-radius: 4px;"> 온라인상품권
-        </a>
-        <a href="/shop?category=game" class="chip">
-            <img src="https://via.placeholder.com/20/green/FFFFFF?text=G" alt="" style="border-radius: 4px;"> 게임전용
-        </a>
-        <a href="/shop?category=convenience" class="chip">
-            <img src="https://via.placeholder.com/20/blue/FFFFFF?text=C" alt="" style="border-radius: 4px;"> 편의점
-        </a>
-        <a href="/shop?category=etc" class="chip">
-            <img src="https://via.placeholder.com/20/gray/FFFFFF?text=E" alt="" style="border-radius: 4px;"> 기타
-        </a>
+    <div class="tag-chips" aria-label="추천 태그">
+        <a href="/shop?tag=googleplay" class="tag-chip tag-blue"># GooglePlay</a>
+        <a href="/shop?tag=online" class="tag-chip tag-violet"># 온라인상품권</a>
+        <a href="/shop?tag=game" class="tag-chip tag-green"># 게임상품권</a>
+        <a href="/shop?tag=convenience" class="tag-chip tag-sky"># 편의점</a>
+
+        <a href="/shop?tag=culture" class="tag-chip"># 컬쳐문화상품권</a>
+        <a href="/shop?tag=nexon" class="tag-chip"># 넥슨온라인게임상품권</a>
+        <a href="/shop?tag=book" class="tag-chip"># 도서문화상품권</a>
+        <a href="/shop?tag=eggmoney" class="tag-chip"># 에그머니상품권</a>
+        <a href="/shop?tag=cu" class="tag-chip"># CU모바일상품권</a>
+
+        <a href="/shop?tag=itemmania" class="tag-chip"># 아이템매니아</a>
+        <a href="/shop?tag=itembay" class="tag-chip"># 아이템베이</a>
+        <a href="/shop?tag=naverwebtoon" class="tag-chip"># 네이버웹툰</a>
+        <a href="/shop?tag=playstation" class="tag-chip"># PlayStation</a>
+        <a href="/shop?tag=starballoon" class="tag-chip"># 별풍선교환권</a>
+        <a href="/shop?tag=jopalgye" class="tag-chip"># 저팔계</a>
     </div>
-</div>
+</div>

routes/site.php

@@ -1,6 +0,0 @@
-<?php
-use Illuminate\Support\Facades\Route;
-
-Route::get('/', function () {
-    return view('site.home');
-})->name('site.home');