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

Merge branch 'MainPage'

Browse Source
This commit is contained in:
mota
2025-10-31 00:27:16 +09:00
parent 169ea52ea5 35ef4d1f5b
commit 65079be442
6 changed files with 110 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/components/AppHeader.tsx
View File

@@ -163,7 +163,7 @@ export function AppHeader() {
</span>
</button>
<Link href="/" aria-label="홈" className="shrink-0">
<Image src="/logo.png" alt="logo" width={120} height={28} priority className="w-20 md:w-28 xl:w-[120px] h-auto" />
<Image src="/logo.png" alt="logo" width={120} height={28} priority className="w-20 xl:w-[120px] h-auto" />
</Link>
</div>
<nav className="flex flex-1 items-center gap-4 justify-between">

5
src/app/globals.css
View File

@@ -1,3 +1,4 @@
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.css");
@import "tailwindcss";
:root {
@@ -8,7 +9,7 @@
@theme inline {
--color-background: var(--background);
--color-foreground: var(--foreground);
--font-sans: var(--font-geist-sans);
--font-sans: Pretendard, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
--font-mono: var(--font-geist-mono);
}
@@ -22,7 +23,7 @@
body {
background: var(--background);
color: var(--foreground);
font-family: var(--font-sans), Arial, Helvetica, sans-serif;
font-family: Pretendard, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
}
/* 유틸: 카드 스켈레톤 색상 헬퍼 (타깃 사이트 톤 유사) */

91
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;
@@ -29,37 +31,78 @@ export default async function Home({ searchParams }: { searchParams: Promise<{ s
return <HorizontalCardScroller items={items} />;
})()}
{/* 2행: 최소 높이(모바일), md+에서 고정 높이 620px로 내부 스크롤 */}
<section className="min-h-[514px] md:h-[620px] overflow-hidden">
<div className="grid grid-cols-1 md:[grid-template-columns:1fr_2fr] xl:[grid-template-columns:1fr_2fr_2fr] gap-4 h-full min-h-0">
<div className="rounded-xl bg-white p-4 md:p-6 flex flex-col h-full w-full md:min-w-[350px] space-y-6">
{/* 1행: 프로필 사진 영역 */}
<div className="flex items-center justify-center">
<img
src="https://picsum.photos/seed/profile/200/200"
alt="프로필"
className="w-40 h-40 rounded-full object-cover"
/>
{/* 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 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">
Lv
</div>
</div>
</div>
{/* 2행: 정보 영역 (4행 그리드) */}
<div className="grid grid-rows-4 gap-1">
<div className="text-lg md:text-xl font-bold truncate">홍길동</div>
<div className="text-sm text-neutral-700">레벨 : Lv. 79</div>
<div className="text-sm text-neutral-700">등급 : Iron</div>
<div className="text-sm text-neutral-700 mb-[20px]">포인트 : 1,600,000</div>
<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">
<ProfileLabelIcon width={16} height={16} />
<span className="ml-[8px] text-[12px] text-[#8c8c8c] font-[700]">레벨</span>
</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 h-[16px]">
<div className="w-[64px] flex items-center">
<ProfileLabelIcon width={16} height={16} />
<span className="ml-[8px] text-[12px] text-[#8c8c8c] font-[700]">등급</span>
</div>
<div className="text-[16px] text-[#5c5c5c] font-[700]">Iron</div>
</div>
<div className="grid grid-cols-[64px_auto] gap-x-[24px] items-center h-[16px]">
<div className="w-[64px] flex items-center">
<ProfileLabelIcon width={16} height={16} />
<span className="ml-[8px] text-[12px] text-[#8c8c8c] font-[700]">포인트</span>
</div>
<div className="text-[16px] text-[#5c5c5c] font-[700]">1,600,000</div>
</div>
</div>
</div>
{/* 3행: 버튼들 영역 (4개 버튼, 세로) */}
<div className="grid grid-cols-1 gap-2">
<button className="h-10 rounded-md bg-neutral-100 hover:bg-neutral-200 text-sm font-medium text-neutral-900 text-left px-3">내정보페이지</button>
<button className="h-10 rounded-md bg-neutral-100 hover:bg-neutral-200 text-sm font-medium text-neutral-900 text-left px-3">포인트히스토리</button>
<button className="h-10 rounded-md bg-neutral-100 hover:bg-neutral-200 text-sm font-medium text-neutral-900 text-left px-3">내가 쓴 게시글</button>
<button className="h-10 rounded-md bg-neutral-100 hover:bg-neutral-200 text-sm font-medium text-neutral-900 text-left px-3">내가 쓴 댓글</button>
<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] 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] 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] 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] 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] font-[600] leading-[18px] flex items-center justify-end pr-[6px]">7 개</span>
</button>
</div>
</div>
<div className="rounded-xl overflow-hidden h-full min-h-0 flex flex-col">
<CategoryBoardBrowser />
</div>
<div className="hidden xl:flex xl:flex-col rounded-xl overflow-hidden h-full min-h-0">
<div className="flex flex-col rounded-xl overflow-hidden h-full min-h-0">
<CategoryBoardBrowser categoryName="명예의 전당" categorySlug="hall-of-fame" />
</div>
</div>

