안녕하세요.
참고한 문서:
package.json
"dependencies": {
"@apps-in-toss/web-framework": "^1.0.0",
"@emotion/react": "^11.14.0",
"@granite-js/plugin-router": "0.1.21",
"@toss-design-system/colors": "^0.1.0",
"@toss-design-system/mobile": "2.1.0",
"@toss-design-system/mobile-ait": "2.1.0",
"next": "^15.5.2",
"react": "18.2.0",
"react-dom": "18.2.0"
},
문제 발생한 코드
import {
BottomSheet,
Button,
ListRow,
TextArea,
TextField,
Menu,
Text,
} from "@toss-design-system/mobile";
...
<TextField.Clearable
name="phone"
inputMode="numeric"
variant="box"
hasError={!!validationErrors.phone}
value={userInfo.phone}
label="휴대폰 번호"
labelOption="sustain"
onChange={(e) => {
setUserInfo({ ...userInfo, phone: e.target.value });
setValidationErrors((prev) => ({ ...prev, phone: "" }));
}}
format={{
transform: formatPhoneNumber,
}}
onBlur={() => {
const error = validatePhone(userInfo.phone);
setValidationErrors((prev) => ({ ...prev, phone: error }));
}}
placeholder="010-0000-0000"
help={
validationErrors.phone
? validationErrors.phone
: "errorText"
}
onClear={() => {
// TODO 안 되고 있음. 확인 필요.
window.alert("clear");
console.log("---------------------onClear 테스트");
// setUserInfo({ ...userInfo, phone: "" });
}}
/>
...
Dylan
10월 16, 2025, 2:18오전
2
안녕하세요
const onClear = () => {
alert('X 버튼으로 값이 초기화되었습니다!');
};
<TextField.Clearable
ref={inputRef}
variant="box"
type="email"
value={email}
onChange={onChange}
onClear={onClear}
onFocus={() => setIsError(false)}
hasError={isError}
help={
isError ? (isEmptyString(email) ? EmailErrorMessage.빈_양식 : EmailErrorMessage.잘못된_이메일) : undefined
}
label="이메일"
labelOption="sustain"
placeholder="이메일 입력"
data-log-mask="email"
data-log-mask-value={email}
maxLength={100}
autoComplete="off"
autoFocus
/>
이렇게 했을때 alert()가 정상 호출되었습니다.
"@apps-in-toss/web-framework": "^1.2.1",
"@toss/tds-mobile": "^2.1.2",
"@toss/tds-mobile-ait": "^2.1.2",
다른 질문과.. 동일한 상황이었습니다. 하하. 제가… provider로 감싸고 있지 않았어요… ㅎㅎ 테스트해 주셔서 감사합니다!
아!! 혹시… 여기에 여쭤도 될까요? 다름이 아니고, deploymentId is not a constatnt handler 라고 계속 뜨는데, 이번에는 문서를 나름대로 꼼꼼히 본다고 봤는데도 어떤 것 때문인지 갈피를 잡기가 어려워서 질문드립니다. 어떤 설정을 제가 빼먹어서 이게 자꾸 뜨는 걸까요..?
NEXT_PUBLIC_DEPLOYMENT_ID=local
DEPLOYMENT_ID=local
Dylan
10월 16, 2025, 8:47오전
5
혹시 어느 시점에 저 에러가 노출되나요 ?
렌더링 방식이 SSR이면 안 된다는 걸… 몇 시간 전에 알아서 부랴부랴 CSR로 변경했습니다.
그 상태에서 pc browser에서 localhost에 들어가면 이렇게 출력됩니다.
## Error Type
Runtime Error
## Error Message
deploymentId is not a constant handler
at Providers (components\providers\ClientProviders.tsx:50:5)
at RootLayout (app\layout.tsx:47:9)
## Code Frame
48 | // 클라이언트 사이드에서만 TDSMobileAITProvider 렌더링
49 | return (
> 50 | <TDSMobileAITProvider>
| ^
51 | <ThemeProvider>
52 | <CTAProvider
53 | initialConfig={{
Next.js version: 15.5.3 (Webpack)
지금은 아닌데, 이전에는 샌드박스 앱 내에서도 이 오류가 보이기도 했습니다.
그리고, tds의 컴포넌트들이 Failed to fetch라고 next 오류는 나는데, 렌더링은 돼서 보이는 상황입니다. 이것은.. 전부 제가 csr로 제대로 변경하지 못해서일 수 있을까요?
Dylan
10월 16, 2025, 9:31오전
7
브라우저에서는 접근하지 못하는게 맞아요 deploymentId is not a constant handler 요 에러가 난다는 제보가 있었습니다
1개의 좋아요
감사합니다 ! 확인했습니다!!!
혹시 사용하는 버전도 여쭤도 될까요? 저는 현재 이렇게 사용 중이었는데,
"@toss-design-system/colors": "^0.1.0",
"@toss-design-system/mobile": "2.1.0",
"@toss-design-system/mobile-ait": "2.1.0",
tds 문서를 다시 확인해 보니, 이렇게 불러오더라고요. 그래서 아래로 전부 변경하고, 여기서 사용 중인데,
"@toss/tds-mobile": "^2.1.2",
"@toss/tds-mobile-ait": "^2.1.2",
앱빌더에서 이런 식으로 된 것도 전부 "@toss/tds-mobile" 여기를 참고하면 되는 게 맞나요?
import { ListRow } from '@tds/mobile';
import { Badge } from '@toss/tds-mobile'
둘 다 사용할 수 있는데, 어떤 게 적절한 건지 헷갈려 문의드립니다.
추가로, 공유드립니다. 샌드박스 앱에서 계속 Failed to Fetch 오류는 뜨지만, 렌더링은 되는 하이드레이션 에러가 났는데, 이는 사내망의 문제였던 것 같습니다. 혹시 다른 분들도 비슷한 문제로 질문을 올리실 수도 있을 것 같아 공유드립니다.(저희는 증권 때문에 toss 등 은행, 증권은 다 막혀 있거든요… 여기도 적용될 거라곤 생각도 못했네요.. ㅎㅎ)
감사합니다
Dylan
10월 17, 2025, 6:41오전
9
@toss/tds-mobile 를 사용해주시면 되겠습니다
1개의 좋아요
