React style 적용

조별 프로젝트 진행에 앞서
컴포넌트를 각자 맡아
리액트 스타일을 적용해보고 있는데

코드를 import React from "react";
import styled from "styled-components";
import color from "../../../styles/color";

const SlayOut = styled.footer`
  width: 100%;
  height: 600px;
  padding: 35px 0 0;
  background-color: ${color.gray6};
  color: ${color.gray1};
`;

const Sfooter = styled.div`
  display: flex;
  flex-direction: space-between;
  justify-content: space-between;
  padding:0 2%;
`;

const Stitle = styled.div`
  font-family: "Playfair Display", serif;
  font-weight: 700;
  font-size: 60px;
  align-items: center;
`;

const Sul = styled.ul`
  display: flex;
  justify-content: space-between;
  list-style: none;
  font-size: 14px;
  line-height: 2;
`;

const Sul2 = styled.ul`
  width: 100%;
  display: flex;
  justify-content: space-between;
  list-style: none;
  font-size: 20px;
  font-weight: 600;
  border-bottom: 1px solid ${color.gray1};
`;

const Sli = styled.li`
  padding: 0 20px;
`;

const Sb = styled.b`
  font-size: 24px;
  font-weight: 600;
`;

const Snav = styled.div`
  width: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
`;

const Sul3 = styled.ul`
width: 100%;
  display: flex;
  justify-content: space-between;
  list-style: none;
  font-size: 14px;
`;
const Sli3 = styled.li`
`;

function Footer() {
  return (
    <SlayOut>
      <Sfooter>
        <Stitle>value shop</Stitle>
        <Sul>
          <Sli>
            고객센터 <br />
            <Sb>1234-1234</Sb>
            <br />
            운영시간 : 09:00~17:30
            <br />
            점심시간 12:00~13:00
            <br />
            (공휴일, 주말은 휴무입니다.)
          </Sli>
          <Sli>
            상호 : ㈜valueshare | 대표 : 엘리스
            <br />
            개인정보보호책임자 : 엘리스 | elice@test.com
            <br />
            주소 : 세종특별자치시 엘리스면 토끼동 <br />
            사업자등록번호 : 123-12-12345 [사업자정보확인] <br />
            통신판매업신고번호 : 2023-엘리스-0213
          </Sli>
        </Sul>
      </Sfooter>
      <Snav>
        <Sul2>
          <li>Home</li>
          <li>Shop</li>
          <li>Product</li>
          <li>Membership</li>
        </Sul2>
      </Snav>
	  <Sfooter>
      <Sul3>
        <Sli3>
			ⓒCopyright 2023. All rights reserved.
		</Sli3>
        <Sli3>
          개인정보취급방침
          소비자피해보상보험
          청소년보호정책
          이용정책
        </Sli3>
      </Sul3>
	  </Sfooter>
    </SlayOut>
  );
}

export default Footer;
입력하세요

일일이 const로 태그 걸어서 하니까 태그 const도 너무 많아지고
태그 걸어야하는게 너무 많아져야 한다는 불편함을 느낌...ㅠ

그래서 좀 더 단순화하는 방법 없을까 찾다가
styled-component라고

const Wrapper = styled.div`
	...
    div {
    	margin-bottom:24px;
        
        :last-child {
        	margin-bottom:0;
        }
    }
   
`;

전체를 감싸고 있는 최상위 div에서 임의로 선택자를 줘서
css를 적용시킬 수 있는 방법이라고한다.

코드를 import React from "react";
import styled from "styled-components";
import color from "../../../styles/color";

const SlayOut = styled.footer`
  width: 100%;
  height: 600px;
  padding: 35px 0 0;
  background-color: ${color.gray6};
  color: ${color.gray1};
`;

const Sfooter = styled.div`
  display: flex;
  flex-direction: space-between;
  justify-content: space-between;
  padding:0 2%;

  h2{
	font-family: "Playfair Display", serif;
	font-weight: 700;
	font-size: 60px;
	align-items: center;
  }
`;

const SfooterUl = styled.ul`
  display: flex;
  justify-content: space-between;
  list-style: none;
  font-size: 14px;
  line-height: 2;

  li{
	padding: 0 20px;
  }

  b{
	font-size: 24px;
	font-weight: 600;
  }
`;

const SfooterUl2 = styled.ul`
  width: 100%;
  display: flex;
  justify-content: space-between;
  list-style: none;
  font-size: 20px;
  font-weight: 600;
  border-bottom: 1px solid ${color.gray1};
`;


const Snav = styled.div`
  width: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
`;

const SfooterUl3 = styled.ul`
width: 100%;
  display: flex;
  justify-content: space-between;
  list-style: none;
  font-size: 14px;

  li{

  }
`;


function Footer() {
  return (
    <SlayOut>
      <Sfooter>
        <h2>value shop</h2>
        <SfooterUl>
          <li>
            고객센터 <br />
            <b>1234-1234</b>
            <br />
            운영시간 : 09:00~17:30
            <br />
            점심시간 12:00~13:00
            <br />
            (공휴일, 주말은 휴무입니다.)
          </li>
          <li>
            상호 : ㈜valueshare | 대표 : 엘리스
            <br />
            개인정보보호책임자 : 엘리스 | elice@test.com
            <br />
            주소 : 세종특별자치시 엘리스면 토끼동 <br />
            사업자등록번호 : 123-12-12345 [사업자정보확인] <br />
            통신판매업신고번호 : 2023-엘리스-0213
          </li>
        </SfooterUl>
      </Sfooter>
      <Snav>
        <SfooterUl2>
          <li>Home</li>
          <li>Shop</li>
          <li>Product</li>
          <li>Membership</li>
        </SfooterUl2>
      </Snav>
	  <Sfooter>
      <SfooterUl3>
        <li>
			ⓒCopyright 2023. All rights reserved.
		</li>
        <li>
          개인정보취급방침
          소비자피해보상보험
          청소년보호정책
          이용정책
        </li>
      </SfooterUl3>
	  </Sfooter>
    </SlayOut>
  );
}

export default Footer;
입력하세요

적용해보니까 확실히 코드도 깔끔해지고 간결해졌다 ㅠㅠ
선택자 꼭 사용하세요 완전 편함..