[🥁 : feat] 포스팅 검색하기 (미완)

src/App.tsx

@@ -4,6 +4,7 @@ import { auth } from './firebase.ts';
 import ProtectedRoute from './components/protected-route.tsx';
 import Home from './routes/home.tsx';
 import Profile from './routes/profile.tsx';
+import SearchResult from './routes/search-result.tsx';
 import Auth from './routes/auth.tsx';
 import Layout from './components/layout.tsx';
 import LoadingScreen from './components/loading-screen.tsx';
@@ -26,6 +27,10 @@ const router = createBrowserRouter([
         path: '/profile',
         element: <Profile />,
       },
+      {
+        path: `/search/:searchKeyword`,
+        element: <SearchResult />,
+      },
     ],
   },
   {

src/atoms.tsx

@@ -0,0 +1,8 @@
+import { atom } from 'recoil';
+
+export const searchKeywordAtom = atom({
+  key: 'searchKeyword',
+  default: '',
+});
+
+export const tmp = '';

src/components/search-timeline.tsx

@@ -0,0 +1,54 @@
+import { useEffect, useState } from 'react';
+import {
+  collection,
+  getDocs,
+  limit,
+  orderBy,
+  query,
+  where,
+} from 'firebase/firestore';
+import { useRecoilValue } from 'recoil';
+import { db } from '../firebase.ts';
+import Tweet from './tweet.tsx';
+import TimelineWrapper from '../styles/timeline.ts';
+import ITweet from '../interfaces/ITweet.ts';
+import { searchKeywordAtom } from '../atoms.tsx';
+
+export default function SearchTimeline() {
+  const [tweets, setTweets] = useState<ITweet[]>([]);
+  const searchKeyword = useRecoilValue(searchKeywordAtom);
+  const fetchTweets = async () => {
+    const tweetsQuery = query(
+      collection(db, 'tweets'),
+      orderBy('tweet'),
+      where('tweet', '>=', searchKeyword),
+      orderBy('createdAt', 'desc'),
+      limit(25),
+    );
+    const snapshot = await getDocs(tweetsQuery);
+    const tweetList = snapshot.docs.map((doc) => {
+      const { userId, userName, tweet, createdAt, photo } = doc.data();
+      return {
+        userId,
+        userName,
+        tweet,
+        createdAt,
+        photo,
+        id: doc.id,
+      };
+    });
+    setTweets(tweetList);
+  };
+  useEffect(() => {
+    fetchTweets();
+  }, [searchKeyword]);
+  return (
+    <TimelineWrapper>
+      {tweets.length !== 0 ? (
+        tweets.map((tweet) => <Tweet key={tweet.id} {...tweet} />)
+      ) : (
+        <p>검색 결과가 없습니다.</p>
+      )}
+    </TimelineWrapper>
+  );
+}

src/components/search.tsx

@@ -1,26 +1,40 @@
-import React, { useState } from 'react';
+import React from 'react';
+import { useRecoilState } from 'recoil';
+import { useNavigate } from 'react-router-dom';
+import { searchKeywordAtom } from '../atoms.tsx';
 import WindowTop from './window-top.tsx';
 import * as W from '../styles/window.ts';
 import * as S from '../styles/search.ts';
+import { ReactComponent as IconSearch } from '../assets/images/i-search.svg';
 
 export default function Search() {
-  const [searchKeyword, setSearchKeyword] = useState('');
+  const navigate = useNavigate();
+  const [searchKeyword, setSearchKeyword] = useRecoilState(searchKeywordAtom);
   const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     setSearchKeyword(e.target.value);
   };
+  const onSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    if (searchKeyword === '') return;
+    setSearchKeyword(searchKeyword);
+    navigate(`/search/searchKeyword=${searchKeyword}`);
+  };
   return (
     <W.Window>
       <WindowTop />
-      <S.Form>
+      <S.Form onSubmit={onSubmit}>
         <S.FormInput
           onChange={onChange}
           name="searchKeyword"
           value={searchKeyword}
-          placeholder="검색하기"
+          placeholder="검색어 입력"
           type="text"
           required
         ></S.FormInput>
-        <button type="submit">검색</button>
+        <S.FormButton type="submit">
+          <span className="a11yHidden">검색하기</span>
+          <IconSearch />
+        </S.FormButton>
       </S.Form>
     </W.Window>
   );

src/routes/search-result.tsx

@@ -1,3 +1,12 @@
+import SearchTimeline from '../components/search-timeline.tsx';
+import WindowTop from '../components/window-top.tsx';
+import * as W from '../styles/window.ts';
+
 export default function SearchResult() {
-  return null;
+  return (
+    <W.Window>
+      <WindowTop />
+      <SearchTimeline />
+    </W.Window>
+  );
 }

src/styles/search.ts

@@ -1,12 +1,31 @@
 import { styled } from 'styled-components';
 import { Input } from './button.ts';
+import { grayColor } from './global.ts';
 
 export const Form = styled.form`
+  position: relative;
   display: flex;
   flex-direction: column;
   gap: 10px;
   width: 100%;
   max-width: 500px;
 `;
 
-export const FormInput = styled(Input)``;
+export const FormInput = styled(Input)`
+  padding-right: 50px;
+`;
+
+export const FormButton = styled.button`
+  position: absolute;
+  top: 3px;
+  right: 3px;
+  bottom: 3px;
+  height: 37px;
+  width: 37px;
+  background-color: transparent;
+  border-radius: 50%;
+  border: none;
+  svg {
+    stroke: ${grayColor};
+  }
+`;