[🥁 : feat] 검색 결과 url로 접근 및 새로고침 활성화 (#23)

- before) 검색창에 입력한 키워드를 atom에 저장한 뒤 가져와 사용하는 형태이기 때문에 새로고침하거나 url로 접근하는 경우는 결과를 불러올 수 없었음
- after) useLocation을 활용해 url에 입력된 값을 저장해 atom과 비교하며 사용
- decodeURLComponent : 자바스크립트 URL 디코딩 메서드. 암호화된 한글을 해독
- useParams는 router로 바로 연결된 컴포넌트가 아니면 활용할 수 없음을 유의. 대신에 useLocation을 채택함

src/components/search-result/search-timeline.tsx

@@ -1,4 +1,5 @@
 import { useEffect, useState } from 'react';
+import { useLocation } from 'react-router-dom';
 import {
   collection,
   getDocs,
@@ -7,16 +8,21 @@ import {
   query,
   where,
 } from 'firebase/firestore';
-import { useRecoilValue } from 'recoil';
 import { db } from '@/firebase.ts';
+import { useRecoilValue } from 'recoil';
 import { searchKeywordAtom } from '@/atoms.tsx';
 import Tweet from '@compo/home/tweet.tsx';
 import ITweet from '@type/ITweet.ts';
 import * as S from '@style/timeline.ts';
 
 export default function SearchTimeline() {
+  const location = useLocation();
   const [tweets, setTweets] = useState<ITweet[]>([]);
-  const searchKeyword = useRecoilValue(searchKeywordAtom);
+  const searchKeywordFromLocation = decodeURIComponent(
+    location.search.slice(7),
+  );
+  const searchKeywordAtomValue = useRecoilValue(searchKeywordAtom);
+  const searchKeyword = searchKeywordFromLocation || searchKeywordAtomValue;
   const fetchTweets = async () => {
     const tweetsQuery = query(
       collection(db, 'tweets'),
@@ -50,6 +56,8 @@ export default function SearchTimeline() {
       ))}
     </S.TimelineWrapper>
   ) : (
-    <S.Text>검색 결과가 없습니다.</S.Text>
+    <S.Text>
+      [<span>{searchKeyword}</span>] 에 대한 검색 결과가 없습니다.
+    </S.Text>
   );
 }

src/styles/timeline.ts

@@ -1,4 +1,5 @@
 import styled from 'styled-components';
+import { primaryColor } from '@style/global.ts';
 
 export const TimelineWrapper = styled.ul`
   display: block;
@@ -9,4 +10,8 @@ export const TimelineWrapper = styled.ul`
 export const Text = styled.p`
   margin: 20px 0;
   text-align: center;
+  span {
+    color: ${primaryColor};
+    font-weight: 600;
+  }
 `;