Skip to content

[FEAT] 히스토리 페이지 UI구현 #47

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
andada-creator wants to merge 3 commits into
base: develop
Choose a base branch
from
Open

[FEAT] 히스토리 페이지 UI구현 #47

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
95b08cc
feat: 히스토리 페이지 UI구현(#45)
andada-creator Jul 22, 2026
02b07d7
feat: 최근 연주 카드 클릭 시 히스토리 상세 페이지 라우팅 연결(#45)
andada-creator Jul 22, 2026
accc7ae
refactor: 코드 내 불필요한 주석 제거(#45)
andada-creator Jul 22, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
58 changes: 58 additions & 0 deletions src/components/history/GrowthProgressSection.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,58 @@
// src/components/history/GrowthProgressSection.tsx

export default function GrowthProgressSection() {
return (
<div className="flex w-[1196px] flex-col rounded-[6px] border border-[#2E3142] bg-[#161B22] p-[40px]">
{/* 그래프 및 라벨 리스트 영역 (행마다 32px 간격) */}
<div className="flex flex-col gap-[32px]">
{/* 스케일 (+8) */}
<div className="flex items-center justify-between">
<div className="flex w-[120px] items-center justify-between">
<span className="text-[16px] font-medium text-[#AEB1B6]">스케일</span>
<span className="text-[16px] font-semibold text-[#69FFC0]">+8</span>
</div>
<div className="relative h-[24px] w-[720px] overflow-hidden rounded-full border-[0.5px] border-[#868A91]/40 bg-[#1B1E27]">
<div className="absolute top-0 left-1/2 z-10 h-full w-[1px] bg-[#2E3142]" />
<div className="absolute top-0 left-1/2 h-full w-[42%] rounded-r-full bg-gradient-to-r from-[#008751] to-[#69FFC0]" />
</div>
</div>

{/* 텐션 (+6) */}
<div className="flex items-center justify-between">
<div className="flex w-[120px] items-center justify-between">
<span className="text-[16px] font-medium text-[#AEB1B6]">텐션</span>
<span className="text-[16px] font-semibold text-[#69FFC0]">+6</span>
</div>
<div className="relative h-[24px] w-[720px] overflow-hidden rounded-full border-[0.5px] border-[#868A91]/40 bg-[#1B1E27]">
<div className="absolute top-0 left-1/2 z-10 h-full w-[1px] bg-[#2E3142]" />
<div className="absolute top-0 left-1/2 h-full w-[35%] rounded-r-full bg-gradient-to-r from-[#008751] to-[#69FFC0]" />
</div>
</div>

{/* 진행 (+4) */}
<div className="flex items-center justify-between">
<div className="flex w-[120px] items-center justify-between">
<span className="text-[16px] font-medium text-[#AEB1B6]">진행</span>
<span className="text-[16px] font-semibold text-[#69FFC0]">+4</span>
</div>
<div className="relative h-[24px] w-[720px] overflow-hidden rounded-full border-[0.5px] border-[#868A91]/40 bg-[#1B1E27]">
<div className="absolute top-0 left-1/2 z-10 h-full w-[1px] bg-[#2E3142]" />
<div className="absolute top-0 left-1/2 h-full w-[25%] rounded-r-full bg-gradient-to-r from-[#008751] to-[#69FFC0]" />
</div>
</div>

{/* 코드 연결 (-10) */}
<div className="flex items-center justify-between">
<div className="flex w-[120px] items-center justify-between">
<span className="text-[16px] font-medium text-[#AEB1B6]">코드 연결</span>
<span className="text-[16px] font-semibold text-[#A855F7]">-10</span>
</div>
<div className="relative h-[24px] w-[720px] overflow-hidden rounded-full border-[0.5px] border-[#868A91]/40 bg-[#1B1E27]">
<div className="absolute top-0 left-1/2 z-10 h-full w-[1px] bg-[#2E3142]" />
<div className="absolute top-0 right-1/2 h-full w-[50%] rounded-l-full bg-gradient-to-l from-[#4C1D95] to-[#A855F7]" />
</div>
</div>
</div>
</div>
);
}
190 changes: 190 additions & 0 deletions src/components/history/HistoryRecentPractices.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,190 @@
// src/components/history/HistoryRecentPractices.tsx

import { useNavigate } from 'react-router-dom';

interface HistoryPracticeItem {
practiceId: number;
title: string;
scoreChange: string;
scoreType: 'up' | 'down' | 'neutral';
description: string;
timeLabel: string;
date: string;
}

interface HistoryRecentPracticesProps {
data: HistoryPracticeItem[];
}

export default function HistoryRecentPractices({ data }: HistoryRecentPracticesProps) {
const navigate = useNavigate();

return (
<div className="flex w-full flex-col gap-[12px]">
{data?.map((item) => {
return (
<div
key={item.practiceId}
onClick={() => navigate(`/history/${item.practiceId}`)}
className="cursor-pointer text-white transition-colors select-none hover:border-[#3A3F4A]"

@kxxnayun kxxnayun Jul 23, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

inline style은 CSS 클래스보다 항상 우선순위가 높습니다. 39라인에서 border: '1px solid #2E3142'를 inline으로 박아놨기 때문에 마우스를 올려도 hover:border-[#3A3F4A]가 적용되지 않습니다. transition-colors도 같이 죽은 코드가 됩니다.

지금 피그마 데브 모드에서 스타일 속성 그대로 가져오신 것 같은데 저번 PR에서도 말씀드렸다시피 Tailwind CSS로 변환이 가능한 것들은 변환해주셨으면 좋겠습니다~!

style={{
display: 'flex',
width: '100%',
maxWidth: '1196px',
padding: '24px',
justifyContent: 'space-between',
alignItems: 'center',
borderRadius: '6px',
background: '#161B22',
border: '1px solid #2E3142',
boxSizing: 'border-box',
}}>
{/* 좌측 구역 */}
<div className="flex flex-1 flex-col gap-[8px] pr-[24px]">
<div className="flex items-center">
<span
style={{
color: '#FFF',
fontFamily: 'Pretendard',
fontSize: '20px',
fontStyle: 'normal',
fontWeight: 400,
lineHeight: '30px',
letterSpacing: '-0.4px',
}}>
{item.title}
</span>

<div className="ml-[24px] flex items-center gap-[4px]">
{item.scoreType === 'down' ? (
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
style={{ width: '24px', height: '24px', flexShrink: 0, aspectRatio: '1/1' }}>
<path
d="M20.9502 18C21.3918 17.9998 21.7499 17.6418 21.75 17.2002V12C21.75 11.7239 21.526 11.5001 21.25 11.5C20.9738 11.5 20.75 11.7239 20.75 12V16.2744L15.332 9.98926C14.7626 9.32875 13.7514 9.29157 13.1347 9.9082L10.1035 12.9395C9.90826 13.1346 9.59171 13.1346 9.39645 12.9395L2.85348 6.39648C2.65822 6.20123 2.34171 6.20124 2.14645 6.39648C1.95118 6.59175 1.95119 6.90825 2.14645 7.10352L8.68941 13.6465C9.27521 14.2321 10.2248 14.2322 10.8105 13.6465L13.8418 10.6152C14.0472 10.4098 14.3843 10.4217 14.5742 10.6416L20.0556 17H16.25C15.9738 17 15.75 17.2239 15.75 17.5C15.75 17.7761 15.9738 18 16.25 18H20.9502Z"
fill="#FF5D6B"
/>
</svg>
) : item.scoreType === 'up' ? (
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
style={{ width: '24px', height: '24px', flexShrink: 0, aspectRatio: '1/1' }}>
<path
d="M20.9502 6.25C21.3918 6.25019 21.7499 6.60819 21.75 7.0498V12.25C21.75 12.5261 21.526 12.7499 21.25 12.75C20.9738 12.75 20.75 12.5261 20.75 12.25V7.97559L15.332 14.2607C14.7626 14.9212 13.7514 14.9584 13.1347 14.3418L10.1035 11.3105C9.90826 11.1154 9.59171 11.1154 9.39645 11.3105L2.85348 17.8535C2.65822 18.0488 2.34171 18.0488 2.14645 17.8535C1.95118 17.6583 1.95119 17.3417 2.14645 17.1465L8.68941 10.6035C9.27521 10.0179 10.2248 10.0178 10.8105 10.6035L13.8418 13.6348C14.0472 13.8402 14.3843 13.8283 14.5742 13.6084L20.0556 7.25H16.25C15.9738 7.25 15.75 7.02614 15.75 6.75C15.75 6.47386 15.9738 6.25 16.25 6.25H20.9502Z"
fill="#69FFC0"
/>
</svg>
) : (
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
style={{ width: '24px', height: '24px', flexShrink: 0, aspectRatio: '1/1' }}>
<path d="M6 12H18" stroke="#CECFD1" strokeLinecap="round" />
</svg>
)}

{item.scoreType !== 'neutral' && (
<span
style={{
fontFamily: 'Pretendard',
fontSize: '14px',
fontWeight: 500,
lineHeight: '20px',
color: item.scoreType === 'down' ? '#FF5D6B' : '#69FFC0',
}}>
{item.scoreChange}
</span>
)}
</div>
</div>

<p
className="m-0 whitespace-pre-line"
style={{
color: 'var(--Color-Gray-Scale-500, #AEB1B6)',
fontFamily: 'Pretendard',
fontSize: '18px',
fontStyle: 'normal',
fontWeight: 500,
lineHeight: '30px',
letterSpacing: '-0.36px',
}}>
{item.description}
</p>
</div>

{/* 우측 구역 */}
<div className="flex shrink-0 items-center">
{/* 소요 시간 */}
<div
className="flex items-center gap-[6px]"
style={{
width: '120px',
fontFamily: 'Pretendard',
fontSize: '14px',
fontWeight: 400,
lineHeight: '20px',
color: '#AEB1B6',
}}>
<svg
width="16"
height="16"
viewBox="0 0 16 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
className="shrink-0">
<circle cx="8" cy="8" r="6.5" stroke="#AEB1B6" strokeWidth="1.2" />
<path d="M8 4.5V8H11" stroke="#AEB1B6" strokeWidth="1.2" strokeLinecap="round" />
</svg>
<span>{item.timeLabel}</span>
</div>

{/* 날짜 */}
<div
className="text-right"
style={{
width: '90px',
marginRight: '24px',
fontFamily: 'Pretendard',
fontSize: '14px',
fontWeight: 400,
lineHeight: '20px',
color: '#AEB1B6',
}}>
{item.date}
</div>

{/* > 아이콘 */}
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
style={{ width: '24px', height: '24px', flexShrink: 0, aspectRatio: '1/1' }}>
<path
d="M8.5 19.5L16.5 12L8.5 4.5"
stroke="#CECFD1"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
</div>
</div>
);
})}
</div>
);
}
Loading