컨테이너 줄이기 실습 2

컨테이너의 줄이기 실습

어제 예제를 잘 살펴보자

<div className={modalOverlay}>
    <div className={modalContent({ size })} onClick={(e) => e.stopPropagation()}>
        <Flex align={'center'} justify={'center'} direction={'column'}>
            <Flex align={'center'} justify={'center'} style={{ padding: '16px', width: '100%' }}>
                <Text size={'lg'} weight={'bold'} color={'blue.300'}>
                    {title}
                </Text>
                {additionalButton && <div className={additionalButtonContainer}>{additionalButton}</div>}
            </Flex>
        </Flex>

        <div className={modalBody}>{content}</div>

        <Flex direction={'row'} justify={'center'} gap={'xs'} style={{ padding: '16px' }}>
            {useCloseButton && (
                <Button label={'Close'} onClick={close} type={'button'} style={{ padding: '10px 24px' }} />
            )}
            {leftButton}
            <Flex gap={'sm'}>{rightButton}</Flex>
        </Flex>
    </div>
</div>

위 소스에서 복잡한 구조는 바로 title 부분 이라고 볼 수 있다.

title 은 모달의 정 중앙으로, additionalButton 은 우측 끝으로 정렬하는 과정 이 있었어서 복잡해졌다.

위 구조의 의도는 이렇다.

1. 상단 부모 flex 에 중앙정렬 구조를 잡기
2. 자식 flex 에 가운데 정렬과 padding 값을 주기
3. 글자를 상단 flex 에 의해 중앙에 배치되게 하고 additionalButtonContainer 를 통해 additionalButton 을 우측에 배치

자 이제 문제점을 찾아보자

우선 이 위 2개의 구조를 보면 굳이 최상단 부모 flex 가 왜 있어야 할지 싶다... 두개를 합치자

보면 제목의 p 태그에 쓸때없이 컨테이너가 가 있다.

그리고 굳이 버튼 도 컨테이너로 감쌀 필요가 있을까?..

종합하면, 최상단의 컨테이너를 제거하고, p 와 버튼을 감싸고 있는 컨테이너도 제거하여
이를 하나의 header 컨테이너에 병합시키도록 하자

그렇게 만들면? 아래와 같이 구성할 수 있다.

예쁜 구조의 이쁘니 모달

 <div className={modalOverlay} onClick={handleOuterClick}>
    <div className={modalContent(variants)}>
        <div className={modalHeader}>
            <Text size={'xxl'} weight={'bold'} color={'blue.400'}>
                {title}
            </Text>

            {additionalButton && <div className={additionalButtonContainer}>{additionalButton}</div>}
        </div>

        <div className={modalBody}>{content}</div>

        <div className={modalFooter}>
            {confirmButton}

            {rejectButton}

            <ModalButton label={'Close'} onClick={handleOnClose} />
        </div>
    </div>
</div>

// 스타일

export const additionalButtonContainer = style({
    position: 'absolute',
    right: 0,
});

export const modalHeader = style([flex({ justify: 'center', align: 'center' }), {}]);

export const modalBody = style({
    overflowY: 'scroll',
    margin: '32px 0 48px 0',
});

export const modalFooter = style([flex({ justify: 'between', align: 'center', gap: 'xl', grow: 'wFull' }), {}]);