준설관리 관로 미표출로 인한 기능수정

apps/sn/src/features/dredging/ui/dredging-detail-popup-page.tsx

@@ -1,4 +1,5 @@
 "use client";
+import { DredgingRegistrationModeSelector } from "./dredging-registration-mode-selector";
 import { DREDGING_EXTERNAL_MODE } from "../model/disclosure";
 
 import dynamic from "next/dynamic";
@@ -607,34 +608,16 @@ const DredgingDetailPopupPage = ({
             className="card card-border !m-0 flex !min-h-[40rem] flex-1 flex-col overflow-hidden !p-0"
             data-testid="dredging-detail-photo-panel"
           >
-            <div className="card-header !m-0 shrink-0 gap-2">
+            <div className="card-header !m-0 shrink-0 flex-wrap gap-2">
               <h2 className="text-2xl font-medium text-label">준설 사진</h2>
               <div className="flex shrink-0 flex-wrap items-center justify-end gap-2">
                 {editable ? (
-                  <>
-                    <Button
-                      type="button"
-                      size="sm"
-                      color={registrationMode === "PHOTO" ? "primary" : "white"}
-                      aria-pressed={registrationMode === "PHOTO"}
-                      onClick={() => void changeRegistrationMode("PHOTO")}
-                      data-testid="dredging-edit-photo-mode"
-                    >
-                      {registrationModeLabels.PHOTO}
-                    </Button>
-                    <Button
-                      type="button"
-                      size="sm"
-                      color={
-                        registrationMode === "MANUAL" ? "primary" : "white"
-                      }
-                      aria-pressed={registrationMode === "MANUAL"}
-                      onClick={() => void changeRegistrationMode("MANUAL")}
-                      data-testid="dredging-edit-manual-mode"
-                    >
-                      {registrationModeLabels.MANUAL}
-                    </Button>
-                  </>
+                  <DredgingRegistrationModeSelector
+                    value={registrationMode}
+                    labels={registrationModeLabels}
+                    onChange={(mode) => void changeRegistrationMode(mode)}
+                    testIdPrefix="dredging-edit"
+                  />
                 ) : null}
                 <span className="text-base text-muted-foreground">
                   {totalPhotoCount}/5장

apps/sn/src/features/dredging/ui/dredging-registration-body.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import { DredgingRegistrationModeSelector } from "./dredging-registration-mode-selector";
 import { DREDGING_EXTERNAL_MODE } from "../model/disclosure";
 import type { ComponentType } from "react";
 import { FileUpload } from "@common/business_components/ui/file-upload";
@@ -239,38 +240,12 @@ export const DredgingRegistrationBody = ({
                   촬영일과 GPS 정보를 확인합니다.
                 </p>
               </div>
-              <div className="flex flex-wrap gap-2">
-                <Button
-                  type="button"
-                  size="sm"
-                  color={
-                    activeGroup.registrationMode === "PHOTO"
-                      ? "primary"
-                      : "white"
-                  }
-                  aria-pressed={activeGroup.registrationMode === "PHOTO"}
-                  onClick={() =>
-                    void changeRegistrationMode(activeGroup.id, "PHOTO")
-                  }
-                >
-                  {registrationModeLabels.PHOTO}
-                </Button>
-                <Button
-                  type="button"
-                  size="sm"
-                  color={
-                    activeGroup.registrationMode === "MANUAL"
-                      ? "primary"
-                      : "white"
-                  }
-                  aria-pressed={activeGroup.registrationMode === "MANUAL"}
-                  onClick={() =>
-                    void changeRegistrationMode(activeGroup.id, "MANUAL")
-                  }
-                >
-                  {registrationModeLabels.MANUAL}
-                </Button>
-              </div>
+              <DredgingRegistrationModeSelector
+                value={activeGroup.registrationMode}
+                labels={registrationModeLabels}
+                onChange={(mode) => void changeRegistrationMode(activeGroup.id, mode)}
+                testIdPrefix="dredging-register"
+              />
             </div>
             <div className="flex min-h-0 flex-1 flex-col p-3">
               {activeGroup.registrationMode === "PHOTO" ? (

apps/sn/src/features/dredging/ui/dredging-registration-mode-selector.tsx

@@ -0,0 +1,38 @@
+"use client";
+
+import { useId } from "react";
+import type { DredgingRegistrationMode } from "../model/types";
+
+type Props = {
+  value: DredgingRegistrationMode;
+  labels: Record<string, string>;
+  onChange: (mode: DredgingRegistrationMode) => void;
+  testIdPrefix: string;
+};
+
+/** 업로드 실행 버튼과 구분되는 등록 방식 선택. 기존 전환 처리는 호출 화면이 담당한다. */
+export const DredgingRegistrationModeSelector = ({
+  value, labels, onChange, testIdPrefix,
+}: Props) => {
+  const name = useId();
+
+  return (
+    <fieldset className="m-0 flex flex-wrap items-center gap-x-4 gap-y-2 border-0 p-0">
+      <legend className="sr-only">등록 방식</legend>
+      {(["PHOTO", "MANUAL"] as const).map((mode) => (
+        <label key={mode} className="inline-flex cursor-pointer items-center gap-2 py-1 text-sm text-label">
+          <input
+            type="radio"
+            name={name}
+            value={mode}
+            checked={value === mode}
+            onChange={() => onChange(mode)}
+            className="h-4 w-4 shrink-0 cursor-pointer accent-primary focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary"
+            data-testid={`${testIdPrefix}-${mode.toLowerCase()}-mode`}
+          />
+          <span className={value === mode ? "font-medium text-foreground" : ""}>{labels[mode]}</span>
+        </label>
+      ))}
+    </fieldset>
+  );
+};