fix: 사이드바 UI 정리 (로고 이동·전체 카드 클릭·간격 보정)

app.py

@@ -34,6 +34,27 @@ def inject_css():
     )
 
 
+def handle_query_params():
+    # 사이드바 FabAgent 로고 클릭 -> ?reset=1로 진입 -> 세션 초기화
+    if "reset" in st.query_params:
+        for key in list(st.session_state.keys()):
+            del st.session_state[key]
+        del st.query_params["reset"]
+        return
+
+    # 알람 카드 클릭 -> ?alarm=X로 진입 -> 선택 알람 변경
+    if "alarm" in st.query_params:
+        alarm_id = st.query_params["alarm"]
+        ss = st.session_state
+        if alarm_id != ss.get("selected_alarm_id"):
+            ss.selected_alarm_id = alarm_id
+            ss.stage = 0
+            ss.completed_tiers = set()
+            ss.approved = False
+            ss.animation_pending = True
+        del st.query_params["alarm"]
+
+
 def init_state():
     ss = st.session_state
     ss.setdefault("selected_alarm_id", "A1")
@@ -86,6 +107,7 @@ def render_main():
 
 
 inject_css()
+handle_query_params()
 init_state()
 render_alarm_inbox()
 render_main()

components/alarm_inbox.py

@@ -12,6 +12,8 @@ from data.demo import STATUS_LABELS
 def render_alarm_inbox():
     ss = st.session_state
     with st.sidebar:
+        _render_logo()
+
         critical_count = sum(1 for a in ss.alarms if a["status"] == "critical")
         total = len(ss.alarms)
         badge = f'<span class="badge">긴급 {critical_count}</span>' if critical_count else ""
@@ -32,6 +34,29 @@ def render_alarm_inbox():
             _render_alarm_card(alarm)
 
 
+def _render_logo():
+    # 클릭 시 ?reset=1 쿼리로 진입 -> app.maybe_handle_home이 세션 초기화
+    st.markdown(
+        """
+        <a href="?reset=1" class="fab-sidebar-logo-link" target="_self">
+          <div class="fab-sidebar-logo">
+            <div class="fab-logo-mark">
+              <svg width="16" height="16" viewBox="0 0 160 160" fill="none">
+                <circle cx="80" cy="80" r="60" stroke="#fff" stroke-width="10"/>
+                <path d="M70 22 L90 22 L86 32 L74 32 Z" fill="#fff"/>
+                <rect x="46" y="58" width="68" height="8" rx="4" fill="#fff"/>
+                <rect x="46" y="76" width="52" height="8" rx="4" fill="#fff" opacity="0.7"/>
+                <rect x="46" y="94" width="36" height="8" rx="4" fill="#fff" opacity="0.4"/>
+              </svg>
+            </div>
+            <span>FabAgent</span>
+          </div>
+        </a>
+        """,
+        unsafe_allow_html=True,
+    )
+
+
 def _render_alarm_card(alarm):
     ss = st.session_state
     is_selected = alarm["id"] == ss.selected_alarm_id
@@ -52,37 +77,21 @@ def _render_alarm_card(alarm):
             f'<span class="alarm-feat-arrow">{arrow}</span></span>'
         )
 
