feat: 커뮤니티 화면 UI 개선

Author: dev-ant

src/app/(main)/community/page.tsx

@@ -1,38 +1,74 @@
 "use client";
 
-import { useState } from "react";
+import { useState, useCallback, useEffect } from "react";
+import { useSearchParams, useRouter } from "next/navigation";
 import Category from "@/components/page/community/Category";
 import PostList from "@/components/page/community/PostList";
 import PopularPostsHighlight from "@/components/page/community/PopularPostsHighlight";
-import PageTitle from "@/components/commons/PageTitle";
-import { Button } from "@/components/ui/button";
 import { Plus, Search, X } from "lucide-react";
 import PostCreateModal from "@/components/page/community/PostCreateModal";
 
 type SortType = "latest" | "popular" | "mostLiked";
 
 function CommunityPage() {
+  const searchParams = useSearchParams();
+  const router = useRouter();
+  const keyword = searchParams.get("q") || "";
+
   const [selectedBoardId, setSelectedBoardId] = useState<number | undefined>(
     undefined,
   );
   const [sortOption, setSortOption] = useState<SortType>("latest");
   const [isModalOpen, setIsModalOpen] = useState(false);
-  const [searchInput, setSearchInput] = useState("");
-  const [keyword, setKeyword] = useState("");
-
-  const handleSearch = (e: React.FormEvent) => {
-    e.preventDefault();
-    setKeyword(searchInput.trim());
-  };
+  const [mobileSearchInput, setMobileSearchInput] = useState(keyword);
+
+  // URL의 검색어가 변경되면 모바일 input 동기화
+  useEffect(() => {
+    setMobileSearchInput(keyword);
+  }, [keyword]);
+
+  const handleMobileSearch = useCallback(
+    (e: React.FormEvent) => {
+      e.preventDefault();
+      const trimmedInput = mobileSearchInput.trim();
+      if (trimmedInput) {
+        router.push(`/community?q=${encodeURIComponent(trimmedInput)}`);
+      } else {
+        router.push("/community");
+      }
+    },
+    [mobileSearchInput, router]
+  );
 
-  const handleClearSearch = () => {
-    setSearchInput("");
-    setKeyword("");
-  };
+  const handleClearMobileSearch = useCallback(() => {
+    setMobileSearchInput("");
+    router.push("/community");
+  }, [router]);
 
   return (
-    <main className="flex flex-col gap-6 pb-8">
-      <PageTitle title="커뮤니티" />
+    <main className="flex flex-col gap-6 pb-24">
+      {/* Mobile Search Bar - Only visible on mobile */}
+      <form onSubmit={handleMobileSearch} className="md:hidden">
+        <div className="relative">
+          <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400 dark:text-gray-500" />
+          <input
+            type="text"
+            value={mobileSearchInput}
+            onChange={(e) => setMobileSearchInput(e.target.value)}
+            placeholder="게시글 검색..."
+            className="w-full pl-10 pr-10 py-2.5 text-sm border border-gray-200 dark:border-navy-600 rounded-xl bg-white dark:bg-navy-700 text-gray-900 dark:text-white placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-[var(--color-ds-primary)]/20 focus:border-[var(--color-ds-primary)] transition-colors"
+          />
+          {mobileSearchInput && (
+            <button
+              type="button"
+              onClick={handleClearMobileSearch}
+              className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors"
+            >
+              <X className="w-4 h-4" />
+            </button>
+          )}
+        </div>
+      </form>
 
       {/* Category Filter */}
       <Category
@@ -43,68 +79,29 @@ function CommunityPage() {
       {/* Popular Posts Highlight */}
       <PopularPostsHighlight boardId={selectedBoardId} />
 
-      {/* Search Bar */}
-      <form onSubmit={handleSearch} className="relative">
-        <div className="flex gap-2">
-          <div className="relative flex-1">
-            <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-400" />
-            <input
-              type="text"
-              value={searchInput}
-              onChange={(e) => setSearchInput(e.target.value)}
-              placeholder="게시글 검색..."
-              className="w-full pl-10 pr-10 py-2.5 border border-warm-300 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-forest-500/20 focus:border-forest-500 bg-white"
-            />
-            {searchInput && (
-              <button
-                type="button"
-                onClick={handleClearSearch}
-                className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600"
-              >
-                <X className="w-4 h-4" />
-              </button>
-            )}
-          </div>
-          <Button type="submit" className="bg-forest-500 hover:bg-forest-600 rounded-xl px-6">
-            검색
-          </Button>
-        </div>
-      </form>
-
       {/* Search Result Info */}
       {keyword && (
-        <div className="flex items-center gap-2 text-sm text-gray-600">
+        <div className="flex items-center gap-2 text-sm text-gray-600 dark:text-gray-400">
           <span>&quot;{keyword}&quot; 검색 결과</span>
-          <button
-            onClick={handleClearSearch}
-            className="text-forest-500 hover:text-forest-600 underline"
-          >
-            검색 초기화
-          </button>
         </div>
       )}
 
-      {/* Actions Bar */}
-      <div className="flex justify-between items-center">
+      {/* Sort Options */}
+      <div className="flex items-center">
         <select
           value={sortOption}
           onChange={(e) => setSortOption(e.target.value as SortType)}
-          className="border border-warm-300 rounded-xl px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-forest-500/20 focus:border-forest-500 bg-white text-warm-700"
+          className="border border-gray-200 dark:border-navy-600 rounded-xl px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-[var(--color-ds-primary)]/20 focus:border-[var(--color-ds-primary)] bg-white dark:bg-navy-700 text-gray-700 dark:text-gray-200"
         >
           <option value="latest">최신순</option>
           <option value="popular">인기순</option>
           <option value="mostLiked">좋아요순</option>
         </select>
-
-        <Button className="gap-2 bg-forest-500 hover:bg-forest-600 rounded-xl" onClick={() => setIsModalOpen(true)}>
-          <Plus className="w-4 h-4" />
-          글쓰기
-        </Button>
       </div>
 
       {/* Info: 인기순/좋아요순은 게시판 선택 필요 */}
       {(sortOption === "popular" || sortOption === "mostLiked") && !selectedBoardId && (
-        <div className="text-sm text-amber-600 bg-amber-50 px-4 py-2 rounded-lg">
+        <div className="text-sm text-amber-600 dark:text-amber-400 bg-amber-50 dark:bg-amber-900/20 px-4 py-2 rounded-lg">
           인기순/좋아요순은 게시판을 선택해야 적용됩니다.
         </div>
       )}
@@ -116,6 +113,15 @@ function CommunityPage() {
         sortType={sortOption}
       />
 
+      {/* FAB - Write Post Button */}
+      <button
+        onClick={() => setIsModalOpen(true)}
+        className="fixed bottom-20 right-4 md:bottom-6 md:right-6 z-40 w-14 h-14 bg-[var(--color-ds-primary)] hover:bg-[var(--color-ds-primary-hover)] text-white rounded-full shadow-lg hover:shadow-xl transition-all duration-200 flex items-center justify-center hover:scale-105 active:scale-95"
+        aria-label="글쓰기"
+      >
+        <Plus className="w-6 h-6" />
+      </button>
+
       {/* Post Create Modal */}
       <PostCreateModal
         isOpen={isModalOpen}

src/components/bottom-nav.tsx

@@ -24,7 +24,7 @@ export default function BottomNav() {
   };
 
   return (
-    <nav className="fixed bottom-0 left-0 right-0 z-50 bg-white border-t border-gray-200 safe-area-inset-bottom">
+    <nav className="fixed bottom-0 left-0 right-0 z-50 bg-white dark:bg-navy-800 border-t border-gray-200 dark:border-navy-700 safe-area-inset-bottom">
       <div className="flex items-center justify-around h-14">
         {navItems.map(({ href, label, ready }) => {
           const isActive =
@@ -40,8 +40,8 @@ export default function BottomNav() {
               className={clsx(
                 "relative flex items-center justify-center flex-1 h-full transition-all duration-200",
                 isActive
-                  ? "text-blue-600"
-                  : "text-gray-500 hover:text-gray-700",
+                  ? "text-blue-600 dark:text-blue-400"
+                  : "text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200",
               )}
             >
               <span
@@ -53,7 +53,7 @@ export default function BottomNav() {
                 {label}
               </span>
               {isActive && (
-                <span className="absolute bottom-0 left-1/2 -translate-x-1/2 w-8 h-0.5 bg-blue-600 rounded-full" />
+                <span className="absolute bottom-0 left-1/2 -translate-x-1/2 w-8 h-0.5 bg-blue-600 dark:bg-blue-400 rounded-full" />
               )}
             </Link>
           );

src/components/navigation/ThreeTierNav.tsx

@@ -63,6 +63,8 @@ export default function ThreeTierNav() {
   const isHornBuglePage = pathname.startsWith("/horn-bugle");
   // 아이템 정보 페이지인지 확인
   const isItemInfoPage = pathname.startsWith("/item-info");
+  // 게시판 페이지인지 확인
+  const isCommunityPage = pathname.startsWith("/community");
   // 검색 가능한 페이지 (경매장 + 아이템 정보)
   const isSearchablePage = isAuctionPage || isItemInfoPage;
 
@@ -247,6 +249,17 @@ export default function ThreeTierNav() {
     setIsSearchFocused(false);
   }, [searchValue, router]);
 
+  // 게시판 검색 제출 로직
+  const handleCommunitySearchSubmit = useCallback(() => {
+    const trimmed = searchValue.trim();
+    if (trimmed) {
+      router.push(`/community?q=${encodeURIComponent(trimmed)}`);
+    } else {
+      router.push("/community");
+    }
+    setIsSearchFocused(false);
+  }, [searchValue, router]);
+
   const handleKeyDown = useCallback(
     (e: React.KeyboardEvent<HTMLInputElement>) => {
       // 뿔피리 페이지: Enter 입력 시 검색
@@ -261,6 +274,18 @@ export default function ThreeTierNav() {
         return;
       }
 
+      // 게시판 페이지: Enter 입력 시 검색
+      if (isCommunityPage) {
+        if (e.key === "Enter") {
+          e.preventDefault();
+          handleCommunitySearchSubmit();
+        } else if (e.key === "Escape") {
+          e.preventDefault();
+          setIsSearchFocused(false);
+        }
+        return;
+      }
+
       if (!isSearchablePage) return;
 
       if (e.key === "Enter") {
@@ -294,12 +319,14 @@ export default function ThreeTierNav() {
     [
       isSearchablePage,
       isHornBuglePage,
+      isCommunityPage,
       searchValue,
       filteredItems,
       recentSearches,
       selectedIndex,
       handleSearchSubmit,
       handleHornBugleSearchSubmit,
+      handleCommunitySearchSubmit,
     ]
   );
 
@@ -366,7 +393,15 @@ export default function ThreeTierNav() {
           </button>
         )}
         <button
-          onClick={isHornBuglePage ? handleHornBugleSearchSubmit : (isSearchablePage ? handleSearchSubmit : undefined)}
+          onClick={
+            isHornBuglePage
+              ? handleHornBugleSearchSubmit
+              : isCommunityPage
+                ? handleCommunitySearchSubmit
+                : isSearchablePage
+                  ? handleSearchSubmit
+                  : undefined
+          }
           className="p-1.5 rounded-lg text-gray-500 dark:text-gray-300 hover:text-blaanid-600 dark:hover:text-coral-400 hover:bg-gray-100 dark:hover:bg-navy-600 transition-colors"
           aria-label="검색"
           type="button"

src/components/page/community/Category.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { useCallback, useEffect, useState } from "react";
-import { Button } from "@/components/ui/button";
+import clsx from "clsx";
 import { Board, ApiResponse, BoardListData } from "@/types/community";
 import CategorySkeleton from "./CategorySkeleton";
 import DataFetchError from "@/components/commons/DataFetchError";
@@ -70,33 +70,41 @@ function Category({ selectedBoardId, setSelectedBoardId }: CategoryProps) {
   return (
     <div className="flex flex-nowrap gap-2 overflow-x-auto pb-2 scrollbar-hide">
       {/* 전체 버튼 */}
-      <Button
-        variant={selectedBoardId === undefined ? "default" : "outline"}
+      <button
         onClick={() => setSelectedBoardId(undefined)}
-        className="flex-shrink-0"
+        className={clsx(
+          "px-4 py-2 rounded-xl text-sm font-medium transition-all flex-shrink-0",
+          selectedBoardId === undefined
+            ? "bg-[var(--color-ds-primary)] text-white shadow-md"
+            : "bg-white dark:bg-navy-700 text-gray-700 dark:text-gray-200 border border-gray-200 dark:border-navy-600 hover:bg-gray-50 dark:hover:bg-navy-600"
+        )}
       >
         전체
-      </Button>
+      </button>
 
       {/* 카테고리별 게시판 */}
       {categories.map((category) => (
-        <Button
+        <button
           key={category.id}
-          variant={selectedBoardId === category.id ? "default" : "outline"}
           onClick={() => setSelectedBoardId(category.id)}
-          className="flex-shrink-0 relative group"
+          className={clsx(
+            "px-4 py-2 rounded-xl text-sm font-medium transition-all flex-shrink-0 relative group",
+            selectedBoardId === category.id
+              ? "bg-[var(--color-ds-primary)] text-white shadow-md"
+              : "bg-white dark:bg-navy-700 text-gray-700 dark:text-gray-200 border border-gray-200 dark:border-navy-600 hover:bg-gray-50 dark:hover:bg-navy-600"
+          )}
         >
           <span>{category.name}</span>
           {/* 툴팁 */}
-          <div className="hidden group-hover:block absolute bottom-full left-1/2 -translate-x-1/2 mb-2 px-3 py-2 bg-gray-900 text-white text-xs rounded-lg whitespace-nowrap z-10">
+          <div className="hidden group-hover:block absolute bottom-full left-1/2 -translate-x-1/2 mb-2 px-3 py-2 bg-gray-900 dark:bg-gray-800 text-white text-xs rounded-lg whitespace-nowrap z-10 shadow-lg">
             <div>{category.description}</div>
             <div className="text-gray-400 text-[10px] mt-1">
               {category.topCategory} &gt; {category.subCategory}
             </div>
             {/* 화살표 */}
-            <div className="absolute top-full left-1/2 -translate-x-1/2 -mt-1 border-4 border-transparent border-t-gray-900" />
+            <div className="absolute top-full left-1/2 -translate-x-1/2 -mt-1 border-4 border-transparent border-t-gray-900 dark:border-t-gray-800" />
           </div>
-        </Button>
+        </button>
       ))}
     </div>
   );