Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -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 />
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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`,
}}
/>

Expand Down Expand Up @@ -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",
}}
/>
Expand Down