Tds toast component 렌더링되지 않는 문제

개발
1

안녕하세요. localhost로 확인 중인데, toast component가 chrome 개발자 창의 element 요소에 아예 표기되지 않아 확인 요청 드립니다.

toast 사용한 코드 - 예제와 아예 똑같이 사용해서 테스트 진행했지만, 보이지 않음.

"use client";
import { Button, Toast } from "@toss-design-system/mobile";
import React from "react";

/** 버튼이 있는 토스트 (하단 전용) */
export default function ToastWithButton() {
  const [open, setOpen] = React.useState(false);

  return (
    <div>
      <Button onClick={() => setOpen(true)}>버튼 토스트 열기</Button>
      <Toast
        position="bottom"
        open={open}
        text="버튼이 포함된 토스트이에요"
        button={
          <Toast.Button onClick={() => alert("clicked")}>확인</Toast.Button>
        }
        duration={3000000000}
        onClose={() => setOpen(false)}
      />
    </div>
  );
}

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"
  },

감사합니다.

2

안녕하세요 :slight_smile:

"use client";
import { Button, Toast } from "@toss/tds-mobile";
import React from "react";

/** 버튼이 있는 토스트 (하단 전용) */
export default function ToastWithButton() {
  const [openBottom, setOpenBottom] = React.useState(false);

  return (
    <div style={{ display: 'flex', flexDirection: 'row', gap: '12px' }}>
      <Button onClick={() => setOpenBottom(true)}>하단 토스트 열기</Button>
      <Toast
        position="bottom"
        open={openBottom}
        text="하단 토스트 메시지이에요"
        duration={3000}
        onClose={() => setOpenBottom(false)}
      />
    </div>
  );
}

위 코드로 실행시, 하단 토스트 메시지가 잘 올라오는 것을 확인하였어요.

    "@apps-in-toss/web-framework": "^1.2.1",
    "@toss/tds-mobile": "^2.1.2",
    "@toss/tds-mobile-ait": "^2.1.2",

버전을 사용했습니다!

3

아, 세상에. 제가 sandbox로 보지도 않고, provider로 감싸지도 않고 여태 개발하고 있었네요… 감사합니다…!!!
와… 그간 pc chrome에서 다 깨졌는데, provider로 감싸고, 샌드박스에서 보니 잘 보이네요… ㅎㅎ 혹시 깨진다는 분이 있다면… 저 같은 상황일 수도 있을 것 같아 공유합니다… 답변 감사합니다!

1개의 좋아요