프로필 영역 수정
This commit is contained in:
mota
16
.cursor/.prompt/profilearea.md
Normal file
16
.cursor/.prompt/profilearea.md
Normal 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
|
||||||
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 795 KiB After Width: | Height: | Size: 795 KiB |
@@ -29,37 +29,77 @@ export default async function Home({ searchParams }: { searchParams: Promise<{ s
|
|||||||
return <HorizontalCardScroller items={items} />;
|
return <HorizontalCardScroller items={items} />;
|
||||||
})()}
|
})()}
|
||||||
|
|
||||||
{/* 2행: 최소 높이(모바일), md+에서 고정 높이 620px로 내부 스크롤 */}
|
{/* 2행: 고정 높이 610px */}
|
||||||
<section className="min-h-[514px] md:h-[620px] overflow-hidden">
|
<section className="min-h-[514px] 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="grid grid-cols-1 md:grid-cols-2 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">
|
<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]">
|
||||||
{/* 1행: 프로필 사진 영역 */}
|
<div className="h-[120px] flex items-center justify-center">
|
||||||
<div className="flex items-center justify-center">
|
<div className="flex items-center justify-center gap-[8px]">
|
||||||
<img
|
<img src="https://picsum.photos/seed/profile/200/200" alt="프로필" className="w-[120px] h-[120px] rounded-full object-cover" />
|
||||||
src="https://picsum.photos/seed/profile/200/200"
|
<div className="w-[62px] h-[62px] rounded-full bg-neutral-200 flex items-center justify-center text-[11px] text-neutral-700">
|
||||||
alt="프로필"
|
Lv
|
||||||
className="w-40 h-40 rounded-full object-cover"
|
</div>
|
||||||
/>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{/* 2행: 정보 영역 (4행 그리드) */}
|
<div className="h-[120px] overflow-hidden flex flex-col items-center">
|
||||||
<div className="grid grid-rows-4 gap-1">
|
<div className="text-[18px] text-[#5c5c5c] truncate text-center">홍길동</div>
|
||||||
<div className="text-lg md:text-xl font-bold truncate">홍길동</div>
|
<div className="mt-[20px] w-[300px] mx-auto flex flex-col gap-[12px]">
|
||||||
<div className="text-sm text-neutral-700">레벨 : Lv. 79</div>
|
<div className="grid grid-cols-[64px_auto] gap-x-[24px] items-center">
|
||||||
<div className="text-sm text-neutral-700">등급 : Iron</div>
|
<div className="w-[64px] flex items-center">
|
||||||
<div className="text-sm text-neutral-700 mb-[20px]">포인트 : 1,600,000</div>
|
<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>
|
||||||
|
</div>
|
||||||
|
<div className="text-[16px] text-[#5c5c5c]">Lv. 79</div>
|
||||||
|
</div>
|
||||||
|
<div className="grid grid-cols-[64px_auto] gap-x-[24px] items-center">
|
||||||
|
<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>
|
||||||
|
</div>
|
||||||
|
<div className="text-[16px] text-[#5c5c5c]">Iron</div>
|
||||||
|
</div>
|
||||||
|
<div className="grid grid-cols-[64px_auto] gap-x-[24px] items-center">
|
||||||
|
<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>
|
||||||
|
</div>
|
||||||
|
<div className="text-[16px] text-[#5c5c5c]">1,600,000</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{/* 3행: 버튼들 영역 (4개 버튼, 세로) */}
|
<div className="flex flex-col gap-[12px]">
|
||||||
<div className="grid grid-cols-1 gap-2">
|
<button className="relative w-[300px] h-[32px] rounded-full bg-[#8c8c8c] hover:bg-[#7a7a7a] text-white text-[12px] pl-[100px] flex items-center">
|
||||||
<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>
|
<span className="absolute left-[12px] inline-flex items-center justify-center">
|
||||||
<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>
|
<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="h-10 rounded-md bg-neutral-100 hover:bg-neutral-200 text-sm font-medium text-neutral-900 text-left px-3">내가 쓴 게시글</button>
|
</span>
|
||||||
<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>
|
||||||
|
<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>
|
||||||
|
</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>
|
||||||
|
</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>
|
||||||
|
</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>
|
||||||
|
</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>
|
||||||
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="rounded-xl overflow-hidden h-full min-h-0 flex flex-col">
|
<div className="rounded-xl overflow-hidden h-full min-h-0 flex flex-col">
|
||||||
<CategoryBoardBrowser />
|
<CategoryBoardBrowser />
|
||||||
</div>
|
</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" />
|
<CategoryBoardBrowser categoryName="명예의 전당" categorySlug="hall-of-fame" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Reference in New Issue
Block a user