[Feat/#15] Input 컴포넌트 제작

src/components/ui/Input/Input.module.scss

@@ -0,0 +1,68 @@
+@use "@/styles/_mixins.scss" as *;
+
+.InputWrapper {
+  width: 100%;
+  height: 3rem;
+  border-radius: 0.875rem;
+  box-shadow: 0 0.125rem 1rem rgba(0, 0, 0, 0.04);
+  padding: 0.75rem 0.875rem;
+  border: 1px solid transparent;
+  display: flex;
+  align-items: center;
+  gap: 0.625rem;
+
+  &.style-primary {
+    background-color: var(--color-white);
+
+    & > input {
+      width: calc(100% - 2.25rem);
+    }
+  }
+
+  &.style-secondary {
+    background-color: var(--color-gray100);
+
+    & > input {
+      width: 100%;
+    }
+  }
+
+  &.Focused {
+    border-color: var(--color-purple);
+  }
+
+  .Input {
+    @include bodyMd;
+    color: var(--color-text-primary);
+    line-height: 1.5rem;
+
+    &::placeholder {
+      color: var(--color-text-tertiary);
+    }
+  }
+
+  button {
+    @include bodySm;
+    color: var(--color-purple);
+    line-height: 1.3125rem;
+  }
+}
+
+.InputStory {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+
+  .Wrapper {
+    display: flex;
+    gap: 1rem;
+    justify-content: center;
+    align-items: center;
+    width: 300px;
+  }
+
+  .Text {
+    font-size: 1.125rem;
+    width: 120px;
+  }
+}

src/components/ui/Input/Input.stories.tsx

@@ -0,0 +1,43 @@
+import Input from "@/components/ui/Input/Input";
+import styles from "@/components/ui/Input/Input.module.scss";
+import type { InputProps } from "@/components/ui/Input/Input.types";
+
+import type { Meta, StoryObj, StoryFn } from "@storybook/react";
+
+const meta: Meta<typeof Input> = {
+  title: "Example/Input",
+  component: Input,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["!autodocs"],
+};
+
+export default meta;
+
+const Template: StoryFn<InputProps> = ({ ...props }) => (
+  <Input type="text" placeholder="가게명을 입력해주세요" {...props} />
+);
+
+export const Primary: StoryObj<InputProps> = {
+  render: Template,
+  args: {
+    type: "text",
+    variant: "primary",
+  },
+};
+
+export const VariantProps: StoryObj<typeof Input> = {
+  render: () => (
+    <div className={styles.InputStory}>
+      <div className={styles.Wrapper}>
+        <p className={styles.Text}>primary</p>
+        <Input variant="primary" type="text" placeholder="가게명을 입력해주세요" />
+      </div>
+      <div className={styles.Wrapper}>
+        <p className={styles.Text}>secondary</p>
+        <Input variant="secondary" type="text" placeholder="가게명을 입력해주세요" />
+      </div>
+    </div>
+  ),
+};

src/components/ui/Input/Input.tsx

@@ -0,0 +1,35 @@
+import { useState, forwardRef } from "react";
+
+import classNames from "classnames";
+
+import styles from "@/components/ui/Input/Input.module.scss";
+import type { InputProps } from "@/components/ui/Input/Input.types";
+
+const Input = forwardRef<HTMLInputElement, InputProps>(
+  ({ className, type, variant = "primary", ...props }, ref) => {
+    const [isFocused, setIsFocused] = useState(false);
+
+    const handleFocus = () => setIsFocused(true);
+    const handleBlur = () => setIsFocused(false);
+
+    return (
+      <div
+        className={classNames(styles.InputWrapper, styles[`style-${variant}`], {
+          [styles.Focused]: isFocused,
+        })}
+      >
+        <input
+          type={type}
+          ref={ref}
+          className={classNames(styles.Input, className)}
+          onFocus={handleFocus}
+          onBlur={handleBlur}
+          {...props}
+        />
+        {variant === "primary" && <button>수정</button>}
+      </div>
+    );
+  },
+);
+
+export default Input;

src/components/ui/Input/Input.types.ts

@@ -0,0 +1,5 @@
+type InputFieldVariant = "primary" | "secondary";
+
+export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+  variant?: InputFieldVariant;
+}

src/styles/_variables.scss

@@ -18,7 +18,7 @@
   --color-text-secondary: #68696e;
   --color-text-tertiary: #a6a6ad;
   --color-text-quarternary: #e0e0e0;
-  --color-text-gradient: linear-gradient(90deg, #d444ba, #443fb6);
+  --color-text-gradient: linear-gradient(90deg, var(--color-pink), var(--color-purple));
 
   --color-white: #ffffff;
   --color-black: #000000;
@@ -32,4 +32,6 @@
   --color-gray700: #161636;
   --color-bg-gradient: linear-gradient(180deg, #ffffff, #dcdce8);
   --color-bg-error: #d45085;
+  --color-purple: #443fb6;
+  --color-pink: #d444ba;
 }