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

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

@@ -157,7 +157,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;
}
/* 유틸: 카드 스켈레톤 색상 헬퍼 (타깃 사이트 톤 유사) */

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>

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>
);
}