motaju/msgapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

main

Browse Source
This commit is contained in:
mota
2025-11-02 11:34:47 +09:00
parent 9ff08d3e58
commit 1ced95f218
4 changed files with 172 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
src/app/components/RankIcon1st.tsx Normal file
View File

@@ -0,0 +1,43 @@
export function RankIcon1st() {
return (
<svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg">
<g filter="url(#filter0_d_9465_19783)">
<path d="M12.0854 18.801C10.8419 19.733 9.1581 19.733 7.91462 18.801L1.96272 14.3398C0.719241 13.4077 0.198919 11.7556 0.673887 10.2475L2.94731 3.02913C3.42228 1.52105 4.7845 0.5 6.32153 0.5H13.6785C15.2155 0.5 16.5777 1.52105 17.0527 3.02913L19.3261 10.2475C19.8011 11.7556 19.2808 13.4077 18.0373 14.3398L12.0854 18.801Z" fill="url(#paint0_linear_9465_19783)"/>
<path d="M6.32129 1.5H13.6787C14.7619 1.50011 15.7495 2.22129 16.0986 3.3291L18.3721 10.5479C18.7226 11.6607 18.3334 12.8685 17.4375 13.54L11.4854 18.001C10.5974 18.6663 9.40256 18.6663 8.51465 18.001L2.5625 13.54C1.6666 12.8685 1.27744 11.6607 1.62793 10.5479L3.90137 3.3291C4.25048 2.22129 5.23809 1.50011 6.32129 1.5Z" stroke="white" strokeOpacity="0.4" strokeWidth="2"/>
</g>
<g clipPath="url(#paint1_angular_9465_19783_clip_path)" data-figma-skip-parse="true">
<g transform="matrix(0 0.003 -0.003 0 10 9.7998)">
<foreignObject x="-1333.33" y="-1333.33" width="2666.67" height="2666.67">
<div xmlns="http://www.w3.org/1999/xhtml" style={{background:"conic-gradient(from 90deg,rgba(255, 255, 255, 1) 0deg,rgba(224, 224, 224, 1) 360deg)",height:"100%",width:"100%",opacity:1}}></div>
</foreignObject>
</g>
</g>
<path d="M9.69757 6.98416C9.82427 6.73835 10.1757 6.73835 10.3024 6.98416L11.1074 8.54588C11.1398 8.60878 11.191 8.66001 11.2539 8.69243L12.8156 9.49737C13.0615 9.62407 13.0615 9.97554 12.8156 10.1022L11.2539 10.9072C11.191 10.9396 11.1398 10.9908 11.1074 11.0537L10.3024 12.6154C10.1757 12.8613 9.82427 12.8613 9.69757 12.6154L8.89262 11.0537C8.8602 10.9908 8.80898 10.9396 8.74607 10.9072L7.18436 10.1022C6.93855 9.97554 6.93855 9.62407 7.18436 9.49737L8.74607 8.69243C8.80898 8.66001 8.8602 8.60878 8.89262 8.54588L9.69757 6.98416Z" fill="url(#paint1_angular_9465_19783)"/>
<path d="M9.31836 6.64844C9.64906 6.18382 10.3509 6.18383 10.6816 6.64844L10.7471 6.75488L11.5283 8.27051L13.0449 9.05273C13.6519 9.36564 13.6519 10.234 13.0449 10.5469L11.5283 11.3281L10.7471 12.8447C10.4342 13.4517 9.56584 13.4517 9.25293 12.8447L8.4707 11.3281L6.95508 10.5469C6.34814 10.234 6.34814 9.36564 6.95508 9.05273L8.4707 8.27051L9.25293 6.75488L9.31836 6.64844Z" stroke="black" strokeOpacity="0.2"/>
<path d="M15.5771 1.07031C16.2587 1.5162 16.791 2.19814 17.0527 3.0293L18.2617 6.87012L7.00977 18.123L2.16016 14.4873L15.5771 1.07031Z" fill="white" fillOpacity="0.3"/>
<defs>
<filter id="filter0_d_9465_19783" x="0.5" y="0.5" width="19" height="20" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
<feFlood floodOpacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="1"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0.300741 0 0 0 0 0.171852 0 0 0 0 0.0192593 0 0 0 1 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_9465_19783"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_9465_19783" result="shape"/>
</filter>
<clipPath id="paint1_angular_9465_19783_clip_path">
<path d="M9.69757 6.98416C9.82427 6.73835 10.1757 6.73835 10.3024 6.98416L11.1074 8.54588C11.1398 8.60878 11.191 8.66001 11.2539 8.69243L12.8156 9.49737C13.0615 9.62407 13.0615 9.97554 12.8156 10.1022L11.2539 10.9072C11.191 10.9396 11.1398 10.9908 11.1074 11.0537L10.3024 12.6154C10.1757 12.8613 9.82427 12.8613 9.69757 12.6154L8.89262 11.0537C8.8602 10.9908 8.80898 10.9396 8.74607 10.9072L7.18436 10.1022C6.93855 9.97554 6.93855 9.62407 7.18436 9.49737L8.74607 8.69243C8.80898 8.66001 8.8602 8.60878 8.89262 8.54588L9.69757 6.98416Z"/>
</clipPath>
<linearGradient id="paint0_linear_9465_19783" x1="10.0002" y1="20.364" x2="10.0002" y2="-1.59713" gradientUnits="userSpaceOnUse">
<stop stopColor="#F07E00"/>
<stop offset="1" stopColor="#F7F4CF"/>
</linearGradient>
<linearGradient id="paint1_angular_9465_19783" x1="10" y1="6.98416" x2="10" y2="12.6154" gradientUnits="userSpaceOnUse">
<stop stopColor="white"/>
<stop offset="1" stopColor="#E0E0E0"/>
</linearGradient>
</defs>
</svg>
);
}

