diff --git a/src/components/CodeBlock/CodeBlock.stories.tsx b/src/components/CodeBlock/CodeBlock.stories.tsx
new file mode 100644
index 0000000..19ae863
--- /dev/null
+++ b/src/components/CodeBlock/CodeBlock.stories.tsx
@@ -0,0 +1,18 @@
+import { Meta, StoryObj } from "@storybook/react";
+
+import { CodeBlock } from "./CodeBlock";
+
+const meta: Meta<typeof CodeBlock> = {
+  title: "CodeBlock",
+  tags: ["autodocs"],
+  component: CodeBlock,
+};
+
+export default meta;
+type Story = StoryObj<typeof CodeBlock>;
+
+export const Variants: Story = {
+  args: {
+    code: ["`git` add README.md"],
+  },
+};
diff --git a/src/components/CodeBlock/CodeBlock.tsx b/src/components/CodeBlock/CodeBlock.tsx
index 4a7c6d7..73c3f95 100644
--- a/src/components/CodeBlock/CodeBlock.tsx
+++ b/src/components/CodeBlock/CodeBlock.tsx
@@ -1,10 +1,12 @@
 import { container } from "./CodeBlock.css";
 
 interface CodeBlockProps {
+  /** 코드 블록 내부 코드의 내용입니다. 배열 요소별로 줄바꿈이 적용됩니다. */
   code: string[];
   className?: string;
 }
 
+/** CodeBlock은 코드 블록의 용도로 사용되는 컴포넌트입니다. 코드 블록 요소 내부에 있는 백틱(``)으로 감싸진 부분에 코드 하이라이팅이 적용됩니다.  */
 export function CodeBlock({ code, className = "" }: CodeBlockProps) {
   return (
     <p