빌드 에러 수정

Author: soyun-git121

src/pages/search/ReviewSearch.tsx

@@ -5,7 +5,10 @@ import { useNavigate } from 'react-router-dom';
 import { Header, SearchInput, Badge, BottomNavigation } from '@/components';
 import api from '@/api/api';
 
-export default function ReviewSearch() { // 컴포넌트 이름을 파일 이름과 맞춥니다.
+/**
+ * 최근 검색어 목록을 보여주고, 새로운 검색을 시작하는 페이지
+ */
+export default function ReviewSearch() {
   const [search, setSearch] = useState('');
   const [recentKeywords, setRecentKeywords] = useState<string[]>([]);
   const navigate = useNavigate();
@@ -14,78 +17,84 @@ export default function ReviewSearch() { // 컴포넌트 이름을 파일 이름
     navigate(-1);
   };
 
-  // ✅ 최근 검색어 불러오기
+  // 최근 검색어 목록을 서버에서 불러오는 함수
   const fetchRecentKeywords = async () => {
     try {
-      // [수정] baseURL을 사용하므로 상대 경로로 변경하고, .data로 데이터에 접근합니다.
-      const response = await api.get<string[]>('/search');
+      // API 명세에 맞는 정확한 엔드포인트로 수정해야 합니다. (예시: /api/v1/search/recent)
+      const response = await api.get<string[]>('/api/v1/search/recent');
+      // 최대 6개의 검색어만 보여줍니다.
       setRecentKeywords(response.data.slice(0, 6));
     } catch (err) {
       console.error('최근 검색어 조회 실패:', err);
-      setRecentKeywords([]); // 오류 발생 시 빈 배열로 초기화
+      setRecentKeywords([]); // 오류 발생 시 안전하게 빈 배열로 설정
     }
   };
 
-  // ✅ 검색어 삭제
-  const handleRemove = async (index: number) => {
-    const keyword = recentKeywords[index];
+  // 컴포넌트 마운트 시 최근 검색어를 불러옵니다.
+  useEffect(() => {
+    fetchRecentKeywords();
+  }, []);
+
+  // 특정 최근 검색어를 삭제하는 함수
+  const handleRemove = async (keywordToRemove: string) => {
     try {
-      await api.delete('/search', { data: { keyword } });
-      setRecentKeywords(prev => prev.filter((_, i) => i !== index));
+      // API 명세에 맞게 DELETE 요청을 보냅니다.
+      await api.delete('/api/v1/search/recent', { data: { keyword: keywordToRemove } });
+      // 상태에서도 해당 검색어를 제거합니다.
+      setRecentKeywords(prev => prev.filter(keyword => keyword !== keywordToRemove));
     } catch (err) {
       console.error('검색어 삭제 실패:', err);
     }
   };
 
-  // ✅ 검색 및 저장
+  // 검색을 실행하는 함수 (SearchInput의 onSearch prop으로 전달)
   const handleSearch = async () => {
-    const trimmed = search.trim();
-    if (!trimmed) {
+    const trimmedSearch = search.trim();
+
+    // 검색어가 비어있거나 공백만 있으면 경고하고 함수를 종료합니다.
+    if (!trimmedSearch) {
       alert('검색어를 입력해주세요.');
       return;
     }
 
     try {
-      await api.post('/search', { keyword: trimmed });
-
-      setRecentKeywords(prev => {
-        const filtered = prev.filter(word => word !== trimmed);
-        return [trimmed, ...filtered].slice(0, 6);
-      });
-
-      navigate(`/search/result?query=${encodeURIComponent(trimmed)}`);
+      // 서버에 검색어를 저장하는 API를 호출합니다 (필요하다면).
+      // await api.post('/api/v1/search/recent', { keyword: trimmedSearch });
+      
+      // 검색 결과 페이지로 이동합니다. 쿼리 파라미터로 검색어를 넘겨줍니다.
+      navigate(`/search/result?query=${encodeURIComponent(trimmedSearch)}`);
     } catch (err) {
-      console.error('검색어 저장 실패:', err);
+      console.error('검색 실행 중 오류:', err);
+      // 필요하다면 사용자에게 오류 발생을 알릴 수 있습니다.
+      alert('검색 중 오류가 발생했습니다.');
     }
   };
 
-  useEffect(() => {
-    fetchRecentKeywords();
-  }, []);
-
   return (
-    <div className="relative flex justify-center min-h-screen text-white">
+    <div className="relative flex justify-center min-h-screen bg-black text-white">
       <div className="w-full max-w-[400px] px-4 pt-16 pb-20">
         <Header leftSection="BACK" onBackClick={handleBackClick}>
           검색
         </Header>
 
-        <SearchInput
-          value={search}
-          onChange={setSearch}
-          placeholder="검색어를 입력해주세요"
-          onSearch={handleSearch}
-        />
+        <div className="mt-4">
+          <SearchInput
+            value={search}
+            onChange={setSearch} // input 값이 변경될 때마다 search 상태 업데이트
+            placeholder="영화, 배우, 태그 검색"
+            onSearch={handleSearch} // Enter 또는 돋보기 클릭 시 handleSearch 실행
+          />
+        </div>
 
-        <div className="mt-6">
-          <h2 className="mb-2 text-title-3">최근 검색어</h2>
+        <div className="mt-8">
+          <h2 className="mb-4 text-title-3 font-bold">최근 검색어</h2>
           {recentKeywords.length > 0 ? (
             <div className="flex flex-wrap gap-2">
               {recentKeywords.map((word, index) => (
                 <Badge
                   key={`${word}-${index}`}
                   type="removable"
-                  onRemove={() => handleRemove(index)}
+                  onRemove={() => handleRemove(word)}
                 >
                   {word}
                 </Badge>

src/pages/search/ReviewSearchResult.tsx

@@ -1,10 +1,13 @@
+// 파일 경로: src/pages/search/ReviewSearchResult.tsx
+
 import { useEffect, useState, useCallback } from 'react';
 import { useNavigate, useSearchParams } from 'react-router-dom';
 import { useFilter } from '@/contexts/FilterContext';
-import { SearchInput, ReviewCard } from '@/components';
+import { SearchInput, ReviewCard, Header } from '@/components'; // Header 추가
 import { FilterIcon } from '@/assets';
 import api from '@/api/api';
 
+// 서버로부터 받는 리뷰 데이터의 타입을 명확하게 정의합니다.
 interface Review {
   reviewId: number;
   content: string;
@@ -16,59 +19,118 @@ interface Review {
   hashTags: string[];
 }
 
-export default function ReviewSearchResultPage() {
+// 서버 응답 전체의 타입을 정의합니다.
+interface SearchResponse {
+  content: Review[];
+  // pageable, totalPages 등 페이지네이션 정보가 있다면 여기에 추가
+}
+
+/**
+ * 검색어에 대한 리뷰 검색 결과를 보여주는 페이지
+ */
+export default function ReviewSearchResult() { // 컴포넌트 이름 변경
   const navigate = useNavigate();
   const { isFiltered } = useFilter();
-  const [searchParams] = useSearchParams();
-  const query = searchParams.get('query') || '';
-  const [search, setSearch] = useState(query);
+  const [searchParams, setSearchParams] = useSearchParams();
+  const queryFromUrl = searchParams.get('query') || '';
+
+  const [search, setSearch] = useState(queryFromUrl); // input의 상태
   const [results, setResults] = useState<Review[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  // 검색 결과를 불러오는 함수 (useCallback으로 불필요한 재생성 방지)
+  const fetchResults = useCallback(async (currentQuery: string) => {
+    if (!currentQuery) {
+      setResults([]);
+      setLoading(false);
+      return;
+    }
+    
+    setLoading(true);
+    setError(null);
 
-  // ✅ 검색 결과 불러오기 (useCallback으로 최적화)
-  const fetchResults = useCallback(async () => {
-    if (!query) return; // query가 없으면 요청하지 않음
     try {
-      const res = await api.get<{ content: Review[] }>('/api/v1/search/reviews', {
-        params: { query },
+      // params로 쿼리를 전달합니다.
+      const res = await api.get<SearchResponse>('/api/v1/search/reviews', {
+        params: { query: currentQuery },
       });
-      // [오류 수정 1] axios 응답 데이터는 'data' 속성에 있습니다.
       setResults(res.data.content);
     } catch (err) {
       console.error('검색 결과 조회 실패:', err);
+      setError('검색 결과를 불러오는 데 실패했습니다.');
+      setResults([]);
+    } finally {
+      setLoading(false);
     }
-  }, [query]); // query가 변경될 때만 함수를 재생성합니다.
+  }, []);
 
+  // URL의 쿼리 파라미터가 변경될 때마다 검색 결과를 다시 불러옵니다.
   useEffect(() => {
-    fetchResults();
-    // [오류 수정 2] 의존성 배열에 fetchResults를 추가합니다.
-  }, [fetchResults]);
+    fetchResults(queryFromUrl);
+  }, [queryFromUrl, fetchResults]);
+
+  // 이 페이지에서 다시 검색을 실행하는 함수
+  const handleSearch = () => {
+    const trimmedSearch = search.trim();
+    if (!trimmedSearch) {
+      alert('검색어를 입력해주세요.');
+      return;
+    }
+    // URL의 쿼리 파라미터를 업데이트하여 페이지를 리렌더링하고 useEffect를 트리거합니다.
+    setSearchParams({ query: trimmedSearch });
+  };
 
   return (
-    <div className="min-h-screen text-white">
-      <div className="mx-auto w-full max-w-[400px] px-4">
-        <SearchInput value={search} onChange={setSearch} placeholder="검색어를 입력해주세요" />
-        <div className="my-3 flex justify-start">
+    <div className="min-h-screen bg-black text-white">
+      <div className="mx-auto w-full max-w-[400px] px-4 pb-10">
+        <Header leftSection="BACK" onBackClick={() => navigate(-1)}>
+          검색 결과
+        </Header>
+        
+        <div className="mt-4">
+          <SearchInput
+            value={search}
+            onChange={setSearch}
+            placeholder="검색어를 다시 입력해주세요"
+            onSearch={handleSearch} // ✅ 에러 해결: onSearch prop 추가
+          />
+        </div>
+
+        <div className="my-4 flex justify-between items-center">
+          <p className="text-sm text-gray-400">
+            총 <span className="text-white font-semibold">{results.length}</span>개의 결과
+          </p>
           <button
             onClick={() => navigate('/search/filter')}
-            className="relative flex h-6 w-6 items-center justify-center rounded-md bg-gray-800"
+            className="relative flex items-center gap-x-1 rounded-md bg-gray-800 px-2 py-1 text-sm"
           >
-            <FilterIcon className="h-5 w-5 text-gray-400" />
+            <FilterIcon className="h-4 w-4 text-gray-400" />
+            <span>필터</span>
             {isFiltered && <span className="absolute -top-1 -right-1 h-2 w-2 rounded-full bg-red-500" />}
           </button>
         </div>
 
-        <main className="flex flex-col gap-y-2">
-          {results.map((review) => (
-            <ReviewCard
-              key={review.reviewId}
-              imageUrl={review.thumbnailUrl}
-              tags={review.hashTags}
-              title={review.movieTitle}
-              description={review.content}
-              likeCount={review.likeCount}
-              onClick={() => {}}
-            />
-          ))}
+        <main className="flex flex-col gap-y-3">
+          {loading ? (
+            <p className="text-center text-gray-400">검색 중...</p>
+          ) : error ? (
+            <p className="text-center text-red-400">{error}</p>
+          ) : results.length > 0 ? (
+            results.map((review) => (
+              <ReviewCard
+                key={review.reviewId}
+                imageUrl={review.thumbnailUrl}
+                tags={review.hashTags}
+                title={review.movieTitle}
+                description={review.content}
+                likeCount={review.likeCount}
+                onClick={() => navigate(`/review/${review.reviewId}`)} // 리뷰 상세 페이지로 이동
+              />
+            ))
+          ) : (
+            <p className="text-center text-gray-400">검색 결과가 없습니다.</p>
+          )}
         </main>
       </div>
     </div>