feat: add codesandbox example

[minsoo-web]

Overview

closed #7

Points to discuss

theme

I have selected the theme as atom dark. Attach a link to the page that lists the available themes: https://sandpack.codesandbox.io/docs/getting-started/themes

Sandpack Component abstraction

It's hard to use autocomplete in MDX because there is no type inference. I had a choice between constraining the interface to only accept code, and leaving the interface open to modify whenever needed, and I chose the latter.

Once I get this PR review, I'll look for improvements, fix them, and apply them to all articles in bulk.

PR Checklist

• [x] I did below actions if need

1. I read the Contributing Guide
2. I added documents and tests.

[changeset-bot[bot]]

⚠️ No Changeset found

Latest commit: 153777fc7892c7ae93bcaed4809b156c4c700549

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

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

[vercel[bot]]

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

Name	Status	Preview	Comments	Updated (UTC)
beta	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Apr 28, 2024 8:44pm
main	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Apr 28, 2024 8:44pm

1 Ignored Deployment

Name	Status	Preview	Comments	Updated (UTC)
visualization	⬜️ Ignored (Inspect)	Visit Preview		Apr 28, 2024 8:44pm

[codecov[bot]]

Codecov Report

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

Project coverage is 83.87%. Comparing base (2891f87) to head (153777f).

Additional details and impacted files

@@           Coverage Diff           @@
##             beta     #867   +/-   ##
=======================================
  Coverage   83.87%   83.87%           
=======================================
  Files          31       31           
  Lines         428      428           
  Branches       98       97    -1     
=======================================
  Hits          359      359           
  Misses         61       61           
  Partials        8        8           

Components	Coverage Δ
@suspensive/react	96.98% <ø> (ø)
@suspensive/react-query	0.00% <ø> (ø)
@suspensive/react-await	100.00% <ø> (ø)
@suspensive/react-image	23.52% <ø> (ø)

[manudeli]

https://github.com/toss/slash/issues/191#issuecomment-2106271462 Check this out please

[manudeli]

Rebase is needed before doing this (https://github.com/suspensive/react/pull/867#issuecomment-2106272074)

[manudeli]

Could we do this soon?

It doesn't necessarily have to be like react.dev, so it might be a good idea to aim to add playground first.

[manudeli]

@kangju2000 @minsoo-web Make and share plan to implement this feature on https://suspensive.org please

[manudeli]

@minsoo-web I close this Pull Request to assign this work to @kangju2000 Your pull request closed but you initiate this issue too! So much thanks! 🙇