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

Compare commits

base: motaju:16b01a2c517e0c5e6145ffd2ef5fe9940f05f96a
Branches Tags
motaju:main
...
compare: motaju:35ef4d1f5b1f411e6d261505cb977d5c056320e4
Branches Tags
motaju:main

2 Commits
16b01a2c51 ... 35ef4d1f5b

Author SHA1 Message Date
mota
35ef4d1f5b 메인페이지 작업업 2025-10-31 00:02:17 +09:00
mota
e1fdb12d83 프로필 영역 수정 2025-10-30 20:47:34 +09:00
7 changed files with 111 additions and 28 deletions
Expand all files Collapse all files

16
.cursor/.prompt/profilearea.md Normal file
View File

@@ -0,0 +1,16 @@
## 프로필영역상세 디자인 작업
1. 프로필 영역의 xpading: 25, ypadding: 34
2. 프로필 영역은 수직 방향으로 3열로 나뉘고 각 간격 32px
3. 첫번째열은 프로필 사진 영역으로 높이가 120px이며 프로필 사진과 등급아이콘이 수평으로 들어가고 프로필사진은 120x120 px 등급은 62x62px 둘 사이 간격은 8px 수평방향 중앙에 배치
4. 두번째영역은 닉네임, 정보 영역으로 높이가 120px이며 내부에는 닉네임, 레벨, 등급, 포인트가 수직으로 배치
4-1. 닉네임과 레벨 수직간격은 20px 레벨과 등급, 등급과 포인트의 수직 간격은 12px
4-2. 닉네임영역은 폰트 컬러 5c5c5c 폰트사이즈 18px
4-3. 레벨,등급,포인트 라벨은 가로 사이즈 64px 좌측에 16px*16px아이콘이 배치되며(임시로 사각형 svg 아이콘 생성해서 넣기) 8px간격으로 우측에 텍스트 좌측정렬 컬러 8c8c8c이고 폰트사이즈 12px
4-4. 라벨의 우측 정보는 라벨과 수평으로 24px 간격에 배치되며 닉네임과 컬러같고, 폰트사이즈 16px
5. 세번째 열은 버튼 영역이며 수직으로 4개의 버튼이들어가며 모두 300px*32px 라운드는 full 텍스트 는 좌측부터 100px 위치에 배치되며 가장 왼쪽에 돋보기 아이콘 폰트는 12px, 텍스트컬러는 흰색
5-1. 첫번째 버튼은 내 정보 페이지
5-2. 두번째 버튼은 포인트 히스토리
5-3. 세번째 버튼은 내가 쓴 게시글 버튼 가장 우측에 개수 표현 개수는 흰배경에 풀라운드 width 47 height 18px 텍스트 컬러 707070 텍스트 사이즈 10px
5-4. 네번째 버튼은 내가 쓴 게시글 버튼 가장 우측에 개수 표현 개수는 흰배경에 풀라운드 width 47 height 18px 텍스트 컬러 707070 텍스트 사이즈 10px

2
public/erd.svg
View File

File diff suppressed because one or more lines are too long
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 795 KiB

After

Width:  |  Height:  |  Size: 795 KiB

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

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>
{/* 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>
{/* 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>
<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>
<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>
);
}