카테고리 없음
교보문고 공통 컴포넌트 + ToastMessage 만들기!
jhdev-code
2025. 4. 13. 21:01
아래는 실제 교보문고 모달과 ToastMessge다.
공통 컴포넌트를 만들기 전에는, 로그인 후 이용할 수 있다는 모달 컴포넌트만 만들었었다.
처음에 만들었던 모달 컴포넌트는 위의 이미지처럼 로그인 후 이용할 수 있다는 모달이였는데, 장바구니 버튼을 눌렀을 때도 모달이 나온다는걸 알고 장바구니 모달도 만들려고 했었다.
이런 식으로 진행을 하면, 시간이 오래 걸리고 힘들 것 같다는 생각에 교보문고 홈페이지에 들어가서 어떤 버튼을 누를 때 어떤 모달이 나오는지 확인을 하고, 공통 컴포넌트를 만들어야겠다는 생각을 했다.
`
//src/app/components/modalsGenericModal.tsx
import styles from "./Generic.module.css"
type ModalProps = {
title: string; // 1줄 텍
description?: string; // 2줄 텍
confirmText?: string; // 확인 버튼
cancelText?: string; // 취소 버튼
onClose: () => void; // 닫기/취소 동작
onConfirm?: () => void; // 확인
}
export default function GenericModal({
title,
description,
confirmText = '확인',
cancelText = '취소',
onConfirm,
onClose
}: ModalProps) {
return (
<div className={styles.modal_overlay}>
<div className={styles.modal_box}>
<div></div>
<div
className={`${styles.dialog_wrap} ${styles.dialog_content} ${styles.dialog_content} ${styles.pd} ${styles.por}`}>
<div className={`${styles.dialog_contents} ${styles.contents_move}`}>
<span className={`${styles.text}`}>{title}</span>
<span className={`${styles.text_sm}`}>{description}</span>
</div>
<div className={`${styles.dialog_footer}`}>
<button type="button"
onClick={onClose}
className={`${styles.btn_md} ${styles.btn_common} ${styles.btn_class} ${styles.btn_gray}`}>
<span className={styles.text_class}>{cancelText}</span>
</button>
<button type="button"
onClick={onConfirm}
className={`${styles.btn_md} ${styles.btn_common} ${styles.btn_class} ${styles.ml_6} ${styles.btn_primary}`}>
<span className={styles.text_class}>{confirmText}</span>
</button>
</div>
</div>
</div>
</div>
)
}
`
ToastMessage 컴포넌트
교보문고 홈페이지에서 로그인 후, 찜 버튼을 누르면 보라색으로 토스트 메시지가 나오는데, 다른 버튼에서도 사용이 될 수 있을 것같아서 혹시 몰라 미리 공통 컴포넌트로 만들었다.
