[OD-179] 회원가입 시 유저 태그 설정

src/App.tsx

@@ -7,6 +7,7 @@ import LoginComplete from '@pages/Login/LoginComplete';
 
 import SignUp from '@pages/SignUp';
 import TermsAgreement from '@pages/SignUp/TermsAgreement';
+import PickMyStyle from '@pages/SignUp/PickMyStyle';
 
 import Profile from '@pages/Profile';
 import ProfileEdit from '@pages/Profile/ProfileEdit';
@@ -64,6 +65,7 @@ const publicRoutes = [
 
 	{ path: '/signup', element: <SignUp /> },
 	{ path: '/signup/terms-agreement', element: <TermsAgreement /> },
+	{ path: '/signup/pick-my-style', element: <PickMyStyle /> },
 ];
 
 const App: React.FC = () => {

src/apis/auth/dto.ts

@@ -12,4 +12,5 @@ export interface getUserInfoByJwtData {
 	profilePictureUrl: string;
 	bio: string;
 	birthDate: string;
+	userStyletags: string[];
 }

src/apis/user/dto.ts

@@ -11,6 +11,7 @@ export interface UserInfoData {
 	bio: string;
 	birthDate: string;
 	isFriend: boolean;
+	userStyletags: string[];
 }
 
 // 사용자 정보 조회 응답
@@ -28,6 +29,7 @@ export interface PatchUserInfoRequest {
 	nickname: string;
 	profilePictureUrl: string;
 	bio: string;
+	userStyletags: string[];
 }
 
 // 회원 탈퇴 응답

src/pages/Profile/ProfileEdit/index.tsx

@@ -49,6 +49,7 @@ const ProfileEdit: React.FC = () => {
 	const [birthDate, setBirthDate] = useState<string>('');
 	const [name, setName] = useState<string>('');
 	const [email, setEmail] = useState<string>('');
+	const [userStyletags, setUserStyletags] = useState<string[]>([]);
 	const [isLoading, setIsLoading] = useState<boolean>(true);
 	const navigate = useNavigate();
 	const [modalContent, setModalContent] = useState<string | null>(null);
@@ -74,6 +75,7 @@ const ProfileEdit: React.FC = () => {
 				setBirthDate(userInfo.birthDate || '');
 				setName(userInfo.name || '');
 				setEmail(userInfo.email || '');
+				setUserStyletags(userInfo.userStyletags || []);
 			} catch (error) {
 				console.error('Error fetching user info:', error);
 			} finally {
@@ -128,6 +130,7 @@ const ProfileEdit: React.FC = () => {
 				nickname: nickname || '닉네임 없음',
 				profilePictureUrl: profilePictureUrl || '',
 				bio: bio || '',
+				userStyletags: userStyletags || [],
 			};
 
 			const response = await patchUserInfoApi(payload, currentUserId);

src/pages/SignUp/PickMyStyle/index.tsx

@@ -0,0 +1,122 @@
+import { useEffect, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+
+import { getUserInfoApi, patchUserInfoApi } from '@apis/user';
+import { PatchUserInfoRequest } from '@apis/user/dto';
+import { getCurrentUserId } from '@utils/getCurrentUserId';
+import { styleImages } from '@utils/styleImages';
+
+import Back from '@assets/arrow/left.svg';
+
+import BottomButton from '@components/BottomButton';
+import { OODDFrame } from '@components/Frame/Frame';
+import Modal from '@components/Modal';
+import TopBar from '@components/TopBar';
+
+import { PickMyStyleLayout, StyledSubTitle, StyledTitle, CategoryList, PlaceholderImage } from './style';
+
+const PickMyStyle: React.FC = () => {
+	const [nickname, setNickname] = useState('');
+	const [clickedImages, setClickedImages] = useState<{ [key: number]: boolean }>({});
+
+	const [isModalOpen, setIsModalOpen] = useState(false);
+	const [modalMessage, setModalMessage] = useState('');
+
+	const navigate = useNavigate();
+	const currentUserId = getCurrentUserId();
+
+	// 유저 정보 가져오기
+	useEffect(() => {
+		const getUserInfo = async () => {
+			try {
+				const userInfo = await getUserInfoApi(currentUserId);
+				setNickname(userInfo.data.nickname);
+			} catch (error) {
+				console.error('유저 정보 불러오기 실패:', error);
+			}
+		};
+		getUserInfo();
+	}, [currentUserId]);
+
+	// 이미지 클릭 시 상태 변경
+	const handleImageClick = (id: number) => {
+		setClickedImages((prev) => ({
+			...prev,
+			[id]: !prev[id], // 클릭할 때마다 토글
+		}));
+	};
+
+	const handleSubmitBtnClick = async () => {
+		const selectedCategories = Object.keys(clickedImages)
+			.filter((id) => clickedImages[Number(id)]) // 클릭된 이미지만 필터링
+			.map((id) => styleImages.find((img) => img.id === Number(id))?.category) // category 값 가져오기
+			.filter((category): category is string => !!category); // undefined 제거
+
+		const requestData: Partial<PatchUserInfoRequest> = {
+			userStyletags: selectedCategories,
+		};
+		console.log(requestData);
+
+		try {
+			const data = await patchUserInfoApi(requestData, currentUserId);
+			console.log(data);
+			navigate('/');
+		} catch (error) {
+			console.error('API 요청 실패:', error);
+			setModalMessage('스타일 선택 중 오류가 발생했습니다.');
+			console.log(requestData);
+			setIsModalOpen(true);
+		}
+	};
+
+	const handleModalClose = () => {
+		setIsModalOpen(false);
+	};
+
+	return (
+		<OODDFrame>
+			<TopBar
+				LeftButtonSrc={Back}
+				onClickLeftButton={() => {
+					window.history.back();
+				}}
+			/>
+			<PickMyStyleLayout>
+				<StyledTitle
+					$textTheme={{
+						style: { mobile: 'heading1-bold', tablet: 'title2-bold', desktop: 'title2-bold' },
+					}}
+				>
+					{nickname}님의 취향을 알려주세요!
+				</StyledTitle>
+				<StyledSubTitle
+					$textTheme={{
+						style: { mobile: 'caption1-medium', tablet: 'body2-medium', desktop: 'body2-medium' },
+					}}
+				>
+					OODD가 당신의 취향을 분석하여 맞춤 스타일을 추천해 드릴게요.
+				</StyledSubTitle>
+				<CategoryList>
+					{styleImages.map((image) => (
+						<PlaceholderImage
+							key={image.id}
+							$isClicked={!!clickedImages[image.id]}
+							onClick={() => handleImageClick(image.id)}
+							data-category={image.category}
+						>
+							<img src={image.src} alt={`${image.category} 스타일`} />
+						</PlaceholderImage>
+					))}
+				</CategoryList>
+				<BottomButton
+					content="OODD 시작하기"
+					onClick={handleSubmitBtnClick}
+					disabled={!Object.values(clickedImages).some(Boolean)}
+				/>
+				{isModalOpen && <Modal content={modalMessage} onClose={handleModalClose} />}
+			</PickMyStyleLayout>
+		</OODDFrame>
+	);
+};
+
+export default PickMyStyle;

src/pages/SignUp/PickMyStyle/style.tsx

@@ -0,0 +1,76 @@
+import { styled } from 'styled-components';
+
+import { StyledText } from '@components/Text/StyledText';
+
+export const OODDFrame = styled.div`
+	width: 100%;
+	height: 100vh; // 화면 전체 높이 차지
+	overflow: hidden; // 전체 화면 스크롤 방지
+	display: flex;
+	flex-direction: column;
+`;
+
+export const PickMyStyleLayout = styled.div`
+	display: flex;
+	flex-direction: column;
+	padding: 0 1.875rem;
+	flex: 1; // 남은 공간을 다 차지하도록 설정
+	width: 100%;
+	height: 100%;
+	overflow: hidden; // 상위 요소의 스크롤 방지
+`;
+
+export const StyledTitle = styled(StyledText)`
+	margin: 0.625rem 0;
+`;
+
+export const StyledSubTitle = styled(StyledText)`
+	margin-bottom: 1.25rem;
+`;
+
+export const CategoryList = styled.div`
+	width: 100%;
+	max-width: 31.25rem;
+	margin: auto;
+	flex-grow: 1;
+	overflow-y: auto;
+	padding-bottom: 6.25rem;
+	display: grid;
+	grid-template-columns: repeat(2, 1fr);
+	gap: 0.625rem;
+
+	// 스크롤바 숨기기
+	&::-webkit-scrollbar {
+		display: none;
+	}
+	scrollbar-width: none;
+`;
+
+export const PlaceholderImage = styled.div<{ $isClicked: boolean }>`
+	width: 100%;
+	aspect-ratio: 1;
+	background-color: lightgray;
+	display: flex;
+	align-items: center;
+	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)')};
+	}
+	cursor: pointer;
+
+	img {
+		width: 100%;
+		height: 100%;
+		object-fit: cover;
+		border-radius: 0.5rem;
+	}
+`;

src/pages/SignUp/TermsAgreement/index.tsx

@@ -67,7 +67,7 @@ const TermsAgreement: React.FC = () => {
 		try {
 			const response = await postTermsAgreementApi(currentUserId);
 			console.log(response);
-			navigate('/'); // 성공 시 홈으로 이동
+			navigate('/signup/pick-my-style'); // 성공 시 취향 선택 UI로 이동
 		} catch (error) {
 			console.error('약관 동의 API 호출 실패:', error);
 			const errorMessage = handleError(error);
@@ -102,7 +102,7 @@ const TermsAgreement: React.FC = () => {
 							onChange={handleAllAgreementChange}
 							id="all-agreement"
 						/>
-						<label htmlFor="all-agreement">
+						<label htmlFor="all-agreement" style={{ cursor: 'pointer' }}>
 							<StyledText $textTheme={{ style: 'body1-medium' }}>약관 전체 동의</StyledText>
 						</label>
 					</CheckboxItem>
@@ -116,14 +116,14 @@ const TermsAgreement: React.FC = () => {
 								onChange={() => handleAgreementChange(key)}
 								id={key}
 							/>
-							<label htmlFor={key}>
+							<label htmlFor={key} style={{ cursor: 'pointer' }}>
 								<StyledText $textTheme={{ style: 'body2-regular' }}>{label}</StyledText>
 							</label>
 						</CheckboxItem>
 					))}
 				</CheckboxList>
 				<BottomButton
-					content="OODD 시작하기"
+					content="다음"
 					onClick={handleCompletedClick}
 					disabled={!agreements.terms || !agreements.privacy}
 				/>

src/utils/styleImages.ts

@@ -0,0 +1,22 @@
+export const styleImages = [
+	{ category: 'luxury', id: 0, src: '/styles/classic.jpg' },
+	{ category: 'casual', id: 1, src: '/styles/casual.jpg' },
+	{ category: 'street', id: 2, src: '/styles/hip.jpg' },
+	{ category: 'feminine', id: 3, src: '/styles/feminine.jpg' },
+	{ category: 'hip', id: 4, src: '/styles/luxury.jpg' },
+	{ category: 'outdoor', id: 5, src: '/styles/street.jpg' },
+	{ category: 'casual', id: 6, src: '/styles/feminine.jpg' },
+	{ category: 'classic', id: 7, src: '/styles/hip.jpg' },
+	{ category: 'sporty', id: 8, src: '/styles/casual.jpg' },
+	{ category: 'formal', id: 9, src: '/styles/formal.jpg' },
+	{ category: 'feminine', id: 10, src: '/styles/luxury.jpg' },
+	{ category: 'street', id: 11, src: '/styles/street.jpg' },
+	{ category: 'minimal', id: 12, src: '/styles/casual.jpg' },
+	{ category: 'outdoor', id: 13, src: '/styles/classic.jpg' },
+	{ category: 'formal', id: 14, src: '/styles/formal.jpg' },
+	{ category: 'sporty', id: 15, src: '/styles/outdoor.jpg' },
+	{ category: 'hip', id: 16, src: '/styles/hip.jpg' },
+	{ category: 'minimal', id: 17, src: '/styles/minimal.jpg' },
+	{ category: 'classic', id: 18, src: '/styles/classic.jpg' },
+	{ category: 'luxury', id: 19, src: '/styles/luxury.jpg' },
+];