Merge pull request #24 from sryung1225/dev

검색 결과 개선 (#4 #23)

src/App.tsx

@@ -29,7 +29,7 @@ const router = createBrowserRouter([
         element: <Profile />,
       },
       {
-        path: `/search/:searchKeyword`,
+        path: `/search`,
         element: <SearchResult />,
       },
     ],

src/components/profile/edit-profile-form.tsx

@@ -13,6 +13,7 @@ import CompressImage from '@util/compress-image.tsx';
 import useEscClose from '@util/use-esc-close.tsx';
 import * as S from '@style/profile-form.ts';
 import { ReactComponent as IconUser } from '@img/i-user.svg';
+import { ReactComponent as IconChange } from '@img/i-change.svg';
 import { ReactComponent as LoadingSpinner } from '@img/loading-spinner-mini.svg';
 
 interface IEditProfileForm extends Pick<IUser, 'userAvatar' | 'userName'> {
@@ -97,19 +98,22 @@ export default function EditProfileForm({
   return (
     <S.Form onSubmit={onSubmit}>
       {avatarPreview ? (
-        <>
+        <S.AttachAvatar>
           <S.AttachAvatarPreview
             src={avatarPreview}
             alt="프로필이미지 미리보기"
             width="120"
             height="120"
           />
           <S.AttachAvatarDelete type="button" onClick={onAvatarDelete} />
-        </>
+          <S.AttachAvatarChange htmlFor="avatar_edit">
+            <IconChange />
+          </S.AttachAvatarChange>
+        </S.AttachAvatar>
       ) : (
-        <S.AttachAvatarButton htmlFor="avatar_edit">
+        <S.AttachAvatarLabel htmlFor="avatar_edit">
           <IconUser />
-        </S.AttachAvatarButton>
+        </S.AttachAvatarLabel>
       )}
       <S.AttachAvatarInput
         onChange={onAvatarChange}

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/components/search.tsx

@@ -1,5 +1,5 @@
-import React, { useEffect, useState } from 'react';
-import { useRecoilState } from 'recoil';
+import React, { useState } from 'react';
+import { useSetRecoilState } from 'recoil';
 import { useNavigate } from 'react-router-dom';
 import { searchKeywordAtom } from '@/atoms.tsx';
 import WindowTop from '@compo/window-top.tsx';
@@ -10,22 +10,16 @@ import { ReactComponent as IconSearch } from '@img/i-search.svg';
 export default function Search() {
   const navigate = useNavigate();
   const [searchValue, setSearchValue] = useState('');
-  const [searchKeyword, setSearchKeyword] = useRecoilState(searchKeywordAtom);
+  const setSearchKeyword = useSetRecoilState(searchKeywordAtom);
   const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     setSearchValue(e.target.value);
   };
-  const onSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
+  const onSubmit = (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
-    if (searchValue === '') return;
     setSearchKeyword(searchValue);
     setSearchValue('');
-    navigate(`/search/searchKeyword=${searchKeyword}`);
+    navigate(`/search?query=${searchValue}`);
   };
-  useEffect(() => {
-    if (searchKeyword) {
-      navigate(`/search/searchKeyword=${searchKeyword}`);
-    }
-  }, [searchKeyword, navigate]);
   return (
     <W.Window>
       <WindowTop />

src/styles/profile-form.ts

@@ -12,23 +12,33 @@ export const Form = styled.form`
   align-items: center;
 `;
 
-export const AttachAvatarPreview = styled.img`
+export const AttachAvatar = styled.div`
+  position: relative;
   width: 120px;
   height: 120px;
   margin-bottom: 20px;
+`;
+
+export const AttachAvatarPreview = styled.img`
+  width: 120px;
+  height: 120px;
   object-fit: cover;
   border-radius: 50%;
 `;
 
-export const AttachAvatarDelete = styled.button`
+export const AttachAvatarButton = styled.button`
   position: absolute;
   top: 0;
-  right: 70px;
+
   width: 25px;
   height: 25px;
   background-color: ${primaryColor};
   border: 2px solid ${whiteColor};
   border-radius: 50%;
+`;
+
+export const AttachAvatarDelete = styled(AttachAvatarButton)`
+  left: 10px;
   &::before,
   &::after {
     content: '';
@@ -47,7 +57,23 @@ export const AttachAvatarDelete = styled.button`
   }
 `;
 
-export const AttachAvatarButton: React.ComponentType<
+export const AttachAvatarChange: React.ComponentType<
+  React.HTMLProps<HTMLLabelElement>
+> = styled(AttachAvatarButton).attrs(() => ({ as: 'label' }))`
+  right: 10px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  svg {
+    width: 15px;
+    height: 15px;
+    stroke: ${whiteColor};
+    stroke-width: 3px;
+  }
+`;
+
+export const AttachAvatarLabel: React.ComponentType<
   React.HTMLProps<HTMLLabelElement>
 > = styled(Avatar).attrs(() => ({
   as: 'label',

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;
+  }
 `;