[Feature] 검색 기능 구현

app/admin/posts/page.tsx

@@ -28,9 +28,9 @@ const AdminPostListPage = () => {
     setLoading(false);
   };
 
-  const handleEdit = (postId: string) => {
+  const handleEdit = (slug: string) => {
     toast.success('글 수정 페이지로 이동합니다.');
-    router.push(`/admin/write?postId=${postId}`);
+    router.push(`/admin/write?slug=${slug}`);
   };
 
   const handleDeleteClick = (postId: string) => {
@@ -68,7 +68,7 @@ const AdminPostListPage = () => {
             <PostListItem
               key={post._id}
               post={post}
-              handleEdit={() => handleEdit(post._id)}
+              handleEdit={() => handleEdit(post.slug)}
               handleDelete={() => handleDeleteClick(post._id)}
             />
           ))}

app/admin/write/page.tsx

@@ -1,35 +1,10 @@
-'use client';
 import BlogForm from '@/app/entities/post/write/BlogForm';
-import axios from 'axios';
-import { PostBody } from '@/app/types/Post';
-import { useRouter, useSearchParams } from 'next/navigation';
-import useToast from '@/app/hooks/useToast';
 
 const BlogWritePage = () => {
-  const router = useRouter();
-  const params = useSearchParams();
-  const postId = params.get('postId');
-  const toast = useToast();
-
-  const postBlog = async (post: PostBody) => {
-    try {
-      const response = await axios.post('/api/posts', post);
-      const data = await response.data;
-      console.log('글 발행 결과', data);
-      if (response.status === 201) {
-        toast.success('글이 성공적으로 발행되었습니다.');
-        router.push('/posts');
-      }
-    } catch (e) {
-      toast.error('글 발행 중 오류 발생했습니다.');
-      console.error('글 발행 중 오류 발생', e);
-    }
-  };
-
   return (
     <section className={'pt-4'}>
       <h1 className={'text-3xl text-center mb-4'}>글 작성</h1>
-      <BlogForm postBlog={postBlog} postId={postId || null} />
+      <BlogForm />
     </section>
   );
 };

app/api/posts/[slug]/route.ts

@@ -2,6 +2,7 @@
 import dbConnect from '@/app/lib/dbConnect';
 import Post from '@/app/models/Post';
 import { NextRequest } from 'next/server';
