TIconButton, TInpu 추가 및 SearchPanel 작언 중

com.twin.app.shoptime/src/components/TInput/TInput.jsx

@@ -1,8 +1,13 @@
-import classNames from "classnames";
-import React from "react";
+import React, { forwardRef, useCallback, useRef, useEffect } from "react";
 import css from "./TInput.module.less";
 import { InputField } from "@enact/sandstone/Input";
-import { $L } from "../../utils/helperMethods";
+import Spottable from "@enact/spotlight/Spottable";
+import classNames from "classnames";
+import { SpotlightContainerDecorator } from "@enact/spotlight/SpotlightContainerDecorator";
+
+const Container = SpotlightContainerDecorator("div");
+
+const SpottableInputIcon = Spottable("div");
 
 const KINDS = { withIcon: "withIcon" };
 const ICONS = { search: "search" };
@@ -10,27 +15,33 @@ const BORDER = { none: "none" };
 const COLOR = { transparent: "transparent" };
 
 export default function TInput({
-  kind = "",
-  icon = null,
-  border = null,
-  color = null,
-  className = null,
+  kind,
+  icon,
+  border,
+  color,
+  className,
   spotlightDisabled,
   ...rest
 }) {
+  const handleIconClick = useCallback(() => {}, []);
+
   return (
-    <InputField
-      {...rest}
-      className={classNames(
-        css.input,
-        icon && css[icon],
-        css[kind],
-        css[border],
-        css[color],
-        className
+    <Container
+      className={classNames(css.container, className ? className : null)}
+    >
+      <InputField
+        {...rest}
+        spotlightDisabled={spotlightDisabled}
+        className={classNames(css.input)}
+        spotlightId="input"
+      />
+      {kind === "withIcon" && (
+        <SpottableInputIcon
+          className={classNames(icon && css[icon])}
+          onClick={handleIconClick}
+        />
       )}
-      spotlightDisabled={spotlightDisabled}
-    />
+    </Container>
   );
 }