From 6f0d3c3a8dc4927625741314bfb48bfe94a92086 Mon Sep 17 00:00:00 2001
From: bong <xnddl456@gmail.com>
Date: Sun, 20 Sep 2026 14:13:42 +0900
Subject: [PATCH] fix : change community

---
 src/app/(app)/community/new/page.tsx | 139 ++++++++++++----------
 src/app/(app)/community/page.tsx     | 168 ++++++++++++++++++---------
 2 files changed, 188 insertions(+), 119 deletions(-)

diff --git a/src/app/(app)/community/new/page.tsx b/src/app/(app)/community/new/page.tsx
index f91968a..39ee2d3 100644
--- a/src/app/(app)/community/new/page.tsx
+++ b/src/app/(app)/community/new/page.tsx
@@ -291,8 +291,8 @@ export default function CommunityNewPage() {
   }
 
   return (
-    <div className="flex flex-1 flex-col bg-white">
-      <header className="flex items-center gap-2 border-b border-black/5 px-4 py-3">
+    <div className="flex min-h-0 flex-1 flex-col bg-white text-[#0b2146]">
+      <header className="flex h-16 shrink-0 items-center gap-2 border-b border-[#edf1f5] bg-white px-4">
         <button
           type="button"
           onClick={() => {
@@ -301,11 +301,12 @@ export default function CommunityNewPage() {
             if (step === "photos") { setStep("idle"); return; }
             router.back();
           }}
-          className="grid size-8 place-items-center rounded-full text-zinc-500 hover:bg-zinc-100"
+          aria-label="뒤로 가기"
+          className="grid size-9 place-items-center rounded-full text-[#315979] transition-colors hover:bg-[#f3f7fa]"
         >
-          <ChevronLeft size={22} />
+          <ChevronLeft size={24} strokeWidth={2.4} />
         </button>
-        <h1 className="flex-1 text-center text-base font-semibold">
+        <h1 className="flex-1 text-center text-lg font-extrabold tracking-[-0.035em]">
           {step === "photos"
             ? "사진 선택"
             : step === "trip"
@@ -318,21 +319,21 @@ export default function CommunityNewPage() {
           type="button"
           disabled={!canSubmit || step !== "idle"}
           onClick={handleSubmit}
-          className="rounded-full bg-linear-to-br from-[#2E7DF2] to-[#17B89B] px-4 py-1.5 text-sm font-semibold text-white transition-opacity disabled:opacity-40"
+          className="rounded-full bg-linear-to-br from-[#2394eb] to-[#18b8ae] px-4 py-2 text-sm font-bold text-white shadow-[0_5px_14px_rgba(36,151,201,0.2)] transition-all active:scale-95 disabled:shadow-none disabled:opacity-35"
         >
           {submitting ? "게시 중..." : "게시"}
         </button>
       </header>
 
       {step === "photos" && (
-        <div className="flex flex-1 flex-col overflow-y-auto">
-          <div className="px-4 pt-4 pb-2">
-            <p className="text-xs text-zinc-400">
+        <div className="flex min-h-0 flex-1 flex-col overflow-y-auto">
+          <div className="px-4 pt-5 pb-3">
+            <p className="text-sm font-bold text-[#234566]">
               장소를 태그할 사진을 선택하세요
             </p>
-            <p className="mt-0.5 text-xs text-zinc-400">태그하지 않아도 게시할 수 있어요</p>
+            <p className="mt-1 text-xs text-[#8999aa]">태그하지 않아도 게시할 수 있어요</p>
           </div>
-          <div className="grid grid-cols-3 gap-0.5 px-0.5">
+          <div className="grid grid-cols-3 gap-2 px-4">
             {mediaItems.map((item, index) => {
               const taggedPlace = mediaPlaces[index];
               const selected = pickerSelection.has(index);
@@ -341,11 +342,13 @@ export default function CommunityNewPage() {
                   key={index}
                   type="button"
                   onClick={() => togglePhotoSelection(index)}
-                  className="relative aspect-square overflow-hidden bg-zinc-100"
+                  className="relative aspect-square overflow-hidden rounded-xl bg-[#eef3f7] ring-1 ring-[#e1e8ee]"
                 >
                   {item.file.type.startsWith("video/") ? (
                     <video src={item.previewUrl} className="h-full w-full object-cover" muted />
                   ) : (
+                    // Object URL 미리보기는 Next Image 최적화 대상이 아닙니다.
+                    // eslint-disable-next-line @next/next/no-img-element
                     <img src={item.previewUrl} alt="" className="h-full w-full object-cover" />
                   )}
                   <div
@@ -377,11 +380,11 @@ export default function CommunityNewPage() {
             })}
           </div>
 
-          <div className="mt-auto flex items-center gap-2 border-t border-zinc-100 px-4 py-3">
+          <div className="mt-auto flex items-center gap-2 border-t border-[#edf1f5] bg-white px-4 py-3">
             <button
               type="button"
               onClick={() => setStep("idle")}
-              className="rounded-full px-4 py-2.5 text-sm font-semibold text-zinc-500"
+              className="rounded-full border border-[#dce4eb] px-4 py-2.5 text-sm font-bold text-[#60758a]"
             >
               완료
             </button>
@@ -389,7 +392,7 @@ export default function CommunityNewPage() {
               type="button"
               disabled={pickerSelection.size === 0}
               onClick={openPicker}
-              className="flex-1 rounded-full bg-linear-to-br from-[#2E7DF2] to-[#17B89B] py-2.5 text-sm font-semibold text-white disabled:opacity-40"
+              className="flex-1 rounded-full bg-linear-to-br from-[#2394eb] to-[#18b8ae] py-3 text-sm font-bold text-white shadow-[0_6px_16px_rgba(36,151,201,0.2)] disabled:shadow-none disabled:opacity-35"
             >
               장소 선택 ({pickerSelection.size})
             </button>
@@ -398,13 +401,13 @@ export default function CommunityNewPage() {
       )}
 
       {step === "trip" && (
-        <div className="flex flex-1 flex-col overflow-y-auto">
-          <div className="mx-4 mt-4 flex gap-1 rounded-full bg-zinc-100 p-1">
+        <div className="flex min-h-0 flex-1 flex-col overflow-y-auto">
+          <div className="mx-4 mt-4 flex gap-1 rounded-full border border-[#e3e9ee] bg-[#f6f8fa] p-1">
             <button
               type="button"
               onClick={() => setPickerTab("trip")}
               className={`flex-1 rounded-full py-2 text-sm font-semibold transition-colors ${
-                pickerTab === "trip" ? "bg-white text-[#2E7DF2] shadow-sm" : "text-zinc-400"
+                pickerTab === "trip" ? "bg-white text-[#218de5] shadow-sm" : "text-[#8797a8]"
               }`}
             >
               내 일정에서
@@ -413,7 +416,7 @@ export default function CommunityNewPage() {
               type="button"
               onClick={() => setPickerTab("search")}
               className={`flex-1 rounded-full py-2 text-sm font-semibold transition-colors ${
-                pickerTab === "search" ? "bg-white text-[#2E7DF2] shadow-sm" : "text-zinc-400"
+                pickerTab === "search" ? "bg-white text-[#218de5] shadow-sm" : "text-[#8797a8]"
               }`}
             >
               장소 검색
@@ -429,16 +432,16 @@ export default function CommunityNewPage() {
               <p className="px-4 py-16 text-center text-sm text-zinc-400">아직 만든 일정이 없어요</p>
             ) : (
               <>
-                <p className="px-4 pt-4 pb-2 text-xs text-zinc-400">내 일정에서 선택하세요</p>
-                <ul className="flex flex-col divide-y divide-zinc-100">
+                <p className="px-4 pt-5 pb-3 text-sm font-bold text-[#234566]">내 일정에서 선택하세요</p>
+                <ul className="flex flex-col gap-2 px-4 pb-4">
                   {schedules.map((schedule) => (
                     <li key={schedule.id}>
                       <button
                         type="button"
                         onClick={() => pickTrip(schedule)}
-                        className="flex w-full items-center gap-3 px-4 py-3.5 text-left hover:bg-zinc-50"
+                        className="flex w-full items-center gap-3 rounded-2xl border border-[#e2e9ef] bg-white px-3.5 py-3.5 text-left shadow-[0_5px_15px_rgba(46,82,116,0.06)] transition-colors hover:bg-[#f8fbfd]"
                       >
-                        <div className="grid size-10 shrink-0 place-items-center rounded-xl bg-linear-to-br from-[#2E7DF2] to-[#17B89B] text-[10px] font-bold text-white">
+                        <div className="grid size-10 shrink-0 place-items-center rounded-xl bg-linear-to-br from-[#2394eb] to-[#18b8ae] text-[10px] font-bold text-white">
                           {formatDuration(schedule.dayCount)}
                         </div>
                         <div className="min-w-0 flex-1">
@@ -456,7 +459,7 @@ export default function CommunityNewPage() {
             )
           ) : (
             <div className="flex flex-1 flex-col px-4 pt-4">
-              <div className="flex items-center gap-2 rounded-full border border-zinc-200 px-4 py-2.5">
+              <div className="flex items-center gap-2 rounded-2xl border border-[#dce5ec] bg-[#f9fbfc] px-4 py-3 shadow-inner">
                 <input
                   value={searchQuery}
                   onChange={(e) => {
@@ -468,7 +471,7 @@ export default function CommunityNewPage() {
                 />
               </div>
 
-              <div className="relative mt-3 h-[min(16rem,32dvh)] w-full shrink-0 overflow-hidden rounded-2xl ring-1 ring-black/5">
+              <div className="relative mt-3 h-[min(16rem,32dvh)] w-full shrink-0 overflow-hidden rounded-[1.35rem] border border-[#dce5ec] shadow-[0_8px_22px_rgba(46,82,116,0.08)]">
                 <NaverMap
                   center={mapCenter}
                   zoom={activeSearchPlace ? 17 : undefined}
@@ -486,7 +489,7 @@ export default function CommunityNewPage() {
                 />
               </div>
 
-              <ul className="mt-2 flex flex-col divide-y divide-zinc-100">
+              <ul className="mt-3 flex flex-col gap-2 pb-4">
                 {searchLoading && (
                   <p className="py-8 text-center text-sm text-zinc-400">검색 중...</p>
                 )}
@@ -497,13 +500,13 @@ export default function CommunityNewPage() {
                   const key = searchItemKey(item);
                   const resolving = resolvingKey === key;
                   return (
-                    <li key={key} className="flex w-full items-center gap-3 py-3.5">
+                    <li key={key} className="flex w-full items-center gap-3 rounded-2xl border border-[#e2e9ef] bg-white px-3 py-3 shadow-[0_4px_12px_rgba(46,82,116,0.05)]">
                       <button
                         type="button"
                         onClick={() => focusSearchPlace(item)}
                         className="flex min-w-0 flex-1 items-center gap-3 text-left"
                       >
-                        <div className="grid size-9 shrink-0 place-items-center rounded-full bg-blue-50 text-[#2E7DF2]">
+                        <div className="grid size-9 shrink-0 place-items-center rounded-full bg-[#edf6ff] text-[#218de5]">
                           <MapPin size={16} />
                         </div>
                         <div className="min-w-0 flex-1">
@@ -517,7 +520,7 @@ export default function CommunityNewPage() {
                         type="button"
                         onClick={() => selectSearchPlace(item)}
                         disabled={Boolean(resolvingKey)}
-                        className="shrink-0 rounded-full bg-[#EAF2FE] px-3 py-1.5 text-xs font-semibold text-[#2E7DF2] disabled:opacity-50"
+                        className="shrink-0 rounded-full bg-[#eaf4ff] px-3 py-1.5 text-xs font-bold text-[#218de5] disabled:opacity-50"
                       >
                         {resolving ? "확인 중" : "선택"}
                       </button>
@@ -531,9 +534,9 @@ export default function CommunityNewPage() {
       )}
 
       {step === "place" && selectedSchedule && (
-        <div className="flex flex-1 flex-col overflow-y-auto">
-          <p className="px-4 pt-4 pb-2 text-xs text-zinc-400">
-            <span className="font-medium text-zinc-700">{selectedSchedule.styleSummary}</span>의 장소를 선택하세요
+        <div className="flex min-h-0 flex-1 flex-col overflow-y-auto">
+          <p className="px-4 pt-5 pb-3 text-xs text-[#8999aa]">
+            <span className="font-bold text-[#234566]">{selectedSchedule.styleSummary}</span>의 장소를 선택하세요
           </p>
           {scheduleDetailLoading ? (
             <div className="flex flex-1 items-center justify-center py-16">
@@ -542,15 +545,15 @@ export default function CommunityNewPage() {
           ) : places.length === 0 ? (
             <p className="px-4 py-16 text-center text-sm text-zinc-400">등록된 장소가 없어요</p>
           ) : (
-            <ul className="flex flex-col divide-y divide-zinc-100">
+            <ul className="flex flex-col gap-2 px-4 pb-4">
               {places.map((place) => (
                 <li key={place.id}>
                   <button
                     type="button"
                     onClick={() => pickPlace(place)}
-                    className="flex w-full items-center gap-3 px-4 py-3.5 text-left hover:bg-zinc-50"
+                    className="flex w-full items-center gap-3 rounded-2xl border border-[#e2e9ef] bg-white px-3.5 py-3.5 text-left shadow-[0_5px_15px_rgba(46,82,116,0.06)] hover:bg-[#f8fbfd]"
                   >
-                    <div className="grid size-9 shrink-0 place-items-center rounded-full bg-blue-50 text-[#2E7DF2]">
+                    <div className="grid size-9 shrink-0 place-items-center rounded-full bg-[#edf6ff] text-[#218de5]">
                       <MapPin size={16} />
                     </div>
                     <div className="min-w-0 flex-1">
@@ -566,9 +569,9 @@ export default function CommunityNewPage() {
       )}
 
       {step === "idle" && (
-        <div className="flex flex-1 flex-col overflow-y-auto">
+        <div className="flex min-h-0 flex-1 flex-col overflow-y-auto pb-5">
           {mediaItems.length > 0 ? (
-            <div className="relative aspect-square w-full overflow-hidden bg-zinc-100">
+            <div className="relative mx-4 mt-4 aspect-square overflow-hidden rounded-[1.5rem] bg-[#edf2f6] shadow-[0_10px_28px_rgba(46,82,116,0.12)] ring-1 ring-[#dce5ec]">
               <div
                 className="flex h-full transition-transform duration-300 ease-in-out"
                 style={{ transform: `translateX(-${imgIndex * 100}%)` }}
@@ -577,6 +580,8 @@ export default function CommunityNewPage() {
                   item.file.type.startsWith("video/") ? (
                     <video key={i} src={item.previewUrl} className="h-full w-full shrink-0 object-cover" muted controls />
                   ) : (
+                    // Object URL 미리보기는 Next Image 최적화 대상이 아닙니다.
+                    // eslint-disable-next-line @next/next/no-img-element
                     <img key={i} src={item.previewUrl} alt="" className="h-full w-full shrink-0 object-contain bg-black" />
                   )
                 ))}
@@ -651,12 +656,14 @@ export default function CommunityNewPage() {
             <button
               type="button"
               onClick={() => fileInputRef.current?.click()}
-              className="mx-4 mt-4 flex flex-col items-center justify-center gap-3 rounded-2xl border-2 border-dashed border-zinc-200 bg-zinc-50 py-12 text-zinc-400 transition-colors hover:border-[#2E7DF2]/40 hover:bg-blue-50/30"
+              className="mx-4 mt-4 flex flex-col items-center justify-center gap-3 rounded-[1.5rem] border-2 border-dashed border-[#cfdce6] bg-[#f8fafc] py-12 text-[#7890a4] transition-colors hover:border-[#2394eb]/45 hover:bg-[#f3f9ff]"
             >
-              <ImagePlus size={32} strokeWidth={1.5} />
+              <span className="grid size-14 place-items-center rounded-full bg-linear-to-br from-[#e9f5ff] to-[#e8fbf8] text-[#218de5]">
+                <ImagePlus size={28} strokeWidth={1.7} />
+              </span>
               <div className="text-center">
-                <p className="text-sm font-medium">사진·동영상 추가</p>
-                <p className="mt-0.5 text-xs text-zinc-400">
+                <p className="text-sm font-bold text-[#294b69]">사진·동영상 추가</p>
+                <p className="mt-1 text-xs text-[#8b9baa]">
                   1개 이상, 최대 {MAX_MEDIA_COUNT}개 · 파일당 {formatMegabytes(MAX_MEDIA_FILE_SIZE)}
                 </p>
               </div>
@@ -675,19 +682,20 @@ export default function CommunityNewPage() {
             }}
           />
 
-          <div className="flex flex-col gap-4 px-4 py-4">
-            <textarea
-              value={text}
-              onChange={(e) => setText(e.target.value)}
-              placeholder="여행 후기를 남겨보세요..."
-              rows={5}
-              className="w-full resize-none text-sm text-zinc-800 placeholder:text-zinc-400 focus:outline-none"
-            />
-
-            <div className="h-px bg-zinc-100" />
+          <div className="flex flex-col gap-3 px-4 py-4">
+            <div className="rounded-[1.35rem] border border-[#e1e8ee] bg-white p-4 shadow-[0_5px_18px_rgba(46,82,116,0.06)]">
+              <p className="mb-2 text-xs font-bold text-[#60758a]">여행 이야기</p>
+              <textarea
+                value={text}
+                onChange={(e) => setText(e.target.value)}
+                placeholder="여행 후기를 남겨보세요..."
+                rows={5}
+                className="w-full resize-none bg-transparent text-sm leading-6 text-[#1d334a] placeholder:text-[#9aa8b5] focus:outline-none"
+              />
+            </div>
 
-            <div>
-              <p className="mb-2 text-xs font-medium text-zinc-400">태그 선택 (복수 가능)</p>
+            <div className="rounded-[1.35rem] border border-[#e1e8ee] bg-white p-4 shadow-[0_5px_18px_rgba(46,82,116,0.06)]">
+              <p className="mb-3 text-xs font-bold text-[#60758a]">태그 선택 <span className="font-medium text-[#9aa8b5]">(복수 가능)</span></p>
               <div className="flex flex-wrap gap-2">
                 {COMMUNITY_TAGS.map((tag) => {
                   const active = selectedTags.includes(tag.id);
@@ -696,8 +704,10 @@ export default function CommunityNewPage() {
                       key={tag.id}
                       type="button"
                       onClick={() => toggleTag(tag.id)}
-                      className={`rounded-full px-3.5 py-1.5 text-xs font-semibold transition-colors ${
-                        active ? "bg-[#2E7DF2] text-white" : "bg-zinc-100 text-zinc-500"
+                      className={`rounded-full border px-3.5 py-2 text-xs font-bold transition-all ${
+                        active
+                          ? "border-transparent bg-linear-to-br from-[#2394eb] to-[#18b8ae] text-white shadow-[0_4px_12px_rgba(36,151,201,0.18)]"
+                          : "border-[#dce4eb] bg-[#f8fafc] text-[#526d88]"
                       }`}
                     >
                       {tag.emoji} {tag.label}
@@ -707,17 +717,22 @@ export default function CommunityNewPage() {
               </div>
             </div>
 
-            <div className="h-px bg-zinc-100" />
-
             {mediaItems.length > 0 && (
-              <div className="flex items-center gap-2">
-                <MapPin size={15} className={`shrink-0 ${taggedPhotoCount > 0 ? "text-[#2E7DF2]" : "text-zinc-400"}`} />
-                <button type="button" onClick={openPhotoTagger} className="text-sm text-zinc-500">
+              <button
+                type="button"
+                onClick={openPhotoTagger}
+                className="flex w-full items-center gap-3 rounded-[1.15rem] border border-[#e1e8ee] bg-white px-4 py-3.5 text-left shadow-[0_5px_18px_rgba(46,82,116,0.05)]"
+              >
+                <span className={`grid size-9 shrink-0 place-items-center rounded-full ${taggedPhotoCount > 0 ? "bg-[#e9f5ff] text-[#218de5]" : "bg-[#f3f6f8] text-[#8093a5]"}`}>
+                  <MapPin size={17} />
+                </span>
+                <span className="min-w-0 flex-1 text-sm font-bold text-[#3f5870]">
                   {taggedPhotoCount > 0
                     ? `사진별 장소 태그 (${taggedPhotoCount}/${mediaItems.length}장)`
                     : "사진별로 장소 태그"}
-                </button>
-              </div>
+                </span>
+                <ChevronRight size={18} className="text-[#94a4b3]" />
+              </button>
             )}
           </div>
         </div>
diff --git a/src/app/(app)/community/page.tsx b/src/app/(app)/community/page.tsx
index 0742df4..0994430 100644
--- a/src/app/(app)/community/page.tsx
+++ b/src/app/(app)/community/page.tsx
@@ -1,11 +1,11 @@
 "use client";
 
+import Image from "next/image";
 import { useCallback, useEffect, useRef, useState } from "react";
 import { useSession } from "next-auth/react";
 import { useRouter } from "next/navigation";
 import { AnimatePresence, motion } from "framer-motion";
-import { Heart, MessageCircle, ChevronLeft, ChevronRight, Grid3x3, LayoutGrid } from "lucide-react";
-import AppHeader from "@/components/layout/AppHeader";
+import { Heart, MessageCircle, ChevronLeft, ChevronRight, LayoutGrid, List } from "lucide-react";
 import PageFade from "@/components/ui/PageFade";
 import { COMMUNITY_TAGS, type CommunityTagId } from "@/mocks/community-tags";
 import { getFeed, getPopularFeed } from "@/lib/api/posts";
@@ -15,32 +15,54 @@ import type { FeedPost } from "@/types/api/post";
 
 const ASPECT_RATIOS = ["aspect-[3/4]", "aspect-square", "aspect-[4/5]", "aspect-[3/4]", "aspect-square", "aspect-[4/5]"];
 
+function ProfileBadge({ post, size = "size-8" }: { post: FeedPost; size?: string }) {
+  return (
+    <span className={`${size} relative grid shrink-0 place-items-center overflow-hidden rounded-full border-2 border-white bg-linear-to-br from-[#65a7f6] to-[#18b8ae] text-[10px] font-bold text-white shadow-md`}>
+      {post.author.profileImageUrl ? (
+        <Image
+          src={post.author.profileImageUrl}
+          alt={post.author.nickname}
+          fill
+          unoptimized
+          referrerPolicy="no-referrer"
+          className="object-cover"
+        />
+      ) : (
+        post.author.nickname.slice(0, 1)
+      )}
+    </span>
+  );
+}
+
 function GridTile({ post, onClick, index }: { post: FeedPost; onClick: () => void; index: number }) {
   const aspectClass = ASPECT_RATIOS[index % ASPECT_RATIOS.length];
   return (
     <button
       type="button"
       onClick={onClick}
-      className={`group relative mb-2 w-full overflow-hidden rounded-2xl bg-zinc-100 ${aspectClass}`}
+      className={`group relative mb-2.5 w-full overflow-hidden rounded-[1.35rem] border border-white/90 bg-[#dfeef7] shadow-[0_8px_22px_rgba(51,112,163,0.13)] ring-1 ring-[#b9dcf2] ${aspectClass}`}
     >
       {post.thumbnailUrl && (
-        <img
+        <Image
           src={post.thumbnailUrl}
           alt={post.placeName ?? post.content}
+          fill
+          unoptimized
+          sizes="(max-width: 512px) 50vw, 250px"
           className="h-full w-full object-cover transition-transform duration-500 group-hover:scale-105"
         />
       )}
-      <div className="absolute inset-0 bg-linear-to-t from-black/60 via-transparent to-transparent" />
+      <div className="absolute inset-0 bg-linear-to-t from-[#173b63]/55 via-transparent to-transparent" />
       {post.mediaCount > 1 && (
-        <div className="absolute right-2 top-2 flex items-center gap-0.5 rounded-full bg-black/40 px-1.5 py-0.5">
-          <span className="text-[10px] font-semibold text-white">{post.mediaCount}</span>
+        <div className="absolute right-2 top-2 grid size-7 place-items-center rounded-full bg-[#344052]/55 backdrop-blur-sm">
+          <span className="text-[11px] font-bold text-white">{post.mediaCount}</span>
         </div>
       )}
-      <div className="absolute bottom-0 left-0 right-0 p-3">
-        <p className="truncate text-xs font-semibold text-white drop-shadow">{post.placeName ?? post.content}</p>
-        <div className="mt-0.5 flex items-center gap-2 text-[11px] text-white/80">
-          <span className="flex items-center gap-0.5"><Heart size={10} className="fill-white/80 stroke-none" /> {post.likeCount}</span>
-          <span className="flex items-center gap-0.5"><MessageCircle size={10} /> {post.commentCount}</span>
+      <div className="absolute inset-x-1 bottom-1 rounded-[1.1rem] border border-white/35 bg-[#31516f]/45 px-3 py-2.5 text-left shadow-[0_4px_16px_rgba(14,43,72,0.14)] backdrop-blur-md">
+        <p className="truncate text-sm font-bold text-white drop-shadow-sm">{post.placeName ?? post.content}</p>
+        <div className="mt-1 flex items-center gap-2 text-xs font-medium text-white/90">
+          <span className="flex items-center gap-1"><Heart size={13} className="fill-white stroke-none" /> {post.likeCount}</span>
+          <span className="flex items-center gap-1"><MessageCircle size={13} /> {post.commentCount}</span>
           <span>· {post.createdAgo}</span>
         </div>
       </div>
@@ -53,12 +75,15 @@ function SquareGridTile({ post, onClick }: { post: FeedPost; onClick: () => void
     <button
       type="button"
       onClick={onClick}
-      className="group relative aspect-square w-full overflow-hidden bg-zinc-100"
+      className="group relative aspect-square w-full overflow-hidden rounded-xl border border-white/80 bg-[#dfeef7] shadow-sm"
     >
       {post.thumbnailUrl && (
-        <img
+        <Image
           src={post.thumbnailUrl}
           alt={post.placeName ?? post.content}
+          fill
+          unoptimized
+          sizes="(max-width: 512px) 33vw, 170px"
           className="h-full w-full object-cover transition-transform duration-500 group-hover:scale-105"
         />
       )}
@@ -193,14 +218,26 @@ function onTagMouseDown(e: React.MouseEvent) {
   }
 
   return (
-    <PageFade className="flex flex-1 flex-col">
-      <AppHeader title="커뮤니티" />
+    <PageFade className="flex min-h-0 flex-1 flex-col bg-white text-[#0b2146]">
+      <header className="relative h-16 shrink-0 border-b border-[#edf1f5] bg-white">
+        <button
+          type="button"
+          onClick={() => router.back()}
+          aria-label="뒤로 가기"
+          className="absolute left-4 top-1/2 z-10 grid size-10 -translate-y-1/2 place-items-center rounded-full text-[#0b3972] transition-colors hover:bg-white/45"
+        >
+          <ChevronLeft size={28} strokeWidth={2.6} />
+        </button>
+        <h1 className="absolute inset-x-16 top-1/2 z-10 -translate-y-1/2 text-center text-[1.55rem] font-extrabold tracking-[-0.045em] text-[#081d43] drop-shadow-[0_1px_2px_rgba(255,255,255,0.9)]">
+          커뮤니티
+        </h1>
+      </header>
 
       {/* 태그 필터 */}
-      <div className="relative">
+      <div className="relative shrink-0 border-b border-[#edf1f5] bg-white pb-2">
         <div
           ref={tagScrollRef}
-          className="flex gap-2 overflow-x-auto px-4 py-2 scrollbar-none cursor-grab select-none"
+          className="flex cursor-grab select-none gap-2 overflow-x-auto px-4 py-2 scrollbar-none"
           onMouseDown={onTagMouseDown}
           onMouseMove={onTagMouseMove}
           onMouseUp={onTagMouseUp}
@@ -209,8 +246,10 @@ function onTagMouseDown(e: React.MouseEvent) {
         <button
           type="button"
           onClick={() => { setActiveTag(null); void loadFeed(); }}
-          className={`shrink-0 rounded-full px-3.5 py-1.5 text-xs font-semibold transition-colors ${
-            activeTag === null ? "bg-zinc-900 text-white" : "bg-zinc-100 text-zinc-500"
+          className={`h-11 shrink-0 rounded-full border px-4 text-sm font-bold shadow-sm transition-all ${
+            activeTag === null
+              ? "border-transparent bg-linear-to-br from-[#2394eb] to-[#18b8ae] text-white shadow-[0_6px_16px_rgba(37,151,214,0.2)]"
+              : "border-[#dce4eb] bg-[#f8fafc] text-[#526d88]"
           }`}
         >
           전체
@@ -225,20 +264,20 @@ function onTagMouseDown(e: React.MouseEvent) {
                 const label = next ? COMMUNITY_TAGS.find((t) => t.id === next)?.label : undefined;
                 void loadFeed(label);
               }}
-            className={`shrink-0 rounded-full px-3.5 py-1.5 text-xs font-semibold transition-colors ${
+            className={`h-11 shrink-0 rounded-full border px-4 text-sm font-bold shadow-sm transition-all ${
               activeTag === tag.id
-                ? "bg-[#2E7DF2] text-white"
-                : "bg-zinc-100 text-zinc-500"
+                ? "border-transparent bg-linear-to-br from-[#2394eb] to-[#18b8ae] text-white shadow-[0_6px_16px_rgba(37,151,214,0.2)]"
+                : "border-[#dce4eb] bg-[#f8fafc] text-[#526d88]"
             }`}
           >
             {tag.emoji} {tag.label}
           </button>
         ))}
         </div>
-        <div className="pointer-events-none absolute inset-y-0 right-0 w-8 bg-linear-to-l from-white to-transparent" />
+        <div className="pointer-events-none absolute inset-y-0 right-0 w-10 bg-linear-to-l from-white to-transparent" />
       </div>
 
-      <div className="flex flex-1 flex-col overflow-y-auto scrollbar-none">
+      <div className="flex min-h-0 flex-1 flex-col overflow-y-auto pb-4 scrollbar-none">
       {loading ? (
         <div className="flex flex-1 flex-col items-center justify-center gap-3 py-20">
           <div className="size-8 animate-spin rounded-full border-4 border-zinc-200 border-t-[#2E7DF2]" />
@@ -251,21 +290,31 @@ function onTagMouseDown(e: React.MouseEvent) {
       ) : (
         <>
       {topPosts.length > 0 && (
-      <section className="mb-5">
-        <div className="flex items-center px-4 pb-2 pt-1">
-          <h2 className="flex-1 text-sm font-bold text-zinc-800">인기 후기 🔥</h2>
-          <div className="flex gap-1">
-            <button type="button" onClick={() => scrollPopular("left")} className="grid size-7 place-items-center rounded-full bg-zinc-100 text-zinc-600 hover:bg-zinc-200">
-              <ChevronLeft size={15} />
+      <section className="mb-7 pt-5">
+        <div className="flex items-center px-4 pb-3">
+          <h2 className="flex-1 text-[1.35rem] font-extrabold tracking-[-0.04em] text-[#0a2b5e]">인기 후기 🔥</h2>
+          <div className="flex gap-2">
+            <button
+              type="button"
+              onClick={() => scrollPopular("left")}
+              aria-label="인기 후기 이전"
+              className="grid size-10 place-items-center rounded-full border border-white/90 bg-white/55 text-[#164a83] shadow-sm backdrop-blur-sm transition-transform hover:scale-105 active:scale-95"
+            >
+              <ChevronLeft size={21} strokeWidth={2.5} />
             </button>
-            <button type="button" onClick={() => scrollPopular("right")} className="grid size-7 place-items-center rounded-full bg-zinc-100 text-zinc-600 hover:bg-zinc-200">
-              <ChevronRight size={15} />
+            <button
+              type="button"
+              onClick={() => scrollPopular("right")}
+              aria-label="인기 후기 다음"
+              className="grid size-10 place-items-center rounded-full border border-white/90 bg-white/55 text-[#164a83] shadow-sm backdrop-blur-sm transition-transform hover:scale-105 active:scale-95"
+            >
+              <ChevronRight size={21} strokeWidth={2.5} />
             </button>
           </div>
         </div>
         <div
           ref={popularScrollRef}
-          className="flex gap-3 overflow-x-auto px-4 pb-1 scrollbar-none cursor-grab select-none"
+          className="flex cursor-grab snap-x snap-mandatory select-none gap-3 overflow-x-auto px-4 pb-2 scrollbar-none"
           onMouseDown={onPopularMouseDown}
           onMouseMove={onPopularMouseMove}
           onMouseUp={onPopularMouseUp}
@@ -276,28 +325,29 @@ function onTagMouseDown(e: React.MouseEvent) {
               key={post.id}
               type="button"
               onClick={() => openPost(post)}
-              className="group relative h-48 w-36 shrink-0 overflow-hidden rounded-2xl bg-zinc-100"
+              className="group relative h-[13rem] w-[9.5rem] shrink-0 snap-start overflow-hidden rounded-[1.35rem] border border-white/90 bg-[#dfeef7] shadow-[0_9px_24px_rgba(51,112,163,0.16)] ring-1 ring-[#b9dcf2]"
             >
               {post.thumbnailUrl && (
-                <img
+                <Image
                   src={post.thumbnailUrl}
                   alt={post.placeName ?? post.content}
+                  fill
+                  unoptimized
+                  sizes="152px"
                   className="h-full w-full object-cover transition-transform duration-500 group-hover:scale-105"
                 />
               )}
-              <div className="absolute inset-0 bg-linear-to-t from-black/70 via-black/10 to-transparent" />
-              <div className="absolute bottom-0 left-0 right-0 p-2.5">
-                <p className="truncate text-[11px] font-semibold text-white">{post.placeName ?? post.content}</p>
-                <div className="mt-0.5 flex items-center gap-1 text-[10px] text-white/80">
-                  <Heart size={9} className="fill-red-400 stroke-none" />
+              <div className="absolute inset-0 bg-linear-to-t from-[#173b63]/55 via-transparent to-transparent" />
+              <div className="absolute inset-x-1 bottom-1 rounded-[1.05rem] border border-white/35 bg-[#31516f]/45 px-2.5 py-2 text-left backdrop-blur-md">
+                <p className="truncate text-sm font-bold text-white">{post.placeName ?? post.content}</p>
+                <div className="mt-1 flex items-center gap-1.5 text-xs font-medium text-white/90">
+                  <Heart size={13} className="fill-[#ff7385] stroke-none" />
                   <span>{post.likeCount}</span>
                   <span>· {post.createdAgo}</span>
                 </div>
               </div>
               <div className="absolute left-2 top-2">
-                {post.author.profileImageUrl && (
-                  <img src={post.author.profileImageUrl} alt={post.author.nickname} className="size-6 rounded-full border border-white object-cover" />
-                )}
+                <ProfileBadge post={post} />
               </div>
             </button>
           ))}
@@ -305,29 +355,33 @@ function onTagMouseDown(e: React.MouseEvent) {
       </section>
       )}
 
-      <section>
-        <div className="flex items-center px-4 pb-2">
-          <h2 className="flex-1 text-sm font-bold text-zinc-800">최신 피드</h2>
-          <div className="flex gap-1 rounded-full bg-zinc-100 p-1">
+      <section className="pb-3">
+        <div className="flex items-center px-4 pb-3">
+          <h2 className="flex-1 text-[1.35rem] font-extrabold tracking-[-0.04em] text-[#0a2b5e]">최신 피드</h2>
+          <div className="flex gap-2">
             <button
               type="button"
               onClick={() => setViewMode("tile")}
               aria-label="타일형 보기"
-              className={`grid size-6 place-items-center rounded-full transition-colors ${
-                viewMode === "tile" ? "bg-white text-zinc-900 shadow-sm" : "text-zinc-400"
+              className={`grid size-10 place-items-center rounded-full border shadow-sm backdrop-blur-sm transition-all ${
+                viewMode === "tile"
+                  ? "border-[#66c9f4] bg-white/75 text-[#1598ec]"
+                  : "border-white/85 bg-white/45 text-[#7898b5]"
               }`}
             >
-              <LayoutGrid size={13} />
+              <LayoutGrid size={20} strokeWidth={2.5} />
             </button>
             <button
               type="button"
               onClick={() => setViewMode("grid")}
               aria-label="그리드형 보기"
-              className={`grid size-6 place-items-center rounded-full transition-colors ${
-                viewMode === "grid" ? "bg-white text-zinc-900 shadow-sm" : "text-zinc-400"
+              className={`grid size-10 place-items-center rounded-full border shadow-sm backdrop-blur-sm transition-all ${
+                viewMode === "grid"
+                  ? "border-[#66c9f4] bg-white/75 text-[#1598ec]"
+                  : "border-white/85 bg-white/45 text-[#7898b5]"
               }`}
             >
-              <Grid3x3 size={13} />
+              <List size={21} strokeWidth={2.5} />
             </button>
           </div>
         </div>
@@ -342,7 +396,7 @@ function onTagMouseDown(e: React.MouseEvent) {
                 animate={{ opacity: 1 }}
                 exit={{ opacity: 0 }}
                 transition={{ duration: 0.1, ease: "easeOut" }}
-                className="flex gap-2 px-3 pb-6"
+                className="flex gap-2.5 px-4 pb-6"
               >
                 {[0, 1].map((col) => (
                   <div key={col} className="flex flex-1 flex-col">
@@ -366,7 +420,7 @@ function onTagMouseDown(e: React.MouseEvent) {
                 animate={{ opacity: 1 }}
                 exit={{ opacity: 0 }}
                 transition={{ duration: 0.1, ease: "easeOut" }}
-                className="grid grid-cols-3 gap-0.5 pb-6"
+                className="grid grid-cols-3 gap-1.5 px-4 pb-6"
               >
                 {posts.map((post) => (
                   <SquareGridTile key={post.id} post={post} onClick={() => openPost(post)} />
@@ -382,7 +436,7 @@ function onTagMouseDown(e: React.MouseEvent) {
               type="button"
               onClick={loadMore}
               disabled={loadingMore}
-              className="rounded-full bg-zinc-100 px-4 py-2 text-xs font-semibold text-zinc-600 hover:bg-zinc-200 disabled:opacity-50"
+              className="rounded-full border border-white/90 bg-white/65 px-5 py-2.5 text-xs font-bold text-[#416789] shadow-sm backdrop-blur-sm hover:bg-white/85 disabled:opacity-50"
             >
               {loadingMore ? "불러오는 중..." : "더 보기"}
             </button>