Merge pull request #37 from happbob/feat/OODD-52

Design: MyPost UI 수정

Author: xxinzzi

src/pages/MyPost/index.tsx

@@ -13,9 +13,7 @@ import {
 	Image,
 	IconRow,
 	IconWrapper,
-	BrandBoxContainer,
-	BrandBox,
-	BrandLink,
+	ClothingInfoContainer,
 	Tab,
 	ContentContainer,
 	UserItem,
@@ -28,13 +26,12 @@ import {
 
 import TopBar from '../../components/TopBar';
 import { OODDFrame } from '../../components/Frame/Frame';
-import { StyledText } from '../../components/Text/StyledText';
 import ConfirmationModal from '../../components/ConfirmationModal';
 import BottomSheet from '../../components/BottomSheet';
 import { BottomSheetProps } from '../../components/BottomSheet/dto';
 import BottomSheetMenu from '../../components/BottomSheetMenu';
 import { BottomSheetMenuProps } from '../../components/BottomSheetMenu/dto';
-import theme from '../../styles/theme';
+import ClothingInfoCard from '../Post/ClothingInfoCard';
 
 import imageBasic from '../../assets/imageBasic.svg';
 import back from '../../assets/back.svg';
@@ -374,24 +371,17 @@ const MyPost: React.FC = () => {
 						<span>{postDetail?.comments?.length || 0}</span> {/* 댓글 수 */}
 					</IconWrapper>
 				</IconRow>
-				<BrandBoxContainer>
-					{postDetail?.clothingInfo?.map((clothing, index) => (
-						<BrandBox key={index}>
-							<img src={clothing.imageUrl || mockImage} alt="브랜드 이미지" />
-							<div>
-								<StyledText $textTheme={{ style: 'body2-light', lineHeight: 1 }} color={theme.colors.black}>
-									{clothing.brand}
-								</StyledText>
-								<BrandLink>
-									<StyledText $textTheme={{ style: 'body6-light', lineHeight: 1 }} color={theme.colors.gray4}>
-										{clothing.model}/{clothing.modelNumber}/<a href={clothing.url}>URL</a>
-									</StyledText>
-								</BrandLink>
-							</div>
-							<img src={nextIcon} alt="Next Icon" className="next-icon" />
-						</BrandBox>
+				<ClothingInfoContainer>
+					{postDetail?.clothingInfo?.map((clothingInfo, index: number) => (
+						<ClothingInfoCard
+							key={index}
+							imageUrl={clothingInfo.imageUrl}
+							brand={clothingInfo.brand}
+							model={clothingInfo.model}
+							url={clothingInfo.url}
+						/>
 					))}
-				</BrandBoxContainer>
+				</ClothingInfoContainer>
 			</PostDetailContainer>
 		</OODDFrame>
 	);

src/pages/MyPost/styles.tsx

@@ -67,17 +67,18 @@ export const Menu = styled.div`
 `;
 
 export const ImageWrapper = styled.div`
+	position: relative;
 	margin-top: 0px; /* 1.25rem */
 	width: 100%;
 	display: flex;
 	justify-content: center;
 `;
 
 export const Image = styled.img`
-	max-width: 512px;
-	width: 390px;
-	height: 519.326px;
-	flex-shrink: 0;
+	width: 100%;
+	aspect-ratio: 3 / 4;
+	height: auto;
+	object-fit: cover;
 `;
 
 export const IconRow = styled.div`
@@ -105,28 +106,29 @@ export const IconWrapper = styled.div`
 	}
 `;
 
-export const BrandBoxContainer = styled.div`
+export const ClothingInfoContainer = styled.div`
 	display: flex;
 	overflow-x: auto; /* 가로 스크롤 가능하도록 설정 */
 	white-space: nowrap; /* 줄바꿈 없이 한 줄로 나열 */
 	padding: 0.625rem 0;
-	margin-top: 16px; /* 상단과의 간격 */
+	//margin-top: 16px; /* 상단과의 간격 */
 	padding: 0px 20px; /* 1.25rem */
 
 	&::-webkit-scrollbar {
 		height: 0rem;
 	}
 `;
 
+/*
 export const BrandBox = styled.div`
-	display: inline-flex; /* inline-flex를 사용하여 가로 배치 유지 */
+	display: inline-flex; // inline-flex를 사용하여 가로 배치 유지 
 	align-items: center;
 	padding: 0.625rem;
 	border: 0.0625rem solid #7b7b7b;
 	margin-right: 0.625rem;
-	width: 15.3243rem; /* 지정된 너비 */
-	height: 4.5rem; /* 지정된 높이 */
-	flex-shrink: 0; /* 크기 고정 */
+	width: 15.3243rem; // 지정된 너비 
+	height: 4.5rem; // 지정된 높이 
+	flex-shrink: 0; // 크기 고정 
 
 	img {
 		width: 3.125rem;
@@ -138,17 +140,17 @@ export const BrandBox = styled.div`
 		display: flex;
 		flex-direction: column;
 		justify-content: center;
-		flex-grow: 1; /* 텍스트 영역 확장 */
+		flex-grow: 1; /./ 텍스트 영역 확장 
 	}
 
 	&:last-child {
 		margin-right: 0;
 	}
 
 	.next-icon {
-		width: 1.875rem; /* 아이콘 크기 */
+		width: 1.875rem; // 아이콘 크기 
 		height: 19px;
-		margin-left: auto; /* 자동으로 오른쪽 끝으로 배치 */
+		margin-left: auto; // 자동으로 오른쪽 끝으로 배치 
 	}
 `;
 
@@ -158,6 +160,7 @@ export const BrandLink = styled.div`
 	justify-content: space-between;
 	width: 100%;
 `;
+*/
 
 export const TabContainer = styled.div`
 	display: flex;
@@ -240,7 +243,7 @@ export const Arrow = styled.div<{ direction: string; disabled: boolean }>`
 
 export const Indicator = styled.div`
 	position: absolute;
-	bottom: 10px;
+	top: 10px;
 	left: 50%;
 	transform: translateX(-50%);
 	background-color: rgba(0, 0, 0, 0.5);

src/pages/Post/styles.tsx

@@ -143,7 +143,8 @@ export const PostImg = styled.div`
 		top: 0;
 		left: 0;
 		width: 100%;
-		height: 100%;
+		aspect-ratio: 3 / 4;
+		height: auto;
 		object-fit: cover;
 	}
 `;