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

kangju2000 commented 1 month ago

Overview

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

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

https://github.com/user-attachments/assets/3d87a20a-0d76-47cf-b287-7de48646002a

라이트모드	다크모드

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

Sandpack 사용성 개선

[AS-IS]

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

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('프론트엔드', 'ㅍㄹㅌ'));



## PR Checklist

- [x] I read and included theses actions below

1. I have read the [Contributing Guide](https://github.com/toss/es-hangul/blob/main/.github/CONTRIBUTING.md)
2. I have written documents and tests, if needed.

changeset-bot[bot] commented 1 month ago

🦋 Changeset detected

Latest commit: 8c97e29f19ee255115d3adc2770a5174b9e9c221

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[bot] commented 1 month ago

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

manudeli commented 1 month ago

https://github.com/toss/slash/issues/191#issuecomment-1403763599 관련 이슈라 남깁니다

okinawaa commented 1 month ago

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

codecov-commenter commented 1 month ago

Codecov Report

All modified and coverable lines are covered by tests :white_check_mark:

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

Additional details and impacted files

[![Impacted file tree graph](https://app.codecov.io/gh/toss/es-hangul/pull/200/graphs/tree.svg?width=650&height=150&src=pr&token=My9jTW6bSr&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=toss)](https://app.codecov.io/gh/toss/es-hangul/pull/200?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=toss) ```diff @@ 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 commented 1 month ago

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

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

manudeli commented 1 month ago

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

toss / es-hangul