@edu-tosel/design 1.0.335 → 1.0.341

package/asset/svg/Operation.tsx

@@ -1,130 +1,130 @@
-import { OnClick } from "../../interface";
-import { Theme } from "../../interface/Theme";
-import { cn } from "../../util";
-
-interface Operation {
-  onClick?: OnClick;
-}
-const container = {
-  styles: "cursor-pointer",
-};
-function Plus({ onClick }: Operation) {
-  return (
-    <svg
-      className={cn(container)}
-      onClick={onClick}
-      xmlns="http://www.w3.org/2000/svg"
-      width="48"
-      height="48"
-      viewBox="0 0 48 48"
-      fill="none"
-    >
-      <path
-        d="M42 24C42 26.3638 41.5344 28.7044 40.6298 30.8883C39.7253 33.0722 38.3994 35.0565 36.7279 36.7279C35.0565 38.3994 33.0722 39.7253 30.8883 40.6298C28.7044 41.5344 26.3638 42 24 42C21.6362 42 19.2956 41.5344 17.1117 40.6298C14.9278 39.7253 12.9435 38.3994 11.2721 36.7279C9.60062 35.0565 8.27475 33.0722 7.37017 30.8883C6.46558 28.7044 6 26.3638 6 24C6 19.2261 7.89642 14.6477 11.2721 11.2721C14.6477 7.89642 19.2261 6 24 6C28.7739 6 33.3523 7.89642 36.7279 11.2721C40.1036 14.6477 42 19.2261 42 24Z"
-        fill="#105652"
-      />
-      <path
-        d="M24 18V30M30 24H18"
-        stroke="white"
-        strokeWidth="3"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-    </svg>
-  );
-}
-
-function Minus({ onClick }: Operation) {
-  return (
-    <svg
-      className={cn(container)}
-      onClick={onClick}
-      width="48"
-      height="48"
-      viewBox="0 0 48 48"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        d="M42 24C42 26.3638 41.5344 28.7044 40.6298 30.8883C39.7253 33.0722 38.3994 35.0565 36.7279 36.7279C35.0565 38.3994 33.0722 39.7253 30.8883 40.6298C28.7044 41.5344 26.3638 42 24 42C21.6362 42 19.2956 41.5344 17.1117 40.6298C14.9278 39.7253 12.9435 38.3994 11.2721 36.7279C9.60062 35.0565 8.27475 33.0722 7.37017 30.8883C6.46558 28.7044 6 26.3638 6 24C6 19.2261 7.89642 14.6477 11.2721 11.2721C14.6477 7.89642 19.2261 6 24 6C28.7739 6 33.3523 7.89642 36.7279 11.2721C40.1036 14.6477 42 19.2261 42 24Z"
-        fill="#910023"
-      />
-      <path
-        d="M30 24H18"
-        stroke="white"
-        strokeWidth="3"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-    </svg>
-  );
-}
-
-function Checked({
-  flag,
-  size,
-  theme,
-}: {
-  flag: boolean;
-  size?: number;
-  theme?: Theme;
-}) {
-  const color = {
-    green: "#105652",
-    blue: "#173A8B",
-  } as Record<Theme, string>;
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width={size ?? "40"}
-      height={size ?? "40"}
-      viewBox="0 0 48 48"
-      fill="none"
-    >
-      <path
-        d="M42 24C42 26.3638 41.5344 28.7044 40.6298 30.8883C39.7253 33.0722 38.3994 35.0565 36.7279 36.7279C35.0565 38.3994 33.0722 39.7253 30.8883 40.6298C28.7044 41.5344 26.3638 42 24 42C21.6362 42 19.2956 41.5344 17.1117 40.6298C14.9278 39.7253 12.9435 38.3994 11.2721 36.7279C9.60062 35.0565 8.27475 33.0722 7.37017 30.8883C6.46558 28.7044 6 26.3638 6 24C6 19.2261 7.89642 14.6477 11.2721 11.2721C14.6477 7.89642 19.2261 6 24 6C28.7739 6 33.3523 7.89642 36.7279 11.2721C40.1036 14.6477 42 19.2261 42 24Z"
-        fill={flag ? color[theme ?? "green"] : "#F0F0F0"}
-      />
-      <path
-        d="M30.5 18.5L24 30.5L18 24"
-        stroke="white"
-        strokeWidth="3"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-    </svg>
-  );
-}
-function RightArrow({ onClick }: Operation) {
-  return (
-    <svg
-      className={cn(container)}
-      onClick={onClick}
-      xmlns="http://www.w3.org/2000/svg"
-      width="48"
-      height="48"
-      viewBox="0 0 48 48"
-      fill="none"
-    >
-      <path
-        d="M42 24C42 26.3638 41.5344 28.7044 40.6298 30.8883C39.7253 33.0722 38.3994 35.0565 36.7279 36.7279C35.0565 38.3994 33.0722 39.7253 30.8883 40.6298C28.7044 41.5344 26.3638 42 24 42C21.6362 42 19.2956 41.5344 17.1117 40.6298C14.9278 39.7253 12.9435 38.3994 11.2721 36.7279C9.60062 35.0565 8.27475 33.0722 7.37017 30.8883C6.46558 28.7044 6 26.3638 6 24C6 19.2261 7.89642 14.6477 11.2721 11.2721C14.6477 7.89642 19.2261 6 24 6C28.7739 6 33.3523 7.89642 36.7279 11.2721C40.1036 14.6477 42 19.2261 42 24Z"
-        fill="#105652"
-      />
-      <path
-        d="M20 24H28M24 20L28 24L24 28"
-        stroke="white"
-        strokeWidth="3"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-    </svg>
-  );
-}
-
-const Operation = {
-  Plus,
-  Minus,
-  Checked,
-  RightArrow,
-};
-export default Operation;
+import { OnClick } from "../../interface";
+import { Theme } from "../../interface/Theme";
+import { cn } from "../../util";
+
+interface Operation {
+  onClick?: OnClick;
+}
+const container = {
+  styles: "cursor-pointer",
+};
+function Plus({ onClick }: Operation) {
+  return (
+    <svg
+      className={cn(container)}
+      onClick={onClick}
+      xmlns="http://www.w3.org/2000/svg"
+      width="48"
+      height="48"
+      viewBox="0 0 48 48"
+      fill="none"
+    >
+      <path
+        d="M42 24C42 26.3638 41.5344 28.7044 40.6298 30.8883C39.7253 33.0722 38.3994 35.0565 36.7279 36.7279C35.0565 38.3994 33.0722 39.7253 30.8883 40.6298C28.7044 41.5344 26.3638 42 24 42C21.6362 42 19.2956 41.5344 17.1117 40.6298C14.9278 39.7253 12.9435 38.3994 11.2721 36.7279C9.60062 35.0565 8.27475 33.0722 7.37017 30.8883C6.46558 28.7044 6 26.3638 6 24C6 19.2261 7.89642 14.6477 11.2721 11.2721C14.6477 7.89642 19.2261 6 24 6C28.7739 6 33.3523 7.89642 36.7279 11.2721C40.1036 14.6477 42 19.2261 42 24Z"
+        fill="#105652"
+      />
+      <path
+        d="M24 18V30M30 24H18"
+        stroke="white"
+        strokeWidth="3"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+function Minus({ onClick }: Operation) {
+  return (
+    <svg
+      className={cn(container)}
+      onClick={onClick}
+      width="48"
+      height="48"
+      viewBox="0 0 48 48"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M42 24C42 26.3638 41.5344 28.7044 40.6298 30.8883C39.7253 33.0722 38.3994 35.0565 36.7279 36.7279C35.0565 38.3994 33.0722 39.7253 30.8883 40.6298C28.7044 41.5344 26.3638 42 24 42C21.6362 42 19.2956 41.5344 17.1117 40.6298C14.9278 39.7253 12.9435 38.3994 11.2721 36.7279C9.60062 35.0565 8.27475 33.0722 7.37017 30.8883C6.46558 28.7044 6 26.3638 6 24C6 19.2261 7.89642 14.6477 11.2721 11.2721C14.6477 7.89642 19.2261 6 24 6C28.7739 6 33.3523 7.89642 36.7279 11.2721C40.1036 14.6477 42 19.2261 42 24Z"
+        fill="#910023"
+      />
+      <path
+        d="M30 24H18"
+        stroke="white"
+        strokeWidth="3"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+function Checked({
+  flag,
+  size,
+  theme,
+}: {
+  flag: boolean;
+  size?: number;
+  theme?: Theme;
+}) {
+  const color = {
+    green: "#105652",
+    blue: "#173A8B",
+  } as Record<Theme, string>;
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={size ?? "40"}
+      height={size ?? "40"}
+      viewBox="0 0 48 48"
+      fill="none"
+    >
+      <path
+        d="M42 24C42 26.3638 41.5344 28.7044 40.6298 30.8883C39.7253 33.0722 38.3994 35.0565 36.7279 36.7279C35.0565 38.3994 33.0722 39.7253 30.8883 40.6298C28.7044 41.5344 26.3638 42 24 42C21.6362 42 19.2956 41.5344 17.1117 40.6298C14.9278 39.7253 12.9435 38.3994 11.2721 36.7279C9.60062 35.0565 8.27475 33.0722 7.37017 30.8883C6.46558 28.7044 6 26.3638 6 24C6 19.2261 7.89642 14.6477 11.2721 11.2721C14.6477 7.89642 19.2261 6 24 6C28.7739 6 33.3523 7.89642 36.7279 11.2721C40.1036 14.6477 42 19.2261 42 24Z"
+        fill={flag ? color[theme ?? "green"] : "#F0F0F0"}
+      />
+      <path
+        d="M30.5 18.5L24 30.5L18 24"
+        stroke="white"
+        strokeWidth="3"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+function RightArrow({ onClick }: Operation) {
+  return (
+    <svg
+      className={cn(container)}
+      onClick={onClick}
+      xmlns="http://www.w3.org/2000/svg"
+      width="48"
+      height="48"
+      viewBox="0 0 48 48"
+      fill="none"
+    >
+      <path
+        d="M42 24C42 26.3638 41.5344 28.7044 40.6298 30.8883C39.7253 33.0722 38.3994 35.0565 36.7279 36.7279C35.0565 38.3994 33.0722 39.7253 30.8883 40.6298C28.7044 41.5344 26.3638 42 24 42C21.6362 42 19.2956 41.5344 17.1117 40.6298C14.9278 39.7253 12.9435 38.3994 11.2721 36.7279C9.60062 35.0565 8.27475 33.0722 7.37017 30.8883C6.46558 28.7044 6 26.3638 6 24C6 19.2261 7.89642 14.6477 11.2721 11.2721C14.6477 7.89642 19.2261 6 24 6C28.7739 6 33.3523 7.89642 36.7279 11.2721C40.1036 14.6477 42 19.2261 42 24Z"
+        fill="#105652"
+      />
+      <path
+        d="M20 24H28M24 20L28 24L24 28"
+        stroke="white"
+        strokeWidth="3"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+const Operation = {
+  Plus,
+  Minus,
+  Checked,
+  RightArrow,
+};
+export default Operation;

package/asset/svg/Phone.tsx

@@ -1,19 +1,19 @@
-export default function Phone({ color }: { color?: string }) {
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width="25"
-      height="25"
-      viewBox="0 0 25 25"
-      fill="none"
-    >
-      <path
-        d="M10.9375 1.5625H8.59375C7.97215 1.5625 7.37601 1.80943 6.93647 2.24897C6.49693 2.68851 6.25 3.28465 6.25 3.90625V21.0937C6.25 21.7154 6.49693 22.3115 6.93647 22.751C7.37601 23.1906 7.97215 23.4375 8.59375 23.4375H16.4062C17.0279 23.4375 17.624 23.1906 18.0635 22.751C18.5031 22.3115 18.75 21.7154 18.75 21.0937V3.90625C18.75 3.28465 18.5031 2.68851 18.0635 2.24897C17.624 1.80943 17.0279 1.5625 16.4062 1.5625H14.0625M10.9375 1.5625V3.125H14.0625V1.5625M10.9375 1.5625H14.0625M10.9375 21.0937H14.0625"
-        stroke={color ?? "#105652"}
-        strokeWidth="1.5"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-    </svg>
-  );
-}
+export default function Phone({ color }: { color?: string }) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="25"
+      height="25"
+      viewBox="0 0 25 25"
+      fill="none"
+    >
+      <path
+        d="M10.9375 1.5625H8.59375C7.97215 1.5625 7.37601 1.80943 6.93647 2.24897C6.49693 2.68851 6.25 3.28465 6.25 3.90625V21.0937C6.25 21.7154 6.49693 22.3115 6.93647 22.751C7.37601 23.1906 7.97215 23.4375 8.59375 23.4375H16.4062C17.0279 23.4375 17.624 23.1906 18.0635 22.751C18.5031 22.3115 18.75 21.7154 18.75 21.0937V3.90625C18.75 3.28465 18.5031 2.68851 18.0635 2.24897C17.624 1.80943 17.0279 1.5625 16.4062 1.5625H14.0625M10.9375 1.5625V3.125H14.0625V1.5625M10.9375 1.5625H14.0625M10.9375 21.0937H14.0625"
+        stroke={color ?? "#105652"}
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}

package/asset/svg/Print.tsx

@@ -1,18 +1,18 @@
-export default function Print() {
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      fill="none"
-      viewBox="0 0 24 24"
-      stroke-width="1.5"
-      stroke="currentColor"
-      className="size-6"
-    >
-      <path
-        stroke-linecap="round"
-        stroke-linejoin="round"
-        d="M6.72 13.829c-.24.03-.48.062-.72.096m.72-.096a42.415 42.415 0 0 1 10.56 0m-10.56 0L6.34 18m10.94-4.171c.24.03.48.062.72.096m-.72-.096L17.66 18m0 0 .229 2.523a1.125 1.125 0 0 1-1.12 1.227H7.231c-.662 0-1.18-.568-1.12-1.227L6.34 18m11.318 0h1.091A2.25 2.25 0 0 0 21 15.75V9.456c0-1.081-.768-2.015-1.837-2.175a48.055 48.055 0 0 0-1.913-.247M6.34 18H5.25A2.25 2.25 0 0 1 3 15.75V9.456c0-1.081.768-2.015 1.837-2.175a48.041 48.041 0 0 1 1.913-.247m10.5 0a48.536 48.536 0 0 0-10.5 0m10.5 0V3.375c0-.621-.504-1.125-1.125-1.125h-8.25c-.621 0-1.125.504-1.125 1.125v3.659M18 10.5h.008v.008H18V10.5Zm-3 0h.008v.008H15V10.5Z"
-      />
-    </svg>
-  );
-}
+export default function Print() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+      stroke-width="1.5"
+      stroke="currentColor"
+      className="size-6"
+    >
+      <path
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        d="M6.72 13.829c-.24.03-.48.062-.72.096m.72-.096a42.415 42.415 0 0 1 10.56 0m-10.56 0L6.34 18m10.94-4.171c.24.03.48.062.72.096m-.72-.096L17.66 18m0 0 .229 2.523a1.125 1.125 0 0 1-1.12 1.227H7.231c-.662 0-1.18-.568-1.12-1.227L6.34 18m11.318 0h1.091A2.25 2.25 0 0 0 21 15.75V9.456c0-1.081-.768-2.015-1.837-2.175a48.055 48.055 0 0 0-1.913-.247M6.34 18H5.25A2.25 2.25 0 0 1 3 15.75V9.456c0-1.081.768-2.015 1.837-2.175a48.041 48.041 0 0 1 1.913-.247m10.5 0a48.536 48.536 0 0 0-10.5 0m10.5 0V3.375c0-.621-.504-1.125-1.125-1.125h-8.25c-.621 0-1.125.504-1.125 1.125v3.659M18 10.5h.008v.008H18V10.5Zm-3 0h.008v.008H15V10.5Z"
+      />
+    </svg>
+  );
+}

package/asset/svg/Profile.tsx

@@ -1,27 +1,27 @@
-import { OnClick } from "../../interface";
-
-interface Profile {
-  onClick: OnClick;
-  color?: string;
-}
-export default function Profile({ color, onClick }: Profile) {
-  return (
-    <svg
-      className="cursor-pointer"
-      onClick={onClick}
-      xmlns="http://www.w3.org/2000/svg"
-      width="25"
-      height="25"
-      viewBox="0 0 25 25"
-      fill="none"
-    >
-      <path
-        d="M18.7313 19.5053C18.0034 18.5416 17.0618 17.7601 15.9804 17.2223C14.8991 16.6846 13.7077 16.4052 12.5 16.4063C11.2924 16.4052 10.101 16.6846 9.01964 17.2223C7.93832 17.7601 6.99664 18.5416 6.26878 19.5053M18.7313 19.5053C20.1516 18.2419 21.1533 16.5767 21.6054 14.7304C22.0576 12.884 21.9378 10.9439 21.262 9.16722C20.5862 7.39055 19.3862 5.86128 17.8213 4.78224C16.2564 3.7032 14.4004 3.12537 12.4995 3.12537C10.5986 3.12537 8.74267 3.7032 7.17775 4.78224C5.61282 5.86128 4.41288 7.39055 3.73705 9.16722C3.06122 10.9439 2.94144 12.884 3.3936 14.7304C3.84575 16.5767 4.84847 18.2419 6.26878 19.5053M18.7313 19.5053C17.0167 21.0346 14.7976 21.8783 12.5 21.8751C10.2021 21.8786 7.98361 21.0349 6.26878 19.5053M15.625 10.1563C15.625 10.9851 15.2958 11.78 14.7097 12.366C14.1237 12.9521 13.3288 13.2813 12.5 13.2813C11.6712 13.2813 10.8764 12.9521 10.2903 12.366C9.70427 11.78 9.37503 10.9851 9.37503 10.1563C9.37503 9.32751 9.70427 8.53265 10.2903 7.9466C10.8764 7.36055 11.6712 7.03131 12.5 7.03131C13.3288 7.03131 14.1237 7.36055 14.7097 7.9466C15.2958 8.53265 15.625 9.32751 15.625 10.1563Z"
-        stroke={color ?? "#910023"}
-        strokeWidth="1.5"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-    </svg>
-  );
-}
+import { OnClick } from "../../interface";
+
+interface Profile {
+  onClick: OnClick;
+  color?: string;
+}
+export default function Profile({ color, onClick }: Profile) {
+  return (
+    <svg
+      className="cursor-pointer"
+      onClick={onClick}
+      xmlns="http://www.w3.org/2000/svg"
+      width="25"
+      height="25"
+      viewBox="0 0 25 25"
+      fill="none"
+    >
+      <path
+        d="M18.7313 19.5053C18.0034 18.5416 17.0618 17.7601 15.9804 17.2223C14.8991 16.6846 13.7077 16.4052 12.5 16.4063C11.2924 16.4052 10.101 16.6846 9.01964 17.2223C7.93832 17.7601 6.99664 18.5416 6.26878 19.5053M18.7313 19.5053C20.1516 18.2419 21.1533 16.5767 21.6054 14.7304C22.0576 12.884 21.9378 10.9439 21.262 9.16722C20.5862 7.39055 19.3862 5.86128 17.8213 4.78224C16.2564 3.7032 14.4004 3.12537 12.4995 3.12537C10.5986 3.12537 8.74267 3.7032 7.17775 4.78224C5.61282 5.86128 4.41288 7.39055 3.73705 9.16722C3.06122 10.9439 2.94144 12.884 3.3936 14.7304C3.84575 16.5767 4.84847 18.2419 6.26878 19.5053M18.7313 19.5053C17.0167 21.0346 14.7976 21.8783 12.5 21.8751C10.2021 21.8786 7.98361 21.0349 6.26878 19.5053M15.625 10.1563C15.625 10.9851 15.2958 11.78 14.7097 12.366C14.1237 12.9521 13.3288 13.2813 12.5 13.2813C11.6712 13.2813 10.8764 12.9521 10.2903 12.366C9.70427 11.78 9.37503 10.9851 9.37503 10.1563C9.37503 9.32751 9.70427 8.53265 10.2903 7.9466C10.8764 7.36055 11.6712 7.03131 12.5 7.03131C13.3288 7.03131 14.1237 7.36055 14.7097 7.9466C15.2958 8.53265 15.625 9.32751 15.625 10.1563Z"
+        stroke={color ?? "#910023"}
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}

package/asset/svg/Search.tsx

@@ -1,24 +1,24 @@
-export default function Search() {
-  return (
-    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none">
-      <path
-        vector-effect="non-scaling-stroke"
-        d="m19 19-3.5-3.5"
-        stroke="#475569"
-        stroke-width="2"
-        stroke-linecap="round"
-        stroke-linejoin="round"
-      />
-      <circle
-        vector-effect="non-scaling-stroke"
-        cx="11"
-        cy="11"
-        r="6"
-        stroke="#475569"
-        stroke-width="2"
-        stroke-linecap="round"
-        stroke-linejoin="round"
-      />
-    </svg>
-  );
-}
+export default function Search() {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none">
+      <path
+        vector-effect="non-scaling-stroke"
+        d="m19 19-3.5-3.5"
+        stroke="#475569"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+      <circle
+        vector-effect="non-scaling-stroke"
+        cx="11"
+        cy="11"
+        r="6"
+        stroke="#475569"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    </svg>
+  );
+}

package/asset/svg/Symbol.tsx

@@ -1,61 +1,61 @@
-import { OnClick } from "../../interface";
-import { cn } from "../../util";
-
-export interface SymbolProps {
-  className?: string;
-  onClick?: OnClick;
-  color?: string; // 테일윈드 텍스트 색상 클래스 (예: "text-red-500", "text-blue-400")
-}
-
-const Symbol = {
-  LessThan,
-  GreaterThan,
-};
-
-function LessThan({ className, onClick, color }: SymbolProps) {
-  const container = {
-    className,
-    cursors: onClick ? "cursor-pointer" : "cursor-default",
-  };
-  return (
-    <svg
-      className={cn(container, color || "text-white")}
-      onClick={onClick}
-      xmlns="http://www.w3.org/2000/svg"
-      height="11"
-      width="6"
-      viewBox="0 0 6 11"
-      fill="none"
-    >
-      <path
-        d="M5.2475 10.7488C5.0575 10.7488 4.8675 10.6788 4.7175 10.5288L0.2175 6.02875C-0.0725 5.73875 -0.0725 5.25875 0.2175 4.96875L4.7175 0.468751C5.0075 0.178751 5.4875 0.178751 5.7775 0.468751C6.0675 0.758751 6.0675 1.23875 5.7775 1.52875L1.8075 5.49875L5.7775 9.46875C6.0675 9.75875 6.0675 10.2388 5.7775 10.5288C5.6275 10.6788 5.4375 10.7488 5.2475 10.7488Z"
-        fill="currentColor"
-      />
-    </svg>
-  );
-}
-
-function GreaterThan({ className, onClick, color }: SymbolProps) {
-  const container = {
-    className,
-    cursors: onClick ? "cursor-pointer" : "cursor-default",
-  };
-  return (
-    <svg
-      className={cn(container, color || "text-white")}
-      onClick={onClick}
-      xmlns="http://www.w3.org/2000/svg"
-      width="6"
-      height="11"
-      viewBox="0 0 6 11"
-      fill="none"
-    >
-      <path
-        d="M0.74249 0.251248C0.93249 0.251248 1.12249 0.321249 1.27249 0.471249L5.77249 4.97125C6.06249 5.26125 6.06249 5.74125 5.77249 6.03125L1.27249 10.5312C0.982491 10.8212 0.50249 10.8212 0.21249 10.5312C-0.0775099 10.2412 -0.0775099 9.76125 0.21249 9.47125L4.18249 5.50125L0.21249 1.53125C-0.0775099 1.24125 -0.0775099 0.761249 0.21249 0.471249C0.36249 0.321249 0.55249 0.251248 0.74249 0.251248Z"
-        fill="currentColor"
-      />
-    </svg>
-  );
-}
-
-export default Symbol;
+import { OnClick } from "../../interface";
+import { cn } from "../../util";
+
+export interface SymbolProps {
+  className?: string;
+  onClick?: OnClick;
+  color?: string; // 테일윈드 텍스트 색상 클래스 (예: "text-red-500", "text-blue-400")
+}
+
+const Symbol = {
+  LessThan,
+  GreaterThan,
+};
+
+function LessThan({ className, onClick, color }: SymbolProps) {
+  const container = {
+    className,
+    cursors: onClick ? "cursor-pointer" : "cursor-default",
+  };
+  return (
+    <svg
+      className={cn(container, color || "text-white")}
+      onClick={onClick}
+      xmlns="http://www.w3.org/2000/svg"
+      height="11"
+      width="6"
+      viewBox="0 0 6 11"
+      fill="none"
+    >
+      <path
+        d="M5.2475 10.7488C5.0575 10.7488 4.8675 10.6788 4.7175 10.5288L0.2175 6.02875C-0.0725 5.73875 -0.0725 5.25875 0.2175 4.96875L4.7175 0.468751C5.0075 0.178751 5.4875 0.178751 5.7775 0.468751C6.0675 0.758751 6.0675 1.23875 5.7775 1.52875L1.8075 5.49875L5.7775 9.46875C6.0675 9.75875 6.0675 10.2388 5.7775 10.5288C5.6275 10.6788 5.4375 10.7488 5.2475 10.7488Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
+
+function GreaterThan({ className, onClick, color }: SymbolProps) {
+  const container = {
+    className,
+    cursors: onClick ? "cursor-pointer" : "cursor-default",
+  };
+  return (
+    <svg
+      className={cn(container, color || "text-white")}
+      onClick={onClick}
+      xmlns="http://www.w3.org/2000/svg"
+      width="6"
+      height="11"
+      viewBox="0 0 6 11"
+      fill="none"
+    >
+      <path
+        d="M0.74249 0.251248C0.93249 0.251248 1.12249 0.321249 1.27249 0.471249L5.77249 4.97125C6.06249 5.26125 6.06249 5.74125 5.77249 6.03125L1.27249 10.5312C0.982491 10.8212 0.50249 10.8212 0.21249 10.5312C-0.0775099 10.2412 -0.0775099 9.76125 0.21249 9.47125L4.18249 5.50125L0.21249 1.53125C-0.0775099 1.24125 -0.0775099 0.761249 0.21249 0.471249C0.36249 0.321249 0.55249 0.251248 0.74249 0.251248Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
+
+export default Symbol;