Skip to content

Commit 9ff753d

Browse files
xxinzzixxinzzi
committed
Refator: 컬러시스템 적용
1 parent 2d324bf commit 9ff753d

20 files changed

Lines changed: 215 additions & 71 deletions

File tree

‎src/pages/NotFound/index.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ const NotFound = () => {
1414
<OODDFrame>
1515
<NotFoundContainer>
1616
<TextContainer>
17-
<StyledText $textTheme={{ style: 'display1-bold' }} color={theme.colors.pink3}>
17+
<StyledText $textTheme={{ style: 'display1-bold' }} color={theme.colors.brand.primary}>
1818
404 ERROR
1919
</StyledText>
2020
<StyledText $textTheme={{ style: 'headline2-medium' }}>죄송합니다. 페이지를 찾을 수 없습니다.</StyledText>
@@ -26,7 +26,7 @@ const NotFound = () => {
2626
</div>
2727
</TextContainer>
2828
<ButtonContainer>
29-
<StyledButton as="a" href="/" $textTheme={{ style: 'body2-regular' }} color={theme.colors.pink3}>
29+
<StyledButton as="a" href="/" $textTheme={{ style: 'body2-regular' }} color={theme.colors.brand.primary}>
3030
메인으로
3131
</StyledButton>
3232
<StyledButton

‎src/pages/NotFound/styles.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -38,13 +38,13 @@ export const StyledButton = styled(StyledText)`
3838
display: inline-block;
3939
text-align: center;
4040
padding: 6px 16px;
41-
border: 1px solid ${({ theme }) => theme.colors.pink3};
41+
border: 1px solid ${({ theme }) => theme.colors.brand.primary};
4242
border-radius: 8px;
4343
cursor: pointer;
4444
text-decoration: none;
4545
4646
&.prev {
47-
background-color: ${({ theme }) => theme.colors.pink3};
47+
background-color: ${({ theme }) => theme.colors.brand.primary};
4848
color: ${({ theme }) => theme.colors.white};
4949
}
5050
`;

‎src/pages/Post/PostBase/ImageSwiper/index.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import 'swiper/css';
66
import 'swiper/css/navigation';
77
import 'swiper/css/pagination';
88

9-
import { ImageSwiperProps } from '../dto';
9+
import type { ImageSwiperProps } from '../dto';
1010

1111
import { SwiperContainer, ImageWrapper, StyledNavigation } from './styles';
1212

‎src/pages/Post/PostBase/LikeCommentBottomSheetContent/CommentItem/index.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@ const CommentItem: React.FC<CommentItemProps> = ({ comment, handleUserClick, han
3838
<StyledText $textTheme={{ style: 'body2-regular' }}>{comment.content}</StyledText>
3939
</CommentContent>
4040
<RightContainer>
41-
<StyledText className="timeAgo" $textTheme={{ style: 'caption2-regular' }} color={theme.colors.gray3}>
41+
<StyledText className="timeAgo" $textTheme={{ style: 'caption2-regular' }} color={theme.colors.text.tertiary}>
4242
{timeAgo}
4343
</StyledText>
4444
<MenuBtn onClick={(event) => handleMenuOpen(comment, event)}>

‎src/pages/Post/PostBase/LikeCommentBottomSheetContent/MenuButtonList/styles.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ export const MenuButtonItem = styled.button<{ $color?: string }>`
3333
width: 120px;
3434
padding: 0 10px;
3535
cursor: pointer;
36-
color: ${(props) => props.$color || props.theme.colors.white};
36+
color: ${(props) => props.$color || props.theme.colors.text.primary};
3737
border-bottom: 1px solid ${({ theme }) => theme.colors.white};
3838
3939
img {

‎src/pages/Post/PostBase/LikeCommentBottomSheetContent/index.tsx‎

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -25,16 +25,15 @@ import X from '@assets/default/x.svg';
2525
import Loading from '@components/Loading';
2626
import Modal from '@components/Modal';
2727
import { StyledText } from '@components/Text/StyledText';
28+
import CommentItem from './CommentItem/index';
29+
import MenuButtonList from './MenuButtonList/index';
2830

2931
import type { Comment, GetCommentListResponse } from '@apis/post-comment/dto';
3032
import type { GetPostLikeListResponse } from '@apis/post-like/dto';
3133
import type { ModalProps } from '@components/Modal/dto';
3234

3335
import type { LikeCommentBottomSheetProps } from '../dto';
3436

35-
import CommentItem from './CommentItem/index';
36-
import MenuButtonList from './MenuButtonList/index';
37-
3837
import { TabContainer, Tab, ContentContainer, Content, BigUserProfile, LikeItem, InputLayout } from './styles';
3938

4039
const LikeCommentBottomSheetContent: React.FC<LikeCommentBottomSheetProps> = ({ tab, likeCount, commentCount }) => {
@@ -338,15 +337,15 @@ const LikeCommentBottomSheetContent: React.FC<LikeCommentBottomSheetProps> = ({
338337
<Tab $active={activeTab === 'likes'} onClick={() => setActiveTab('likes')}>
339338
<StyledText
340339
$textTheme={{ style: 'body2-bold' }}
341-
color={activeTab === 'likes' ? theme.colors.pink : theme.colors.gray3}
340+
color={activeTab === 'likes' ? theme.colors.brand.primary : theme.colors.text.tertiary}
342341
>
343342
좋아요 {postLikeCount || 0}
344343
</StyledText>
345344
</Tab>
346345
<Tab $active={activeTab === 'comments'} onClick={() => setActiveTab('comments')}>
347346
<StyledText
348347
$textTheme={{ style: 'body2-bold' }}
349-
color={activeTab === 'comments' ? theme.colors.pink : theme.colors.gray3}
348+
color={activeTab === 'comments' ? theme.colors.brand.primary : theme.colors.text.tertiary}
350349
>
351350
코멘트 {postCommentCount || 0}
352351
</StyledText>
@@ -356,7 +355,7 @@ const LikeCommentBottomSheetContent: React.FC<LikeCommentBottomSheetProps> = ({
356355
<ContentContainer $isCommentTab={activeTab === 'comments'}>
357356
{activeTab === 'likes' &&
358357
(postLikeCount === 0 ? (
359-
<Content $textTheme={{ style: 'body2-medium' }} color={theme.colors.gray3}>
358+
<Content $textTheme={{ style: 'body2-medium' }} color={theme.colors.text.tertiary}>
360359
아직 좋아요가 없습니다
361360
</Content>
362361
) : (
@@ -375,7 +374,7 @@ const LikeCommentBottomSheetContent: React.FC<LikeCommentBottomSheetProps> = ({
375374
{activeTab === 'comments' && (
376375
<>
377376
{postCommentCount === 0 ? (
378-
<Content $textTheme={{ style: 'body2-medium' }} color={theme.colors.gray3}>
377+
<Content $textTheme={{ style: 'body2-medium' }} color={theme.colors.text.tertiary}>
379378
아직 댓글이 없습니다
380379
</Content>
381380
) : (

‎src/pages/Post/PostBase/LikeCommentBottomSheetContent/styles.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -80,7 +80,7 @@ export const InputLayout = styled.div`
8080
align-items: center;
8181
gap: 10px;
8282
background-color: white;
83-
border-top: 1px solid ${({ theme }) => theme.colors.border.devider};
83+
border-top: 1px solid ${({ theme }) => theme.colors.border.divider};
8484
8585
textarea {
8686
flex: 1;
@@ -89,16 +89,16 @@ export const InputLayout = styled.div`
8989
height: 50px;
9090
max-height: 70px;
9191
border-radius: 8px;
92-
border: 0.0625rem solid #ededed;
92+
border: 0.0625rem solid ${({ theme }) => theme.colors.border.divider};
9393
outline: none;
9494
padding: 0.8125rem 0.9375rem;
9595
font-family: 'Pretendard Variable';
9696
font-size: 1rem;
9797
font-style: normal;
9898
font-weight: 300;
9999
line-height: 150%;
100-
color: #1d1d1d;
101-
background-color: #f8f8f8;
100+
color: ${({ theme }) => theme.colors.text.secondary};
101+
background-color: ${({ theme }) => theme.colors.background.secondary};
102102
resize: none;
103103
overflow-y: auto;
104104

‎src/pages/Post/PostBase/index.tsx‎

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -164,10 +164,18 @@ const PostBase: React.FC<PostBaseProps> = ({ onClickMenu }) => {
164164
<UserProfile onClick={handleUserClick}>
165165
{post?.user && <img src={post.user.profilePictureUrl} alt="profileImg" />}
166166
</UserProfile>
167-
<UserName onClick={handleUserClick} $textTheme={{ style: 'body2-medium' }} color={theme.colors.black}>
167+
<UserName
168+
onClick={handleUserClick}
169+
$textTheme={{ style: 'body2-medium' }}
170+
color={theme.colors.text.primary}
171+
>
168172
{user.nickname}
169173
</UserName>
170-
<StyledText className="timeAgo" $textTheme={{ style: 'caption2-regular' }} color={theme.colors.gray3}>
174+
<StyledText
175+
className="timeAgo"
176+
$textTheme={{ style: 'caption2-regular' }}
177+
color={theme.colors.text.tertiary}
178+
>
171179
{timeAgo}
172180
</StyledText>
173181
<MenuBtn onClick={onClickMenu}>
@@ -208,7 +216,7 @@ const PostBase: React.FC<PostBaseProps> = ({ onClickMenu }) => {
208216
onClick={toggleTextDisplay}
209217
$showFullText={showFullText}
210218
$textTheme={{ style: 'body4-light' }}
211-
color={theme.colors.black}
219+
color={theme.colors.text.primary}
212220
>
213221
{post.content}
214222
</Content>

‎src/pages/Post/PostBase/styles.tsx‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -16,9 +16,9 @@ const shimmer = keyframes`
1616
const LoadingSkeleton = styled.div`
1717
background: linear-gradient(
1818
90deg,
19-
${({ theme }) => theme.colors.gray1} 25%,
20-
${({ theme }) => theme.colors.gray2} 50%,
21-
${({ theme }) => theme.colors.gray1} 75%
19+
${({ theme }) => theme.colors.gray[200]} 25%,
20+
${({ theme }) => theme.colors.gray[300]} 50%,
21+
${({ theme }) => theme.colors.gray[200]} 75%
2222
);
2323
background-size: 200% 100%;
2424
animation: ${shimmer} 2s infinite;
@@ -79,7 +79,7 @@ export const UserProfile = styled(LoadingSkeleton)`
7979
height: 32px;
8080
border-radius: 50%;
8181
overflow: hidden;
82-
border: solid 0.5px ${({ theme }) => theme.colors.gray1};
82+
border: solid 0.5px ${({ theme }) => theme.colors.border.divider};
8383
8484
img {
8585
width: 100%;
@@ -120,7 +120,7 @@ export const Content = styled(StyledText)<{ $showFullText: boolean }>`
120120

121121
export const ShowMoreButton = styled(StyledText)`
122122
cursor: pointer;
123-
color: ${({ theme }) => theme.colors.gray3};
123+
color: ${({ theme }) => theme.colors.text.tertiary};
124124
`;
125125

126126
export const ImageSkeleton = styled(LoadingSkeleton)`
@@ -143,7 +143,7 @@ export const IconWrapper = styled.div`
143143
144144
span {
145145
font-size: 15px;
146-
color: #000;
146+
color: ${({ theme }) => theme.colors.text.primary};
147147
margin-right: 16px;
148148
}
149149
`;
@@ -185,7 +185,7 @@ export const InputLayout = styled.div`
185185
width: calc(100% - 3rem);
186186
height: 5.75rem;
187187
border-radius: 0.125rem;
188-
border: 0.0625rem solid ${({ theme }) => theme.colors.gray3};
188+
border: 0.0625rem solid ${({ theme }) => theme.colors.border.divider};
189189
margin-bottom: 5.875rem;
190190
z-index: 2;
191191
margin-top: -3.75rem;
@@ -196,7 +196,7 @@ export const InputLayout = styled.div`
196196
font-style: normal;
197197
font-weight: 300;
198198
line-height: 150%;
199-
color: ${({ theme }) => theme.colors.black};
199+
color: ${({ theme }) => theme.colors.text.primary};
200200
resize: none;
201201
}
202202
`;

‎src/pages/Post/PostImageSelect/styles.tsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,6 @@ export const Content = styled.div`
4949
top: 2.75rem;
5050
left: 0;
5151
width: 100%;
52-
//max-width: 512px;
5352
height: calc(100% - 10rem);
5453
flex: 1;
5554
`;

0 commit comments

Comments
 (0)