Skip to content

Commit 0054a53

Browse files
gustn99gustn99
authored
Merge pull request #125 from oodd-team/feat/OD-169
[OD-169] PostImageSelect, PostUpload 리팩토링
2 parents 9ceb44c + 5c09412 commit 0054a53

23 files changed

Lines changed: 211 additions & 206 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: 20 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -13,8 +13,7 @@ import { postIdAtom, userAtom, isPostRepresentativeAtom } from '@recoil/Post/Pos
1313
import { getCurrentUserId } from '@utils/getCurrentUserId';
1414

1515
import Left from '@assets/arrow/left.svg';
16-
import LikeFill from '@assets/default/like-fill.svg';
17-
import Like from '@assets/default/like.svg';
16+
import Like from '@components/Icons/Like';
1817
import Message from '@assets/default/message.svg';
1918
import More from '@assets/default/more.svg';
2019

@@ -164,10 +163,18 @@ const PostBase: React.FC<PostBaseProps> = ({ onClickMenu }) => {
164163
<UserProfile onClick={handleUserClick}>
165164
{post?.user && <img src={post.user.profilePictureUrl} alt="profileImg" />}
166165
</UserProfile>
167-
<UserName onClick={handleUserClick} $textTheme={{ style: 'body2-medium' }} color={theme.colors.black}>
166+
<UserName
167+
onClick={handleUserClick}
168+
$textTheme={{ style: 'body2-medium' }}
169+
color={theme.colors.text.primary}
170+
>
168171
{user.nickname}
169172
</UserName>
170-
<StyledText className="timeAgo" $textTheme={{ style: 'caption2-regular' }} color={theme.colors.gray3}>
173+
<StyledText
174+
className="timeAgo"
175+
$textTheme={{ style: 'caption2-regular' }}
176+
color={theme.colors.text.tertiary}
177+
>
171178
{timeAgo}
172179
</StyledText>
173180
<MenuBtn onClick={onClickMenu}>
@@ -177,16 +184,18 @@ const PostBase: React.FC<PostBaseProps> = ({ onClickMenu }) => {
177184

178185
{!post ? <ImageSkeleton /> : <ImageSwiper images={post.postImages.map((image) => image.url)} />}
179186

180-
<ClothingInfoList className="post-mode">
181-
{post?.postClothings?.map((clothingObj, index) => (
182-
<ClothingInfoItem key={index} clothingObj={clothingObj} />
183-
))}
184-
</ClothingInfoList>
187+
{post?.postClothings && (
188+
<ClothingInfoList className="post-mode">
189+
{post.postClothings.map((clothingObj, index) => (
190+
<ClothingInfoItem key={index} clothingObj={clothingObj} />
191+
))}
192+
</ClothingInfoList>
193+
)}
185194

186195
<IconRow>
187196
<IconWrapper>
188197
<Icon onClick={togglePostLikeStatus}>
189-
{post?.isPostLike ? <img src={LikeFill} alt="like" /> : <img src={Like} alt="like" />}
198+
{post?.isPostLike ? <Like isFilled={true} color={theme.colors.brand.primary} /> : <Like />}
190199
</Icon>
191200
<span onClick={() => handleLikeCommentOpen('likes')}>{post?.postLikesCount ?? 0}</span>
192201
</IconWrapper>
@@ -208,7 +217,7 @@ const PostBase: React.FC<PostBaseProps> = ({ onClickMenu }) => {
208217
onClick={toggleTextDisplay}
209218
$showFullText={showFullText}
210219
$textTheme={{ style: 'body4-light' }}
211-
color={theme.colors.black}
220+
color={theme.colors.text.primary}
212221
>
213222
{post.content}
214223
</Content>

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

Lines changed: 15 additions & 16 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)`
@@ -133,29 +133,28 @@ export const IconRow = styled.div`
133133
height: 20px;
134134
align-items: center;
135135
padding: 0 20px;
136+
gap: 16px;
136137
`;
137138

138139
export const IconWrapper = styled.div`
139140
display: flex;
140141
align-items: center;
141142
gap: 8px;
142143
cursor: pointer;
144+
height: 22px;
143145
144146
span {
145147
font-size: 15px;
146-
color: #000;
147-
margin-right: 16px;
148+
color: ${({ theme }) => theme.colors.text.primary};
148149
}
149150
`;
150151

151152
export const Icon = styled.div`
152-
width: 20px;
153-
height: 20px;
154-
155-
img {
156-
width: 20px;
157-
height: 20px;
158-
}
153+
width: 18px;
154+
height: 18px;
155+
display: flex;
156+
align-items: center;
157+
justify-content: center;
159158
`;
160159

161160
export const ClothingInfoList = styled.div`
@@ -185,7 +184,7 @@ export const InputLayout = styled.div`
185184
width: calc(100% - 3rem);
186185
height: 5.75rem;
187186
border-radius: 0.125rem;
188-
border: 0.0625rem solid ${({ theme }) => theme.colors.gray3};
187+
border: 0.0625rem solid ${({ theme }) => theme.colors.border.divider};
189188
margin-bottom: 5.875rem;
190189
z-index: 2;
191190
margin-top: -3.75rem;
@@ -196,7 +195,7 @@ export const InputLayout = styled.div`
196195
font-style: normal;
197196
font-weight: 300;
198197
line-height: 150%;
199-
color: ${({ theme }) => theme.colors.black};
198+
color: ${({ theme }) => theme.colors.text.primary};
200199
resize: none;
201200
}
202201
`;

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ const ImageSwiper: React.FC<ImageSwiperProps> = ({ images, onProcessFile, onRemo
1717
const fileInputRef = useRef<HTMLInputElement>(null);
1818
const [currentSlide, setCurrentSlide] = useState(0);
1919

20-
const handleSelectImage = () => {
20+
const handleImageSelect = () => {
2121
if (fileInputRef.current) {
2222
fileInputRef.current.click();
2323
}
@@ -51,7 +51,7 @@ const ImageSwiper: React.FC<ImageSwiperProps> = ({ images, onProcessFile, onRemo
5151
</SwiperSlide>
5252
))}
5353
<SwiperSlide className="add-btn-box">
54-
<AddButton onClick={handleSelectImage}>
54+
<AddButton onClick={handleImageSelect}>
5555
<img src={Plus} />
5656
</AddButton>
5757
<HiddenFileInput

0 commit comments

Comments
 (0)