50
src/app/components/RankIcon2nd.tsx Normal file
View File

@@ -0,0 +1,50 @@
export function RankIcon2nd() {
return (
<svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg">
<g filter="url(#filter0_d_9465_19777)">
<path d="M12.569 18.9359C11.1502 20.3547 8.84982 20.3547 7.43099 18.9359L1.06412 12.569C-0.354706 11.1502 -0.354706 8.84982 1.06412 7.43099L7.43099 1.06412C8.84982 -0.354706 11.1502 -0.354706 12.569 1.06412L18.9359 7.43099C20.3547 8.84982 20.3547 11.1502 18.9359 12.569L12.569 18.9359Z" fill="url(#paint0_linear_9465_19777)"/>
<path d="M8.1377 1.77148C9.16599 0.743186 10.834 0.743186 11.8623 1.77148L18.2285 8.1377C19.2568 9.16599 19.2568 10.834 18.2285 11.8623L11.8623 18.2285C10.834 19.2568 9.16599 19.2568 8.1377 18.2285L1.77148 11.8623C0.743186 10.834 0.743186 9.16599 1.77148 8.1377L8.1377 1.77148Z" stroke="white" strokeOpacity="0.4" strokeWidth="2"/>
</g>
<g clipPath="url(#paint1_angular_9465_19777_clip_path)" data-figma-skip-parse="true">
<g transform="matrix(0 0.003 -0.003 0 10 10.2002)">
<foreignObject x="-1333.33" y="-1333.33" width="2666.67" height="2666.67">
<div xmlns="http://www.w3.org/1999/xhtml" style={{background:"conic-gradient(from 90deg,rgba(255, 255, 255, 1) 0deg,rgba(224, 224, 224, 1) 360deg)",height:"100%",width:"100%",opacity:1}}></div>
</foreignObject>
</g>
</g>
<path d="M9.69757 7.38456C9.82427 7.13874 10.1757 7.13874 10.3024 7.38456L11.1074 8.94627C11.1398 9.00917 11.191 9.0604 11.2539 9.09282L12.8156 9.89776C13.0615 10.0245 13.0615 10.3759 12.8156 10.5026L11.2539 11.3076C11.191 11.34 11.1398 11.3912 11.1074 11.4541L10.3024 13.0158C10.1757 13.2616 9.82427 13.2616 9.69757 13.0158L8.89262 11.4541C8.8602 11.3912 8.80898 11.34 8.74607 11.3076L7.18436 10.5026C6.93855 10.3759 6.93855 10.0245 7.18436 9.89776L8.74607 9.09282C8.80898 9.0604 8.8602 9.00917 8.89262 8.94627L9.69757 7.38456Z" fill="url(#paint1_angular_9465_19777)"/>
<path d="M9.31836 7.04883C9.64906 6.58422 10.3509 6.58422 10.6816 7.04883L10.7471 7.15527L11.5283 8.6709L13.0449 9.45312C13.6519 9.76603 13.6519 10.6344 13.0449 10.9473L11.5283 11.7285L10.7471 13.2451C10.4342 13.8521 9.56584 13.8521 9.25293 13.2451L8.4707 11.7285L6.95508 10.9473C6.34814 10.6344 6.34814 9.76603 6.95508 9.45312L8.4707 8.6709L9.25293 7.15527L9.31836 7.04883Z" stroke="black" strokeOpacity="0.2"/>
<path d="M17.874 6.36865L6.36914 17.8735L2.12695 13.6313L13.6318 2.12646L17.874 6.36865Z" fill="url(#paint2_linear_9465_19777)" fillOpacity="0.3"/>
<defs>
<filter id="filter0_d_9465_19777" x="0" y="0" width="20" height="21" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
<feFlood floodOpacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="1"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0.117138 0 0 0 0 0.176258 0 0 0 0 0.202862 0 0 0 1 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_9465_19777"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_9465_19777" result="shape"/>
</filter>
<clipPath id="paint1_angular_9465_19777_clip_path">
<path d="M9.69757 7.38456C9.82427 7.13874 10.1757 7.13874 10.3024 7.38456L11.1074 8.94627C11.1398 9.00917 11.191 9.0604 11.2539 9.09282L12.8156 9.89776C13.0615 10.0245 13.0615 10.3759 12.8156 10.5026L11.2539 11.3076C11.191 11.34 11.1398 11.3912 11.1074 11.4541L10.3024 13.0158C10.1757 13.2616 9.82427 13.2616 9.69757 13.0158L8.89262 11.4541C8.8602 11.3912 8.80898 11.34 8.74607 11.3076L7.18436 10.5026C6.93855 10.3759 6.93855 10.0245 7.18436 9.89776L8.74607 9.09282C8.80898 9.0604 8.8602 9.00917 8.89262 8.94627L9.69757 7.38456Z"/>
</clipPath>
<linearGradient id="paint0_linear_9465_19777" x1="9.99996" y1="21.5049" x2="9.99996" y2="-1.50486" gradientUnits="userSpaceOnUse">
<stop stopColor="#8AA8B5"/>
<stop offset="1" stopColor="#DCE5E8"/>
</linearGradient>
<linearGradient id="paint1_angular_9465_19777" x1="10" y1="7.38456" x2="10" y2="13.0158" gradientUnits="userSpaceOnUse">
<stop stopColor="white"/>
<stop offset="1" stopColor="#E0E0E0"/>
</linearGradient>
<linearGradient id="paint2_linear_9465_19777" x1="15.5608" y1="0.641726" x2="0.16582" y2="18.5669" gradientUnits="userSpaceOnUse">
<stop offset="0.125287" stopColor="white" stopOpacity="0"/>
<stop offset="0.195" stopColor="white"/>
<stop offset="0.375692" stopColor="white"/>
<stop offset="0.495" stopColor="white"/>
<stop offset="0.929467" stopColor="white" stopOpacity="0"/>
</linearGradient>
</defs>
</svg>
);
}

