qcast3/qcast-front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

계산기의 마지막 입력숫자가 보이게..

Browse Source
This commit is contained in:
ysCha 2025-09-11 09:50:42 +09:00
parent cf969d6f1c
commit fb20a1676b
2 changed files with 424 additions and 411 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
src/components/common/input/CalcInput.jsx
View File

@ -2,7 +2,8 @@ import React, { useState, useRef, useEffect, forwardRef } from 'react'
import { createCalculator } from '@/util/calc-utils'
import '@/styles/calc.scss'
export const CalculatorInput = forwardRef(({ value, onChange, label, options = {}, id, className = 'calculator-input', readOnly = false, placeholder}, ref) => {
export const CalculatorInput = forwardRef(
({ value, onChange, label, options = {}, id, className = 'calculator-input', readOnly = false, placeholder }, ref) => {
const [showKeypad, setShowKeypad] = useState(false)
const [displayValue, setDisplayValue] = useState(value || '0')
const [hasOperation, setHasOperation] = useState(false)
@ -77,12 +78,14 @@ export const CalculatorInput = forwardRef(({ value, onChange, label, options = {
}
}
// 포커스와 커서 위치 설정 (새로운 값의 길이로 설정)
// 커서를 텍스트 끝으로 이동하고 스크롤 처리
requestAnimationFrame(() => {
if (inputRef.current) {
inputRef.current.focus()
const len = newDisplayValue.length
inputRef.current.setSelectionRange(len, len)
// 텍스트 끝으로 스크롤
inputRef.current.scrollLeft = inputRef.current.scrollWidth
}
})
}
@ -118,12 +121,14 @@ export const CalculatorInput = forwardRef(({ value, onChange, label, options = {
setDisplayValue(newDisplayValue)
}
// 포커스와 커서 위치 설정 (새로운 값의 길이로 설정)
// 커서를 텍스트 끝으로 이동하고 스크롤 처리
requestAnimationFrame(() => {
if (inputRef.current) {
inputRef.current.focus()
const len = newDisplayValue.length
inputRef.current.setSelectionRange(len, len)
// 텍스트 끝으로 스크롤
inputRef.current.scrollLeft = inputRef.current.scrollWidth
}
})
}
@ -136,14 +141,14 @@ export const CalculatorInput = forwardRef(({ value, onChange, label, options = {
setDisplayValue(displayValue)
setHasOperation(false)
onChange(displayValue)
// 포커스와 커서 위치 설정
// 커서를 텍스트 끝으로 이동하고 스크롤 처리
requestAnimationFrame(() => {
if (inputRef.current) {
inputRef.current.focus()
const len = displayValue.length
inputRef.current.setSelectionRange(len, len)
// Ensure focus is maintained
inputRef.current.focus()
// 텍스트 끝으로 스크롤
inputRef.current.scrollLeft = inputRef.current.scrollWidth
}
})
}
@ -182,14 +187,14 @@ export const CalculatorInput = forwardRef(({ value, onChange, label, options = {
setDisplayValue(displayValue)
setHasOperation(!!calculator.operation)
onChange(displayValue)
// 포커스와 커서 위치 설정
// 커서를 텍스트 끝으로 이동하고 스크롤 처리
requestAnimationFrame(() => {
if (inputRef.current) {
inputRef.current.focus()
const len = displayValue.length
inputRef.current.setSelectionRange(len, len)
// Ensure focus is maintained
inputRef.current.focus()
// 텍스트 끝으로 스크롤
inputRef.current.scrollLeft = inputRef.current.scrollWidth
}
})
}
@ -402,7 +407,7 @@ export const CalculatorInput = forwardRef(({ value, onChange, label, options = {
</button>
{/* 숫자 버튼 */}
{[1,2,3,4,5,6,7,8,9].map((num) => (
{[1, 2, 3, 4, 5, 6, 7, 8, 9].map((num) => (
<button key={num} onClick={() => handleNumber(num)} className="btn-number">
{num}
</button>
@ -429,6 +434,7 @@ export const CalculatorInput = forwardRef(({ value, onChange, label, options = {
)}
</div>
)
})
},
)
CalculatorInput.displayName = 'CalculatorInput'

13
src/styles/calc.scss
View File

@ -11,7 +11,7 @@ $colors: (
'danger-dark': #dc2626,
'warning': #f59e0b,
'warning-dark': #d97706,
'border': #475569
'border': #475569,
);
// Mixins
@ -46,10 +46,15 @@ $colors: (
color: white;
font-weight: bold;
border-radius: 0.5rem;
text-align: right;
text-align: left; // 왼쪽 정렬
cursor: pointer;
font-size: 0.625rem;
box-sizing: border-box;
direction: ltr; // 왼쪽에서 오른쪽으로 입력
white-space: nowrap; // 줄바꿈 방지
// input 요소에서는 overflow 대신 다른 방법 사용
text-overflow: clip; // 텍스트 잘림 처리
unicode-bidi: bidi-override; // 텍스트 방향 강제
&:focus {
outline: none;
@ -67,7 +72,9 @@ $colors: (
width: 120px;
background-color: map-get($colors, 'dark-700');
border-radius: 0.5rem;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
box-shadow:
0 4px 6px -1px rgba(0, 0, 0, 0.1),
0 2px 4px -1px rgba(0, 0, 0, 0.06);
padding: 0.5rem;
z-index: 1000;
animation: fadeIn 0.15s ease-out;