현재레벨 불러오기 오류 수정

soyun-git121 · soyun-git121 · commit db326bdf7bbf · 2025-08-07T13:25:45.000+09:00
diff --git a/src/api/user/level.api.ts b/src/api/user/level.api.ts
@@ -3,8 +3,8 @@ import type { UserGradeResponse } from '@/types/level';
 
 export const getUserGrade = async (): Promise<UserGradeResponse> => {
   try {
-    const { data } = await api.get<{ data: UserGradeResponse }>('/profile/grades');
-    return data.data; 
+    const response = await api.get<{ data: UserGradeResponse }>('/profile');
+    return response.data.data; // ✅ 두 번 접근
   } catch (err) {
     console.error('레벨 정보 로딩 에러:', err);
     throw err;
diff --git a/src/components/common/SearchInput/SearchInput.tsx b/src/components/common/SearchInput/SearchInput.tsx
@@ -1,66 +1,105 @@
-import type { ChangeEvent, KeyboardEvent } from 'react';
-import SearchIcon from '@/assets/icons/search.svg?react';
+import { useEffect, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { Header, SearchInput, Badge, BottomNavigation } from '@/components';
+import api from '@/api/api';
 
-// 부모 컴포넌트로부터 받을 props의 타입을 정의합니다.
-interface SearchInputProps {
-  value: string; // input에 표시될 값
-  placeholder?: string; // 플레이스홀더 텍스트
-  onChange: (value: string) => void; // input 값이 변경될 때 호출될 함수
-  onSearch?: () => void; // 검색을 실행할 때 호출될 함수 (돋보기 클릭 또는 엔터)
-  className?: string; // 추가적인 스타일링을 위한 클래스
-}
+export default function ReviewSearchPage() {
+  const [search, setSearch] = useState('');
+  const [recentKeywords, setRecentKeywords] = useState<string[]>([]);
+  const navigate = useNavigate();
+
+  const handleBackClick = () => {
+    navigate(-1);
+  };
 
-export default function SearchInput({
-  value,
-  placeholder = '검색어를 입력해주세요',
-  onChange,
-  onSearch, // 부모로부터 onSearch 함수를 받아옵니다.
-  className = '',
-}: SearchInputProps) {
-  
-  /**
-   * input에서 키보드를 눌렀을 때 실행되는 함수입니다.
-   * 'Enter' 키가 눌렸을 경우 onSearch 함수를 호출합니다.
-   */
-  const handleKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {
-    if (onSearch && e.key === 'Enter') {
-      e.preventDefault(); // form 안에서 사용될 경우 페이지 새로고침 방지
-      onSearch();
+  // ✅ 최근 검색어 불러오기 (최대 6개)
+  const fetchRecentKeywords = async () => {
+    try {
+      const keywords = await api.get<string[]>('/api/v1/search');
+      setRecentKeywords(keywords.slice(0, 6));
+    } catch (err) {
+      console.error('최근 검색어 조회 실패:', err);
     }
   };
 
-  /**
-   * 돋보기 아이콘 버튼을 클릭했을 때 실행되는 함수입니다.
-   */
-  const handleSearchClick = () => {
-    if (onSearch) {
-      onSearch();
+  // ✅ 검색어 삭제
+  const handleRemove = async (index: number) => {
+    const keyword = recentKeywords[index];
+    try {
+      await api.delete('/api/v1/search', { data: { keyword } });
+      setRecentKeywords(prev => prev.filter((_, i) => i !== index));
+    } catch (err) {
+      console.error('검색어 삭제 실패:', err);
+    }
+  };
+
+  // ✅ 검색 및 저장
+  const handleSearch = async () => {
+    const trimmed = search.trim();
+    if (!trimmed) {
+      alert('검색어를 입력해주세요.');
+      return;
+    }
+
+    try {
+      // 검색어 저장
+      await api.post('/api/v1/search', { keyword: trimmed });
+
+      // 중복 제거 및 최신순 정렬
+      setRecentKeywords(prev => {
+        const filtered = prev.filter(word => word !== trimmed);
+        return [trimmed, ...filtered].slice(0, 6);
+      });
+
+      // 결과 페이지로 이동
+      navigate(`/search/result?query=${encodeURIComponent(trimmed)}`);
+    } catch (err) {
+      console.error('검색어 저장 실패:', err);
     }
   };
 
+  // ✅ 컴포넌트 마운트 시 최근 검색어 불러오기
+  useEffect(() => {
+    fetchRecentKeywords();
+  }, []);
+
   return (
-    <div className={`relative w-full ${className}`}>
-      <input
-        type="text"
-        value={value}
-        onChange={(e: ChangeEvent<HTMLInputElement>) => onChange(e.target.value)}
-        onKeyDown={handleKeyDown}
-        placeholder={placeholder}
-        className="w-full rounded-md border border-gray-800 bg-transparent py-2 pl-4 pr-10 text-white outline-none placeholder:text-gray-500"
-      />
+    <div className="relative flex justify-center min-h-screen text-white">
+      <div className="w-full max-w-[400px] px-4 pt-16 pb-20">
+        <Header leftSection="BACK" onBackClick={handleBackClick}>
+          검색
+        </Header>
 
-      {/* 
-        아이콘을 클릭 가능한 <button>으로 감싸고,
-        onClick 이벤트에 검색 실행 함수를 연결합니다.
-      */}
-      <button
-        type="button"
-        onClick={handleSearchClick}
-        className="absolute right-3 top-1/2 -translate-y-1/2"
-        aria-label="검색 실행" // 스크린 리더 사용자를 위한 접근성 라벨
-      >
-        <SearchIcon className="h-5 w-5 text-gray-700" />
-      </button>
+        <SearchInput
+          value={search}
+          onChange={setSearch}
+          placeholder="검색어를 입력해주세요"
+          onSearch={handleSearch}
+        />
+
+        <div className="mt-6">
+          <h2 className="mb-2 text-title-3">최근 검색어</h2>
+          {recentKeywords.length === 0 ? (
+            <p className="text-sm text-gray-500">최근 검색어가 없습니다.</p>
+          ) : (
+            <div className="flex flex-wrap gap-2">
+              {recentKeywords.map((word, index) => (
+                <Badge
+                  key={word}
+                  type="removable"
+                  onRemove={() => handleRemove(index)}
+                >
+                  {word}
+                </Badge>
+              ))}
+            </div>
+          )}
+        </div>
+      </div>
+
+      <div className="fixed bottom-0 left-1/2 w-full max-w-[430px] -translate-x-1/2">
+        <BottomNavigation />
+      </div>
     </div>
   );
-}
+}
diff --git a/src/pages/my/Level.tsx b/src/pages/my/Level.tsx
@@ -5,25 +5,38 @@ import { LEVELS_DATA } from '@/constants/levelcondition';
 import type { UserGradeResponse } from '@/types/level';
 import { getUserGrade } from '@/api/user/level.api';
 
+const gradeToLevelMap: { [key: string]: number } = {
+  BRONZE: 1,
+  SILVER: 2,
+  GOLD: 3,
+  PLATINUM: 4,
+};
+
 export default function LevelPage() {
   const { data, isLoading, error } = useQuery<UserGradeResponse>({
     queryKey: ['userGrade'],
     queryFn: getUserGrade,
   });
 
   if (isLoading) return <div className="text-center mt-10">로딩 중...</div>;
-  if (error || !data) return <div className="text-center mt-10 text-red-400">데이터를 불러오지 못했습니다.</div>;
+  if (error || !data || !data.grade) return <div className="text-center mt-10 text-red-400">데이터를 불러오지 못했습니다.</div>;
+
+  const userLevelNumber = gradeToLevelMap[data.grade];
+
+  if (userLevelNumber === undefined) {
+    return <div className="text-center mt-10 text-red-400">알 수 없는 레벨입니다.</div>;
+  }
 
   return (
     <div className="px-4 py-3 text-white min-h-screen font-suit">
       <Header leftSection="BACK" rightSection="NONE"> </Header>
 
-      <div className="pt-[52px]">
-        <MyLevelCard 
-          userLevel={data.grade}
-          userProgress={data.levelExp}
-          currentReviewCount={data.reviewCount}
-          currentLikeCount={data.likeCount}
+      <div className="pt-[44px]">
+        <MyLevelCard
+          userLevel={userLevelNumber}
+          userProgress={data.levelExp || 0}
+          currentReviewCount={data.reviewCount || 0}
+          currentLikeCount={data.likeCount || 0}
         />
       </div>
 
@@ -42,4 +55,4 @@ export default function LevelPage() {
       </div>
     </div>
   );
-}
+}
diff --git a/src/pages/search/ReviewSearch.tsx b/src/pages/search/ReviewSearch.tsx
@@ -1,60 +1,105 @@
-import { useState } from 'react';
-import { useNavigate } from 'react-router-dom'; 
-import {SearchInput, Badge, BottomNavigation} from '@/components'
-const initialKeywords = [
-  '뭔가검색했겠지...', '뭐가있지', '아무거나',
-  '두줄은', '채워야되니까', '일단써보기'
-];
-
-export default function ReviewSearchPage() {
+// 파일 경로: src/pages/search/ReviewSearch.tsx
+
+import { useEffect, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { Header, SearchInput, Badge, BottomNavigation } from '@/components';
+import api from '@/api/api';
+
+export default function ReviewSearch() { // 컴포넌트 이름을 파일 이름과 맞춥니다.
   const [search, setSearch] = useState('');
-  const [recentKeywords, setRecentKeywords] = useState(initialKeywords);
-  const navigate = useNavigate(); 
+  const [recentKeywords, setRecentKeywords] = useState<string[]>([]);
+  const navigate = useNavigate();
 
-  const handleRemove = (index: number) => {
-    setRecentKeywords(prev => prev.filter((_, i) => i !== index));
+  const handleBackClick = () => {
+    navigate(-1);
+  };
+
+  // ✅ 최근 검색어 불러오기
+  const fetchRecentKeywords = async () => {
+    try {
+      // [수정] baseURL을 사용하므로 상대 경로로 변경하고, .data로 데이터에 접근합니다.
+      const response = await api.get<string[]>('/search');
+      setRecentKeywords(response.data.slice(0, 6));
+    } catch (err) {
+      console.error('최근 검색어 조회 실패:', err);
+      setRecentKeywords([]); // 오류 발생 시 빈 배열로 초기화
+    }
   };
 
-    const handleSearch = () => {
-    if (!search.trim()) {
+  // ✅ 검색어 삭제
+  const handleRemove = async (index: number) => {
+    const keyword = recentKeywords[index];
+    try {
+      await api.delete('/search', { data: { keyword } });
+      setRecentKeywords(prev => prev.filter((_, i) => i !== index));
+    } catch (err) {
+      console.error('검색어 삭제 실패:', err);
+    }
+  };
+
+  // ✅ 검색 및 저장
+  const handleSearch = async () => {
+    const trimmed = search.trim();
+    if (!trimmed) {
       alert('검색어를 입력해주세요.');
       return;
     }
-    navigate(`/search/result?query=${search}`);
+
+    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)}`);
+    } catch (err) {
+      console.error('검색어 저장 실패:', err);
+    }
   };
 
- return (
-    <div className="relative flex justify-center min-h-screen text-white ">
-      <div className="w-full max-w-[400px] px-4 pt-4 pb-20">
+  useEffect(() => {
+    fetchRecentKeywords();
+  }, []);
+
+  return (
+    <div className="relative flex justify-center min-h-screen 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} 
+          onSearch={handleSearch}
         />
 
         <div className="mt-6">
           <h2 className="mb-2 text-title-3">최근 검색어</h2>
-          <div className="flex flex-wrap gap-2">
-            {recentKeywords.map((word, index) => (
-              <Badge
-                key={index}
-                type="removable"
-                onRemove={() => handleRemove(index)}
-              >
-                {word}
-              </Badge>
-            ))}
-          </div>
+          {recentKeywords.length > 0 ? (
+            <div className="flex flex-wrap gap-2">
+              {recentKeywords.map((word, index) => (
+                <Badge
+                  key={`${word}-${index}`}
+                  type="removable"
+                  onRemove={() => handleRemove(index)}
+                >
+                  {word}
+                </Badge>
+              ))}
+            </div>
+          ) : (
+            <p className="text-sm text-gray-500">최근 검색어가 없습니다.</p>
+          )}
         </div>
       </div>
-      
+
       <div className="fixed bottom-0 left-1/2 w-full max-w-[430px] -translate-x-1/2">
         <BottomNavigation />
       </div>
     </div>
   );
-}
-
-
-
+}
diff --git a/src/pages/search/ReviewSearchResult.tsx b/src/pages/search/ReviewSearchResult.tsx
