From e441194444d51b80ec41d98187e73a77c41fcf36 Mon Sep 17 00:00:00 2001
From: sryung <sryung1225@gmail.com>
Date: Thu, 28 Dec 2023 00:22:47 +0900
Subject: [PATCH] =?UTF-8?q?[=F0=9F=A5=81=20:=20feat]=20=EA=B2=80=EC=83=89?=
 =?UTF-8?q?=20=EA=B2=B0=EA=B3=BC=20url=EB=A1=9C=20=EC=A0=91=EA=B7=BC=20?=
 =?UTF-8?q?=EB=B0=8F=20=EC=83=88=EB=A1=9C=EA=B3=A0=EC=B9=A8=20=ED=99=9C?=
 =?UTF-8?q?=EC=84=B1=ED=99=94=20(#23)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

diff --git a/src/components/search-result/search-timeline.tsx b/src/components/search-result/search-timeline.tsx
index 168c916..f8b708d 100644
--- a/src/components/search-result/search-timeline.tsx
+++ b/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>
   );
 }
diff --git a/src/styles/timeline.ts b/src/styles/timeline.ts
index 5202b05..bb46212 100644
--- a/src/styles/timeline.ts
+++ b/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;
+  }
 `;