Merge pull request #288 from MeeTeamIdle/feature/#275_responsive_web_…

…design feat: 반응형에 따른 PortfolioImageModal 컴포넌트 스타일링 변경
MeeTeamIdle · Nov 13, 2024 · 313737f · 313737f
2 parents 22df02e + cac1f4d
commit 313737f
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 8 deletions.
diff --git a/src/components/portfolio/image/modal/PortfolioImageModal.styled.ts b/src/components/portfolio/image/modal/PortfolioImageModal.styled.ts
@@ -1,4 +1,5 @@
 import styled from 'styled-components';
+import { ResponsiveProps } from '../../../../types';
 
 const PortfolioImageModalLayout = styled.div`
 	position: fixed;
@@ -81,20 +82,32 @@ const PortfolioImageItem = styled.li`
 	background: var(--Form-fill-others, #fff);
 `;
 
-const PortfolioImageListIcon = styled.span`
+const PortfolioImageListIcon = styled.span<ResponsiveProps>`
 	display: flex;
 	padding: 1.6rem;
 	align-items: center;
 	height: 100%;
 	border-right: 0.1rem solid var(--box_stroke, #e3e3e3);
+
+	${props =>
+		props.$isMobile &&
+		`
+		padding: 0.8rem;
+		`}
 `;
 
-const PortfolioImageWrapper = styled.div`
+const PortfolioImageWrapper = styled.div<ResponsiveProps>`
 	display: flex;
 	width: 10rem;
 	flex-direction: row;
 	margin: 1.6rem;
 	align-items: center;
+
+	${props =>
+		props.$isMobile &&
+		`
+		margin: 0.8rem;
+		`}
 `;
 
 const PortfolioImageModalRow = styled.div<{ $gap?: string }>`
@@ -122,7 +135,7 @@ const PortfolioImageTitle = styled.span`
 	-webkit-box-orient: vertical;
 `;
 
-const PortfolioImageNumberIcon = styled.span`
+const PortfolioImageNumberIcon = styled.span<ResponsiveProps>`
 	box-sizing: border-box;
 	display: flex;
 	justify-content: center;
@@ -138,6 +151,13 @@ const PortfolioImageNumberIcon = styled.span`
 	font-weight: 600;
 	line-height: 2.4rem;
 	letter-spacing: 0.0032rem;
+
+	${props =>
+		props.$isMobile &&
+		`
+		margin: 0;
+		margin-right: 0.8rem;
+		`}
 `;
 
 const S = {

diff --git a/src/components/portfolio/image/modal/PortfolioImageModal.tsx b/src/components/portfolio/image/modal/PortfolioImageModal.tsx
@@ -5,6 +5,7 @@ import { PortfolioCard, PrimaryBtn, DefaultBtn } from '../../..';
 import { useRecoilState } from 'recoil';
 import { uploadImageListState } from '../../../../atom';
 import { HambergerMenuIcon } from '../../../../assets';
+import { useCheckDevice } from '../../../../hooks';
 
 const PortfolioImageModal = ({ onClose }: { onClose: () => void }) => {
 	const [uploadImageList, setUploadImageList] = useRecoilState(uploadImageListState);
@@ -25,6 +26,9 @@ const PortfolioImageModal = ({ onClose }: { onClose: () => void }) => {
 		setChangeImageList(_items);
 	};
 
+	// 반응형
+	const { isMobile } = useCheckDevice();
+
 	// --- requestAnimationFrame 초기화
 	const [enabled, setEnabled] = useState(false);
 
@@ -63,20 +67,24 @@ const PortfolioImageModal = ({ onClose }: { onClose: () => void }) => {
 															{...provided.draggableProps}
 															{...provided.dragHandleProps}
 														>
-															<S.PortfolioImageListIcon>
+															<S.PortfolioImageListIcon $isMobile={isMobile}>
 																<img src={HambergerMenuIcon} alt='햄버거메뉴아이콘' />
 															</S.PortfolioImageListIcon>
 															<S.PortfolioImageModalRow>
-																<S.PortfolioImageWrapper>
+																<S.PortfolioImageWrapper $isMobile={isMobile}>
 																	<PortfolioCard
 																		key={index}
 																		mainImageUrl={url}
 																		clickNumber={index + 1}
 																	/>
 																</S.PortfolioImageWrapper>
-																<S.PortfolioImageTitle>{fileName}</S.PortfolioImageTitle>
+																{!isMobile && (
+																	<S.PortfolioImageTitle>{fileName}</S.PortfolioImageTitle>
+																)}
 															</S.PortfolioImageModalRow>
-															<S.PortfolioImageNumberIcon>{index + 1}</S.PortfolioImageNumberIcon>
+															<S.PortfolioImageNumberIcon $isMobile={isMobile}>
+																{index + 1}
+															</S.PortfolioImageNumberIcon>
 														</S.PortfolioImageItem>
 													)}
 												</Draggable>
@@ -90,7 +98,7 @@ const PortfolioImageModal = ({ onClose }: { onClose: () => void }) => {
 				</DragDropContext>
 				<S.PortfolioImageModalRow $gap='1.6rem'>
 					<div>
-						<DefaultBtn title='취소하기' type='button' handleClick={onClose} />
+						<DefaultBtn title='취소' type='button' handleClick={onClose} />
 					</div>
 					<div>
 						<PrimaryBtn title='저장' type='button' handleClick={orderImageList} />