Merge pull request #161 from depromeet/qa-smallaction

refactor: 회고 QA

Author: ljh130334

src/app/(protected)/action/complete/_component/CharacterMotivation.tsx

@@ -11,7 +11,7 @@ export default function CharacterMotivation({ currentTask, nickname }: Props) {
 			잘했어요! 이제
 			<br />
 			<span className="text-component-accent-secondary">
-				{currentTask.persona?.name} {nickname}
+				{currentTask.persona?.name} {nickname}님
 			</span>
 			으로
 			<br />

src/app/(protected)/retrospection/[taskId]/_components/RetrospectFocusContent.tsx

@@ -82,6 +82,12 @@ const RetrospectFocusContent = ({
 		window.addEventListener("touchend", handleEnd);
 	};
 
+	// 슬라이더 위치 계산 - 0일 때 왼쪽 끝에 정확히 위치하도록 조정
+	const sliderPosition =
+		retrospectContent.concentration === 0
+			? "-8px"
+			: `calc(${(retrospectContent.concentration / 5) * 100}% - ${BAR.SLIDER_RADIUS}px)`;
+
 	return (
 		<div className="w-full mx-2 mt-1">
 			<div
@@ -98,8 +104,8 @@ const RetrospectFocusContent = ({
 					className="absolute rounded-full bg-line-tertiary"
 					style={{
 						height: `${BAR.HEIGHT}px`,
-						width: `calc(100% + ${BAR.SLIDER_RADIUS * 2}px)`, // 16px 양쪽 추가
-						left: `-${BAR.SLIDER_RADIUS}px`, // 왼쪽으로 16px 이동
+						width: `calc(100% + ${BAR.SLIDER_RADIUS * 2}px)`,
+						left: `-${BAR.SLIDER_RADIUS}px`,
 					}}
 				/>
 
@@ -132,11 +138,11 @@ const RetrospectFocusContent = ({
 
 				{/* 슬라이더 핸들 */}
 				<div
-					className="absolute m-3 z-30 rounded-full border-2 border-white bg-white shadow"
+					className="absolute z-30 rounded-full border-2 border-white bg-white shadow"
 					style={{
-						width: `${BAR.SLIDER_RADIUS * 2}px`,
-						height: `${BAR.SLIDER_RADIUS * 2}px`,
-						left: `calc(${(retrospectContent.concentration / 5) * 100}% - ${BAR.SLIDER_RADIUS * 2}px)`,
+						width: `${BAR.SLIDER_RADIUS * 2 - 2}px`,
+						height: `${BAR.SLIDER_RADIUS * 2 - 2}px`,
+						left: sliderPosition,
 						transition: "left 0.2s ease",
 					}}
 				/>