From f78c39fcb64f299da862ddc82d898f363d5c309a Mon Sep 17 00:00:00 2001
From: onebone <jyc00410@gmail.com>
Date: Wed, 12 Aug 2026 01:30:19 +0900
Subject: [PATCH 1/4] feat: add skeleton to song search page

---
 src/pages/SongListPage.tsx | 15 ++++++++++++---
 1 file changed, 12 insertions(+), 3 deletions(-)

diff --git a/src/pages/SongListPage.tsx b/src/pages/SongListPage.tsx
index df68279..81448bd 100644
--- a/src/pages/SongListPage.tsx
+++ b/src/pages/SongListPage.tsx
@@ -4,6 +4,7 @@ import { useQueryClient } from '@tanstack/react-query';
 
 import { TopBar } from '@/components/ui/TopBar';
 import { SearchInput } from '@/components/ui/SearchInput';
+import { SongSelectSkeleton } from '@/components/skeletons/SongSelectSkeleton';
 import { useToast } from '@/hooks/useToast';
 import { SongCard } from '@/features/pin/components/SongCard';
 import { fetchPlaybackPreparations } from '@/features/pin/queries/useGetPlaybackPreparations';
@@ -25,7 +26,13 @@ export default function SongListPage() {
   const [preparingTrackId, setPreparingTrackId] = useState<number | null>(null);
 
   const trackSearchQuery = useSearchTracks({ keyword: query, limit: 200 });
-  const tracks = trackSearchQuery.data;
+  const hasSearchQuery = query.trim().length > 0;
+  const isSearchPending =
+    hasSearchQuery && (trackSearchQuery.isDebouncing || trackSearchQuery.isPending);
+  const tracks =
+    hasSearchQuery && !trackSearchQuery.isDebouncing
+      ? (trackSearchQuery.data?.tracks ?? [])
+      : [];
 
   useEffect(() => {
     if (!trackSearchQuery.isError) return;
@@ -68,7 +75,9 @@ export default function SongListPage() {
           />
         </div>
         <div className="px-4 pt-5.5">
-          {trackSearchQuery.isError ? (
+          {isSearchPending ? (
+            <SongSelectSkeleton />
+          ) : trackSearchQuery.isError ? (
             <div className="flex flex-col items-center gap-3 py-10 text-center">
               <p className="body-15-r text-grayscale-500">노래를 검색하지 못했어요.</p>
               <button
@@ -81,7 +90,7 @@ export default function SongListPage() {
             </div>
           ) : (
             <ul>
-              {tracks?.tracks.map((track) => (
+              {tracks.map((track) => (
                 <li key={track.itunesTrackId}>
                   <SongCard
                     song={track}

From 287d82b7a523320e02ed6b665ae986ca29aaf938 Mon Sep 17 00:00:00 2001
From: onebone <jyc00410@gmail.com>
Date: Wed, 12 Aug 2026 01:40:41 +0900
Subject: [PATCH 2/4] fix: hide minimum tag error message

---
 src/pages/SongDetailPage.tsx | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/src/pages/SongDetailPage.tsx b/src/pages/SongDetailPage.tsx
index 7c6295b..a82584f 100644
--- a/src/pages/SongDetailPage.tsx
+++ b/src/pages/SongDetailPage.tsx
@@ -464,11 +464,7 @@ export default function SongDetailPage() {
   const waveformPeaks = MOCK_WAVEFORM_PEAKS;
   const durationMs = preparedTrack?.durationMs ?? MOCK_PREVIEW_DURATION * 1_000;
   const hasRequiredTags = selectedTags.length >= MIN_TAG_COUNT;
-  const tagErrorMessage = !hasRequiredTags
-    ? MIN_TAG_ERROR_MESSAGE
-    : hasTagLimitError
-      ? MAX_TAG_ERROR_MESSAGE
-      : null;
+  const tagErrorMessage = hasTagLimitError ? MAX_TAG_ERROR_MESSAGE : null;
 
   const handleCreatePin = () => {
     if (createPinMutation.isPending) return;

From dc15758ebeea3360342fb1c62345f1ca91782c6a Mon Sep 17 00:00:00 2001
From: onebone <jyc00410@gmail.com>
Date: Wed, 12 Aug 2026 01:45:32 +0900
Subject: [PATCH 3/4] fix: update pin conflict distance copy to 10m

---
 src/features/pin/components/PinRadiusOverlay.tsx | 2 +-
 src/pages/PinRadiusOverlayPreviewPage.tsx        | 4 ++--
 src/pages/PinRegisterPage.tsx                    | 2 +-
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/features/pin/components/PinRadiusOverlay.tsx b/src/features/pin/components/PinRadiusOverlay.tsx
index abec717..2ed79b2 100644
--- a/src/features/pin/components/PinRadiusOverlay.tsx
+++ b/src/features/pin/components/PinRadiusOverlay.tsx
@@ -105,7 +105,7 @@ export function PinRadiusOverlay({
           <p className="max-w-full px-6 py-4 text-center body-15-m text-grayscale-200 [text-shadow:0_1px_4px_#000]">
             반경 500m 이내에 PIN을 등록할 수 있어요.
             <br />
-            다른 PIN과 20m 이상 떨어진 곳에 등록해 주세요.
+            다른 PIN과 10m 이상 떨어진 곳에 등록해 주세요.
           </p>
         </div>
       </section>
diff --git a/src/pages/PinRadiusOverlayPreviewPage.tsx b/src/pages/PinRadiusOverlayPreviewPage.tsx
index c9b3092..6339d4e 100644
--- a/src/pages/PinRadiusOverlayPreviewPage.tsx
+++ b/src/pages/PinRadiusOverlayPreviewPage.tsx
@@ -73,7 +73,7 @@ export default function PinRadiusOverlayPreviewPage() {
           zoom={zoom}
           centerLatitude={centerLatitude}
           radiusElementRef={radiusElementRef}
-          feedbackMessage={hasNearbyPinConflict ? '이미 근처 20m 이내에 PIN이 있어요' : null}
+          feedbackMessage={hasNearbyPinConflict ? '이미 근처 10m 이내에 PIN이 있어요' : null}
           onCancel={() => setLastAction('Cancel 콜백이 호출됐어요.')}
           onComplete={() => setLastAction('Complete 콜백이 호출됐어요.')}
         />
@@ -86,7 +86,7 @@ export default function PinRadiusOverlayPreviewPage() {
         </p>
 
         <label className="mt-5 flex cursor-pointer items-center justify-between gap-4 body-15-m">
-          20m conflict
+          10m conflict
           <input
             type="checkbox"
             checked={hasNearbyPinConflict}
diff --git a/src/pages/PinRegisterPage.tsx b/src/pages/PinRegisterPage.tsx
index d519fc1..6a256d2 100644
--- a/src/pages/PinRegisterPage.tsx
+++ b/src/pages/PinRegisterPage.tsx
@@ -14,7 +14,7 @@ import { usePinCreationStore } from '@/store/pinCreationStore';
 const availabilityMessage = (status: 'OUT_OF_RANGE' | 'TOO_CLOSE_TO_PIN') =>
   status === 'OUT_OF_RANGE'
     ? '현재 위치에서 500m 이내에 PIN을 등록해 주세요'
-    : '이미 근처 20m 이내에 PIN이 있어요';
+    : '이미 근처 10m 이내에 PIN이 있어요';
 
 export default function PinRegisterPage() {
   const navigate = useNavigate();

From c12846ed87c81c6c6233d8f8db81bcb8609f352e Mon Sep 17 00:00:00 2001
From: onebone <jyc00410@gmail.com>
Date: Wed, 12 Aug 2026 02:00:10 +0900
Subject: [PATCH 4/4] fix: show primary place category only

---
 src/features/pin/components/PlaceResultRow.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/features/pin/components/PlaceResultRow.tsx b/src/features/pin/components/PlaceResultRow.tsx
index 7997fb7..ee750bf 100644
--- a/src/features/pin/components/PlaceResultRow.tsx
+++ b/src/features/pin/components/PlaceResultRow.tsx
@@ -45,6 +45,7 @@ export function PlaceResultRow({
   const showDeleteButton = isRecentSearch && onDelete;
   const formattedDistance = formatDistance(distance);
   const isSelectionDisabled = disabled || isOutOfRange;
+  const displayCategory = category.split('>')[0]?.trim() || category;
 
   return (
     <div
@@ -77,7 +78,7 @@ export function PlaceResultRow({
         <span className="flex min-w-0 flex-1 flex-col items-start gap-[6px] whitespace-nowrap pb-3 pt-4">
           <span className="flex w-full min-w-0 items-center gap-[6px]">
             <span className="min-w-0 truncate body-17-r text-grayscale-100">{placeName}</span>
-            <span className="shrink-0 etc-13-r text-grayscale-400">{category}</span>
+            <span className="shrink-0 etc-13-r text-grayscale-400">{displayCategory}</span>
           </span>
 
           <span className="w-full truncate body-15-r text-grayscale-500">{address}</span>