Skip to content

Commit

Permalink
πŸ’„ design: 주식 detail νŽ˜μ΄μ§€ header λ ˆμ΄μ•„μ›ƒ κ΅¬ν˜„ #60
Browse files Browse the repository at this point in the history
  • Loading branch information
dongree committed Nov 12, 2024
1 parent 0e70808 commit 3462d8b
Show file tree
Hide file tree
Showing 2 changed files with 35 additions and 4 deletions.
37 changes: 34 additions & 3 deletions FE/src/components/StocksDetail/Header.tsx
Original file line number Diff line number Diff line change
@@ -1,8 +1,39 @@
export default function Header() {
return (
<div className='flex justify-between w-full h-16'>
<div>μ‚Όμ„±μ „μž</div>
<div>λ‹ΉκΈ°μˆœμ΄μ΅</div>
<div className='flex items-center justify-between w-full h-16 px-2'>
<div className='flex flex-col font-semibold'>
<div className='flex gap-2 text-sm'>
<h2>μ‚Όμ„±μ „μž</h2>
<p className='text-juga-grayscale-200'>005930</p>
</div>
<div className='flex items-center gap-2'>
<p className='text-lg'>60,900원</p>
<p>μ–΄μ œλ³΄λ‹€</p>
<p className='text-juga-red-60'>+1800원 (3.0%)</p>
</div>
</div>
<div className='flex gap-4 text-xs font-semibold'>
<div className='flex gap-2'>
<p className='text-juga-grayscale-200'>λ‹ΉκΈ°μˆœμ΄μ΅</p>
<p>9μ‘° 8,143μ–΅</p>
</div>
<div className='flex gap-2'>
<p className='text-juga-grayscale-200'>μ˜μ—…μ΄μ΅</p>
<p>10μ‘° 4,439μ–΅</p>
</div>
<div className='flex gap-2'>
<p className='text-juga-grayscale-200'>λ§€μΆœμ•‘</p>
<p>74μ‘° 683μ–΅</p>
</div>
<div className='flex gap-2'>
<p className='text-juga-grayscale-200'>μ‹œμ΄</p>
<p>361μ‘° 1,718μ–΅</p>
</div>
<div className='flex gap-2'>
<p className='text-juga-grayscale-200'>PER</p>
<p>14.79λ°°</p>
</div>
</div>
</div>
);
}
2 changes: 1 addition & 1 deletion FE/src/page/StocksDetail.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import TradeSection from 'components/StocksDetail/TradeSection';

export default function StocksDetail() {
return (
<div className='flex flex-col bg-red-50'>
<div className='flex flex-col'>
<Header />
<div className='flex h-[500px] bg-yellow-600'>
<div className='flex min-w-[850px] flex-col'>
Expand Down

0 comments on commit 3462d8b

Please sign in to comment.