[Feat] 검색 기능 추가 및 UI 정리

src/api/like/like.api.ts

@@ -33,6 +33,6 @@ export const unlikePlace = (contentId: string) =>
   });
 
 export const getLikeStatus = (contentId: string) =>
-  api.get<ApiResponse<LikeStatusResponse>>('places/like/status', {
+  api.get<ApiResponse<LikeStatusResponse>>('/places/like/status', {
     params: { contentId },
   });

src/api/travel/places.api.ts

@@ -8,7 +8,7 @@ export type SearchPlacesParams = {
   contentTypeId?: number;
   pageNo?: number;
   numOfRows?: number;
-  arrange?: 'O' | 'Q' | 'R' | 'S';
+  arrange?: 'A' | 'C' | 'Q' | 'R';
   keyword?: string;
   _type?: string;
 };
@@ -37,23 +37,39 @@ function toArray<T>(raw: any): T[] {
 }
 
 export async function searchPlaces(params: SearchPlacesParams): Promise<PlaceDto[]> {
-  const res = await api.get('/places', { params });
+  const cleanParams = { ...params };
+  if (typeof cleanParams.keyword === 'string' && cleanParams.keyword.trim() === '') {
+    delete (cleanParams as any).keyword;
+  }
+  const res = await api.get('/places', { params: cleanParams });
   return toArray<PlaceDto>(unwrap(res.data));
 }
 
+//-1(데이터 없음)은 undefined 처리
+function toNumberOrUndef(v: unknown): number | undefined {
+  if (v === null || v === undefined) return undefined;
+  const n = typeof v === 'number' ? v : Number(v);
+  if (Number.isNaN(n)) return undefined;
+  return n === -1 ? undefined : n;
+}
+
 export function mapToCard(p: PlaceDto) {
   const raw = p.firstimage || '';
   const imgUrl =
     typeof raw === 'string' && raw.startsWith('http://')
       ? raw.replace(/^http:\/\//, 'https://')
       : raw || undefined;
 
+  const quiet =
+    typeof p.quietnessLevel === 'number' ? p.quietnessLevel : toNumberOrUndef(p.cnctrRate);
+
   return {
     id: p.contentid,
     title: p.title,
     theme: p.catName ?? '-',
     likeCount: p.likeCount ?? 0,
     imgUrl,
-    quietLevel: typeof p.quietnessLevel === 'number',
+    quietLevel: quiet,
+    cnctrRate: quiet,
   };
 }

src/component/common/Button/Button.styled.ts

@@ -1,4 +1,4 @@
-export const BUTTON_BASE='disabled:cursor-not-allowed active:scale-95 transition-color';
+export const BUTTON_BASE = 'disabled:cursor-not-allowed active:scale-95 transition-color';
 
 export const BUTTON_VARIANT = {
   lg: {
@@ -20,13 +20,13 @@ export const BUTTON_SIZE = {
   sm: 'w-18 h-6 text-caption2',
 } as const;
 
-export const BUTTON_COLOR={
+export const BUTTON_COLOR = {
   green3: 'bg-green3 hover:opacity-80 disabled:opacity-50 disabled:cursor-not-allowed',
   'green-muted': 'bg-green-muted hover:opacity-80 disabled:opacity-50 disabled:cursor-not-allowed',
-}
+};
 
 export const BUTTON_ROUNDED = {
   lg: 'rounded-l',
   md: 'rounded-l',
   sm: 'rounded-[10px]',
-} as const;
+} as const;

src/component/common/Card/PlaceCard.tsx

@@ -5,7 +5,7 @@ type PlaceCardProps = {
   imgUrl?: string;
   title: string;
   theme: string;
-  quietLevel: number | boolean;
+  quietLevel: number | undefined;
   likeCount: number;
   showRemoveButton?: boolean;
   onRemove?: () => void;

src/component/selector/Selector.tsx

@@ -64,7 +64,7 @@ const Selector = ({
           <button
             key={main}
             onClick={() => changeMain(main)}
-            className={`text-caption4 mx-1 mb-1 rounded-l px-1 py-1 text-center ${
+            className={`text-caption4 mx-1 mb-1 cursor-pointer rounded-l px-1 py-1 text-center ${
               selectedMain === main ? leftActive : leftItem
             }`}
           >
@@ -81,7 +81,7 @@ const Selector = ({
               <button
                 key={sub}
                 onClick={() => chooseSub(sub)}
-                className={`text-caption4 mx-2 mb-1 ml-5 w-3/7 rounded-l px-2 py-1 text-center ${
+                className={`text-caption4 mx-2 mb-1 ml-5 w-3/7 cursor-pointer rounded-l px-2 py-1 text-center ${
                   active ? rightActive : rightItem
                 }`}
               >

src/component/selector/SelectorMulti.tsx

@@ -35,12 +35,12 @@ const SelectorMulti = ({
   const [selectedMain, setSelectedMain] = useState(initialMain);
 
   const [selectedSubs, setSelectedSubs] = useState<string[]>(
-    initialSubs && initialSubs.length ? [initialSubs[0]] : []
+    initialSubs && initialSubs.length ? [initialSubs[0]] : [],
   );
 
   const changeMain = (next: string) => {
     setSelectedMain(next);
-    setSelectedSubs([]); 
+    setSelectedSubs([]);
   };
 
   const toggleSub = (sub: string) => {
@@ -69,7 +69,7 @@ const SelectorMulti = ({
             key={main}
             type="button"
             onClick={() => changeMain(main)}
-            className={`text-caption4 mx-1 mb-1 rounded-l px-1 py-1 text-center ${
+            className={`text-caption4 mx-1 mb-1 cursor-pointer rounded-l px-1 py-1 text-center ${
               selectedMain === main ? leftActive : leftItem
             }`}
           >
@@ -87,7 +87,7 @@ const SelectorMulti = ({
                 key={sub}
                 type="button"
                 onClick={() => toggleSub(sub)}
-                className={`text-caption4 mx-2 mb-1 ml-5 w-3/7 rounded-l px-2 py-1 text-center ${
+                className={`text-caption4 mx-2 mb-1 ml-5 w-3/7 cursor-pointer rounded-l px-2 py-1 text-center ${
                   active ? rightActive : rightItem
                 }`}
               >

src/pages/ai/TravelSpotDetail.tsx

@@ -237,7 +237,10 @@ const TravelSpotDetail = () => {
   return (
     <div className="min-h-screen">
       <div className="bg-green3-light relative sticky top-0 z-50 h-10 w-full shadow-sm">
-        <button onClick={() => navigate(-1)} className="absolute top-1/2 -translate-y-1/2 pl-4">
+        <button
+          onClick={() => navigate(-1)}
+          className="absolute top-1/2 -translate-y-1/2 cursor-pointer pl-4"
+        >
           <ArrowLeft className="w-4" />
         </button>
         <span className="text-caption3 text-green1 absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
@@ -277,7 +280,10 @@ const TravelSpotDetail = () => {
 
                 {/*좋아요, 저장*/}
                 <div className="mt-8 flex items-center gap-1">
-                  <button onClick={handleToggleLike} className="transition-transform">
+                  <button
+                    onClick={handleToggleLike}
+                    className="cursor-pointer transition-transform"
+                  >
                     {liked ? <HeartFill /> : <HeartOutline />}
                   </button>
                   <span
@@ -287,7 +293,10 @@ const TravelSpotDetail = () => {
                     {formatCount(likeCount)}
                   </span>
 
-                  <button onClick={handleToggleBookmark} className="ml-5 transition-transform">
+                  <button
+                    onClick={handleToggleBookmark}
+                    className="ml-5 cursor-pointer transition-transform"
+                  >
                     {bookmarked ? <StarFill /> : <StarLine />}
                   </button>
                 </div>

src/pages/explore/Filter.tsx

@@ -37,25 +37,14 @@ export default function FilterPage() {
   }, [phase, step]);
 
   const handleFinish = () => {
-  // 1. 먼저 /searching 으로 이동
-  navigate('/searching');
-
-  // 2. 3초(3000ms) 후 /search/result로 이동
-  setTimeout(() => {
     navigate('/search/result', {
       state: {
-        region: {
-          areaCode: regionCodes.areaCode,
-          sigunguCode: regionCodes.sigunguCode,
-        },
-        activity: {
-          cat1: activityCodes.cat1,
-          cat2: activityCodes.cat2,
-        },
+        region: { areaCode: regionCodes.areaCode, sigunguCode: regionCodes.sigunguCode },
+        activity: { cat1: activityCodes.cat1, cat2: activityCodes.cat2 },
+        fromFilter: true,
       },
     });
-  }, 3000);
-};
+  };
 
   const resetAndSelectAgain = () => {
     setPhase('select');

src/pages/home/Homepage.tsx

@@ -30,7 +30,7 @@ export default function HomePage() {
           <div className="text-title5 text-green1 pt-1">
             지금 가장 여유롭고 한적한 여행지를 찾아드립니다.
           </div>
-          <Button variant="sm" className="mt-3" onClick={() => navigate('/explore')}>
+          <Button variant="sm" className="mt-3 cursor-pointer" onClick={() => navigate('/explore')}>
             바로가기
           </Button>
         </div>
@@ -47,7 +47,11 @@ export default function HomePage() {
               내가 원하는 조용한 여행지,
               <br /> 이제 손쉽게 찾을 수 있어요.
             </div>
-            <Button variant="sm" className="mt-5" onClick={() => navigate('/search')}>
+            <Button
+              variant="sm"
+              className="mt-5 cursor-pointer"
+              onClick={() => navigate('/search')}
+            >
               바로가기
             </Button>
           </div>
@@ -71,7 +75,11 @@ export default function HomePage() {
               <br />
               주차장 위치까지 한눈에 확인해보세요.
             </div>
-            <Button variant="sm" className="mt-5" onClick={() => navigate('/explore')}>
+            <Button
+              variant="sm"
+              className="mt-5 cursor-pointer"
+              onClick={() => navigate('/explore')}
+            >
               바로가기
             </Button>
           </div>

src/pages/home/MyPage.tsx

@@ -211,7 +211,7 @@ export default function MyPage() {
             <button
               type="button"
               onClick={handleLogout}
-              className="rounded-m text-caption2 bg-yellow2 text-green1 mt-2 px-3 py-1"
+              className="rounded-m text-caption2 bg-yellow2 text-green1 mt-2 cursor-pointer px-3 py-1"
             >
               로그아웃
             </button>
@@ -251,7 +251,7 @@ export default function MyPage() {
               type="button"
               disabled={!canSave}
               onClick={handleSaveNickname}
-              className="rounded-m border-green3 bg-green3-light text-caption2 text-green1 h-10 shrink-0 border px-5 hover:brightness-95 disabled:cursor-not-allowed disabled:opacity-50"
+              className="rounded-m border-green3 bg-green3-light text-caption2 text-green1 h-10 shrink-0 cursor-pointer border px-5 hover:brightness-95 disabled:cursor-not-allowed disabled:opacity-50"
               aria-disabled={!canSave}
             >
               {saving ? '저장 중...' : '저장'}