수정

src/app/components/CategoryBoardBrowser.tsx

@@ -0,0 +1,177 @@
+"use client";
+
+import React, { useEffect, useMemo, useState } from "react";
+import { useRouter } from "next/navigation";
+
+type ApiCategory = {
+  id: string;
+  name: string;
+  slug: string;
+  boards: { id: string; name: string; slug: string; type: string; requiresApproval: boolean }[];
+};
+
+type PostItem = {
+  id: string;
+  title: string;
+  createdAt: string;
+  boardId: string;
+};
+
+interface Props {
+  categoryName?: string;
+  categorySlug?: string;
+}
+
+export default function CategoryBoardBrowser({ categoryName, categorySlug }: Props) {
+  const router = useRouter();
+  const [categories, setCategories] = useState<ApiCategory[] | null>(null);
+  const [selectedBoardId, setSelectedBoardId] = useState<string | null>(null);
+  const [posts, setPosts] = useState<PostItem[] | null>(null);
+  const [isLoadingPosts, setIsLoadingPosts] = useState(false);
+
+  useEffect(() => {
+    let isMounted = true;
+    (async () => {
+      const res = await fetch("/api/categories", { cache: "no-store" });
+      const data = await res.json();
+      if (!isMounted) return;
+      setCategories(data.categories ?? []);
+    })();
+    return () => {
+      isMounted = false;
+    };
+  }, []);
+
+  const selectedCategory = useMemo(() => {
+    if (!categories) return null;
+    // 우선순위: 전달받은 카테고리명 -> 전달받은 슬러그 -> 기본(암실소문/main)
+    const byName = categoryName ? categories.find((c) => c.name === categoryName) : null;
+    if (byName) return byName;
+    const bySlug = categorySlug ? categories.find((c) => c.slug === categorySlug) : null;
+    if (bySlug) return bySlug;
+    return (
+      categories.find((c) => c.name === "암실소문") ||
+      categories.find((c) => c.slug === "main") ||
+      null
+    );
+  }, [categories, categoryName, categorySlug]);
+
+  const boardIdToName = useMemo(() => {
+    const map = new Map<string, string>();
+    if (selectedCategory) {
+      for (const b of selectedCategory.boards) map.set(b.id, b.name);
+    }
+    return map;
+  }, [selectedCategory]);
+
+  // 기본 보드 자동 선택: 선택된 카테고리의 첫 번째 보드
+  useEffect(() => {
+    if (!selectedBoardId && selectedCategory?.boards?.length) {
+      setSelectedBoardId(selectedCategory.boards[0].id);
+    }
+  }, [selectedCategory, selectedBoardId]);
+
+  useEffect(() => {
+    if (!selectedBoardId) return;
+    let isMounted = true;
+    (async () => {
+      try {
+        setIsLoadingPosts(true);
+        const params = new URLSearchParams({ pageSize: String(10), boardId: selectedBoardId });
+        const res = await fetch(`/api/posts?${params.toString()}`, { cache: "no-store" });
+        const data = await res.json();
+        if (!isMounted) return;
+        setPosts(data.items ?? []);
+      } finally {
+        if (isMounted) setIsLoadingPosts(false);
+      }
+    })();
+    return () => {
+      isMounted = false;
+    };
+  }, [selectedBoardId]);
+
+  return (
+    <div className="w-full h-full min-h-0 flex flex-col bg-white rounded-xl overflow-hidden">
+      {/* 상단: 한 줄(row)로 카테고리 + 화살표 + 보드 pill 버튼들 */}
+      <div className="px-3 py-2 border-b border-neutral-200">
+        <div className="flex items-center gap-2 overflow-x-auto flex-nowrap">
+          <button
+            type="button"
+            className="shrink-0 text-lg md:text-xl font-bold text-neutral-800 truncate"
+            onClick={() => {
+              const first = selectedCategory?.boards?.[0];
+              if (first?.id) router.push(`/boards/${first.id}`);
+            }}
+            title={(selectedCategory?.name ?? categoryName ?? "").toString()}
+          >
+            {selectedCategory?.name ?? categoryName ?? ""}
+          </button>
+          <button
+            type="button"
+            aria-label="카테고리 첫 게시판 이동"
+            className="shrink-0 w-6 h-6 rounded-full border border-neutral-300 text-neutral-500 hover:bg-neutral-50 flex items-center justify-center"
+            onClick={() => {
+              const first = selectedCategory?.boards?.[0];
+              if (first?.id) router.push(`/boards/${first.id}`);
+            }}
+          >
+            <svg width="12" height="12" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+              <path d="M7 5l5 5-5 5" stroke="currentColor" strokeWidth="2" fill="none" strokeLinecap="round" strokeLinejoin="round" />
+            </svg>
+          </button>
+          {selectedCategory?.boards?.map((b) => (
+            <button
+              key={b.id}
+              className={`shrink-0 whitespace-nowrap text-xs px-3 py-1 rounded-full border transition-colors ${
+                selectedBoardId === b.id
+                  ? "bg-neutral-800 text-white border-neutral-800"
+                  : "bg-white text-neutral-700 border-neutral-300 hover:bg-neutral-100"
+              }`}
+              onClick={() => setSelectedBoardId(b.id)}
+            >
+              {b.name}
+            </button>
+          ))}
+        </div>
+      </div>
+
+      {/* 2행: 게시글 리스트 */}
+      <div className="flex-1 min-h-0 overflow-y-auto p-3">
+        {!selectedBoardId && (
+          <div className="text-sm text-neutral-500">보드를 선택해 주세요.</div>
+        )}
+        {selectedBoardId && isLoadingPosts && (
+          <div className="text-sm text-neutral-500">불러오는 중…</div>
+        )}
+        {selectedBoardId && !isLoadingPosts && posts && posts.length === 0 && (
+          <div className="text-sm text-neutral-500">게시글이 없습니다.</div>
+        )}
+
+        <div className="grid grid-cols-1 gap-3">
+          {posts?.map((p) => {
+            const boardName = boardIdToName.get(p.boardId) ?? "";
+            const dateStr = new Date(p.createdAt).toLocaleDateString();
+            const imgSrc = `https://picsum.photos/seed/${p.id}/200/140`;
+            return (
+              <article key={p.id} className="w-full h-[140px] rounded-lg border border-neutral-200 overflow-hidden bg-white">
+                <div className="h-full w-full grid grid-cols-[200px_1fr]">
+                  <div className="w-[200px] h-full bg-neutral-100">
+                    <img src={imgSrc} alt="썸네일" className="w-full h-full object-cover" />
+                  </div>
+                  <div className="flex flex-col justify-center gap-1 px-3">
+                    <div className="text-[11px] text-neutral-500">{boardName}</div>
+                    <div className="text-sm font-semibold line-clamp-2">{p.title}</div>
+                    <div className="text-xs text-neutral-500">{dateStr}</div>
+                  </div>
+                </div>
+              </article>
+            );
+          })}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+

src/app/components/HeroBanner.tsx

@@ -74,7 +74,7 @@ export function HeroBanner() {
       onMouseLeave={() => setIsHovered(false)}
       aria-roledescription="carousel"
     >
-      <div className="relative h-56 sm:h-72 md:h-[420px]">
+      <div className="relative h-56 sm:h-72 md:h-[264px]">
         <div
           className="flex h-full w-full transition-transform duration-500 ease-out"
           style={{ transform: `translate3d(${translatePercent}%, 0, 0)`, width: `${numSlides * 100}%` }}

src/app/components/HorizontalCardScroller.tsx

@@ -0,0 +1,153 @@
+"use client";
+
+import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
+
+type CardItem = {
+  id: number;
+  region: string;
+  name: string;
+  address: string;
+  image: string;
+};
+
+interface HorizontalCardScrollerProps {
+  items: CardItem[];
+}
+
+export default function HorizontalCardScroller({ items }: HorizontalCardScrollerProps) {
+  const scrollRef = useRef<HTMLDivElement | null>(null);
+  const trackRef = useRef<HTMLDivElement | null>(null);
+  const [thumbWidth, setThumbWidth] = useState<number>(60);
+  const [thumbLeft, setThumbLeft] = useState<number>(0);
+  const [isDragging, setIsDragging] = useState<boolean>(false);
+  const dragOffsetRef = useRef<number>(0);
+
+  const CARD_WIDTH = 384;
+  const CARD_GAP = 16; // Tailwind gap-4
+  const SCROLL_STEP = CARD_WIDTH + CARD_GAP;
+
+  const updateThumb = useCallback(() => {
+    const scroller = scrollRef.current;
+    const track = trackRef.current;
+    if (!scroller || !track) return;
+
+    const { scrollWidth, clientWidth, scrollLeft } = scroller;
+    const trackWidth = track.clientWidth;
+    if (scrollWidth <= 0 || trackWidth <= 0) return;
+
+    const ratioVisible = Math.max(0, Math.min(1, clientWidth / scrollWidth));
+    const newThumbWidth = Math.max(40, Math.round(trackWidth * ratioVisible));
+    const maxThumbLeft = Math.max(0, trackWidth - newThumbWidth);
+    const ratioPosition = scrollWidth === clientWidth ? 0 : scrollLeft / (scrollWidth - clientWidth);
+    const newThumbLeft = Math.round(maxThumbLeft * ratioPosition);
+
+    setThumbWidth(newThumbWidth);
+    setThumbLeft(newThumbLeft);
+  }, []);
+
+  useEffect(() => {
+    updateThumb();
+    const el = scrollRef.current;
+    if (!el) return;
+    const onScroll = () => updateThumb();
+    const onResize = () => updateThumb();
+    el.addEventListener("scroll", onScroll);
+    window.addEventListener("resize", onResize);
+    return () => {
+      el.removeEventListener("scroll", onScroll);
+      window.removeEventListener("resize", onResize);
+    };
+  }, [updateThumb]);
+
+  useEffect(() => {
+    if (!isDragging) return;
+    const onMove = (e: MouseEvent) => {
+      const el = scrollRef.current;
+      const track = trackRef.current;
+      if (!el || !track) return;
+      const rect = track.getBoundingClientRect();
+      let x = e.clientX - rect.left - dragOffsetRef.current;
+      x = Math.max(0, Math.min(x, rect.width - thumbWidth));
+      setThumbLeft(x);
+      const ratio = rect.width === thumbWidth ? 0 : x / (rect.width - thumbWidth);
+      const targetScrollLeft = ratio * (el.scrollWidth - el.clientWidth);
+      el.scrollLeft = targetScrollLeft;
+    };
+    const onUp = () => setIsDragging(false);
+    window.addEventListener("mousemove", onMove);
+    window.addEventListener("mouseup", onUp);
+    return () => {
+      window.removeEventListener("mousemove", onMove);
+      window.removeEventListener("mouseup", onUp);
+    };
+  }, [isDragging, thumbWidth]);
+
+  const handleThumbMouseDown = (e: React.MouseEvent<HTMLDivElement>) => {
+    const rect = trackRef.current?.getBoundingClientRect();
+    if (!rect) return;
+    dragOffsetRef.current = e.clientX - rect.left - thumbLeft;
+    setIsDragging(true);
+    e.preventDefault();
+  };
+
+  const scrollByStep = (direction: 1 | -1) => {
+    const el = scrollRef.current;
+    if (!el) return;
+    el.scrollBy({ left: direction * SCROLL_STEP, behavior: "smooth" });
+  };
+
+  return (
+    <div className="relative h-[400px]">
+      <div ref={scrollRef} className="scrollbar-hidden h-full overflow-x-auto overflow-y-hidden">
+        <div className="flex h-full items-center gap-4">
+          {items.map((card) => (
+            <article key={card.id} className="flex-shrink-0 w-[384px] h-[324px] rounded-xl bg-white overflow-hidden shadow-sm p-2">
+              <div className="grid grid-rows-[192px_116px] h-full">
+                <div className="w-full h-[192px] overflow-hidden rounded-lg">
+                  <img src={card.image} alt={card.name} className="w-full h-full object-cover" />
+                </div>
+                <div className="h-[116px] flex flex-col justify-center px-2">
+                  <p className="text-sm text-neutral-600">{card.region}</p>
+                  <p className="text-base font-semibold">{card.name}</p>
+                  <p className="text-sm text-neutral-600">{card.address}</p>
+                </div>
+              </div>
+            </article>
+          ))}
+        </div>
+      </div>
+
+      <div className="pointer-events-none absolute bottom-[20px] left-1/2 -translate-x-1/2 z-20 flex items-center gap-3">
+        <button
+          type="button"
+          aria-label="이전"
+          className="pointer-events-auto p-0 m-0 bg-transparent text-orange-500 hover:text-orange-600 focus:outline-none"
+          onClick={() => scrollByStep(-1)}
+        >
+          <svg width="12" height="12" viewBox="0 0 12 12" fill="currentColor" aria-hidden="true">
+            <polygon points="10,0 0,6 10,12" />
+          </svg>
+        </button>
+        <div ref={trackRef} className="pointer-events-auto relative h-2 w-[30vw] rounded-full bg-orange-200/50">
+          <div
+            className="absolute top-0 h-2 rounded-full bg-orange-500"
+            style={{ width: `${thumbWidth}px`, left: `${thumbLeft}px` }}
+            onMouseDown={handleThumbMouseDown}
+          />
+        </div>
+        <button
+          type="button"
+          aria-label="다음"
+          className="pointer-events-auto p-0 m-0 bg-transparent text-orange-500 hover:text-orange-600 focus:outline-none"
+          onClick={() => scrollByStep(1)}
+        >
+          <svg width="12" height="12" viewBox="0 0 12 12" fill="currentColor" aria-hidden="true">
+            <polygon points="0,0 10,6 0,12" />
+          </svg>
+        </button>
+      </div>
+    </div>
+  );
+}
+
+

src/app/components/PostList.tsx

@@ -9,6 +9,7 @@ type Item = {
   status: string;
   stat?: { recommendCount: number; views: number; commentsCount: number } | null;
   postTags?: { tag: { name: string; slug: string } }[];
+  author?: { nickname: string } | null;
 };
 
 type Resp = {
@@ -40,44 +41,69 @@ export function PostList({ boardId, sort = "recent", q, tag, author, start, end
   const canLoadMore = (data?.at(-1)?.items.length ?? 0) === pageSize;
 
   return (
-    <div>
-      <div style={{ display: "flex", gap: 8, marginBottom: 8 }}>
-        <span>정렬:</span>
+    <div className="w-full">
+      {/* 정렬 스위치 */}
+      <div className="mb-2 flex items-center gap-3 text-sm">
+        <span className="text-neutral-500">정렬</span>
         <a
+          className={sort === "recent" ? "underline" : "hover:underline"}
           href={`${q ? "/search" : "/"}?${(() => { const p = new URLSearchParams(); if (q) p.set("q", q); if (boardId) p.set("boardId", boardId); p.set("sort", "recent"); return p.toString(); })()}`}
-          style={{ textDecoration: sort === "recent" ? "underline" : "none" }}
         >
           최신
         </a>
         <a
+          className={sort === "popular" ? "underline" : "hover:underline"}
           href={`${q ? "/search" : "/"}?${(() => { const p = new URLSearchParams(); if (q) p.set("q", q); if (boardId) p.set("boardId", boardId); p.set("sort", "popular"); return p.toString(); })()}`}
-          style={{ textDecoration: sort === "popular" ? "underline" : "none" }}
         >
           인기
         </a>
       </div>
-      <ul style={{ display: "flex", flexDirection: "column", gap: 8 }}>
+
+      {/* 리스트 테이블 헤더 */}
+      <div className="hidden md:grid grid-cols-[1fr_auto_auto_auto] items-center px-4 py-2 text-xs text-neutral-500 border-b border-neutral-200">
+        <div>제목</div>
+        <div className="w-28 text-center">작성자</div>
+        <div className="w-24 text-center">지표</div>
+        <div className="w-24 text-right">작성일</div>
+      </div>
+
+      {/* 아이템들 */}
+      <ul className="divide-y divide-neutral-100">
         {items.map((p) => (
-          <li key={p.id} style={{ padding: 12, border: "1px solid #eee", borderRadius: 8 }}>
-            <div style={{ display: "flex", justifyContent: "space-between" }}>
-              <strong><a href={`/posts/${p.id}`}>{p.title}</a></strong>
-              <span style={{ opacity: 0.7 }}>{new Date(p.createdAt).toLocaleString()}</span>
-            </div>
-            <div style={{ fontSize: 12, opacity: 0.8 }}>
-              추천 {p.stat?.recommendCount ?? 0} · 조회 {p.stat?.views ?? 0} · 댓글 {p.stat?.commentsCount ?? 0}
-            </div>
-            {!!p.postTags?.length && (
-              <div style={{ marginTop: 6, display: "flex", gap: 6, flexWrap: "wrap", fontSize: 12 }}>
-                {p.postTags?.map((pt) => (
-                  <a key={pt.tag.slug} href={`/search?tag=${pt.tag.slug}`}>#{pt.tag.name}</a>
-                ))}
+          <li key={p.id} className="px-4 py-3 hover:bg-neutral-50 transition-colors">
+            <div className="grid grid-cols-1 md:grid-cols-[1fr_auto_auto_auto] items-center gap-2">
+              <div className="min-w-0">
+                <a href={`/posts/${p.id}`} className="block truncate text-[15px] md:text-base text-neutral-900">
+                  {p.isPinned && <span className="mr-2 inline-flex items-center rounded bg-orange-100 text-orange-700 px-1.5 py-0.5 text-[11px]">공지</span>}
+                  {p.title}
+                </a>
+                {!!p.postTags?.length && (
+                  <div className="mt-1 hidden md:flex flex-wrap gap-1 text-[11px] text-neutral-500">
+                    {p.postTags?.map((pt) => (
+                      <a key={pt.tag.slug} href={`/search?tag=${pt.tag.slug}`} className="hover:underline">#{pt.tag.name}</a>
+                    ))}
+                  </div>
+                )}
               </div>
-            )}
+              <div className="md:w-28 text-xs text-neutral-600 text-center">{p.author?.nickname ?? "익명"}</div>
+              <div className="md:w-24 text-[11px] text-neutral-600 text-center flex md:block gap-3 md:gap-0">
+                <span>👍 {p.stat?.recommendCount ?? 0}</span>
+                <span>👁️ {p.stat?.views ?? 0}</span>
+                <span>💬 {p.stat?.commentsCount ?? 0}</span>
+              </div>
+              <div className="md:w-24 text-xs text-neutral-500 text-right">{new Date(p.createdAt).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" })}</div>
+            </div>
           </li>
         ))}
       </ul>
-      <div style={{ marginTop: 12 }}>
-        <button disabled={!canLoadMore || isLoading} onClick={() => setSize(size + 1)}>
+
+      {/* 페이지 더보기 */}
+      <div className="mt-3 flex justify-center">
+        <button
+          className="h-9 px-4 rounded-md border border-neutral-300 bg-white text-sm hover:bg-neutral-100 disabled:opacity-50"
+          disabled={!canLoadMore || isLoading}
+          onClick={() => setSize(size + 1)}
+        >
           {isLoading ? "로딩 중..." : canLoadMore ? "더 보기" : "끝"}
         </button>
       </div>