-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #176 from boostcampwm-2024/front/main
[FE] 브랜치 병합
- Loading branch information
Showing
67 changed files
with
2,214 additions
and
448 deletions.
There are no files selected for viewing
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Large diffs are not rendered by default.
Oops, something went wrong.
Large diffs are not rendered by default.
Oops, something went wrong.
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,14 @@ | ||
| import { FallbackProps } from 'react-error-boundary'; | ||
|
|
||
| export default function FallbackUI({ | ||
| error, | ||
| resetErrorBoundary, | ||
| }: FallbackProps) { | ||
| return ( | ||
| <div> | ||
| <p>Something went wrong:</p> | ||
| <pre>{error.message}</pre> | ||
| <button onClick={resetErrorBoundary}>Try again</button> | ||
| </div> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,23 @@ | ||
| import { useQuery } from '@tanstack/react-query'; | ||
| import AccountCondition from './AccountCondition'; | ||
| import MyStocksList from './MyStocksList'; | ||
| import { getAssets } from 'service/assets'; | ||
|
|
||
| export default function Account() { | ||
| const { data, isLoading, isError } = useQuery(['account', 'assets'], () => | ||
| getAssets(), | ||
| ); | ||
|
|
||
| if (isLoading) return <div>loading</div>; | ||
| if (!data) return <div>No data</div>; | ||
| if (isError) return <div>error</div>; | ||
|
|
||
| const { asset, stocks } = data; | ||
|
|
||
| return ( | ||
| <div className='flex flex-col gap-3'> | ||
| <AccountCondition asset={asset} /> | ||
| <MyStocksList stocks={stocks} /> | ||
| </div> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,61 @@ | ||
| import { Asset } from 'types'; | ||
| import { stringToLocaleString } from 'utils/common'; | ||
|
|
||
| type AccountConditionProps = { | ||
| asset: Asset; | ||
| }; | ||
|
|
||
| export default function AccountCondition({ asset }: AccountConditionProps) { | ||
| const { | ||
| cash_balance, | ||
| stock_balance, | ||
| total_asset, | ||
| total_profit, | ||
| total_profit_rate, | ||
| is_positive, | ||
| } = asset; | ||
|
|
||
| return ( | ||
| <div className='flex flex-wrap gap-4 p-3 text-base font-semibold shadow-sm rounded-xl bg-gray-50'> | ||
| <div className='flex min-w-[250px] flex-1 flex-col rounded-lg bg-white p-6 shadow-sm'> | ||
| <h3 className='mb-4 text-xl text-center text-gray-700'>자산 현황</h3> | ||
| <div className='flex justify-between mb-6'> | ||
| <p className='text-juga-grayscale-500'>총 자산</p> | ||
| <p className='text-gray-900'>{stringToLocaleString(total_asset)}원</p> | ||
| </div> | ||
| <div className='flex justify-between mb-2'> | ||
| <p className='text-juga-grayscale-500'>가용 자산</p> | ||
| <p className='text-gray-900'> | ||
| {stringToLocaleString(cash_balance)}원 | ||
| </p> | ||
| </div> | ||
| <div className='flex justify-between'> | ||
| <p className='text-juga-grayscale-500'>주식 자산</p> | ||
| <p className='text-gray-900'> | ||
| {stringToLocaleString(stock_balance)}원 | ||
| </p> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div className='flex min-w-[250px] flex-1 flex-col rounded-lg bg-white p-6 shadow-sm'> | ||
| <h3 className='mb-4 text-xl text-center text-gray-700'>투자 성과</h3> | ||
| <div className='flex justify-between mb-6'> | ||
| <p className='text-juga-grayscale-500'>투자 손익</p> | ||
| <p | ||
| className={`${is_positive ? 'text-juga-blue-50' : 'text-juga-red-60'}`} | ||
| > | ||
| {stringToLocaleString(total_profit)}원 | ||
| </p> | ||
| </div> | ||
| <div className='flex justify-between'> | ||
| <p className='text-juga-grayscale-500'>수익률</p> | ||
| <p | ||
| className={`${is_positive ? 'text-juga-blue-50' : 'text-juga-red-60'}`} | ||
| > | ||
| {total_profit_rate}% | ||
| </p> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,35 @@ | ||
| import { MyStockListUnit } from 'types'; | ||
|
|
||
| type MyStocksListProps = { | ||
| stocks: MyStockListUnit[]; | ||
| }; | ||
|
|
||
| export default function MyStocksList({ stocks }: MyStocksListProps) { | ||
| return ( | ||
| <div className='flex flex-col w-full p-4 mx-auto bg-white rounded-md shadow-md'> | ||
| <div className='flex pb-2 text-sm font-bold border-b'> | ||
| <p className='w-1/2 text-left truncate'>종목</p> | ||
| <p className='w-1/4 text-center'>보유 수량</p> | ||
| <p className='w-1/4 text-right'>평균 가격</p> | ||
| </div> | ||
|
|
||
| <ul className='flex flex-col text-sm divide-y min-h-48'> | ||
| {stocks.map((stock) => { | ||
| const { code, name, avg_price, quantity } = stock; | ||
| return ( | ||
| <li className='flex py-2' key={code}> | ||
| <div className='flex w-1/2 gap-2 text-left truncate'> | ||
| <p className='font-semibold'>{name}</p> | ||
| <p className='text-gray-500'>{code}</p> | ||
| </div> | ||
| <p className='w-1/4 text-center'>{quantity}</p> | ||
| <p className='w-1/4 text-right truncate'> | ||
| {Math.floor(avg_price).toLocaleString()}원 | ||
| </p> | ||
| </li> | ||
| ); | ||
| })} | ||
| </ul> | ||
| </div> | ||
| ); | ||
| } |
Oops, something went wrong.