Update app.py

app.py

@@ -190,13 +190,36 @@ st.markdown(
 # 고정 이미지 URL
 #BG_URL = "https://plus.unsplash.com/premium_photo-1679830513869-cd3648acb1db?q=80&w=2127&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
 
-# === 배경 설정 UI (예시를 위해 일부 추가) ===
+# === 배경 설정 UI (수정됨) ===
 st.sidebar.subheader("🎨 배경 설정")
 st.sidebar.toggle("배경 이미지 사용", key="bg_on", value=True)
-st.sidebar.text_input("배경 이미지 URL", key="bg_url", value="https://images.unsplash.com/photo-1506744038136-46273834b3fb")
-st.sidebar.slider("배경 이미지 오버레이 (%)", 0, 100, 85, key="bg_overlay_pct")
-st.sidebar.color_picker("단색 배경 색상", key="bg_color", value="#F1F1F1", "E3E8E3", "D9E1E2", "F0F0EC")
 
+# st.expander를 사용해 UI를 깔끔하게 정리
+with st.sidebar.expander("이미지 배경 옵션", expanded=True):
+    st.text_input("배경 이미지 URL", key="bg_url", value="https://images.unsplash.com/photo-1506744038136-46273834b3fb")
+    st.slider("배경 이미지 오버레이 (%)", 0, 100, 85, key="bg_overlay_pct")
+
+with st.sidebar.expander("단색 배경 옵션", expanded=True):
+    # 라디오 버튼으로 추천 색상 팔레트 제공
+    palette = {
+        "Light Gray": "#F1F1F1",
+        "Mint": "#E3E8E3",
+        "Sky Blue": "#D9E1E2",
+        "Beige": "#F0F0EC"
+    }
+    selected_color_name = st.radio(
+        "추천 색상",
+        options=palette.keys(),
+        key="selected_color_name",
+        horizontal=True # 버튼을 가로로 배열
+    )
+    
+    # 선택된 라디오 버튼의 색상 코드를 color_picker의 기본값으로 사용
+    st.color_picker(
+        "색상 직접 선택",
+        key="bg_color",
+        value=palette[selected_color_name]
+    )
 
 def apply_background():
     # 보호: 기존 ::before 배경이 있으면 끄기 (겹침/끊김 방지)
@@ -218,22 +241,21 @@ def apply_background():
         <style>
         /* 상단·배경 투명 처리 */
         header[data-testid="stHeader"],
-        [data-testid="stAppViewContainer"],
         main, section.main {{ background: transparent !important; }}
 
         [data-testid="stAppViewContainer"] {{
             background: url('{url}') center / cover no-repeat fixed;
-            position: relative; /* 오버레이의 기준점이 되도록 설정 */
-            z-index: 0; /* 컨텐츠가 위에 오도록 */
+            position: relative; 
+            z-index: 0;
         }}
 
         /* 오버레이: 이미지 위에 흰색 막을 얹어 가독성 확보 */
         [data-testid="stAppViewContainer"]::after {{
             content: "";
-            position: absolute; /* 부모(stAppViewContainer)를 기준으로 위치 */
+            position: absolute; 
             inset: 0;
             background: rgba(255, 255, 255, {overlay_alpha});
-            z-index: -1; /* 배경 이미지 바로 위에 오도록 */
+            z-index: -1;
             pointer-events: none;
         }}