지반침하 설정 패널 연도선택 UI 및 우측 탭 스타일 정리

apps/sn/app/(map-layout)/map/components/sinkhole/SinkholeLayerSettingPanel.tsx

@@ -1,8 +1,10 @@
 "use client";
 
 import { useEffect, useState } from "react";
+import { SelectBox } from "@common/business_components/ui";
 import {
   normalizeSinkholeYearRange,
+  SINKHOLE_MIN_SEARCH_YEAR,
   validateSinkholeYearRange,
   type SinkholeSyncSummary,
   type SinkholeYearRange,
@@ -77,18 +79,33 @@ export default function SinkholeLayerSettingPanel({
   const updateYearRangeDraft = (key: keyof SinkholeYearRange, value: string) => {
     setYearRangeDraft((current) => ({
       ...current,
-      [key]: value.replace(/[^0-9]/g, "").slice(0, 4),
+      [key]: String(value).replace(/[^0-9]/g, "").slice(0, 4),
     }));
   };
 
+  const currentYear = new Date().getFullYear();
+  const yearSelectClass = "h-[22px] w-[62px] rounded-none border border-[#ccd6df] bg-white px-[4px] text-center text-[1rem] leading-none text-[#222]";
+  const startYearOptions = Array.from(
+    { length: currentYear - SINKHOLE_MIN_SEARCH_YEAR + 1 },
+    (_, index) => String(currentYear - index),
+  )
+    .filter((year) => !yearRangeDraft.endYear || Number(year) <= Number(yearRangeDraft.endYear))
+    .map((year) => ({ val: year, text: year }));
+  const endYearOptions = Array.from(
+    { length: currentYear - SINKHOLE_MIN_SEARCH_YEAR + 1 },
+    (_, index) => String(currentYear - index),
+  )
+    .filter((year) => !yearRangeDraft.startYear || Number(year) >= Number(yearRangeDraft.startYear))
+    .map((year) => ({ val: year, text: year }));
+
   const inputClass = "h-[22px] border border-[#ccd6df] px-[2px] text-center text-[1rem] leading-none text-[#222]";
   const numberInputClass = inputClass + " w-[40px]";
   const applyButtonClass = "grid h-[20px] w-[20px] shrink-0 place-items-center rounded-full bg-[#31a83b] text-[0.95rem] font-bold leading-none text-white";
   const indicator = <span className="h-2 w-2 shrink-0 rounded-full bg-[#243b93]" />;
 
   const settingRows = (
-    <div className="space-y-1 text-[1.05rem] font-medium text-slate-700">
-      <div className="flex min-h-[25px] items-center gap-1 whitespace-nowrap">
+    <div className="space-y-1.5 text-[1.05rem] font-medium text-slate-700">
+      <div className="flex min-h-[25px] items-center gap-1.5 whitespace-nowrap">
         <div className="flex min-w-0 items-center gap-1">
           {indicator}
           <label htmlFor="sinkhole-radius" className="shrink-0">지반침하반경(m)</label>
@@ -119,44 +136,37 @@ export default function SinkholeLayerSettingPanel({
           </button>
         </div>
       </div>
-      <div className="flex min-h-[25px] items-center gap-1 whitespace-nowrap">
+      <div className="flex min-h-[25px] items-center gap-1.5 whitespace-nowrap">
         <div className="flex min-w-0 items-center gap-1">
           {indicator}
-          <label htmlFor="sinkhole-start-year" className="shrink-0">시작년도</label>
-          <input
-            id="sinkhole-start-year"
-            className={numberInputClass}
-            type="text"
-            inputMode="numeric"
-            pattern="[0-9]*"
-            maxLength={4}
-            autoComplete="off"
-            value={yearRangeDraft.startYear}
-            onFocus={(event) => event.currentTarget.select()}
-            onChange={(event) => updateYearRangeDraft("startYear", event.target.value)}
-            onKeyDown={(event) => {
-              if (event.key === "Enter") void commitYearRange();
-            }}
-          />
-          <span className="px-[1px] text-[0.95rem] font-normal text-slate-500">~</span>
+          <label htmlFor="sinkhole-start-year" className="shrink-0">년도설정</label>
         </div>
-        <div className="ml-auto flex shrink-0 items-center gap-1">
-          <label htmlFor="sinkhole-end-year" className="shrink-0">종료년도</label>
-          <input
-            id="sinkhole-end-year"
-            className={numberInputClass}
-            type="text"
-            inputMode="numeric"
-            pattern="[0-9]*"
-            maxLength={4}
-            autoComplete="off"
-            value={yearRangeDraft.endYear}
-            onFocus={(event) => event.currentTarget.select()}
-            onChange={(event) => updateYearRangeDraft("endYear", event.target.value)}
-            onKeyDown={(event) => {
-              if (event.key === "Enter") void commitYearRange();
-            }}
-          />
+        <div className="ml-auto flex shrink-0 items-center gap-1.5">
+          <div id="sinkhole-start-year" className="w-[62px]">
+            <SelectBox
+              className="w-full"
+              selectClass={yearSelectClass}
+              label=""
+              selectArray={startYearOptions}
+              value={yearRangeDraft.startYear}
+              onSelectValue={(value) => updateYearRangeDraft("startYear", String(value))}
+              selectContentClass="z-[101]"
+              labelClass="hidden"
+            />
+          </div>
+          <span className="px-[1px] text-[0.95rem] font-normal text-slate-500">~</span>
+          <div id="sinkhole-end-year" className="w-[62px]">
+            <SelectBox
+              className="w-full"
+              selectClass={yearSelectClass}
+              label=""
+              selectArray={endYearOptions}
+              value={yearRangeDraft.endYear}
+              onSelectValue={(value) => updateYearRangeDraft("endYear", String(value))}
+              selectContentClass="z-[101]"
+              labelClass="hidden"
+            />
+          </div>
           <button
             type="button"
             className={applyButtonClass}
@@ -173,7 +183,7 @@ export default function SinkholeLayerSettingPanel({
 
   if (compact) {
     return (
-      <div className="w-full rounded-[6px] border border-[#dbe7f5] bg-white px-[6px] py-2 shadow-[0_2px_8px_rgba(15,23,42,0.05)]">
+      <div className="w-full rounded-[6px] border border-[#dbe7f5] bg-white px-2 py-[10px] shadow-[0_2px_8px_rgba(15,23,42,0.05)]">
         <div className="overflow-visible">{settingRows}</div>
       </div>
     );

apps/sn/app/(map-layout)/map/page.tsx

@@ -223,7 +223,7 @@ const RightPanelBookmarkTabs = ({ tabs, activeTabId, onActivate }: RightPanelBoo
               "min-h-[38px] w-[46px] border border-r-0 px-1 py-1 text-center text-[0.95rem] font-semibold leading-tight shadow-sm transition-colors",
               isActive
                 ? "bg-primary text-white border-primary"
-                : "bg-white text-[#1d4ed8] border-[#9db8d8] hover:bg-[#e8f2ff]",
+                : "bg-white text-slate-900 border-[#9db8d8] hover:bg-[#e8f2ff]",
             ].join(" ")}
             title={tab.subTitle ? `${tab.title} ${tab.subTitle}` : tab.title}
             aria-pressed={isActive}

apps/sn/docs/작업내용/SFR-010-010-지반침하정보/001-fe-SFR-010-010-지반침하정보-통합구현기록.md

@@ -358,6 +358,23 @@
 - 반경 내 관로 ID 클릭과 책갈피 탭 전환은 기존처럼 `syncRightPanelFeatureSelectionOnMap`을 통해 필요한 관로 포커스를 다시 그린다.
 - 변경 파일은 `FE_APP_ROOT/app/(map-layout)/map/page.tsx` 단일 파일이다.
 - BE API, DTO, DB 변경은 없다.
+### 4.45 2026-06-29 우측 상세 책갈피 탭 비활성 글자색 조정
+
+- 사용자 확인 기준으로 우측 상세 책갈피 탭의 비활성 글자색이 파란색이라 현재 지도/패널 톤에서 과하게 튄다는 피드백이 들어왔다.
+- `page.tsx`의 `RightPanelBookmarkTabs` 비활성 상태 클래스를 `text-[#1d4ed8]`에서 `text-slate-900`으로 바꿔, 활성 탭만 청록 헤더 강조를 받고 비활성 탭은 검은색 계열 텍스트로 보이도록 정리했다.
+- 테두리와 hover 배경은 기존 값을 유지해, 탭 상태 구분은 남기되 색 대비만 낮추는 방향으로 조정했다.
+- 변경 파일은 `FE_APP_ROOT/app/(map-layout)/map/page.tsx` 1개이며, BE API/DTO/DB 변경은 없다.
+
+### 4.46 2026-06-29 지반침하 연도설정 선택형 UI 및 한 줄 레이아웃 보정
+
+- 추가 요구사항으로 지반침하 하단 설정영역의 시작/종료년도 직접 입력 대신 프로젝트 기존 선택형 UI 패턴으로 바꿔 달라는 요청이 들어왔다.
+- `SinkholeLayerSettingPanel.tsx`에서 연도 범위를 숫자 `input` 2개 대신 `SelectBox` 2개로 바꾸고, 선택 가능한 연도는 `SINKHOLE_MIN_SEARCH_YEAR`부터 현재 연도까지로 제한했다.
+- 시작 연도는 현재 종료 연도 이하만, 종료 연도는 현재 시작 연도 이상만 보이도록 옵션을 좁혀 기존 검증 규칙을 입력 단계에서도 미리 반영했다.
+- 이어서 compact 패널이 너무 좁아 보인다는 피드백에 맞춰 연도 셀렉트 폭을 넓히고, `종료년도` 라벨을 제거해 `년도설정 [시작연도] ~ [종료연도] [적용]` 한 줄 구성을 유지하도록 다시 다듬었다.
+- 최종 라벨은 사용자 요청대로 `시작년도` 대신 `년도설정`으로 바꿨고, 카드 내부 좌우 여백과 행 간격도 소폭 늘려 답답한 인상을 줄였다.
+- 변경 파일은 `FE_APP_ROOT/app/(map-layout)/map/components/sinkhole/SinkholeLayerSettingPanel.tsx` 1개이며, BE API/DTO/DB 변경은 없다.
+- 이번 라운드는 브라우저 실화면 수동 검증까지는 진행하지 못했고, 코드 diff 기준으로만 반영 상태를 확인했다.
+
 ## 5. 승인 전 보류 사항
 
 - 목록 팝업을 `window popup`으로 열지 `/map` 내부 중앙 모달로 열지 확정 필요