Skip to content

Commit 096f8b4

Browse files
gominzipgominzip
committed
refactor: 변경된 스타일 토큰으로 css 수정
1 parent d4594e0 commit 096f8b4

File tree

13 files changed

+41
-40
lines changed

13 files changed

+41
-40
lines changed

‎frontend/src/components/client/ClientView.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import Footer from './Footer';
77
const ClientView = () => {
88
return (
99
<ClientViewContainer>
10-
{/* <h1 class='hidden'>클라이언트 페이지</h1> */}
10+
<h1 class="hidden">클라이언트 페이지</h1>
1111
<Player />
1212
<PlayerInfo />
1313
<Footer />

‎frontend/src/components/client/PlayerInfo.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -67,7 +67,7 @@ const LiveBox = styled.div`
6767
transform: translateX(-50%);
6868
padding: 2px 8px;
6969
border-radius: 7px;
70-
background-color: ${({ theme }) => theme.colorMap['red']};
70+
background-color: ${({ theme }) => theme.tokenColors['red-default']};
7171
color: ${({ theme }) => theme.tokenColors['text-strong']};
7272
${({ theme }) => theme.tokenTypographys['display-bold16']};
7373
line-height: 1.2;

‎frontend/src/components/main/LoadMoreDivider.tsx

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -31,10 +31,10 @@ const MoreButtonBox = styled.button`
3131
display: flex;
3232
justify-content: center;
3333
align-items: center;
34-
color: ${({ theme }) => theme.tokenColor['text-default']};
35-
${({ theme }) => theme.typographyStyle['display-medium12']}
36-
background-color: ${({ theme }) => theme.tokenColor['surface-default']};
37-
border: 1px solid ${({ theme }) => theme.tokenColor['surface-alt']};
34+
color: ${({ theme }) => theme.tokenColors['text-default']};
35+
${({ theme }) => theme.tokenTypographys['display-medium12']}
36+
background-color: ${({ theme }) => theme.tokenColors['surface-default']};
37+
border: 1px solid ${({ theme }) => theme.tokenColors['surface-alt']};
3838
border-radius: 15px;
3939
margin: 0 16px;
4040
cursor: pointer;
@@ -58,6 +58,6 @@ const LoadMoreDividerBox = styled.div`
5858
content: '';
5959
flex: 1;
6060
height: 1px;
61-
background-color: ${({ theme }) => theme.tokenColor['surface-alt']};
61+
background-color: ${({ theme }) => theme.tokenColors['surface-alt']};
6262
}
6363
`;

‎frontend/src/components/main/MainHeader.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,6 @@ const HeaderContainer = styled.div`
1414
top: 0;
1515
right: 0;
1616
z-index: 11000;
17-
background: ${({ theme }) => theme.tokenColor['surface-default']};
18-
color: ${({ theme }) => theme.tokenColor['text-strong']};
17+
background: ${({ theme }) => theme.tokenColors['surface-default']};
18+
color: ${({ theme }) => theme.tokenColors['text-strong']};
1919
`;

‎frontend/src/components/main/MainLiveSection.tsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -40,12 +40,12 @@ const MainSectionHeader = styled.div`
4040
align-items: end;
4141
margin-bottom: 25px;
4242
.live_section_title {
43-
${({ theme }) => theme.typographyStyle['display-bold20']}
44-
color: ${({ theme }) => theme.tokenColor['color-white']};
43+
${({ theme }) => theme.tokenTypographys['display-bold20']}
44+
color: ${({ theme }) => theme.tokenColors['color-white']};
4545
}
4646
.live_section_button {
47-
${({ theme }) => theme.typographyStyle['display-bold14']}
48-
color: ${({ theme }) => theme.tokenColor['text-default']};
47+
${({ theme }) => theme.tokenTypographys['display-bold14']}
48+
color: ${({ theme }) => theme.tokenColors['text-default']};
4949
}
5050
`;
5151

‎frontend/src/components/main/RecommendLive.tsx

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -71,12 +71,12 @@ const RecommendLiveHeader = styled.div`
7171
display: flex;
7272
align-items: center;
7373
gap: 10px;
74-
${({ theme }) => theme.typographyStyle['display-bold16']}
75-
color: ${({ theme }) => theme.tokenColor['red-default']};
74+
${({ theme }) => theme.tokenTypographys['display-bold16']}
75+
color: ${({ theme }) => theme.tokenColors['red-default']};
7676
}
7777
.recommend_live_title {
78-
${({ theme }) => theme.typographyStyle['display-bold24']}
79-
color: ${({ theme }) => theme.tokenColor['color-white']};
78+
${({ theme }) => theme.tokenTypographys['display-bold24']}
79+
color: ${({ theme }) => theme.tokenColors['color-white']};
8080
}
8181
`;
8282

@@ -89,8 +89,8 @@ const RecommendLiveInformation = styled.div`
8989

9090
const RecommendLiveProfile = styled.div`
9191
margin-right: 10px;
92-
background: ${({ theme }) => theme.tokenColor['surface-alt']} no-repeat 50% / cover;
93-
border: 4px solid ${({ theme }) => theme.tokenColor['brand-default']};
92+
background: ${({ theme }) => theme.tokenColors['surface-alt']} no-repeat 50% / cover;
93+
border: 4px solid ${({ theme }) => theme.tokenColors['brand-default']};
9494
border-radius: 50%;
9595
display: block;
9696
overflow: hidden;
@@ -110,13 +110,13 @@ const RecommendLiveArea = styled.div`
110110
flex-direction: column;
111111
gap: 5px;
112112
.video_card_name {
113-
${({ theme }) => theme.typographyStyle['display-bold20']}
114-
color: ${({ theme }) => theme.tokenColor['text-strong']};
113+
${({ theme }) => theme.tokenTypographys['display-bold20']}
114+
color: ${({ theme }) => theme.tokenColors['text-strong']};
115115
margin-bottom: 8px;
116116
}
117117
.video_card_category {
118-
${({ theme }) => theme.typographyStyle['display-bold16']}
119-
color: ${({ theme }) => theme.tokenColor['brand-default']};
118+
${({ theme }) => theme.tokenTypographys['display-bold16']}
119+
color: ${({ theme }) => theme.tokenColors['brand-default']};
120120
margin-bottom: 4px;
121121
}
122122
`;

‎frontend/src/components/main/ServiceBanner.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,5 +9,5 @@ export default ServiceBanner;
99
const ServiceBannerContainer = styled.div`
1010
height: 80px;
1111
border-radius: 10px;
12-
background: ${({ theme }) => theme.tokenColor['brand-default']};
12+
background: ${({ theme }) => theme.tokenColors['brand-default']};
1313
`;

‎frontend/src/components/main/ShowInfoBadge.tsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -21,10 +21,10 @@ export default ShowInfoBadge;
2121
const ShowInfoBadgeContainer = styled.span<{ $backgroundColor: string }>`
2222
box-sizing: border-box;
2323
padding: 3px 6px;
24-
border: 1px solid ${({ theme }) => theme.tokenColor['surface-alt']};
24+
border: 1px solid ${({ theme }) => theme.tokenColors['surface-alt']};
2525
border-radius: 4px;
26-
color: ${({ theme }) => theme.tokenColor['text-default']};
27-
${({ theme }) => theme.typographyStyle['display-medium12']}
28-
background-color: ${({ theme, $backgroundColor }) => theme.tokenColor[$backgroundColor] || 'transparent'};
26+
color: ${({ theme }) => theme.tokenColors['text-default']};
27+
${({ theme }) => theme.tokenTypographys['display-medium12']}
28+
background-color: ${({ theme, $backgroundColor }) => theme.tokenColors[$backgroundColor] || 'transparent'};
2929
cursor: pointer;
3030
`;

‎frontend/src/components/main/ThumbnailBadge.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -35,12 +35,12 @@ export { ThumbnailBadge, LiveBadge, LiveBadgeLarge, ReplayBadge, LiveViewCountBa
3535

3636
const ThumbnailBadgeContainer = styled.span<{ $backgroundColor: string; $size: 'small' | 'large' }>`
3737
padding: ${({ $size }) => ($size === 'large' ? '6px 12px' : '6px 8px')};
38-
${({ theme, $size }) => theme.typographyStyle[$size === 'large' ? 'display-bold16' : 'display-bold12']}
38+
${({ theme, $size }) => theme.tokenTypographys[$size === 'large' ? 'display-bold16' : 'display-bold12']}
3939
border-radius: 4px;
40-
color: ${({ theme }) => theme.tokenColor['color-white']};
40+
color: ${({ theme }) => theme.tokenColors['color-white']};
4141
4242
background-color: ${({ theme, $backgroundColor }) =>
4343
$backgroundColor.startsWith('#') || $backgroundColor.startsWith('rgb')
4444
? $backgroundColor
45-
: theme.tokenColor[$backgroundColor] || theme.tokenColor['gray-default']};
45+
: theme.tokenColors[$backgroundColor] || theme.tokenColors['gray-default']};
4646
`;

‎frontend/src/components/main/VideoCard.tsx

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -80,7 +80,7 @@ const VideoCardWrapper = styled.div`
8080

8181
const VideoCardProfile = styled.div`
8282
margin-right: 10px;
83-
background: ${({ theme }) => theme.tokenColor['surface-alt']} no-repeat 50% / cover;
83+
background: ${({ theme }) => theme.tokenColors['surface-alt']} no-repeat 50% / cover;
8484
border-radius: 50%;
8585
display: block;
8686
overflow: hidden;
@@ -99,13 +99,13 @@ const VideoCardArea = styled.div`
9999
flex-direction: column;
100100
margin-top: 5px;
101101
.video_card_title {
102-
${({ theme }) => theme.typographyStyle['display-bold16']}
103-
color: ${({ theme }) => theme.tokenColor['text-strong']};
102+
${({ theme }) => theme.tokenTypographys['display-bold16']}
103+
color: ${({ theme }) => theme.tokenColors['text-strong']};
104104
margin-bottom: 8px;
105105
}
106106
.video_card_name {
107-
${({ theme }) => theme.typographyStyle['display-medium14']}
108-
color: ${({ theme }) => theme.tokenColor['text-bold']};
107+
${({ theme }) => theme.tokenTypographys['display-medium14']}
108+
color: ${({ theme }) => theme.tokenColors['text-bold']};
109109
margin-bottom: 6px;
110110
}
111111
`;

0 commit comments

Comments
 (0)