feature: foundation 설정

[asdf99245]

👀 What is this PR?

foundation 설정을 했습니다 👍

typography + color + icon 설정했고 foundation 내 border-radius, divder는 따로 설정할건 없어서 제외했음!

📝 Changes

Typography

• Pretendard는 subset font로 woff2 사용

• font display 방식은 FOUT 정책으로 swap 으로 고정했어.

• tailwind classname 확장으로 font family, font size classname을 추가했는데 font-family랑 font-size를 합치진 못하더라
  합쳐서 사용할 수 있으면 좋긴한데 일단 당장엔 classname에 font랑 size 따로 세트로 명시해줘야해 -> font-pretendard text-main-headline

• typography 컴포넌트를 따로 만들까하다가 일단 button같은경우는 button 태그에 바로 스타일 입혀줘야하니깐 애매해서 보류했어

• font는 font-pretendard, font-montserrat 이거 두가지 쓰면됨! -> 이제 필요한 경우가 아니면 따로 명시해줄 필요는 없음!

• typography를 이중에 사용하면 됨!
  text-main-headline, text-sub-headline, text-body1, text-body2, text-body2-accent, text-caption, text-button1, text-button2, text-accent-eng, text-body-eng, text-caption-eng

개인적으로 naming 맘에 안들긴 한데(특히 영문일때) 일단 아래 사진대로 참고해서 지어놨어

더 좋은 방법 있으면 개선해보자 🙌

tailwind classname 확장으로 font family, font size classname을 추가했는데 font-family랑 font-size를 합치진 못하더라
합쳐서 사용할 수 있으면 좋긴한데 일단 당장엔 classname에 font랑 size 따로 세트로 명시해줘야해 -> font-pretendard text-main-headline

개선해서 합쳤어 👍 테일윈드 플러그인으로 component class를 정의할 수 있어서 새로운 컴포넌트 유틸리티 class를 추가했고 하나의 class에 글꼴 + size를 함께 정의해줬어

  plugins: [
    plugin(function ({ addComponents, theme }) {
      addComponents({
        '.text-main-headline': {
          fontFamily: theme('fontFamily.pretendard'),
          fontSize: '1.25rem',
          fontWeight: '700',
        },
        // ...
      )
]

이제 요렇게 쓰면 돼 -> text-{설정한 custom class명}

<p className='text-main-headline'>이건 메인 헤드라인이에요 Pretendard</p>

Color system

아직 grayscale 밖에 없어서 이렇게 설정했어
classname 예시:

• 배경색: bg-primary, bg-grayscale-100,
• 텍스트색: text-primary
• svg색: fill-grayscale-700

// tailwind.config.js
theme: {
    extend: {
      colors: {
        primary: '#202020',
        grayscale: {
          100: '#F3F3F3',
          200: '#E8E8E8',
          300: '#BCBCBC',
          400: '#797979',
          500: '#3F3F3F',
          600: '#202020',
          700: '#1B1717',
        },
      },
    },
  },

Icon

icon을 사용하기 쉽게 Icon 컴포넌트를 구현했어

Icon 사용법

<Icon iconType='Edit' />

• 기본적으로 iconType props는 required야 사용하는 svg icons들이 property에 잡히게 해놓았어 그중에 고르면 돼
  이런식으로 힌트가 뜹니닷
  
• 나머지는 svg element가 가지고 있는 property 모두 전달할 수 있어
  • size를 변경하고 싶을 시 width, height property 전달
  • color를 변경하고 싶을 시 color property 전달
  • 이외 svg element property 모두 전달 가능
  • 아마 color같은건 classname으로 커스텀하는게 더 편할꺼야
• default color는 디자인 상과 일치하게 grayscale 500으로 setting
• width, height는 right arrow 제외하고 모두 default 24인데 right arrow일 때에만(이건 가로가 더 길더라) width만 default 40으로 setting

기타

일단 type, component, folder 컨벤션 내가 편한대로 하긴했는데 이대로 따라가도 좋고 맞춰도 좋고! 🙌

📌 Related issue(s)

• close feature: foundation 설정 #5

📷 Attachment(optional)

[github-actions]

Thanks for the contribution!
I have applied any labels matching special text in your title and description.

Please review the labels and make any necessary changes.

[bsy1141]

와아 이야 대박..!!! 근데 components 하위에 shared 폴더는 무슨 역할일지 궁금합니더

[asdf99245]

나는 shared 폴더에 앱 내 공통으로 쓰이는 컴포넌트 정의한다고 생각했어!