-    st.markdown(
-        f"""
-        <div class="{classes}">
-          <div class="alarm-head">
-            <span class="chip chip-{alarm['status']}">
-              <span class="dot"></span>{STATUS_LABELS[alarm['status']]}
-            </span>
-            {selected_tag}
-          </div>
-          <div class="alarm-title">{alarm['title']}</div>
-          <div class="alarm-meta">
-            <span style="font-family: var(--mono); font-size: 11px;">{alarm['lot_id']}</span>
-            {feat_html}
-          </div>
-          <div class="alarm-time">{alarm['time']}</div>
-        </div>
-        """,
-        unsafe_allow_html=True,
+    # 카드 전체를 클릭 영역으로, ?alarm=X 쿼리로 진입하면 app.handle_query_params가 처리
+    # markdown 파서가 <a> 안의 <div>를 reparse하는 문제를 피하려고 st.html 사용
+    st.html(
+        f'<a href="?alarm={alarm["id"]}" class="alarm-card-link" target="_self">'
+        f'<div class="{classes}">'
+        f'<div class="alarm-head">'
+        f'<span class="chip chip-{alarm["status"]}"><span class="dot"></span>{STATUS_LABELS[alarm["status"]]}</span>'
+        f'{selected_tag}'
+        f'</div>'
+        f'<div class="alarm-title">{alarm["title"]}</div>'
+        f'<div class="alarm-meta">'
+        f'<span style="font-family: var(--mono); font-size: 11px;">{alarm["lot_id"]}</span>'
+        f'{feat_html}'
+        f'</div>'
+        f'<div class="alarm-time">{alarm["time"]}</div>'
+        f'</div>'
+        f'</a>'
     )
-
-    if st.button("이 알람 분석", key=f"sel-{alarm['id']}", use_container_width=True):
-        _on_alarm_click(alarm["id"])
-
-
-def _on_alarm_click(alarm_id: str):
-    ss = st.session_state
-    if alarm_id == ss.selected_alarm_id:
-        return
-    ss.selected_alarm_id = alarm_id
-    ss.stage = 0
-    ss.completed_tiers = set()
-    ss.approved = False
-    ss.animation_pending = True
-    st.rerun()

components/header.py

@@ -9,21 +9,10 @@ import streamlit as st
 
 def render_header():
     now = datetime.now().strftime("%H:%M:%S")
+    # 로고는 사이드바 최상단으로 옮김 (components/alarm_inbox.py)
     st.markdown(
         f"""
         <header class="fab-header">
-          <div class="fab-logo">
-            <div class="fab-logo-mark">
-              <svg width="16" height="16" viewBox="0 0 160 160" fill="none">
-                <circle cx="80" cy="80" r="60" stroke="#fff" stroke-width="10"/>
-                <path d="M70 22 L90 22 L86 32 L74 32 Z" fill="#fff"/>
-                <rect x="46" y="58" width="68" height="8" rx="4" fill="#fff"/>
-                <rect x="46" y="76" width="52" height="8" rx="4" fill="#fff" opacity="0.7"/>
-                <rect x="46" y="94" width="36" height="8" rx="4" fill="#fff" opacity="0.4"/>
-              </svg>
-            </div>
-            FabAgent
-          </div>
           <div class="fab-context">
             <span class="ctx-label">공정</span><span>Photo · Lithography</span>
             <span class="ctx-sep"></span>

styles/main.css

@@ -18,8 +18,12 @@ header[data-testid="stHeader"] { display: none; }
 section[data-testid="stSidebar"] {
   width: 320px !important;
   min-width: 320px !important;
+  max-width: 320px !important;
   background: var(--bg-card);
   border-right: 1px solid var(--border);
+  transform: translateX(0) !important;
+  visibility: visible !important;
+  display: block !important;
 }
 section[data-testid="stSidebar"] > div {
   padding-top: 0;
@@ -27,24 +31,33 @@ section[data-testid="stSidebar"] > div {
 section[data-testid="stSidebar"] [data-testid="stSidebarContent"] {
   padding: 0;
 }
+/* 사이드바 상단 빈 헤더(collapse 버튼 자리) 자체를 제거해 로고가 최상단에 붙도록 */
+section[data-testid="stSidebar"] [data-testid="stSidebarHeader"],
+[data-testid="stSidebarCollapseButton"],
+[data-testid="stSidebarCollapsedControl"],
+[data-testid="collapsedControl"] {
+  display: none !important;
+}
 
 /* Streamlit이 위젯 사이에 자동으로 끼우는 간격 축소 */
 [data-testid="stVerticalBlock"] { gap: 0.4rem; }
 
-/* 사이드바 알람 카드 아래의 Streamlit 버튼은 카드와 한 덩어리로 보이게 */
-section[data-testid="stSidebar"] .stButton button {
-  width: 100%;
-  background: transparent;
-  border: none;
-  color: var(--text-secondary);
-  font-size: 11px;
-  padding: 6px 14px;
-  margin-top: -6px;
-  text-align: left;
+/* 알람 카드 전체를 클릭 영역으로, <a> 래퍼는 시각적으로 투명 */
+section[data-testid="stSidebar"] [data-testid="stVerticalBlock"] {
+  gap: 0 !important;
 }
-section[data-testid="stSidebar"] .stButton button:hover {
-  background: var(--bg-subtle);
-  color: var(--brand);
+a.alarm-card-link {
+  display: block;
+  text-decoration: none;
+  color: inherit;
+  margin-top: 12px;
+}
+a.alarm-card-link:last-of-type {
+  margin-bottom: 16px;
+}
+a.alarm-card-link:focus,
+a.alarm-card-link:focus-visible {
+  outline: none;
 }
 
 :root {
@@ -227,6 +240,39 @@ html, body {
   place-items: center;
 }
 
+/* ============== Sidebar — Logo (home) ============== */
+
+a.fab-sidebar-logo-link {
+  text-decoration: none;
+  color: inherit;
+  display: block;
+}
+.fab-sidebar-logo {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 22px 20px;
+  font-weight: 800;
+  font-size: 22px;
+  letter-spacing: -0.02em;
+  color: var(--brand);
+  cursor: pointer;
+  transition: background 0.15s;
+  border-bottom: 1px solid var(--border);
+}
+.fab-sidebar-logo .fab-logo-mark {
+  width: 38px;
+  height: 38px;
+  border-radius: 9px;
+}
+.fab-sidebar-logo .fab-logo-mark svg {
+  width: 22px;
+  height: 22px;
+}
+.fab-sidebar-logo:hover {
+  background: var(--bg-subtle);
+}
+
 /* ============== Sidebar — Alarm Inbox ============== */
 
 .fab-sidebar-head {
@@ -264,13 +310,17 @@ html, body {
   position: relative;
   background: var(--bg-card);
   border: 1px solid var(--border);
-  border-radius: var(--radius);
+  border-radius: 8px;
   padding: 14px 14px 14px 16px;
   cursor: pointer;
-  transition: background 0.15s, border-color 0.15s, transform 0.1s;
+  transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
   overflow: hidden;
   margin: 0 12px;
 }
+a.alarm-card-link:hover .alarm-card {
+  border-color: var(--border-strong);
+  box-shadow: var(--shadow-card);
+}
 
 .alarm-card:hover {
   background: var(--bg-subtle);