46
src/app/components/RankIcon3rd.tsx Normal file
View File

@@ -0,0 +1,46 @@
export function RankIcon3rd() {
return (
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<g filter="url(#filter0_d_9465_19771)">
<mask id="path-1-inside-1_9465_19771" fill="white">
<path d="M1.5 2.9C1.5 1.85066 2.35066 1 3.4 1L16.6 1C17.6493 1 18.5 1.85066 18.5 2.9V10.9C18.5 15.3735 14.5333 19 10 19C5.46667 19 1.5 15.3735 1.5 10.9V2.9Z"/>
</mask>
<path d="M1.5 2.9C1.5 1.85066 2.35066 1 3.4 1L16.6 1C17.6493 1 18.5 1.85066 18.5 2.9V10.9C18.5 15.3735 14.5333 19 10 19C5.46667 19 1.5 15.3735 1.5 10.9V2.9Z" fill="url(#paint0_linear_9465_19771)"/>
<path d="M18.5 2.9H16.5V10.9H18.5H20.5V2.9H18.5ZM1.5 10.9H3.5V2.9H1.5H-0.5V10.9H1.5ZM10 19V17C6.45415 17 3.5 14.1554 3.5 10.9H1.5H-0.5C-0.5 16.5916 4.47919 21 10 21V19ZM18.5 10.9H16.5C16.5 14.1554 13.5459 17 10 17V19V21C15.5208 21 20.5 16.5916 20.5 10.9H18.5ZM3.4 1L3.4 3L16.6 3V1L16.6 -1L3.4 -1V1ZM1.5 2.9H3.5C3.5 2.95523 3.45523 3 3.4 3L3.4 1V-1C1.24609 -1 -0.5 0.746093 -0.5 2.9H1.5ZM18.5 2.9H20.5C20.5 0.746091 18.7539 -0.999999 16.6 -1L16.6 1V3C16.5448 3 16.5 2.95523 16.5 2.9H18.5Z" fill="white" fillOpacity="0.4" mask="url(#path-1-inside-1_9465_19771)"/>
</g>
<g clipPath="url(#paint1_angular_9465_19771_clip_path)" data-figma-skip-parse="true">
<g transform="matrix(0 0.003 -0.003 0 10 9.5)">
<foreignObject x="-1333.33" y="-1333.33" width="2666.67" height="2666.67">
<div xmlns="http://www.w3.org/1999/xhtml" style={{background:"conic-gradient(from 90deg,rgba(255, 255, 255, 1) 0deg,rgba(224, 224, 224, 1) 360deg)",height:"100%",width:"100%",opacity:1}}></div>
</foreignObject>
</g>
</g>
<path d="M9.69757 6.68436C9.82427 6.43855 10.1757 6.43855 10.3024 6.68436L11.1074 8.24607C11.1398 8.30898 11.191 8.3602 11.2539 8.39262L12.8156 9.19757C13.0615 9.32427 13.0615 9.67573 12.8156 9.80243L11.2539 10.6074C11.191 10.6398 11.1398 10.691 11.1074 10.7539L10.3024 12.3156C10.1757 12.5615 9.82427 12.5615 9.69757 12.3156L8.89262 10.7539C8.8602 10.691 8.80898 10.6398 8.74607 10.6074L7.18436 9.80243C6.93855 9.67573 6.93855 9.32427 7.18436 9.19757L8.74607 8.39262C8.80898 8.3602 8.8602 8.30898 8.89262 8.24607L9.69757 6.68436Z" fill="url(#paint1_angular_9465_19771)"/>
<path d="M9.31836 6.34863C9.64906 5.88402 10.3509 5.88402 10.6816 6.34863L10.7471 6.45508L11.5283 7.9707L13.0449 8.75293C13.6519 9.06584 13.6519 9.93416 13.0449 10.2471L11.5283 11.0283L10.7471 12.5449C10.4342 13.1519 9.56584 13.1519 9.25293 12.5449L8.4707 11.0283L6.95508 10.2471C6.34814 9.93416 6.34814 9.06584 6.95508 8.75293L8.4707 7.9707L9.25293 6.45508L9.31836 6.34863Z" stroke="black" strokeOpacity="0.2"/>
<path d="M16.6006 1C17.6497 1.00023 18.5 1.85119 18.5 2.90039V5.74219L6.15332 18.0879C4.29687 17.1646 2.8034 15.6054 2.04492 13.7109L14.7568 1H16.6006Z" fill="white" fillOpacity="0.3"/>
<defs>
<filter id="filter0_d_9465_19771" x="1.5" y="1" width="17" height="18.95" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
<feFlood floodOpacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="0.95"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0.24 0 0 0 0 0.118652 0 0 0 0 0 0 0 0 1 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_9465_19771"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_9465_19771" result="shape"/>
</filter>
<clipPath id="paint1_angular_9465_19771_clip_path">
<path d="M9.69757 6.68436C9.82427 6.43855 10.1757 6.43855 10.3024 6.68436L11.1074 8.24607C11.1398 8.30898 11.191 8.3602 11.2539 8.39262L12.8156 9.19757C13.0615 9.32427 13.0615 9.67573 12.8156 9.80243L11.2539 10.6074C11.191 10.6398 11.1398 10.691 11.1074 10.7539L10.3024 12.3156C10.1757 12.5615 9.82427 12.5615 9.69757 12.3156L8.89262 10.7539C8.8602 10.691 8.80898 10.6398 8.74607 10.6074L7.18436 9.80243C6.93855 9.67573 6.93855 9.32427 7.18436 9.19757L8.74607 8.39262C8.80898 8.3602 8.8602 8.30898 8.89262 8.24607L9.69757 6.68436Z"/>
</clipPath>
<linearGradient id="paint0_linear_9465_19771" x1="9.9999" y1="22.6306" x2="9.9999" y2="1.22501" gradientUnits="userSpaceOnUse">
<stop stopColor="#8C4500"/>
<stop offset="1" stopColor="#D1A66E"/>
</linearGradient>
<linearGradient id="paint1_angular_9465_19771" x1="10" y1="6.68436" x2="10" y2="12.3156" gradientUnits="userSpaceOnUse">
<stop stopColor="white"/>
<stop offset="1" stopColor="#E0E0E0"/>
</linearGradient>
</defs>
</svg>
);
}

