[SWM-363] Fix : from encodeURI to encodeURIcomponent

src/app/search/page.tsx

@@ -1,9 +1,11 @@
 'use client';
-import LectureRecommendationsList from '@/src/components/recommendations/LectureRecommendationsList';
+import { QueryKeys } from '@/src/api/queryKeys';
+import ChannelRecommendationsList from '@/src/components/recommendations/channel/ChannelRecommendationsList';
 import SearchResultsHeading from '@/src/components/search/SearchResultsHeading';
 import SearchResultsList from '@/src/components/search/SearchResultsList';
 import SearchResultsSkeleton from '@/src/components/search/SearchResultsSkeleton';
 import getPageTitle from '@/src/util/metadata/getPageTitle';
+import { useQueryClient } from '@tanstack/react-query';
 import { Suspense, useLayoutEffect, useRef } from 'react';
 
 type Props = {
@@ -13,6 +15,11 @@ const LIMIT_PER_FETCH = 20;
 
 export default function SearchResults({ searchParams }: Props) {
   const searchResultPageRef = useRef<number>(0);
+  const queryClient = useQueryClient();
+
+  const recommendations = queryClient.getQueryData([
+    QueryKeys.RECCOMENDATION
+  ]) as LectureRecommendations;
 
   const requestParam: SearchLectureParams = {
     keyword:
@@ -26,11 +33,11 @@ export default function SearchResults({ searchParams }: Props) {
 
   useLayoutEffect(() => {
     window.scrollTo({ top: 0 });
-  },[])
+  }, []);
 
   return (
     <>
-    <title>{getPageTitle(`'${searchParams.keyword}' 검색 결과`)}</title>
+      <title>{getPageTitle(`'${searchParams.keyword}' 검색 결과`)}</title>
       <div className='py-20 bg-sroom-gray-200'>
         <section className='max-w-screen-xl px-4 mx-auto lg:px-24'>
           <SearchResultsHeading keyword={requestParam.keyword} />
@@ -49,7 +56,11 @@ export default function SearchResults({ searchParams }: Props) {
           </Suspense>
         </section>
       </div>
-      <LectureRecommendationsList />
+      {recommendations && (
+        <ChannelRecommendationsList
+          recommendations={recommendations.channel_recommendations}
+        />
+      )}
     </>
   );
 }

src/components/gnb/SearchInput.tsx

@@ -16,7 +16,7 @@ export default function SearchInput({ className, submitButtonId }: Props) {
   };
 
   const navigateToSearchPage = useCallback(() => {
-    const encodedQuery = encodeURI(keyword.trim().replaceAll(' ', '+'));
+    const encodedQuery = encodeURIComponent(keyword.trim().replaceAll(' ', '+'));
 
     if (encodedQuery === '') {
       return;