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

메인페이지 작업업

Browse Source
This commit is contained in:
mota
2025-10-31 00:02:17 +09:00
parent e1fdb12d83
commit 35ef4d1f5b
5 changed files with 66 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

75
src/app/page.tsx
View File

@@ -1,6 +1,8 @@
import { HeroBanner } from "@/app/components/HeroBanner";
import HorizontalCardScroller from "@/app/components/HorizontalCardScroller";
import CategoryBoardBrowser from "@/app/components/CategoryBoardBrowser";
import ProfileLabelIcon from "@/app/svgs/profilelableicon";
import SearchIcon from "@/app/svgs/SearchIcon";
export default async function Home({ searchParams }: { searchParams: Promise<{ sort?: "recent" | "popular" } | undefined> }) {
const sp = await searchParams;
@@ -32,8 +34,9 @@ export default async function Home({ searchParams }: { searchParams: Promise<{ s
{/* 2행: 고정 높이 610px */}
<section className="min-h-[514px] overflow-hidden">
<div className="grid grid-cols-1 md:grid-cols-2 xl:[grid-template-columns:1fr_2fr_2fr] gap-4 h-full min-h-0">
<div className="hidden xl:grid rounded-xl bg-white px-[25px] py-[34px] grid-rows-[120px_120px_1fr] gap-y-[32px] h-full w-full md:min-w-[350px]">
<div className="h-[120px] flex items-center justify-center">
<div className="hidden xl:grid relative overflow-hidden rounded-xl bg-white px-[25px] py-[34px] grid-rows-[120px_120px_1fr] gap-y-[32px] h-full w-full md:min-w-[350px]">
<div className="absolute inset-x-0 top-0 h-[56px] bg-[#d5d5d5] z-0" />
<div className="h-[120px] flex items-center justify-center relative z-10">
<div className="flex items-center justify-center gap-[8px]">
<img src="https://picsum.photos/seed/profile/200/200" alt="프로필" className="w-[120px] h-[120px] rounded-full object-cover" />
<div className="w-[62px] h-[62px] rounded-full bg-neutral-200 flex items-center justify-center text-[11px] text-neutral-700">
@@ -41,58 +44,58 @@ export default async function Home({ searchParams }: { searchParams: Promise<{ s
</div>
</div>
</div>
<div className="h-[120px] overflow-hidden flex flex-col items-center">
<div className="text-[18px] text-[#5c5c5c] truncate text-center">홍길동</div>
<div className="mt-[20px] w-[300px] mx-auto flex flex-col gap-[12px]">
<div className="grid grid-cols-[64px_auto] gap-x-[24px] items-center">
<div className="h-[120px] flex flex-col items-center relative z-10">
<div className="text-[18px] text-[#5c5c5c] font-[700] truncate text-center mb-[20px]">홍길동</div>
<div className="w-[300px] pl-[67px] flex flex-col gap-[12px]">
<div className="grid grid-cols-[64px_auto] gap-x-[24px] items-center h-[16px]">
<div className="w-[64px] flex items-center">
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="16" height="16" fill="#8c8c8c"/></svg>
<span className="ml-[8px] text-[12px] text-[#8c8c8c]">레벨</span>
<ProfileLabelIcon width={16} height={16} />
<span className="ml-[8px] text-[12px] text-[#8c8c8c] font-[700]">레벨</span>
</div>
<div className="text-[16px] text-[#5c5c5c]">Lv. 79</div>
<div className="text-[16px] text-[#5c5c5c] font-[700]">Lv. 79</div>
</div>
<div className="grid grid-cols-[64px_auto] gap-x-[24px] items-center">
<div className="grid grid-cols-[64px_auto] gap-x-[24px] items-center h-[16px]">
<div className="w-[64px] flex items-center">
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="16" height="16" fill="#8c8c8c"/></svg>
<span className="ml-[8px] text-[12px] text-[#8c8c8c]">등급</span>
<ProfileLabelIcon width={16} height={16} />
<span className="ml-[8px] text-[12px] text-[#8c8c8c] font-[700]">등급</span>
</div>
<div className="text-[16px] text-[#5c5c5c]">Iron</div>
<div className="text-[16px] text-[#5c5c5c] font-[700]">Iron</div>
</div>
<div className="grid grid-cols-[64px_auto] gap-x-[24px] items-center">
<div className="grid grid-cols-[64px_auto] gap-x-[24px] items-center h-[16px]">
<div className="w-[64px] flex items-center">
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="16" height="16" fill="#8c8c8c"/></svg>
<span className="ml-[8px] text-[12px] text-[#8c8c8c]">포인트</span>
<ProfileLabelIcon width={16} height={16} />
<span className="ml-[8px] text-[12px] text-[#8c8c8c] font-[700]">포인트</span>
</div>
<div className="text-[16px] text-[#5c5c5c]">1,600,000</div>
<div className="text-[16px] text-[#5c5c5c] font-[700]">1,600,000</div>
</div>
</div>
</div>
<div className="flex flex-col gap-[12px]">
<button className="relative w-[300px] h-[32px] rounded-full bg-[#8c8c8c] hover:bg-[#7a7a7a] text-white text-[12px] pl-[100px] flex items-center">
<span className="absolute left-[12px] inline-flex items-center justify-center">
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="7" cy="7" r="6" stroke="white" strokeWidth="2"/><line x1="11.5" y1="11.5" x2="15" y2="15" stroke="white" strokeWidth="2"/></svg>
<div className="flex flex-col gap-[12px] relative z-10">
<button className="relative w-[300px] h-[32px] rounded-full bg-[#8c8c8c] hover:bg-[#7a7a7a] text-white text-[12px] font-[700] flex items-center">
<span className="absolute left-[100px] inline-flex items-center">
<SearchIcon width={16} height={16} />
<span className="ml-[8px]">내 정보 페이지</span>
</span>
내 정보 페이지
</button>
<button className="relative w-[300px] h-[32px] rounded-full bg-[#8c8c8c] hover:bg-[#7a7a7a] text-white text-[12px] pl-[100px] flex items-center">
<span className="absolute left-[12px] inline-flex items-center justify-center">
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="7" cy="7" r="6" stroke="white" strokeWidth="2"/><line x1="11.5" y1="11.5" x2="15" y2="15" stroke="white" strokeWidth="2"/></svg>
<button className="relative w-[300px] h-[32px] rounded-full bg-[#8c8c8c] hover:bg-[#7a7a7a] text-white text-[12px] font-[700] flex items-center">
<span className="absolute left-[100px] inline-flex items-center">
<SearchIcon width={16} height={16} />
<span className="ml-[8px]">포인트 히스토리</span>
</span>
포인트 히스토리
</button>
<button className="relative w-[300px] h-[32px] rounded-full bg-[#8c8c8c] hover:bg-[#7a7a7a] text-white text-[12px] pl-[100px] flex items-center">
<span className="absolute left-[12px] inline-flex items-center justify-center">
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="7" cy="7" r="6" stroke="white" strokeWidth="2"/><line x1="11.5" y1="11.5" x2="15" y2="15" stroke="white" strokeWidth="2"/></svg>
<button className="relative w-[300px] h-[32px] rounded-full bg-[#8c8c8c] hover:bg-[#7a7a7a] text-white text-[12px] font-[700] flex items-center">
<span className="absolute left-[100px] inline-flex items-center">
<SearchIcon width={16} height={16} />
<span className="ml-[8px]">내가 쓴 게시글</span>
</span>
내가 쓴 게시글
<span className="absolute right-[8px] w-[47px] h-[18px] rounded-full bg-white text-[#707070] text-[10px] flex items-center justify-center">12</span>
<span className="absolute right-[8px] w-[47px] h-[18px] rounded-full bg-white text-[#707070] text-[10px] font-[600] leading-[18px] flex items-center justify-end pr-[6px]">12 개</span>
</button>
<button className="relative w-[300px] h-[32px] rounded-full bg-[#8c8c8c] hover:bg-[#7a7a7a] text-white text-[12px] pl-[100px] flex items-center">
<span className="absolute left-[12px] inline-flex items-center justify-center">
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="7" cy="7" r="6" stroke="white" strokeWidth="2"/><line x1="11.5" y1="11.5" x2="15" y2="15" stroke="white" strokeWidth="2"/></svg>
<button className="relative w-[300px] h-[32px] rounded-full bg-[#8c8c8c] hover:bg-[#7a7a7a] text-white text-[12px] font-[700] flex items-center">
<span className="absolute left-[100px] inline-flex items-center">
<SearchIcon width={16} height={16} />
<span className="ml-[8px]">내가 쓴 댓글</span>
</span>
내가 쓴 댓글
<span className="absolute right-[8px] w-[47px] h-[18px] rounded-full bg-white text-[#707070] text-[10px] flex items-center justify-center">7</span>
<span className="absolute right-[8px] w-[47px] h-[18px] rounded-full bg-white text-[#707070] text-[10px] font-[600] leading-[18px] flex items-center justify-end pr-[6px]">7 개</span>
</button>
</div>
</div>