12
src/app/svgs/SearchIcon.tsx Normal file
View File

@@ -0,0 +1,12 @@
import * as React from "react";
export default function SearchIcon(props: React.SVGProps<SVGSVGElement>) {
return (
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none" {...props}>
<path d="M6 7.5C6 6.67157 6.67157 6 7.5 6C8.32843 6 9 6.67157 9 7.5C9 7.91442 8.83293 8.28839 8.56066 8.56066C8.28839 8.83293 7.91442 9 7.5 9C6.67157 9 6 8.32843 6 7.5Z" fill="white"/>
<path fillRule="evenodd" clipRule="evenodd" d="M4 2C3.17157 2 2.5 2.67157 2.5 3.5V12.5C2.5 13.3284 3.17157 14 4 14H12C12.8284 14 13.5 13.3284 13.5 12.5V6.62132C13.5 6.2235 13.342 5.84197 13.0607 5.56066L9.93934 2.43934C9.65804 2.15804 9.2765 2 8.87868 2H4ZM7.5 4.5C5.84315 4.5 4.5 5.84315 4.5 7.5C4.5 9.15685 5.84315 10.5 7.5 10.5C8.05604 10.5 8.57728 10.3483 9.02386 10.0845L10.2197 11.2803C10.5126 11.5732 10.9874 11.5732 11.2803 11.2803C11.5732 10.9874 11.5732 10.5126 11.2803 10.2197L10.0845 9.02386C10.3483 8.57728 10.5 8.05604 10.5 7.5C10.5 5.84315 9.15685 4.5 7.5 4.5Z" fill="white"/>
</svg>
);
}

11
src/app/svgs/profilelableicon.tsx Normal file
View File

@@ -0,0 +1,11 @@
import * as React from "react";
export default function ProfileLabelIcon(props: React.SVGProps<SVGSVGElement>) {
return (
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="14" viewBox="0 0 16 16" fill="none" {...props}>
<path d="M8.3721 1.34882C8.14153 1.21706 7.85847 1.21706 7.6279 1.34882L2.81794 4.09736L7.99998 7.13075L13.182 4.09735L8.3721 1.34882Z" fill="#D5D5D5"/>
<path d="M14 5.35664L8.74998 8.42982V14.4353L13.6221 11.6512C13.8558 11.5177 14 11.2691 14 11V5.35664Z" fill="#D5D5D5"/>
<path d="M7.24998 14.4352V8.42982L2 5.35666V11C2 11.2691 2.14421 11.5177 2.3779 11.6512L7.24998 14.4352Z" fill="#D5D5D5"/>
</svg>
);
}