From 9a06d060aa17afe3445f25c313843809ed1e240d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=9D=B4=EC=9A=B0=EC=84=B1?= <sitpo96@naver.com>
Date: Thu, 8 Feb 2024 10:20:19 +0900
Subject: [PATCH] =?UTF-8?q?[FE]=20Fix=20#133:=20Link=20=EC=A4=91=EC=B2=A9?=
 =?UTF-8?q?=EC=9C=BC=EB=A1=9C=20=EC=9D=B8=ED=95=9C=20=EA=B2=BD=EA=B3=A0=20?=
 =?UTF-8?q?=ED=95=B4=EA=B2=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Change-Id: I1679a107be0c490eb24aff7660c269d63d7e5c47
---
 frontend/src/components/UserProfile.tsx | 53 ++++++++++++-------------
 1 file changed, 26 insertions(+), 27 deletions(-)

diff --git a/frontend/src/components/UserProfile.tsx b/frontend/src/components/UserProfile.tsx
index dee2fe5b..21ab4919 100644
--- 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>
 	)
 }