feat: 문서에서 바로 사용해볼 수 있는 Sandpack MDX 컴포넌트 구현

[kangju2000]

Overview

문서에서 codesandbox를 통해 유저가 바로 사용해볼 수 있는 커스텀 Sandpack MDX 컴포넌트를 구현합니다.

현재 ChoseongIncludes 문서에만 적용해두었습니다. 해당 PR이 승인된 후, 문서에 Sandpack을 점진적으로 추가하면 좋을 것 같습니다.

2024-07-26.9.58.06.mov

라이트모드	다크모드

Suspensive 문서에서도 Sandpack이 적용된 모습을 확인할 수 있습니다. (ex. Suspensive의 useSuspenseQuery 문서)

Sandpack 사용성 개선

[AS-IS]

문서를 작성할 때 MDX 파일에서 다음과 같이 files prop에 템플릿 문자열을 넣어야하기 때문에 포맷팅이 되지 않고 가독성이 떨어집니다. toss/slash#191 (comment)

import { Sandpack } from "@codesandbox/sandpack-react";

// ...

<Sandpack
  template="vanilla-ts"
  customSetup={{
    dependencies: {
      'es-hangul': 'latest',
    },
  }}
  files={{
    '/index.ts': {
      code: `import { choseongIncludes } from 'es-hangul';
console.log(choseongIncludes('프론트엔드', 'ㅍㄹㅌ'));`,
      active: true,
    },
  }}
/>

<Sandpack>

[TO-BE]

remark-sandpack 플러그인을 추가하고, 커스텀 Sandpack MDX 컴포넌트를 구현하여 다음과 같이 작성하여 개선합니다.

import { Sandpack } from "@/components/Sandpack";

// ...

<Sandpack>

```ts index.ts active
import { choseongIncludes } from 'es-hangul';

console.log(choseongIncludes('프론트엔드', 'ㅍㄹㅌ'));
```

</Sandpack>

PR Checklist

• I read and included theses actions below

1. I have read the Contributing Guide
2. I have written documents and tests, if needed.

[changeset-bot]

🦋 Changeset detected

Latest commit: 8c97e29

The changes in this PR will be included in the next version bump.

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
es-hangul	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jul 30, 2024 6:56am

[kangju2000]

Sandpack의 로딩 컴포넌트가 export되지 않고 있어 직접 구현했습니다.

[manudeli]

toss/slash#191 (comment) 관련 이슈라 남깁니다

[okinawaa]

감사합니다!!
말씀해주신대로 다른 컴포넌트도 점점 작업되면 좋겠네요 👍

[okinawaa]

간단한 conflict가 발생해서, 제가 해결했습니다! 혹시 문제 있다면, 말씀 부탁드려요!
=> 린트 오류가 발생하네요.. 해결 부탁드립니다 ! 🙏

[codecov-commenter]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 95.18%. Comparing base (506d0fc) to head (8c97e29).

Additional details and impacted files

@@           Coverage Diff           @@
##             main     #200   +/-   ##
=======================================
  Coverage   95.18%   95.18%           
=======================================
  Files          17       17           
  Lines         291      291           
  Branches       67       67           
=======================================
  Hits          277      277           
  Misses         13       13           
  Partials        1        1           

[kangju2000]

간단한 conflict가 발생해서, 제가 해결했습니다! 혹시 문제 있다면, 말씀 부탁드려요! => 린트 오류가 발생하네요.. 해결 부탁드립니다 ! 🙏

@okinawaa
수정 완료했습니다! 확인 부탁드려용🙇‍♂️

[manudeli]

@kangju2000 너무 중요한 기여라고 생각해요...! 온보딩이 훨씬 쉬워질 것 같습니다
다른 toss 라이브러리(es-toolkit, overlay-kit)에도 가능하다면 설정 부탁드립니다! 감사합니다

[okinawaa]

cool 😎
LGTM