Add use client directive at top of client-component files

[nayounsang]

components that use react hook or memo...

Self Checklist

• [x] I wrote a PR title in English and added an appropriate label to the PR.
• [x] I wrote the commit message in English and to follow the Conventional Commits specification.
• [x] I added the changeset about the changes that needed to be released. (or didn't have to)
• [x] I wrote or updated documentation related to the changes. (or didn't have to)
• [x] I wrote or updated tests related to the changes. (or didn't have to)
• [x] I tested the changes in various browsers. (or didn't have to)
  • Windows: Chrome, Edge, (Optional) Firefox
  • macOS: Chrome, Edge, Safari, (Optional) Firefox

Related Issue

close #2456

Summary

• Add use client directives

Details

• I add use client directives to all component filds
• I didn't see any code that used the window API.
• I am not sure about files that Radix exports without additional logic.
  • As suggested in the comments, I tested it in the code sandbox and found no problems.
  • Currently, directives have been added including this one. When I checked, I saw that hooks, etc. were used in the internal implementation.

    
    // page.tsx
    import * as Dialog from "@radix-ui/react-dialog";
    import * as Tooltip from "@radix-ui/react-tooltip";
    import * as Separator from "@radix-ui/react-separator";
    import * as Switch from "@radix-ui/react-switch";
    import * as VisuallyHidden from "@radix-ui/react-visually-hidden";

export default function Home() { return (

{/* code with radix-ui ...*/}

); }

- Add the changeset
- To ignore `Module level directives cause errors when bundled` warnings, I returned onWarn early when the warning appeared.It seemed appropriate to write it inside the `generateConfig`.

### Breaking change? (Yes/No)

<!-- If Yes, please describe the impact and migration path for users -->
No

## References

<!-- Please list any other resources or points the reviewer should be aware of -->
https://github.com/remix-run/remix/issues/8891
https://github.com/rollup/rollup/issues/4699

[changeset-bot[bot]]

🦋 Changeset detected

Latest commit: c5f601f9093f28d9697bc75bce4d5989cc7bd0e0

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

This PR includes changesets to release 2 packages

| Name | Type | | ------------------------ | ----- | | @channel.io/bezier-react | Minor | | bezier-figma-plugin | Patch |

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

[channeltalk[bot]]

https://desk.channel.io/#/channels/1/team_chats/groups/1237/6720b09ab4c80d2bd6dc

[github-actions[bot]]

Chromatic Report

🚀 Congratulations! Your build was successful!

• Storybook Preview
• Chromatic Build

[codecov[bot]]

Codecov Report

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

Project coverage is 83.28%. Comparing base (3954134) to head (c5f601f). Report is 1 commits behind head on main.

Additional details and impacted files

```diff @@ Coverage Diff @@ ## main #2468 +/- ## ======================================= Coverage 83.28% 83.28% ======================================= Files 141 141 Lines 2943 2943 Branches 912 912 ======================================= Hits 2451 2451 - Misses 462 487 +25 + Partials 30 5 -25 ```

:umbrella: View full report in Codecov by Sentry.
:loudspeaker: Have feedback on the report? Share it here.

[nayounsang]

1. Self Checklist를 체크해주시고, 담당자와 라벨을 추가해주시면 감사하겠습니다. (잘 안되시면 알려주세요)
2. radix-ui등 서드파티 라이브러리를 사용하는 컴포넌트에 use client 지시어 추가 여부가 확실치 않다면, code sandbox 등에서 Next.js App Router 셋팅 후 import하여 테스트해보면 좋을 거 같습니다!

넵. 피드백 감사합니다. 2번의 경우 진행해보고 말씀드리겠습니다. 1번은 제가 assigness와 label 설정이 안됩니다!

[nayounsang]

@sungik-choi 확인 부탁드립니다~ PR 메시지에 체크박스에 대해 궁금한 점도 적었습니다.(완료시 삭제 예정)

[yangwooseong]

changeset 은 붙이는 게 좋을 것 같습니다! 마이너 버전 업으로 하는게 어떨까요? 추가하고 체크리스트 전부 확인하시고 괜찮으면 체크까지 해주세요.

혹시 어떤 기준으로 use client를 사용하셨나요? 문서를 찾아보니 ref forwarding 이나 컨텍스트를 사용하는 곳에서도 use client 를 추가하는게 맞는 것 같아서요. nextjs로 테스트 해보니 AlphaDialogPrimitive 를 사용하거나 Text 같이 이벤트 핸들러가 없는 컴포넌트라도 ref forwarding 을 하면 에러가 뜹니다. 그래서 모든 컴포넌트에 붙여야 하지 않나 생각이 듭니다.

https://react.dev/reference/rsc/use-client#using-third-party-libraries

[sungik-choi]

@sungik-choi 확인 부탁드립니다~ PR 메시지에 체크박스에 대해 궁금한 점도 적었습니다.(완료시 삭제 예정)

• I think didn't have to 라면 체크해주시면 됩니다!
• Is there a way to use the package with the changes reflected directly in next? : 따로 스냅샷 배포 등을 진행하진 않고 있어서 이 PR의 변경사항이 포함되고나서 다음 배포 버전에서 사용 가능합니다. 미리 테스트해보고 싶으시다면 로컬에서 패키지 경로를 바꿔 테스트할 수 있습니다.

[nayounsang]

changeset 은 붙이는 게 좋을 것 같습니다! 마이너 버전 업으로 하는게 어떨까요? 추가하고 체크리스트 전부 확인하시고 괜찮으면 체크까지 해주세요.

혹시 어떤 기준으로 use client를 사용하셨나요? 문서를 찾아보니 ref forwarding 이나 컨텍스트를 사용하는 곳에서도 use client 를 추가하는게 맞는 것 같아서요. nextjs로 테스트 해보니 AlphaDialogPrimitive 를 사용하거나 Text 같이 이벤트 핸들러가 없는 컴포넌트라도 ref forwarding 을 하면 에러가 뜹니다. 그래서 모든 컴포넌트에 붙여야 하지 않나 생각이 듭니다.

https://react.dev/reference/rsc/use-client#using-third-party-libraries

아~ forwardRef 는 제가 잘못 알고 있었네요. 그럼 모든 컴포넌트에 붙히도록 하겠습니다. 컴포넌트가 많다보니 컨텍스트나 훅을 사용해도 제가 빼먹은게 생겼네요...!!

[sungik-choi]

LGTM 기여 감사드립니다!