44
src/app/page.tsx
View File

@@ -4,6 +4,9 @@ import HorizontalCardScroller from "@/app/components/HorizontalCardScroller";
import { PostList } from "@/app/components/PostList";
import ProfileLabelIcon from "@/app/svgs/profilelableicon";
import SearchIcon from "@/app/svgs/SearchIcon";
import { RankIcon1st } from "@/app/components/RankIcon1st";
import { RankIcon2nd } from "@/app/components/RankIcon2nd";
import { RankIcon3rd } from "@/app/components/RankIcon3rd";
import prisma from "@/lib/prisma";
export default async function Home({ searchParams }: { searchParams: Promise<{ sort?: "recent" | "popular" } | undefined> }) {
@@ -80,14 +83,33 @@ export default async function Home({ searchParams }: { searchParams: Promise<{ s
return (
<div key={board.id} className="h-full min-h-0 flex flex-col">
<div className="flex-1 min-h-0 overflow-hidden p-0">
<div className="px-[24px] pt-[8px] pb-[16px]">
<div className="flex flex-col gap-[16px]">
<div className="content-stretch flex gap-[30px] items-start w-full mb-2">
<div className="flex items-center gap-[8px]">
<div className="text-[30px] text-[#5c5c5c] leading-[30px]">{board.categoryName || board.name}</div>
</div>
<div className="flex items-center gap-[8px]">
{siblingBoards.map((sb) => (
<Link
key={sb.id}
href={`/boards/${sb.slug}`}
className={`px-[16px] py-[8px] rounded-[14px] text-[14px] ${
sb.id === board.id ? "bg-[#5c5c5c] text-white border border-[#5c5c5c]" : "bg-white text-[#5c5c5c] border border-[#d5d5d5]"
}`}
>
{sb.name}
</Link>
))}
</div>
</div>
<div className="rounded-xl overflow-hidden h-full min-h-0 flex flex-col">
<div className="flex-1 min-h-0 overflow-hidden p-0">
<div className="px-[24px] pt-[8px] pb-[16px]">
<div className="flex flex-col gap-[16px]">
{topUsers.map((user, idx) => {
const rank = idx + 1;
return (
<div key={user.userId} className="flex h-[140px] items-center rounded-[16px] overflow-hidden">
<div className="h-[140px] w-[160px] relative shrink-0 bg-[#d5d5d5] overflow-hidden">
return (
<div key={user.userId} className="flex h-[150px] items-center rounded-[16px] overflow-hidden bg-white">
<div className="h-[150px] w-[160px] relative shrink-0 bg-[#d5d5d5] overflow-hidden">
<img
src={user.profileImage || "https://picsum.photos/seed/profile/200/200"}
alt={user.nickname || "프로필"}
@@ -103,10 +125,9 @@ export default async function Home({ searchParams }: { searchParams: Promise<{ s
<div className="flex flex-col gap-[12px] min-w-0 flex-1">
<div className="flex items-center gap-[12px]">
<div className="relative w-[20px] h-[20px] shrink-0">
{/* 순위 배지 아이콘 자리 - 피그마 디자인에 맞게 이미지로 대체 필요 */}
<div className="absolute inset-0 flex items-center justify-center">
<span className="text-[12px]">⭐</span>
</div>
{rank === 1 && <RankIcon1st />}
{rank === 2 && <RankIcon2nd />}
{rank === 3 && <RankIcon3rd />}
</div>
<div className="bg-white border border-[#d5d5d5] px-[16px] py-[5px] rounded-[12px] text-[14px] text-[#5c5c5c] shrink-0">
{rank}위
@@ -130,6 +151,7 @@ export default async function Home({ searchParams }: { searchParams: Promise<{ s
</div>
</div>
</div>
</div>
);
}
@@ -343,7 +365,7 @@ export default async function Home({ searchParams }: { searchParams: Promise<{ s
{Array.from({ length: Math.ceil(restBoards.length / 2) }).map(async (_, i) => {
const pair = restBoards.slice(i * 2, i * 2 + 2);
return (
<section key={`rest-${i}`} className="min-h-[395px] md:h-[495px] overflow-hidden">
<section key={`rest-${i}`} className="min-h-[395px] md:h-[540px] overflow-hidden">
<div className="grid grid-cols-1 md:grid-cols-2 gap-4 h-full min-h-0">
{(await Promise.all(pair.map((b) => renderBoardPanel(b)))).map((panel, idx) => (
<div key={pair[idx].id} className="rounded-xl overflow-hidden h-full min-h-0 flex flex-col">