교보문고 공통 컴포넌트 + ToastMessage 만들기!

 

아래는 실제 교보문고 모달과 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 컴포넌트

교보문고 홈페이지에서 로그인 후, 찜 버튼을 누르면 보라색으로 토스트 메시지가 나오는데, 다른 버튼에서도 사용이 될 수 있을 것같아서 혹시 몰라 미리 공통 컴포넌트로 만들었다.

 

 

 

 

Toast Message 참고 블로그

https://brunch.co.kr/@kzmgy/39

https://velog.io/@seungmimi/javascript%ED%86%A0%EC%8A%A4%ED%8A%B8-%ED%8C%9D%EC%97%85-%EA%B5%AC%ED%98%84%ED%95%98%EA%B8%B0