728x90
반응형
React에서 모달 창을 띄우려고 하는데
바텀모달로 만든게 반복되는게 많다보니 재사용하기 좋도록 컴포넌트로 만들고 문자열들을 props로 전달 받아서
그래서 어떤건 한줄이고 어떤건 두 줄로 나눠서 나올 수 있도록 하였다.
해당 코드는 css는 tailwind css로 작성됨
✅ 하는 방법
{blocker.state === "blocked" ? (
<div className="fixed inset-0 flex items-center justify-center z-50">
<div className="fixed inset-0 bg-black opacity-40"></div>
<TemporarySave
onClose={() => blocker.reset()}
onLater={() => blocker.proceed()}
textHead="나중에 이어서 쓰시겠어요?"
textcontent={`혹시 몰라, 지금까지 쓴 내용을 \n 임시 저장해두었어요.`}
cancleTxt="취소"
okTxt="나중에 쓰기"
/>
</div>
) : null}
textcontent처럼 줄바꿈 하고 싶은 구간에 \n을 추가한 뒤
textcontent 스타일에 whitespace-pre-line을 추가해주었다.
<div className="text-gray-500 text-center text-sm pb-4 whitespace-pre-line">
{textcontent}
</div>
728x90
반응형
'React' 카테고리의 다른 글
[React] react-hook-form과 zod로 validation 유효성 검사 (0) | 2024.11.24 |
---|---|
[React] react-daum-postcode 우편번호, 주소 검색 (2) | 2024.11.15 |
[React]페이지 이탈 시 확인 모달창 띄우기 (0) | 2024.09.13 |
[React]useCallback (0) | 2024.09.03 |
[React] useMemo (2) | 2024.09.03 |