Merge branch 'main' into 203-apply-link-component-to-website

Author: RiaOh

panda.config.ts

@@ -1,6 +1,7 @@
 import { defineConfig } from "@pandacss/dev";
 import { globalCss } from "./src/styles/globalCss";
 import { colors, semanticColors } from "./src/tokens/colors";
+import { radii } from "./src/tokens/radii";
 import { spacing, semanticSpacing } from "./src/tokens/spacing";
 import {
   textStyles,
@@ -50,6 +51,7 @@ export default defineConfig({
         fontSizes,
         letterSpacings,
         lineHeights,
+        radii,
         spacing,
       },
       semanticTokens: {

src/components/Button/Button.tsx

@@ -64,7 +64,7 @@ const styles = cva({
     alignItems: "center",
     justifyContent: "center",
     width: ["auto", "100%"],
-    borderRadius: "10px",
+    borderRadius: "md",
     cursor: "pointer",
     transition: "0.2s",
     lineHeight: "1",

src/components/Checkbox/Checkbox.tsx

@@ -86,7 +86,7 @@ const styles = cva({
     backgroundColor: "transparent",
     border: "3px solid",
     borderColor: "border",
-    borderRadius: "4px",
+    borderRadius: "sm",
     width: "1.5rem",
     height: "1.5rem",
     display: "flex",

src/components/RadioGroup/RadioGroup.stories.tsx

@@ -125,7 +125,6 @@ Required.decorators = [
   },
 ];
 
-
 export const Tones: Story = {
   render: () => {
     return (

src/components/RadioGroup/RadioGroup.tsx

@@ -237,7 +237,7 @@ const radioCircleStyles = cva({
     backgroundColor: "bg",
     width: "5",
     height: "5",
-    borderRadius: "50%",
+    borderRadius: "full",
     border: "2px solid",
     borderColor: "border",
     position: "absolute",
@@ -319,7 +319,7 @@ const radioDotStyles = cva({
       display: "block",
       width: "2.5",
       height: "2.5",
-      borderRadius: "50%",
+      borderRadius: "full",
       backgroundColor: "text",
     },
   },

src/components/TextInput/TextInput.test.tsx

@@ -0,0 +1,24 @@
+import { test } from "vitest";
+
+test.todo("입력유형 email 적용된다.");
+test.todo("입력유형 number 적용된다.");
+test.todo("입력유형 password 적용된다.");
+test.todo("입력유형 tel 적용된다.");
+test.todo("입력유형 text 적용된다.");
+test.todo("입력유형 url 적용된다.");
+
+test.todo("색조 neutral 적용된다.");
+test.todo("색조 accent 적용된다.");
+test.todo("색조 danger 적용된다.");
+test.todo("색조 warning 적용된다.");
+
+test.todo("크기 small 적용된다.");
+test.todo("크기 medium 적용된다.");
+test.todo("크기 large 적용된다.");
+
+test.todo("입력값이 변경될 때 값이 변경된다.");
+test.todo("변경이벤트 핸들러가 동작한다.");
+
+test.todo("텍스트 인풋이 비활성화 된다.");
+test.todo("안내문구가 적용된다.");
+test.todo("읽기모드가 활성화된다.");

src/components/TextInput/TextInput.tsx

@@ -0,0 +1,35 @@
+import type { InputHTMLAttributes } from "react";
+import type { Tone } from "../../tokens/colors";
+
+type TextInputSize = "sm" | "md" | "lg";
+
+export interface TextInput
+  extends Omit<InputHTMLAttributes<HTMLInputElement>, "size"> {
+  /** 입력유형 */
+  type?: "email" | "number" | "password" | "tel" | "text" | "url";
+  /** 색조 */
+  tone?: Tone;
+  /** 크기 */
+  size?: TextInputSize;
+  /** 처음 렌더링될 때 입력되는 값*/
+  defaultValue?: string;
+  /** 값 */
+  value?: string;
+  /** 변경 이벤트 핸들러 */
+  onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  /** 텍스트인풋 활성화 여부 */
+  disabled?: boolean;
+  /** 안내문구 */
+  placeholder?: string;
+  /** 읽기모드 활성화 여부 */
+  readOnly?: boolean;
+}
+
+/**
+ * 텍스트를 입력할 수 있는 인풋 컴포넌트입니다.
+ *
+ * - `type` 속성으로 이메일, 비밀번호, 숫자, 전화번호 등 다양한 입력 유형을 지정할 수 있습니다.
+ * - `tone` `size` 디자인 시스템 기반의 스타일 제어가 가능합니다.
+ * - `value` `onChange` 속성을 통해 외부에서 입력값을 제어할 수 있습니다.
+ * - `disabled` `placeholder` `readOnly` 등 자주사용하는 속성들을 지원합니다.
+ */

src/tokens/radii.ts

@@ -0,0 +1,9 @@
+import type { Tokens } from "@pandacss/types";
+
+export const radii: Tokens["radii"] = {
+  xs: { value: "0.125rem" }, // 2px
+  sm: { value: "0.25rem" }, // 4px
+  md: { value: "0.5rem" }, // 8px
+  lg: { value: "1rem" }, // 16px
+  full: { value: "calc(infinity * 1px)" }, // 9999px
+};