+import { getThumbnailInMarkdown } from '@/app/lib/utils/parse';
 
 export async function GET(
   req: NextRequest,
@@ -36,10 +37,14 @@ export async function PUT(
     await dbConnect();
     const body = await req.json();
 
-    const updatedPost = await Post.findByIdAndUpdate(params.slug, body, {
-      new: true,
-      runValidators: true,
-    }).lean();
+    const updatedPost = await Post.findOneAndUpdate(
+      { slug: params.slug },
+      { ...body, thumbnailImage: getThumbnailInMarkdown(body.content) },
+      {
+        new: true,
+        runValidators: true,
+      }
+    ).lean();
 
     if (!updatedPost) {
       return Response.json(

app/api/posts/route.ts

@@ -5,10 +5,25 @@ import { getThumbnailInMarkdown } from '@/app/lib/utils/parse';
 import { generateUniqueSlug } from '@/app/lib/utils/post';
 
 // GET /api/posts - 모든 글 조회
-export async function GET() {
+export async function GET(req: Request) {
   try {
     await dbConnect();
-    const posts = await Post.find({}).sort({ createdAt: -1 }).lean();
+    const { searchParams } = new URL(req.url);
+
+    const query = searchParams.get('query') || '';
+
+    // 검색 조건 구성
+    const searchConditions = {
+      $or: [
+        { title: { $regex: query, $options: 'i' } },
+        { content: { $regex: query, $options: 'i' } },
+        { subTitle: { $regex: query, $options: 'i' } },
+      ],
+    };
+
+    const posts = await Post.find(searchConditions)
+      .sort({ date: -1 })
+      .limit(10);
 
     return Response.json({ success: true, posts: posts });
   } catch (error) {

app/entities/common/Animation/NotFound.tsx

@@ -0,0 +1,45 @@
+import LottiePlayer from '@/app/entities/common/Animation/LottiePlayer';
+import NotFoundAnimation from '@/app/public/assets/notfound2.json';
+import Link from 'next/link';
+
+interface NotFoundProps {
+  message?: string;
+  className?: string;
+  redirect?: {
+    path: string;
+    buttonText?: string;
+  };
+}
+const NotFound = ({ message, className, redirect }: NotFoundProps) => {
+  return (
+    <div className={'w-full mx-auto flex justify-center'}>
+      <div className={className + ' flex flex-col items-center'}>
+        <LottiePlayer
+          animationData={NotFoundAnimation}
+          play={true}
+          loop={true}
+          style={{ width: 200 }}
+        />
+        <div
+          className={
+            'text-medium-m text-gray-500 text-center flex flex-col gap-0.5'
+          }
+        >
+          {message?.split('\n').map((text) => <p key={text}>{text}</p>)}
+        </div>
+        {redirect && (
+          <Link
+            className={
+              'bg-green-100 hover:bg-green-100/80 text-white text-semibold-r rounded-xl px-4 py-1 mt-2'
+            }
+            href={redirect.path}
+          >
+            {redirect.buttonText}
+          </Link>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default NotFound;

app/entities/common/Overlay/Overlay.tsx

@@ -0,0 +1,31 @@
+import { ReactNode, useEffect, useRef } from 'react';
+
+interface OverlayProps {
+  setOverlayOpen: (open: boolean) => void;
+  children: ReactNode;
+}
+const Overlay = ({ setOverlayOpen, children }: OverlayProps) => {
+  const overlayRef = useRef<HTMLDivElement>(null);
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (overlayRef.current && overlayRef.current === (event.target as Node)) {
+        setOverlayOpen(false);
+      }
+    };
+
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, []);
+
+  return (
+    <div ref={overlayRef} className="fixed inset-0 bg-black bg-opacity-50 z-50">
+      <div className="animate-popUp  container bg-overlay bg-opacity-90 text-overlay rounded-lg mx-auto mt-[24%] max-w-2xl">
+        {children}
+      </div>
+    </div>
+  );
+};
+
+export default Overlay;

app/entities/common/Overlay/Search/SearchOverlayContainer.tsx

@@ -0,0 +1,55 @@
+import { FaSearch } from 'react-icons/fa';
+import Tag from '@/app/entities/common/Tag';
+import { FaX } from 'react-icons/fa6';
+
+const SearchOverlayContainer = (props: {
+  setQuery: (query: string) => void;
+  value: string;
+  onCancel: () => void;
+  tags: string[];
+}) => {
+  const emptyInput = () => {
+    props.setQuery('');
+  };
+
+  return (
+    <div className=" px-5 p-4">
+      <div className="flex mb-4">
+        <div className={'flex flex-grow items-center space-x-4 relative'}>
+          <FaSearch size={20} className="text-gray-400" />
+          <input
+            type="text"
+            placeholder="검색어를 입력하세요..."
+            className="w-full p-2 outline-none"
+            autoFocus
+            onChange={(e) => props.setQuery(e.target.value)}
+            value={props.value}
+          />
+          <button
+            className={`${props.value ? 'block' : 'hidden'} p-2 text-gray-400 absolute right-2`}
+            onClick={emptyInput}
+          >
+            <FaX />
+          </button>
+        </div>
+        <button
+          onClick={props.onCancel}
+          className="text-gray-500 hover:text-gray-700 p-2"
+        >
+          ESC
+        </button>
+      </div>
+
+      <div className="space-y-4">
+        <div className="text-sm text-gray-500">최근 검색어</div>
+        <div className="flex flex-wrap gap-2">
+          {props.tags.map((tag) => (
+            <Tag key={tag} content={tag} onClick={() => props.setQuery(tag)} />
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default SearchOverlayContainer;

app/entities/common/Tag.tsx

@@ -0,0 +1,16 @@
+interface TagProps {
+  content: string;
+  onClick?: () => void;
+}
+const Tag = ({ content, onClick }: TagProps) => {
+  return (
+    <span
+      onClick={onClick}
+      className={`${onClick ? 'cursor-pointer' : ''} px-3 py-1 bg-gray-100 rounded-full text-sm`}
+    >
+      {content}
+    </span>
+  );
+};
+
+export default Tag;

app/entities/post/detail/PostTOC.tsx

@@ -12,7 +12,7 @@ const PostTOC = ({ postContent }: { postContent: string }) => {
   };
 
   return (
-    <div className="fixed post-toc hidden lg:block w-[280px] top-1/2 -translate-y-1/2 left-[calc(50%+524px)]  transition-all  text-sm bg-gray-100/80 rounded-md p-4 text-black">
+    <div className="fixed post-toc hidden 2xl:block w-[280px] top-[calc(50%+100px)] -translate-y-1/2 left-[calc(50%+524px)]  transition-all  text-sm bg-gray-100/80 rounded-md p-4 text-black">
       <h4 className={'text-xl font-bold mb-2'}>📌 Table of Contents</h4>
       <ul className={'list-none'}>
         {parseHeadings(postContent).map((heading) => {

app/entities/post/list/PostList.tsx

@@ -2,8 +2,13 @@ import { Post } from '@/app/types/Post';
 import LoadingIndicator from '@/app/entities/common/Loading/LoadingIndicator';
 import PostPreview from '@/app/entities/post/list/PostPreview';
 import profile from '@/app/public/profile.jpg';
+import NotFound from '@/app/entities/common/Animation/NotFound';
 
-const PostList = (props: { loading: boolean; posts: Post[] | undefined }) => {
+const PostList = (props: {
+  query: string;
+  loading: boolean;
+  posts: Post[] | undefined;
+}) => {
   return (
     <ul
       className={
@@ -14,8 +19,7 @@ const PostList = (props: { loading: boolean; posts: Post[] | undefined }) => {
         <div className={'mx-auto col-span-3 w-1/3 h-full pt-20'}>
           <LoadingIndicator message={'발행된 글을 로딩 중입니다..'} />
         </div>
-      ) : (
-        props.posts &&
+      ) : props.posts && props.posts.length > 0 ? (
         props.posts.map(
           (post) =>
             post._id && (
@@ -34,6 +38,12 @@ const PostList = (props: { loading: boolean; posts: Post[] | undefined }) => {
               </li>
             )
         )
+      ) : (
+        <div className={'col-span-3'}>
+          <NotFound
+            message={`${props.query || '검색어'}에 대한 검색 결과가 없습니다.`}
+          />
+        </div>
       )}
     </ul>
   );

app/entities/post/list/SearchSection.tsx

@@ -0,0 +1,84 @@
+'use client';
+import { useState } from 'react';
+import { FaBook, FaSearch } from 'react-icons/fa';
+import { BiChevronDown } from 'react-icons/bi';
+import Overlay from '@/app/entities/common/Overlay/Overlay';
+import SeriesDropdownItem from '@/app/entities/post/series/SeriesDropdownItem';
+import Tag from '@/app/entities/common/Tag';
+import SearchOverlayContainer from '@/app/entities/common/Overlay/Search/SearchOverlayContainer';
+import useSearchQueryStore from '@/app/stores/useSearchQueryStore';
+
+interface SearchSectionProps {
+  query: string;
+  setQuery: (query: string) => void;
+}
+
+const SearchSection = ({ query, setQuery }: SearchSectionProps) => {
+  const [searchOpen, setSearchOpen] = useState(false);
+  const [seriesOpen, setSeriesOpen] = useState(false);
+  const latest = useSearchQueryStore((state) => state.latestSearchQueries);
+
+  return (
+    <div className="w-full max-w-6xl mx-auto">
+      <nav className="flex items-center justify-between py-4 px-6">
+        <div className="flex items-center space-x-6">
+          {/* 시리즈 드롭다운 */}
+          <div className="relative">
+            <button
+              onClick={() => setSeriesOpen(!seriesOpen)}
+              className="flex items-center space-x-2 hover:text-gray-600 px-3 py-2 rounded-lg hover:bg-gray-100"
+            >
+              <FaBook size={20} />
+              <span>시리즈</span>
+              <BiChevronDown
+                size={16}
+                className={`transform transition-transform ${seriesOpen ? 'rotate-180' : ''}`}
+              />
+            </button>
+
+            {/* 시리즈 드롭다운 메뉴 */}
+            {seriesOpen && (
+              <div className="bg-overlay absolute left-0 mt-2 w-64 z-50 text-overlay">
+                <div className="py-2">
+                  <SeriesDropdownItem
+                    setSeriesOpen={setSeriesOpen}
+                    seriesTitle={'Next.js 최적화'}
+                    seriesCount={3}
+                  />
+                  <SeriesDropdownItem
+                    setSeriesOpen={setSeriesOpen}
+                    seriesTitle={'블로그 개발기'}
+                    seriesCount={5}
+                  />
+                </div>
+              </div>
+            )}
+          </div>
+        </div>
+
+        {/* 검색 버튼 및 검색창 */}
+        <div className="relative">
+          <button
+            onClick={() => setSearchOpen(!searchOpen)}
+            className="p-2 hover:bg-gray-100 rounded-full transition-colors"
+          >
+            <FaSearch size={20} />
+          </button>
+
+          {/* 검색 오버레이 */}
+          {searchOpen && (
+            <Overlay setOverlayOpen={setSearchOpen}>
+              <SearchOverlayContainer
+                setQuery={setQuery}
+                value={query}
+                onCancel={() => setSearchOpen(false)}
+                tags={latest || []}
+              />
+            </Overlay>
+          )}
+        </div>
+      </nav>
+    </div>
+  );
+};
+export default SearchSection;