From b2eb111e0ce94b1a4d54782ad86eb196c3d8018d Mon Sep 17 00:00:00 2001 From: areumH Date: Thu, 14 May 2026 20:36:56 +0900 Subject: [PATCH 1/8] =?UTF-8?q?rename:=20Code.types.ts=20=E2=86=92=20code.?= =?UTF-8?q?types.ts=20=ED=8C=8C=EC=9D=BC=EB=AA=85=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/jds/src/components/Code/{Code.types.ts => code.types.ts} | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename packages/jds/src/components/Code/{Code.types.ts => code.types.ts} (100%) diff --git a/packages/jds/src/components/Code/Code.types.ts b/packages/jds/src/components/Code/code.types.ts similarity index 100% rename from packages/jds/src/components/Code/Code.types.ts rename to packages/jds/src/components/Code/code.types.ts From fc8eb87ca34177fc4735d74d99a2d159212f5cf4 Mon Sep 17 00:00:00 2001 From: areumH Date: Thu, 14 May 2026 20:37:17 +0900 Subject: [PATCH 2/8] =?UTF-8?q?refactor:=20Code=20=EC=BB=B4=ED=8F=AC?= =?UTF-8?q?=EB=84=8C=ED=8A=B8=20VE=20=EB=A7=88=EC=9D=B4=EA=B7=B8=EB=A0=88?= =?UTF-8?q?=EC=9D=B4=EC=85=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../jds/src/components/Code/Code.styles.ts | 44 ------------------- packages/jds/src/components/Code/Code.tsx | 10 +++-- packages/jds/src/components/Code/code.css.ts | 29 ++++++++++++ .../jds/src/components/Code/code.types.ts | 4 -- packages/jds/src/components/Code/index.ts | 2 +- 5 files changed, 36 insertions(+), 53 deletions(-) delete mode 100644 packages/jds/src/components/Code/Code.styles.ts create mode 100644 packages/jds/src/components/Code/code.css.ts diff --git a/packages/jds/src/components/Code/Code.styles.ts b/packages/jds/src/components/Code/Code.styles.ts deleted file mode 100644 index 1443725f7..000000000 --- a/packages/jds/src/components/Code/Code.styles.ts +++ /dev/null @@ -1,44 +0,0 @@ -import isPropValid from "@emotion/is-prop-valid"; -import type { Theme } from "@emotion/react"; -import styled from "@emotion/styled"; - -import type { CodeSize, CodeStyleProps } from "./Code.types"; - -export const codeTypographyMap: Record = { - lg: "semantic-textStyle-syntax-lg", - md: "semantic-textStyle-syntax-md", - sm: "semantic-textStyle-syntax-sm", - xs: "semantic-textStyle-syntax-xs", -}; - -export const getCodeColors = (theme: Theme) => { - return { - bg: theme.color.semantic.fill.subtlest, - border: theme.color.semantic.stroke.alpha.assistive, - color: theme.color.semantic.object.bold, - }; -}; - -export const StyledCode = styled("code", { - shouldForwardProp: prop => isPropValid(prop) && !prop.startsWith("$"), -})(({ theme, $size }) => { - const codeTypographyKey = codeTypographyMap[$size]; - const codeColors = getCodeColors(theme); - const textStyle = theme.textStyle[codeTypographyKey as keyof typeof theme.textStyle]; - - return { - display: "inline-flex", - alignItems: "center", - - padding: `${theme.scheme.semantic.spacing[0]} ${theme.scheme.semantic.spacing[6]}`, - - borderRadius: theme.scheme.semantic.radius[4], - background: codeColors.bg, - - border: `1px solid ${codeColors.border}`, - color: codeColors.color, - - cursor: "text", - ...textStyle, - }; -}); diff --git a/packages/jds/src/components/Code/Code.tsx b/packages/jds/src/components/Code/Code.tsx index 25f2f9c5e..ac63a04d0 100644 --- a/packages/jds/src/components/Code/Code.tsx +++ b/packages/jds/src/components/Code/Code.tsx @@ -1,11 +1,13 @@ -import { StyledCode } from "./Code.styles"; -import type { CodeProps } from "./Code.types"; +import { clsx } from "clsx"; + +import * as styles from "./code.css"; +import type { CodeProps } from "./code.types"; export const Code = ({ children, size = "md", className, ...restProps }: CodeProps) => { return ( - + {children} - + ); }; diff --git a/packages/jds/src/components/Code/code.css.ts b/packages/jds/src/components/Code/code.css.ts new file mode 100644 index 000000000..5ba90809c --- /dev/null +++ b/packages/jds/src/components/Code/code.css.ts @@ -0,0 +1,29 @@ +import { recipe } from "@vanilla-extract/recipes"; +import { vars } from "tokens"; +import type { CodeSize } from "./code.types"; + +export const codeTypographyClassName: Record = { + lg: "semantic-textStyle-syntax-lg", + md: "semantic-textStyle-syntax-md", + sm: "semantic-textStyle-syntax-sm", + xs: "semantic-textStyle-syntax-xs", +}; + +export const code = recipe({ + base: { + display: "inline-flex", + alignItems: "center", + padding: `${vars.scheme.semantic.spacing["0"]} ${vars.scheme.semantic.spacing["6"]}`, + borderRadius: vars.scheme.semantic.radius["4"], + background: vars.color.semantic.fill.subtlest, + border: `1px solid ${vars.color.semantic.stroke.alpha.assistive}`, + color: vars.color.semantic.object.bold, + cursor: "text", + }, + variants: { + size: codeTypographyClassName, + }, + defaultVariants: { + size: "md", + }, +}); diff --git a/packages/jds/src/components/Code/code.types.ts b/packages/jds/src/components/Code/code.types.ts index a6fbf06a1..a996a60dd 100644 --- a/packages/jds/src/components/Code/code.types.ts +++ b/packages/jds/src/components/Code/code.types.ts @@ -6,7 +6,3 @@ export interface CodeProps extends HTMLAttributes { children: ReactNode; size?: CodeSize; } - -export interface CodeStyleProps { - $size: CodeSize; -} diff --git a/packages/jds/src/components/Code/index.ts b/packages/jds/src/components/Code/index.ts index 733802006..ddac98ecb 100644 --- a/packages/jds/src/components/Code/index.ts +++ b/packages/jds/src/components/Code/index.ts @@ -1,2 +1,2 @@ export * from "./Code"; -export * from "./Code.types"; +export * from "./code.types"; From 8a63c856e2dd912781f80dd137587adf6c50e540 Mon Sep 17 00:00:00 2001 From: areumH Date: Thu, 14 May 2026 20:51:43 +0900 Subject: [PATCH 3/8] =?UTF-8?q?docs:=20Code=20=EC=8A=A4=ED=86=A0=EB=A6=AC?= =?UTF-8?q?=20description=20=EB=AC=B8=EA=B5=AC=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/jds/src/components/Code/Code.stories.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/jds/src/components/Code/Code.stories.tsx b/packages/jds/src/components/Code/Code.stories.tsx index cb7298514..e2e710452 100644 --- a/packages/jds/src/components/Code/Code.stories.tsx +++ b/packages/jds/src/components/Code/Code.stories.tsx @@ -13,7 +13,7 @@ const meta: Meta = { docs: { description: { component: - "인라인 코드는 문장 흐름 안에서 특정 키워드, 값, 명령어, 짧은 코드 조각을 시각적으로 구분하기 위한 텍스트 컴포넌트입니다. 주요 내용의 이해를 보조하는 용도로, 문장을 끊지 않고 맥락 속에서 코드를 인지할 수 있도록 합니다.", + "코드는 문장 흐름 안에서 키워드, 값, 명령어, 짧은 코드 조각을 시각적으로 구분하는 텍스트 컴포넌트입니다. 본문을 끊지 않고도 코드 요소를 맥락 속에서 인지하게 합니다. 설명 문맥을 유지하면서 특정 표현을 정확히 지목할 때 사용합니다.", }, }, }, From 979a670eef1cab9cd929d6c87f714b4331528aa0 Mon Sep 17 00:00:00 2001 From: areumH Date: Thu, 14 May 2026 20:59:49 +0900 Subject: [PATCH 4/8] =?UTF-8?q?refactor:=20code.css.ts=EC=9D=98=20vars=20i?= =?UTF-8?q?mport=EB=A5=BC=20=EC=83=81=EB=8C=80=20=EA=B2=BD=EB=A1=9C?= =?UTF-8?q?=EB=A1=9C=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/jds/src/components/Code/code.css.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/jds/src/components/Code/code.css.ts b/packages/jds/src/components/Code/code.css.ts index 5ba90809c..1031fadf8 100644 --- a/packages/jds/src/components/Code/code.css.ts +++ b/packages/jds/src/components/Code/code.css.ts @@ -1,5 +1,5 @@ import { recipe } from "@vanilla-extract/recipes"; -import { vars } from "tokens"; +import { vars } from "../../tokens/vars.css"; import type { CodeSize } from "./code.types"; export const codeTypographyClassName: Record = { From 5d5bc2fc6f5f4c5b7619cc4e595752f5cf476de9 Mon Sep 17 00:00:00 2001 From: areumH Date: Wed, 20 May 2026 01:46:38 +0900 Subject: [PATCH 5/8] =?UTF-8?q?refactor:=20code=20recipe=EC=9D=98=20defaul?= =?UTF-8?q?tVariants=20=EC=A0=9C=EA=B1=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/jds/src/components/Code/code.css.ts | 3 --- 1 file changed, 3 deletions(-) diff --git a/packages/jds/src/components/Code/code.css.ts b/packages/jds/src/components/Code/code.css.ts index 1031fadf8..716dafaf9 100644 --- a/packages/jds/src/components/Code/code.css.ts +++ b/packages/jds/src/components/Code/code.css.ts @@ -23,7 +23,4 @@ export const code = recipe({ variants: { size: codeTypographyClassName, }, - defaultVariants: { - size: "md", - }, }); From cf33979b721323163fc1242676ca942e837e0508 Mon Sep 17 00:00:00 2001 From: areumH Date: Wed, 20 May 2026 01:53:57 +0900 Subject: [PATCH 6/8] =?UTF-8?q?style:=20code.css.ts=20import=20=EC=88=9C?= =?UTF-8?q?=EC=84=9C=20=EC=A0=95=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/jds/src/components/Code/code.css.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/jds/src/components/Code/code.css.ts b/packages/jds/src/components/Code/code.css.ts index 716dafaf9..597347bce 100644 --- a/packages/jds/src/components/Code/code.css.ts +++ b/packages/jds/src/components/Code/code.css.ts @@ -1,6 +1,7 @@ import { recipe } from "@vanilla-extract/recipes"; -import { vars } from "../../tokens/vars.css"; + import type { CodeSize } from "./code.types"; +import { vars } from "../../tokens/vars.css"; export const codeTypographyClassName: Record = { lg: "semantic-textStyle-syntax-lg", From 382a3518d1fe2e847536688432d5924570ccb5e9 Mon Sep 17 00:00:00 2001 From: areumH Date: Wed, 20 May 2026 14:01:05 +0900 Subject: [PATCH 7/8] =?UTF-8?q?refactor:=20Code=20=EC=BB=B4=ED=8F=AC?= =?UTF-8?q?=EB=84=8C=ED=8A=B8=EC=97=90=20ref=20=EC=A0=84=EB=8B=AC=20?= =?UTF-8?q?=EC=A7=80=EC=9B=90?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/jds/src/components/Code/Code.tsx | 17 ++++++++++------- packages/jds/src/components/Code/code.types.ts | 4 ++-- 2 files changed, 12 insertions(+), 9 deletions(-) diff --git a/packages/jds/src/components/Code/Code.tsx b/packages/jds/src/components/Code/Code.tsx index ac63a04d0..6a3748794 100644 --- a/packages/jds/src/components/Code/Code.tsx +++ b/packages/jds/src/components/Code/Code.tsx @@ -1,14 +1,17 @@ import { clsx } from "clsx"; +import { forwardRef } from "react"; import * as styles from "./code.css"; import type { CodeProps } from "./code.types"; -export const Code = ({ children, size = "md", className, ...restProps }: CodeProps) => { - return ( - - {children} - - ); -}; +export const Code = forwardRef( + ({ children, size = "md", className, ...restProps }, ref) => { + return ( + + {children} + + ); + }, +); Code.displayName = "Code"; diff --git a/packages/jds/src/components/Code/code.types.ts b/packages/jds/src/components/Code/code.types.ts index a996a60dd..7b07259cb 100644 --- a/packages/jds/src/components/Code/code.types.ts +++ b/packages/jds/src/components/Code/code.types.ts @@ -1,8 +1,8 @@ -import type { HTMLAttributes, ReactNode } from "react"; +import type { ComponentPropsWithoutRef, ReactNode } from "react"; export type CodeSize = "lg" | "md" | "sm" | "xs"; -export interface CodeProps extends HTMLAttributes { +export interface CodeProps extends ComponentPropsWithoutRef<"code"> { children: ReactNode; size?: CodeSize; } From 0ed4501f52ad36fdc93854f293719561218bab96 Mon Sep 17 00:00:00 2001 From: areumH Date: Sun, 24 May 2026 17:08:49 +0900 Subject: [PATCH 8/8] =?UTF-8?q?refactor:=20Code=20import=20=EC=A0=95?= =?UTF-8?q?=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/jds/src/components/Code/code.css.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/jds/src/components/Code/code.css.ts b/packages/jds/src/components/Code/code.css.ts index 597347bce..dc90ac639 100644 --- a/packages/jds/src/components/Code/code.css.ts +++ b/packages/jds/src/components/Code/code.css.ts @@ -1,7 +1,7 @@ import { recipe } from "@vanilla-extract/recipes"; import type { CodeSize } from "./code.types"; -import { vars } from "../../tokens/vars.css"; +import { vars } from "tokens"; export const codeTypographyClassName: Record = { lg: "semantic-textStyle-syntax-lg",