feat: 이미지 호버 시 확대, 축소 기능과 클릭 시 확대/축소 토글 기능 추가

Author: mimizae

src/pages/SignUp/PickMyStyle/index.tsx

@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 
 import theme from '@styles/theme';
@@ -32,25 +33,23 @@ const categories = [
 	'luxury',
 ];
 
-// const categoryImages: Record<string, string[]> = {
-// 	classic: ['/images/classic1.jpg', '/images/classic2.jpg'],
-// 	street: ['/images/street1.jpg', '/images/street2.jpg'],
-// 	hip: ['/images/hip1.jpg', '/images/hip2.jpg'],
-// 	casual: ['/images/casual1.jpg', '/images/casual2.jpg'],
-// 	sporty: ['/images/sporty1.jpg', '/images/sporty2.jpg'],
-// 	feminine: ['/images/feminine1.jpg', '/images/feminine2.jpg'],
-// 	minimal: ['/images/minimal1.jpg', '/images/minimal2.jpg'],
-// 	formal: ['/images/formal1.jpg', '/images/formal2.jpg'],
-// 	outdoor: ['/images/outdoor1.jpg', '/images/outdoor2.jpg'],
-// 	luxury: ['/images/luxury1.jpg', '/images/luxury2.jpg'],
-// };
-
 const PickMyStyle: React.FC = () => {
+	const [clickedImages, setClickedImages] = useState<{ [key: string]: boolean }>({});
 	const navigate = useNavigate();
+
 	const navigateToLogin = () => {
 		navigate('/login');
 	};
 
+	// 특정 이미지 클릭 시 해당 이미지의 상태만 변경
+	const handleImageClick = (category: string, index: number) => {
+		const key = `${category}-${index}`;
+		setClickedImages((prev) => ({
+			...prev,
+			[key]: !prev[key], // 클릭할 때마다 상태 변경 (토글 기능)
+		}));
+	};
+
 	return (
 		<OODDFrame>
 			<TopBar LeftButtonSrc={Back} onClickLeftButton={navigateToLogin} />
@@ -76,8 +75,15 @@ const PickMyStyle: React.FC = () => {
 								# {category}
 							</StyledCategory>
 							<ImageContainer>
-								<PlaceholderImage>이미지 1</PlaceholderImage>
-								<PlaceholderImage>이미지 2</PlaceholderImage>
+								{[0, 1].map((index) => (
+									<PlaceholderImage
+										key={index}
+										isClicked={!!clickedImages[`${category}-${index}`]}
+										onClick={() => handleImageClick(category, index)}
+									>
+										이미지 {index + 1}
+									</PlaceholderImage>
+								))}
 							</ImageContainer>
 						</CategoryItem>
 					))}

src/pages/SignUp/PickMyStyle/style.tsx

@@ -66,14 +66,23 @@ export const ImageContainer = styled.div`
 	cursor: pointer;
 `;
 
-export const PlaceholderImage = styled.div`
+export const PlaceholderImage = styled.div<{ isClicked: boolean }>`
 	width: 12.5rem;
 	height: 13.75rem;
-	background: lightgray;
+	background-color: lightgray;
 	display: flex;
-	justify-content: center;
 	align-items: center;
-	color: white;
-	font-weight: bold;
-	border-radius: 0.3125rem;
+	justify-content: center;
+	font-size: 0.875rem;
+	border-radius: 0.5rem;
+	transition:
+		transform 0.2s ease,
+		box-shadow 0.2s ease;
+
+	transform: ${({ isClicked }) => (isClicked ? 'scale(0.9)' : 'scale(1)')};
+	box-shadow: ${({ isClicked }) => (isClicked ? '0 0.125rem 0.25rem rgba(0, 0, 0, 0.2)' : 'none')};
+
+	&:hover {
+		transform: ${({ isClicked }) => (isClicked ? 'scale(0.9)' : 'scale(0.95)')};
+	}
 `;