docs: foundation 사용법 문서 작성

[nijuy]

1️⃣ 어떤 작업을 했나요? (Summary)

foundation 사용법을 담은 mdx 문서 초안 작성

2️⃣ 알아두시면 좋아요!

• Color, Icon, Typo 각각의 내용이 그렇게 길지 않아서, 하나의 파일로 작성해봤는데 우떠세용

  (founcdation.mdx 중 Icon 파트에는 IconContext의 내용을 그대로 가져온 상태)

3️⃣ 추후 작업

• PR 리뷰 기반 수정

4️⃣ 체크리스트 (Checklist)

• main 브랜치의 최신 코드를 pull 받았나요?

[Hanna922]

Color 및 Typo 사용 시 형태

import { YDSTheme } from '@yourssu/design-system-react';

interface StyledButtonProps {
  isFilled?: boolean;
}

export const StyledButton = styled.button<StyledButtonProps>`
  height: 34px;
  padding: 8px 32px;
  border: none;
  border-radius: 9999px;
  background-color: ${({ isFilled, theme }: StyledButtonProps & { theme: YDSTheme }) =>
    isFilled ? theme.color.buttonPoint : theme.color.buttonPoint};
  font-style: ${({ theme }: { theme: YDSTheme }) => theme.typo.caption0};
`;

[Hanna922]

YDSTheme 타입을 명시해주지 않으면 기본적인 theme을 가져오기 때문에 TypeError가 와장창 터지는 것 같네용
이렇게 YDSTheme import 후 사용하면 color, typo 다 정상적으로 가져와져요!

적용 전

적용 후

[nijuy]

오.. 사용처에서 YDSTheme 타입이라고 매번 선언해주는 건 너무 불편한 거 같은데, YDS-React에서 해결할 순 없을까요?

YDSThemeProvider.tsx 보면 theme이 YDSTheme 타입으로 선언은 되는데, ThemeProvider 인자로 넣으면서 타입을 잃어버리는 거 같...걸랑요

ThemeProvider.tsx 주석 보면 DefaultTheme 타입을 오버라이딩 하는 방법으로 해결해볼 수 있을 거 같은데 좀만 더 알아볼게용

/**
 * Override DefaultTheme to get accurate typings for your project.
 *
 * ```
 * // create styled-components.d.ts in your project source
 * // if it isn't being picked up, check tsconfig compilerOptions.types
 * import type { CSSProp } from "styled-components";
 * import Theme from './theme';
 *
 * type ThemeType = typeof Theme;
 *
 * declare module "styled-components" {
 *  export interface DefaultTheme extends ThemeType {}
 * }
 *
 * declare module "react" {
 *  interface DOMAttributes<T> {
 *    css?: CSSProp;
 *  }
 * }
 * ```
 */

[Hanna922]

오 저도 매번 선언해주는 건 불편한 것 같아요!! 근데 궁금한 점이 theme 자체를 오버라이딩 하게 되면 YDS 컬러랑 일반적인(다른) 컬러랑 동시에 사용하고 싶을 때는 혹쉬 DefaultTheme을 어떻게 사용할 수 있을까욥..??
=> 저도 좀 더 알아보겠슴다!!

[nijuy]

다른 컬러 = YDS에 정의되지 않은 컬러가 맞나요?
그렇다면 그 색상은 theme을 통해 불러올 수 없으니까 (theme.color에 정의된 게 아니니까)
그냥 헥사코드 그대로 사용해야 할 거라고 이해했는데 이게 지금 질문을 이해한 답변인지..................................

그리고 저 오버라이딩을 YDS-React에서 해서 내보내면 될 거 같았는데 ㅠ 사용처에서 해야 하는 거 같아욕

[Hanna922]

옹 그렇네요👀👀 오버라이딩 된다면 해당 부분에 추가적인 속성을 정의했을 때 의도한대로 동작할 것 같아용!

[nijuy]

사용처에서 styeld-component.d.ts 만드는 걸로 가닥이 잡힌 거 같은데 ........ 맞다면 여기 어푸루브 해주시면 합쳐둘게요~! ^ㅅ^

[Hanna922]

엇 저는 타입 에러 터질 때 작동도 안 했었어서..! import 하는 방식이랑 styled.d.ts 만드는 거 둘 다 적어두면 좋을 것 같은데 어떻게 생각하시나용??

[nijuy]

타입 에러가 발생했다 = foundation or semantic name에서 오타남 = 작동 안 하는 게 정상이라고.... 생각햇습니다.........
이 상황에서 작동을 할 수가 없지 않나요..?! （⊙ｏ⊙）

style.ts 내에서 직접 import 하는 방식은 styled.d.ts 파일 생성으로 대체할 수 있고,
사실 권장하는.... 방법이 아니니까..... 후자만 적어도 좋을 거 같다고 생각합니다~~!!!

[nijuy]

[Hanna922]

짱짱 수고하셨숩니당~!!!!!