[TIL] 2022-11-03

여태까지 스타일드컴포넌트 쓸 때 "스타일드컴포넌트"만 쓰고 있었다는 사실을 깨달았다!
커다란 밖의 틀을 스타일드컴포넌트로 감싸놓고 그 밑의 각각의 중복되는 스타일을 가진 태그들을 따로 스타일드컴포넌트로 바꾸지 않고 className을 달아서 그 안에 &와 .의 클래스선택자로 선택하여 스타일을 조정하면! 훨씬 보기 간편하고 쉬워지는 거였는데!
왜 누가 말해주기 전까지는 모를까...🤔

import { CWrapper, MWrapper } from './style';

return (
  <CWrapper>
  	<Panel
      header={
        <div>
          <div className="year-month">{`${data.contents[0].transferYm} (${data.contents[0].depositItems.length})`}</div>
          <div className="align">
            <div className="money-info">매출액: {data.contents[0]}</div>
            <div className="money-info">수수료: {data.contents[0]}</div>
            <div className="money-info">입금액: {data.contents[0]}</div>
           </div>
          </div>
        }
      >
          <div className="company-name">({anyTypeItem.companyName})</div>
            <MWrapper
              title={`${data.contents[0].transfer.transferYm} 입금정보`}
              visible={isModalOpen}
              onOk={handleOk}
              onCancel={handleCancel}
            >
              <div>
                <div className="title">
                  <span>&bull;&nbsp;&nbsp;&nbsp;매출액</span>
                  <span>{dataDetail ? dataDetail.transferAmt : 0}원</span>
               </div>
               <div className="content">
                <div className="left-margin">&bull;&nbsp;&nbsp;&nbsp;식대 금액</div>
                  <span>{dataDetail ? dataDetail.mealAmt : 0}원</span>
                </div>
              </div>
              <div className="warning">
                !!!!! WARNING !!!!!
              </div>
            </MWrapper>
          </div>
        }
      />
    </Panel>
  </CWrapper>
);

import styled from 'styled-components';

export const CWrapper = styled.div`
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;

  & .align {
    display: flex;
    padding-top: 10px;
  }

  & .year-month {
    font-weight: 700;
    font-size: 18px;
    line-height: 18px;
  }

  & .money-info {
    font-weight: 400;
    font-size: 12px;
    line-height: 18px;
    margin-right: 15px;
  }

  & .company-name {
  }
`;

export const MWrapper = styled(Modal)`
  text-align: center;

  flex-direction: column;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;

  & .title {
    display: flex;
    justify-content: space-between;
  }

  & .content {
    font-size: 12px;
    line-height: 18px;
    display: flex;
    justify-content: space-between;
  }
  & .left-margin {
    margin-left: 20px;
  }

  & .warning {
    font-weight: 700;
    font-size: 14px;
    line-height: 20px;
    padding-top: 25px;
    padding-bottom: 25px;
  }
`;