Skip to content

Commit

Permalink
fix: 색상 옵션 클릭안되는 문제 해결
Browse files Browse the repository at this point in the history
- 옵션 모달 위치를 모달 컨테이너 밖으로 위치
- 모달 내부를 클릭해도 포커스 사라지지 않음
  • Loading branch information
Ludovico7 committed Nov 26, 2024
1 parent b01f11b commit 5efde23
Showing 1 changed file with 19 additions and 21 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -166,9 +166,8 @@ export const TextOptionModal = ({
initial={{ opacity: 0, y: 10 }}
animate={{ opacity: 1, y: 0 }}
exit={{ opacity: 0, y: 10 }}
onMouseDown={handleModalClick}
>
<div className={modalContainer} onClick={handleModalClick}>
<div className={modalContainer} onClick={handleModalClick} onMouseDown={handleModalClick}>
<button
className={optionButton}
onClick={onBoldSelect}
Expand Down Expand Up @@ -239,31 +238,30 @@ export const TextOptionModal = ({
{/* 텍스트 색상 버튼들 */}
<div className={optionButton} onMouseEnter={() => handleMouseEnter("text")}>
<span className={optionButtonText}>A</span>
{hoveredType === "text" && (
<TextColorOptionModal
onColorSelect={handleTextColorClick}
position={{
top: 40,
left: 0,
}}
/>
)}
</div>
{/* 배경 색상 버튼들 */}
<div className={optionButton} onMouseEnter={() => handleMouseEnter("background")}>
<span className={optionButtonText}>BG</span>

{hoveredType === "background" && (
<BackgroundColorOptionModal
onColorSelect={handleTextBackgroundSelect}
position={{
top: 40,
left: -53,
}}
/>
)}
</div>
</div>
{hoveredType === "text" && (
<TextColorOptionModal
onColorSelect={handleTextColorClick}
position={{
top: 44,
left: 84,
}}
/>
)}
{hoveredType === "background" && (
<BackgroundColorOptionModal
onColorSelect={handleTextBackgroundSelect}
position={{
top: 44,
left: 84,
}}
/>
)}
</motion.div>
</ModalPortal>
);
Expand Down

0 comments on commit 5efde23

Please sign in to comment.