docs(website): 문서 콘텐츠 추가 및 인라인 코드 스타일링 수정

[ohprettyhak]

Summary

• Button, Colors, Icons, Typography 파운데이션/컴포넌트 문서 콘텐츠 작성
• 사이드바에 20개 컴포넌트 네비게이션 항목 추가
• 인라인 code 태그에 배경, 테두리, 패딩 스타일 추가 (code:not(pre code) 셀렉터)
• Section.Text를 <p>에서 <div>로 변경하여 하이드레이션 에러 수정

Test plan

• pnpm build 성공
• biome check 통과
• 문서 사이트에서 인라인 코드 스타일 확인
• 펜스드 코드 블록 Shiki 하이라이팅 정상 작동 확인

🤖 Generated with Claude Code

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
cocso-ui	Ready	Preview, Comment	Feb 11, 2026 3:11pm
cocso-ui-storybook	Ready	Preview, Comment	Feb 11, 2026 3:11pm

[changeset-bot]

⚠️ No Changeset found

Latest commit: dfc1b67

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

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on base/target branches other than the default branch.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

✨ Finishing touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch docs/foundations-content

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[gemini-code-assist]

Summary of Changes

Hello @ohprettyhak, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

이 PR은 문서 웹사이트의 콘텐츠를 대폭 확장하고 사용자 경험을 개선하는 데 중점을 둡니다. Button, Colors, Icons, Typography와 같은 핵심 파운데이션 및 컴포넌트에 대한 상세한 가이드라인을 추가하여 사용자가 COCSO-UI를 더 쉽게 이해하고 활용할 수 있도록 합니다. 또한, 사이드바 네비게이션을 업데이트하여 새로운 컴포넌트 문서에 대한 접근성을 높였으며, 인라인 코드 블록의 시각적 스타일을 개선하여 코드 예시의 가독성을 향상시켰습니다. 마지막으로, 하이드레이션 관련 잠재적 문제를 해결하여 문서 사이트의 안정성을 확보했습니다.

Highlights

• 문서 콘텐츠 추가: Button, Colors, Icons, Typography 파운데이션 및 컴포넌트에 대한 상세 문서 콘텐츠가 추가되었습니다.
• 사이드바 네비게이션 확장: 사이드바에 20개의 새로운 컴포넌트 네비게이션 항목이 추가되어 문서 접근성이 향상되었습니다.
• 인라인 코드 스타일링 개선: 인라인 code 태그에 배경, 테두리, 패딩 스타일이 추가되어 코드 예시의 가독성이 개선되었습니다.
• 하이드레이션 에러 수정: Section.Text 컴포넌트의 기본 HTML 태그가 <p>에서 <div>로 변경되어 잠재적인 하이드레이션 에러가 수정되었습니다.

🧠 New Feature in Public Preview: You can now enable Memory to help Gemini Code Assist learn from your team's feedback. This makes future code reviews more consistent and personalized to your project's style. Click here to enable Memory in your admin console.

Changelog

• docs/website/content/button.mdx
  • Button 컴포넌트의 variant, size, shape, prefix/suffix, loading, disabled 상태에 대한 상세한 문서 콘텐츠가 추가되었습니다.
• docs/website/content/colors.mdx
  • 색상 팔레트, 시맨틱 색상, 사용 방법에 대한 문서 콘텐츠가 추가되었습니다.
• docs/website/content/icons.mdx
  • 시맨틱 아이콘 및 사용 방법에 대한 문서 콘텐츠와 코드 예시가 추가되었습니다.
• docs/website/content/typography.mdx
  • 폰트 크기, 굵기, 행간에 대한 타이포그래피 문서 콘텐츠가 추가되었습니다.
• docs/website/src/app/globals.css
  • 인라인 code 태그에 배경색, 테두리, 패딩, 폰트 크기 및 굵기 스타일이 적용되었으며, pre code 선택자가 분리되었습니다.
• docs/website/src/components/ui/section.tsx
  • Section.Text 컴포넌트의 기본 HTML 태그가 <p>에서 <div>로 변경되었습니다.
• docs/website/src/constants/sidebar.ts
  • 사이드바의 'Components' 섹션에 20개의 새로운 컴포넌트 문서 링크가 추가되었습니다.

Activity

• pnpm build 성공 여부가 확인되었습니다.
• biome check 통과 여부가 확인되었습니다.
• 문서 사이트에서 인라인 코드 스타일 확인이 예정되어 있습니다.
• 펜스드 코드 블록 Shiki 하이라이팅 정상 작동 확인이 예정되어 있습니다.
• Claude Code를 통해 PR이 생성되었습니다.

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature	Command	Description
Code Review	/gemini review	Performs a code review for the current pull request in its current state.
Pull Request Summary	/gemini summary	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help	/gemini help	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Footnotes

1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

[gemini-code-assist]

Code Review

이 PR은 문서 콘텐츠를 대거 추가하고, 인라인 코드의 스타일을 개선하며, 하이드레이션 오류를 수정하는 등 여러 유용한 변경 사항을 포함하고 있습니다. 전반적으로 코드 변경 사항은 명확하고 목적에 부합합니다. CSS에서 코드 중복을 줄일 수 있는 작은 개선점을 제안했습니다. 좋은 작업입니다!