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

src/components/common/input/CalcInput.jsx

@@ -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'

src/styles/calc.scss

@@ -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;