export const St = {
  CardContainer: styled.div`
    display: flex;
    justify-content: center;
    background-color: ${theme.colors.orange};
    height: 100vh;
  `,};

Styled-Component 의 장점: 재사용이 가능하다! St 객체로 컴포넌트를 감싼 뒤, export 해 보는 건 어떨까요?? :)

return (
    <St.CardContainer> // 사용 시엔 객체니까 St. 으로 접근해주면 돼요!! 
      {isLoading ? (
        <St.SkeletonCard></St.SkeletonCard>
      ) : isError ? (
        <>Not Found</>
      ) : (
        <St.Card>

• 컴포넌트 최상단에 감싸는 것은 St{컴포넌트명}Wrapper.

• rem 단위만 사용하기

  ex) 112px → 11.2rem

  3-3. image(png)/svg 사용법

  1. src 폴더 > icons 폴더 > svg 파일 추가

  

  2. src 폴더 > icons 폴더 > index.ts 에 다음과 같이 추가

  import IcUp from './ic_up.svg?react';
  import IcTime from './ic_time.svg?react';
  
  export {
    IcUp,
    IcTime,
  ...};
  

  3. 컴포넌트에서 사용하는 법

  import { IcUp, IcTime } from '../../assets/icons';
  
  <IcUp />
  <IcTime />