[FE] Fix #133: Link 중첩으로 인한 경고 해결

Change-Id: I1679a107be0c490eb24aff7660c269d63d7e5c47
ggumms · Feb 8, 2024 · 9a06d06 · 9a06d06
1 parent 72a0685
commit 9a06d06
Showing 1 changed file with 26 additions and 27 deletions.
diff --git a/frontend/src/components/UserProfile.tsx b/frontend/src/components/UserProfile.tsx
@@ -61,40 +61,39 @@ const profileStyle: IProfileStyle = {
 // Todo : title, color, id 있을 경우에만 버킷 정보 띄워주기 + 스타일 조정하기
 const UserProfile = ({ type = 'comment', userInfo }: IUserProfileProps) => {
 	return (
-		<section className="inline-block">
-			<Link to={'/user/1'} className="inline-flex">
+		<section className="inline-flex">
+			<Link to={'/user/1'}>
 				<img
 					src={'/defaultProfile.svg'}
 					// src={userInfo.userProfileImage}
 					alt="유저 프로필 이미지"
 					className={`${profileStyle[type].profileSize} ${profileStyle[type].profileRightMargin}`}
 				/>
-
-				<div className="relative flex flex-col self-end justify-center">
-					<p className={`font-bold ${profileStyle[type].nameTextSize}`}>{userInfo.userNickname}</p>
-					<Link to={'/bucket/1'} className="flex items-center">
-						<p
-							className={`inline-block  leading-none ${profileStyle[type].bucketTextSize} ${userInfo.isAchieved && userInfo.color ? textColorClass[userInfo.color] : 'text-point1'} ${profileStyle[type].bucketTitleLeftMargin}`}
-						>
-							{userInfo.bucketTitle}
-						</p>
-						{userInfo.bucketTitle &&
-							(userInfo.isAchieved ? (
-								<SquareCheck
-									className={`inline-block ${userInfo.color && fillColorClass[userInfo.color]} ${profileStyle[type].achieveIconWidth} ${profileStyle[type].achieveIconHeight} `}
-								/>
-							) : (
-								<Ggumtle
-									color={userInfo.color ?? 'transparent'}
-									speed={10}
-									width={profileStyle[type].achieveIconWidth}
-									height={profileStyle[type].achieveIconHeight}
-									explanation={`${userInfo.userNickname}님의 버킷이 꿈틀거리고 있어요!`}
-								/>
-							))}
-					</Link>
-				</div>
 			</Link>
+			<div className="relative flex flex-col self-end justify-center">
+				<p className={`font-bold ${profileStyle[type].nameTextSize}`}>{userInfo.userNickname}</p>
+				<Link to={'/bucket/1'} className="flex items-center">
+					<p
+						className={`inline-block  leading-none ${profileStyle[type].bucketTextSize} ${userInfo.isAchieved && userInfo.color ? textColorClass[userInfo.color] : 'text-point1'} ${profileStyle[type].bucketTitleLeftMargin}`}
+					>
+						{userInfo.bucketTitle}
+					</p>
+					{userInfo.bucketTitle &&
+						(userInfo.isAchieved ? (
+							<SquareCheck
+								className={`inline-block ${userInfo.color && fillColorClass[userInfo.color]} ${profileStyle[type].achieveIconWidth} ${profileStyle[type].achieveIconHeight} `}
+							/>
+						) : (
+							<Ggumtle
+								color={userInfo.color ?? 'transparent'}
+								speed={10}
+								width={profileStyle[type].achieveIconWidth}
+								height={profileStyle[type].achieveIconHeight}
+								explanation={`${userInfo.userNickname}님의 버킷이 꿈틀거리고 있어요!`}
+							/>
+						))}
+				</Link>
+			</div>
 		</section>
 	)
 }