Skip to content
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

Jump to bottom

[REFACTOR] 마이 페이지 수정 #133

Merged
merged 5 commits into from
Nov 22, 2024
Merged

[REFACTOR] 마이 페이지 수정 #133

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
0530ae3
design: 마이페이지 디자인 수정
kimeodml Nov 21, 2024
43868f5
design: 모바일 고려하여 수정
kimeodml Nov 21, 2024
1eef80b
Merge commit '1a4edda70e01d66a0ea27f38a732c975ba6dfe8e' into feat/#126
kimeodml Nov 21, 2024
029099b
fix: 코드 리뷰 반영
kimeodml Nov 21, 2024
71d04e2
fix: minHeight 반영
kimeodml Nov 22, 2024
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
3 changes: 3 additions & 0 deletions src/apis/types/User.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,9 @@ export interface BidAuctionHistoriesData {
auction_status: string;
thumbnail_path: string;
bid_status: string;
now_price: number | null;
end_date: string;
review_status: string;
}

export interface BidAuctionHistoriesUnitData {
Expand Down
6 changes: 6 additions & 0 deletions src/app/mypage/Layout.css.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,12 @@ export const categoryList = style({
backgroundColor: colors.white,
height: '480px',
width: '220px',

'@media': {
'screen and (max-width: 700px)': {
display: 'none',
},
},
});

export const page = style({
Expand Down
74 changes: 65 additions & 9 deletions src/app/mypage/record/components/BasicBidAuction.css.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,8 @@ import { style, globalStyle, styleVariants, keyframes } from '@vanilla-extract/c
import colors from '@/styles/color';

export const list = style({
position: 'relative',
display: 'flex',
display: 'grid',
gridTemplateColumns: '150px 1fr',
gap: '15px',
cursor: 'pointer',
padding: '20px 10px',
Expand All @@ -13,6 +13,12 @@ export const list = style({
':hover': {
transform: 'scale(1.02)',
},

'@media': {
'screen and (max-width: 420px)': {
gridTemplateColumns: '1fr 1fr',
},
},
});

const blinkAnimation = keyframes({
Expand All @@ -22,28 +28,38 @@ const blinkAnimation = keyframes({
});

export const bidding = style({
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
fontSize: '12px',
position: 'absolute',
padding: '5px 10px',
borderRadius: '20px',
border: '1.5px solid red',
right: '30px',
top: '20px',
animation: `${blinkAnimation} 1.5s ease-in-out infinite`,
boxSizing: 'border-box',
width: '110px',

'@media': {
'screen and (max-width: 420px)': {
fontSize: '10px',
},
},
});

globalStyle(`${list}:nth-last-child(1)`, {
borderBottom: 'none',
});

export const image = style({
maxWidth: '120px',
width: '100%',
maxHeight: '120px',
height: '100%',
objectFit: 'contain',
borderRadius: '4px',
boxShadow: '0 1px 4px rgba(0, 0, 0, 0.1)',

'@media': {
'screen and (max-width: 420px)': {
width: '100%',
},
},
});

export const listRight = style({
Expand All @@ -55,6 +71,32 @@ export const listRight = style({
listStyle: 'none',
});

export const listData = style({
display: 'flex',

'@media': {
'screen and (max-width: 420px)': {
flexDirection: 'column',
alignItems: 'flex-start',
gap: '10px',
},
},
});

export const listFirst = style({
width: '100%',
display: 'flex',
justifyContent: 'space-between',

'@media': {
'screen and (max-width: 774px)': {
gap: '10px',
flexDirection: 'column',
width: '110px',
},
},
});

export const bidTitle = style({
Copy link
Collaborator

Choose a reason for hiding this comment

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

여기가 지금 140px로 잡혀있는데 이걸 max 140px으로 두고 width는 100%로 줘야할 것 같아요
끝이 좀 짤리네요

display: 'flex',
justifyContent: 'space-between',
Expand All @@ -65,13 +107,27 @@ export const bidTitle = style({
borderRadius: '4px',
border: `1px solid ${colors.gray7} `,
cursor: 'pointer',

'@media': {
'screen and (max-width: 420px)': {
fontSize: '14px',
},
},
});

export const listName = style({
display: 'inline-block',
fontSize: '14px',
width: '70px',
marginRight: '10px',
fontWeight: '600',
textAlign: 'left',

'@media': {
'screen and (max-width: 420px)': {
fontSize: '12px',
},
},
});

export const listValue = style({
Expand Down
32 changes: 20 additions & 12 deletions src/app/mypage/record/components/BasicBidAuction.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,23 +15,15 @@ function BasicBidAuction({ bidAuctionHistory }: BasicBidAuctionProps) {

return (
<li className={S.list} key={bidAuctionHistory.auction_id}>
{bidAuctionHistory.auction_status === 'BIDDING' && (
<div className={S.bidding}>
<span className={`${S.listValue} ${S.bidStatus.concluded}`}>
{bidAuctionHistory.auction_status}진행중
</span>
</div>
)}
<Image
className={S.image}
src={`https://s3.ap-northeast-2.amazonaws.com/omocha.storages/${bidAuctionHistory.thumbnail_path}`}
width={0}
height={0}
sizes="100vw"
width={150}
height={150}
alt="경매 사진"
/>
<ul className={S.listRight}>
<li>
<li className={`${S.listFirst} ${S.listData}`}>
<button
type="button"
onClick={() =>
Expand All @@ -42,8 +34,15 @@ function BasicBidAuction({ bidAuctionHistory }: BasicBidAuctionProps) {
{bidAuctionHistory.title}
<ChevronRightIcon size={14} />
</button>
{bidAuctionHistory.auction_status === 'BIDDING' && (
<div className={S.bidding}>
<span className={`${S.listValue} ${S.bidStatus.bidding}`}>
{bidAuctionHistory.auction_status}진행중
</span>
</div>
)}
</li>
<li>
<li className={S.listData}>
<span className={S.listName}>입찰 상태</span>
<span
className={
Expand All @@ -55,6 +54,15 @@ function BasicBidAuction({ bidAuctionHistory }: BasicBidAuctionProps) {
{bidAuctionHistory.bid_status}
</span>
</li>
<li className={S.listData}>
<span className={S.listName}>현재가</span>
<span className={S.bidStatus.bidding}>
{bidAuctionHistory.now_price
? bidAuctionHistory.now_price.toLocaleString('ko-KR')
: '-'}
원
</span>
</li>
</ul>
</li>
);
Expand Down
94 changes: 82 additions & 12 deletions src/app/mypage/record/components/BasicSold.css.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,31 +32,38 @@ export const basicSold = style({
});

export const list = style({
position: 'relative',
display: 'flex',
display: 'grid',
gridTemplateColumns: '150px 1fr',
gap: '15px',

padding: '20px 10px',
transition: 'background-color 0.3s, transform 0.2s',
borderBottom: '1px solid rgba(0, 0, 0, 0.1)',
':hover': {
transform: 'scale(1.02)',
},

'@media': {
'screen and (max-width: 420px)': {
gridTemplateColumns: '1fr 1fr',
alignItems: 'center',
},
},
});

globalStyle(`${list}:nth-last-child(1)`, {
borderBottom: 'none',
});

export const image = style({
maxWidth: '120px',
width: '100%',
maxHeight: '120px',
height: '100%',
contain: 'contain',

objectFit: 'contain',
borderRadius: '4px',
boxShadow: '0 1px 4px rgba(0, 0, 0, 0.1)',

'@media': {
'screen and (max-width: 420px)': {
width: '100%',
},
},
});

export const listRight = style({
Expand All @@ -67,6 +74,32 @@ export const listRight = style({
listStyle: 'none',
});

export const listData = style({
display: 'flex',

'@media': {
'screen and (max-width: 420px)': {
flexDirection: 'column',
alignItems: 'flex-start',
gap: '10px',
},
},
});

export const listFirst = style({
width: '100%',
display: 'flex',
justifyContent: 'space-between',

'@media': {
'screen and (max-width: 774px)': {
gap: '10px',
flexDirection: 'column',
width: '110px',
},
},
});

export const bidTitle = style({
display: 'flex',
justifyContent: 'space-between',
Expand All @@ -77,6 +110,12 @@ export const bidTitle = style({
borderRadius: '4px',
border: `1px solid ${colors.gray7} `,
cursor: 'pointer',

'@media': {
'screen and (max-width: 420px)': {
fontSize: '14px',
},
},
});

export const listName = style({
Expand All @@ -85,6 +124,13 @@ export const listName = style({
width: '70px',
marginRight: '10px',
fontWeight: '600',
textAlign: 'left',

'@media': {
'screen and (max-width: 420px)': {
fontSize: '12px',
},
},
});

const blinkAnimation = keyframes({
Expand All @@ -94,19 +140,43 @@ const blinkAnimation = keyframes({
});

export const bidding = style({
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
fontSize: '12px',
position: 'absolute',
padding: '5px 10px',
borderRadius: '20px',
border: '1.5px solid red',
right: '30px',
top: '20px',
animation: `${blinkAnimation} 1.5s ease-in-out infinite`,
boxSizing: 'border-box',
width: '110px',

'@media': {
'screen and (max-width: 420px)': {
fontSize: '10px',
},
},
});

globalStyle(`${bidding} span`, {
fontSize: '12px',

'@media': {
'screen and (max-width: 420px)': {
fontSize: '10px',
},
},
});

export const listValue = style({
fontWeight: '500',
fontSize: '14px',

'@media': {
'screen and (max-width: 420px)': {
fontSize: '12px',
},
},
});

export const soldStatus = styleVariants({
Expand Down
Loading
Loading