From be91f7605081b59a795eaae9e67fefb14e054ac4 Mon Sep 17 00:00:00 2001
From: onebone <jyc00410@gmail.com>
Date: Sat, 8 Aug 2026 20:20:38 +0900
Subject: [PATCH] =?UTF-8?q?fix:=20=ED=95=80=20=EB=93=B1=EB=A1=9D=20?=
 =?UTF-8?q?=ED=83=9C=EA=B7=B8=20=EC=84=A0=ED=83=9D=20=EA=B2=80=EC=A6=9D=20?=
 =?UTF-8?q?(#232)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/SongDetailPage.tsx | 58 +++++++++++++++++++++++++++---------
 1 file changed, 44 insertions(+), 14 deletions(-)

diff --git a/src/pages/SongDetailPage.tsx b/src/pages/SongDetailPage.tsx
index 3735ce3d..0e9b9672 100644
--- a/src/pages/SongDetailPage.tsx
+++ b/src/pages/SongDetailPage.tsx
@@ -28,7 +28,10 @@ import { cn } from '@/lib/utils';
 import { usePinCreationStore } from '@/store/pinCreationStore';
 
 const INTRO_MAX_LENGTH = 100;
+const MIN_TAG_COUNT = 1;
 const MAX_TAG_COUNT = 4;
+const MIN_TAG_ERROR_MESSAGE = '태그를 최소 1개 선택해 주세요.';
+const MAX_TAG_ERROR_MESSAGE = '태그는 최대 4개까지 선택 가능해요.';
 const CREATION_TOAST_DURATION_MS = 2_000;
 const SONG_PREVIEW_PLAY_KEY = 'song-detail-preview';
 
@@ -458,6 +461,7 @@ export default function SongDetailPage() {
 
   const [introduction, setIntroduction] = useState('');
   const [selectedTags, setSelectedTags] = useState<string[]>([]);
+  const [hasTagLimitError, setHasTagLimitError] = useState(false);
   const [isFeedPublic, setIsFeedPublic] = useState(true);
   const [isSongSelectOpen, setIsSongSelectOpen] = useState(false);
   const [creationToast, setCreationToast] = useState<CreationToast | null>(null);
@@ -467,6 +471,12 @@ export default function SongDetailPage() {
   const coverUrl = preparedTrack?.albumImageUrl || rectangleBg;
   const waveformPeaks = MOCK_WAVEFORM_PEAKS;
   const durationMs = preparedTrack?.durationMs ?? MOCK_PREVIEW_DURATION * 1_000;
+  const hasRequiredTags = selectedTags.length >= MIN_TAG_COUNT;
+  const tagErrorMessage = hasRequiredTags
+    ? hasTagLimitError
+      ? MAX_TAG_ERROR_MESSAGE
+      : null
+    : MIN_TAG_ERROR_MESSAGE;
 
   const showCreationToast = (message: string) => {
     setCreationToast((currentToast) => ({
@@ -494,6 +504,11 @@ export default function SongDetailPage() {
       return;
     }
 
+    if (!hasRequiredTags) {
+      showCreationToast(MIN_TAG_ERROR_MESSAGE);
+      return;
+    }
+
     createPinMutation.mutate(
       {
         userLatitude: currentLocation.lat,
@@ -520,17 +535,19 @@ export default function SongDetailPage() {
   };
 
   const toggleTag = (tag: string) => {
-    setSelectedTags((prev) => {
-      if (prev.includes(tag)) {
-        return prev.filter((item) => item !== tag);
-      }
+    if (selectedTags.includes(tag)) {
+      setSelectedTags((currentTags) => currentTags.filter((item) => item !== tag));
+      setHasTagLimitError(false);
+      return;
+    }
 
-      if (prev.length >= MAX_TAG_COUNT) {
-        return prev;
-      }
+    if (selectedTags.length >= MAX_TAG_COUNT) {
+      setHasTagLimitError(true);
+      return;
+    }
 
-      return [...prev, tag];
-    });
+    setSelectedTags((currentTags) => [...currentTags, tag]);
+    setHasTagLimitError(false);
   };
 
   if (!place || !currentLocation) {
@@ -570,7 +587,8 @@ export default function SongDetailPage() {
                   disabled={
                     createPinMutation.isPending ||
                     playbackPreparationQuery.isPending ||
-                    playbackPreparationQuery.isFetching
+                    playbackPreparationQuery.isFetching ||
+                    !hasRequiredTags
                   }
                   aria-busy={
                     createPinMutation.isPending || playbackPreparationQuery.isFetching || undefined
@@ -644,10 +662,22 @@ export default function SongDetailPage() {
           </section>
 
           <section className="px-4 pt-6">
-            <h3 className="body-15-r text-grayscale-300">
-              태그 <span className="etc-13-r text-grayscale-700">(최대 4개)</span>
-            </h3>
-            <div className="grid grid-cols-5 justify-items-center gap-x-2 gap-y-3 pt-3">
+            <div className="flex items-center gap-2">
+              <h3 className="flex items-center gap-1 body-15-r text-grayscale-300">
+                태그 <span className="etc-13-r text-grayscale-700">(최소 1개)</span>
+              </h3>
+              {tagErrorMessage ? (
+                <p id="song-tag-error" aria-live="polite" className="etc-13-r text-red">
+                  {tagErrorMessage}
+                </p>
+              ) : null}
+            </div>
+            <div
+              role="group"
+              aria-label="태그 선택"
+              aria-describedby={tagErrorMessage ? 'song-tag-error' : undefined}
+              className="grid grid-cols-5 justify-items-center gap-x-2 gap-y-3 pt-3"
+            >
               {TAG_OPTIONS.map((tag) => {
                 const isSelected = selectedTags.includes(tag);