노래 검색 페이지 스켈레톤 추가

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>

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>

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}

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();

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;

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}