feat: qfeed-88 닉네임 검색창 구현 (#49)

src/components/common/Header.tsx

@@ -10,26 +10,28 @@ import {
 } from '@/components/common/Header.styles';
 
 interface HeaderProps {
-  onSearchClick?: () => void;
   onLogoClick?: () => void;
   profileImage?: string;
   className?: string;
 }
 
-const Header = ({ onSearchClick, onLogoClick, className }: HeaderProps) => {
+const Header = ({ onLogoClick, className }: HeaderProps) => {
   const navigate = useNavigate();
 
   const handleNotificationClick = () => {
     navigate('/alarm');
   };
+  const handleSearchClick = () => {
+    navigate('/search');
+  };
 
   return (
     <StyledHeader className={className}>
       <LogoWrapper onClick={onLogoClick}>
         <Logo />
       </LogoWrapper>
       <RightSection>
-        <IconButton onClick={onSearchClick} aria-label="검색">
+        <IconButton onClick={handleSearchClick} aria-label="검색">
           <IoSearch size={24} />
         </IconButton>
         <IconButton onClick={handleNotificationClick} aria-label="알림">

src/pages/Search/index.tsx

@@ -0,0 +1,71 @@
+/** @jsxImportSource @emotion/react */
+import React, { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import InputBar from '@/components/ui/InputBar/InputBar';
+import ProfileImageCon from '@/components/ui/ProfileImageCon/ProfileImageCon';
+import { IoChevronBack } from 'react-icons/io5';
+import {
+  containerStyle,
+  headerStyle,
+  listContainerStyle,
+  listItemStyle,
+  nameStyle,
+  noResultStyle,
+  backIconStyle,
+} from '@/pages/Search/styles';
+
+// 유저 데이터 타입 정의
+interface User {
+  id: number;
+  name: string;
+}
+
+const SearchResultPage: React.FC = () => {
+  const [searchTerm, setSearchTerm] = useState<string>(''); // 검색어 상태
+  const [results, setResults] = useState<User[]>([]); // 검색 결과 상태
+  const navigate = useNavigate();
+
+  const dummyData: User[] = [
+    { id: 1, name: '백종원' },
+    { id: 2, name: '홍길동' },
+    { id: 3, name: '이순신' },
+    { id: 4, name: '김치국' },
+    { id: 5, name: '배고파' },
+  ];
+
+  const handleSearch = (value: string) => {
+    setSearchTerm(value);
+
+    // 검색어가 있으면 필터링된 결과 업데이트
+    const filteredResults = dummyData.filter((user) =>
+      user.name.toLowerCase().includes(value.toLowerCase())
+    );
+    setResults(filteredResults);
+  };
+
+  return (
+    <div css={containerStyle}>
+      {/* 검색창 */}
+      <div css={headerStyle}>
+        <IoChevronBack css={backIconStyle} onClick={() => navigate(-1)} />
+        <InputBar placeholder="닉네임을 검색하세요." onSearch={handleSearch} />
+      </div>
+
+      {/* 검색 결과 리스트 */}
+      <div css={listContainerStyle}>
+        {results.length > 0 ? (
+          results.map((user) => (
+            <div key={user.id} css={listItemStyle}>
+              <ProfileImageCon src="" size={40} />
+              <span css={nameStyle}>{user.name}</span>
+            </div>
+          ))
+        ) : searchTerm ? (
+          <p css={noResultStyle}>검색 결과가 없습니다.</p>
+        ) : null}
+      </div>
+    </div>
+  );
+};
+
+export default SearchResultPage;

src/pages/Search/styles.ts

@@ -0,0 +1,43 @@
+import theme from '@/styles/theme';
+import { css } from '@emotion/react';
+
+export const containerStyle = css`
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  background-color: ${theme.colors.background};
+`;
+
+export const headerStyle = css`
+  padding: 10px;
+  background-color: ${theme.colors.white};
+`;
+export const backIconStyle = css`
+  font-size: 24px;
+  cursor: pointer;
+`;
+
+export const listContainerStyle = css`
+  flex: 1;
+  overflow-y: auto;
+  padding: 10px;
+`;
+
+export const listItemStyle = css`
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  padding: 10px 0;
+  border-bottom: 1px solid #ccc;
+`;
+
+export const nameStyle = css`
+  margin-left: 24px;
+  font-size: 16px;
+`;
+
+export const noResultStyle = css`
+  text-align: center;
+  color: #666;
+  margin-top: 20px;
+`;

src/router/index.tsx

@@ -22,6 +22,7 @@ import { ResetPasswordPage } from '@/pages/ResetPassword';
 import { IDRecoveryPage } from '@/pages/IDRecovery';
 import QSpaceMemberPage from '@/pages/QSpaceMember';
 import EventPage from '@/pages/Event';
+import SearchResultPage from '@/pages/Search';
 import FollowerFollowingPage from '@/pages/Following';
 
 const router = createBrowserRouter([
@@ -121,6 +122,10 @@ const router = createBrowserRouter([
         path: '/event',
         element: <EventPage />,
       },
+      {
+        path: '/search',
+        element: <SearchResultPage />, // 검색 결과 페이지 컴포넌트
+      },
     ],
   },
 ]);