Refactor: Icon 컴포넌트 적용

Author: xxinzzi

src/pages/Post/PostBase/index.tsx

@@ -13,8 +13,7 @@ import { postIdAtom, userAtom, isPostRepresentativeAtom } from '@recoil/Post/Pos
 import { getCurrentUserId } from '@utils/getCurrentUserId';
 
 import Left from '@assets/arrow/left.svg';
-import LikeFill from '@assets/default/like-fill.svg';
-import Like from '@assets/default/like.svg';
+import Like from '@components/Icons/Like';
 import Message from '@assets/default/message.svg';
 import More from '@assets/default/more.svg';
 
@@ -185,16 +184,18 @@ const PostBase: React.FC<PostBaseProps> = ({ onClickMenu }) => {
 
 					{!post ? <ImageSkeleton /> : <ImageSwiper images={post.postImages.map((image) => image.url)} />}
 
-					<ClothingInfoList className="post-mode">
-						{post?.postClothings?.map((clothingObj, index) => (
-							<ClothingInfoItem key={index} clothingObj={clothingObj} />
-						))}
-					</ClothingInfoList>
+					{post?.postClothings && (
+						<ClothingInfoList className="post-mode">
+							{post.postClothings.map((clothingObj, index) => (
+								<ClothingInfoItem key={index} clothingObj={clothingObj} />
+							))}
+						</ClothingInfoList>
+					)}
 
 					<IconRow>
 						<IconWrapper>
 							<Icon onClick={togglePostLikeStatus}>
-								{post?.isPostLike ? <img src={LikeFill} alt="like" /> : <img src={Like} alt="like" />}
+								{post?.isPostLike ? <Like isFilled={true} color={theme.colors.brand.primary} /> : <Like />}
 							</Icon>
 							<span onClick={() => handleLikeCommentOpen('likes')}>{post?.postLikesCount ?? 0}</span>
 						</IconWrapper>

src/pages/Post/PostBase/styles.tsx

@@ -133,29 +133,28 @@ export const IconRow = styled.div`
 	height: 20px;
 	align-items: center;
 	padding: 0 20px;
+	gap: 16px;
 `;
 
 export const IconWrapper = styled.div`
 	display: flex;
 	align-items: center;
 	gap: 8px;
 	cursor: pointer;
+	height: 22px;
 
 	span {
 		font-size: 15px;
 		color: ${({ theme }) => theme.colors.text.primary};
-		margin-right: 16px;
 	}
 `;
 
 export const Icon = styled.div`
-	width: 20px;
-	height: 20px;
-
-	img {
-		width: 20px;
-		height: 20px;
-	}
+	width: 18px;
+	height: 18px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
 `;
 
 export const ClothingInfoList = styled.div`

src/pages/Post/PostImageSelect/index.tsx

@@ -14,8 +14,8 @@ import {
 import { getCurrentUserId } from '@utils/getCurrentUserId';
 
 import Left from '@assets/arrow/left.svg';
-import PhotoBig from '@assets/default/photo-big.svg';
 import X from '@assets/default/x.svg';
+import Photo from '@components/Icons/Photo';
 
 import BottomButton from '@components/BottomButton';
 import { OODDFrame } from '@components/Frame/Frame';
@@ -156,7 +156,7 @@ const PostImageSelect: React.FC = () => {
 							<StyledText $textTheme={{ style: 'heading1-regular', lineHeight: 2 }}>
 								사진을 여기에 끌어다 놓으세요
 							</StyledText>
-							<img src={PhotoBig} />
+							<Photo height="100px" width="100px" />
 							<input type="file" onChange={handleFileInputChange} ref={fileInputRef} multiple accept="image/*,.heic" />
 						</ImageDragDropContainer>
 					) : (

src/pages/Post/PostUpload/ImageSwiper/index.tsx

@@ -1,12 +1,13 @@
 import { useRef } from 'react';
+import ReactDOMServer from 'react-dom/server';
 
 import { Navigation, Pagination } from 'swiper/modules';
 import { Swiper, SwiperRef, SwiperSlide } from 'swiper/react';
 import 'swiper/css';
 import 'swiper/css/navigation';
 import 'swiper/css/pagination';
 
-import PhotoWhite from '@assets/default/photo-white.svg';
+import Photo from '@components/Icons/Photo';
 
 import type { ImageSwiperProps } from '../dto';
 
@@ -31,9 +32,10 @@ const ImageSwiper: React.FC<ImageSwiperProps> = ({ images }) => {
 					el: '.swiper-pagination',
 					type: 'custom',
 					renderCustom: (_, current, total) => {
+						const photoIcon = ReactDOMServer.renderToString(<Photo color="white" />);
 						return `
 							<div class="swiper-pagination-custom">
-								<img src="${PhotoWhite}" alt="Pagination Icon" />
+								${photoIcon}
 								<span>${current}/${total}</span>
 							</div>`;
 					},

src/pages/Post/PostUpload/ImageSwiper/styles.tsx

@@ -82,7 +82,7 @@ export const StyledPagination = styled.div`
 	align-items: center;
 	width: 65px;
 	height: 34px;
-	color: white;
+	color: ${({ theme }) => theme.colors.text.contrast};
 	background: ${({ theme }) => theme.colors.brand.gradient};
 	border-radius: 17px;
 
@@ -92,11 +92,8 @@ export const StyledPagination = styled.div`
 		justify-content: center;
 	}
 
-	.swiper-pagination-custom img {
-		margin-right: 0.3125rem;
-	}
-
 	span {
+		margin-left: 0.3125rem;
 		font-family: 'Pretendard Variable';
 		font-weight: 300;
 		font-size: 0.8125rem;