#1 feat: Image Input 컴포넌트 구현 및 Icon 적용

src/shared/ui/Input/AuthInput.tsx

@@ -0,0 +1,60 @@
+import { InputProps } from "@/shared/types/input";
+import Icon from "../Icon/Icon";
+import { useState } from "react";
+
+const AuthInput = ({
+  id,
+  label,
+  type,
+  placeholder,
+  register,
+  errors,
+  validation,
+  helperText,
+}: InputProps) => {
+  const [showPasswordIcon, setShowPasswordIcon] = useState(false);
+
+  const toggleIcon = () => {
+    setShowPasswordIcon(!showPasswordIcon);
+  };
+
+  return (
+    <div className="flex flex-col gap-2.5">
+      <label
+        htmlFor={id}
+        className="text-gray-F1 text-sm lg:text- font-base normal"
+      >
+        {label}
+      </label>
+      <div className="relative w-[335px] md:w-[440px] lg:w-[640px] h-[55px] lg:h-[70px]">
+        <input
+          id={id}
+          className={`w-full h-full px-5 py-[23px] rounded-lg border border-solid bg-black-25 text-gray-F1 text-sm lg:text-base font-normal placeholder-gray-6E focus:outline-none ${errors[id] ? "border-red focus:border-red" : "border-gray-35 focus:border-main-blue"}`}
+          type={showPasswordIcon ? "text" : type}
+          placeholder={placeholder}
+          {...register(id, validation)}
+        />
+        {type === "password" && (
+          <Icon
+            name={showPasswordIcon ? "VisibilityIcon" : "VisibilityOffIcon"}
+            iconSizeClass="absolute top-[16px] lg:top-[23px] right-5 w-[22px] h-[22px] lg:w-6 lg:h-6"
+            color="#9fa8b2"
+            onClick={toggleIcon}
+          />
+        )}
+      </div>
+      {errors[id] && (
+        <span className="text-red text-xs lg:text-sm font-normal">
+          {errors[id]?.message}
+        </span>
+      )}
+      {!errors[id] && helperText && (
+        <span className="text-gray-6E text-xs lg:text-sm font-normal">
+          {helperText}
+        </span>
+      )}
+    </div>
+  );
+};
+
+export default AuthInput;

src/shared/ui/Input/ImageInput.tsx

@@ -0,0 +1,69 @@
+import { useImageStore } from "@/app/test/page";
+import Icon from "../Icon/Icon";
+
+interface ImageInputProps {
+  image: string;
+  setImage: (url: string) => void;
+  handleDeleteButton: () => void;
+}
+
+const ImageInput = ({
+  image,
+  setImage,
+  handleDeleteButton,
+}: ImageInputProps) => {
+  const handleUploadImage = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const selectFile = event.target.files;
+
+    if (selectFile && selectFile[0]) {
+      const formData = new FormData();
+      formData.append("image", selectFile[0]);
+
+      //@TODO : API 연동 POST 요청
+    }
+  };
+
+  const containerStyle =
+    "relative w-[140px] md:w-[135px] lg:w-[160px] h-[140px] md:h-[135px] lg:h-[160px] rounded-lg";
+
+  return (
+    <>
+      {image ? (
+        <div
+          className={containerStyle}
+          style={{
+            backgroundImage: `url(${image})`,
+            backgroundSize: "cover",
+            backgroundPosition: "center",
+          }}
+        >
+          <div className="absolute top-[5px] right-[5px] w-[26px] lg:w-7 h-[26px] lg:h-7 p-1 bg-black bg-opacity-50 rounded-lg">
+            <Icon
+              name="CloseIcon"
+              iconSizeClass="w-full h-full"
+              color="#F1F1F5"
+              onClick={handleDeleteButton}
+            />
+          </div>
+        </div>
+      ) : (
+        <div
+          className={`${containerStyle} p-[58px] md:p-[55px] lg:p-[63px] border border-solid border-gray-35 bg-black-25`}
+        >
+          <input
+            className="absolute w-full h-full opacity-0"
+            type="file"
+            onChange={handleUploadImage}
+          />
+          <Icon
+            name="PhotoIcon"
+            iconSizeClass="w-full h-full"
+            color="#6E6E82"
+          />
+        </div>
+      )}
+    </>
+  );
+};
+
+export default ImageInput;