[feat/input] - input 컴포넌트 구현

package.json

@@ -35,6 +35,7 @@
     "@testing-library/user-event": "^14.6.1",
     "@types/react": "^19.1.10",
     "@types/react-dom": "^19.1.7",
+    "@types/testing-library__user-event": "^4.2.0",
     "@typescript-eslint/eslint-plugin": "^8.39.1",
     "@typescript-eslint/parser": "^8.39.1",
     "@vitejs/plugin-react": "^5.0.0",

pnpm-workspace.yaml

@@ -0,0 +1,2 @@
+ignoredBuiltDependencies:
+  - unrs-resolver

src/componets/Button/Button.scss

@@ -25,11 +25,11 @@
       2px 2px 0 0 s.color(gray-900);
   }
   &:active {
-    background: #bbbbbb;
+    background: s.color(gray-300);
     color: s.color(gray-900);
     box-shadow:
       inset 1px 1px 0 0 s.color(white),
-      1px 1px 0 0 #868686,
+        1px 1px 0 0 s.color(gray-600),
       0px 0px 0 0 s.color(gray-900);
   }
 

src/componets/Checkbox/Checkbox.scss

@@ -36,16 +36,17 @@
   height: 18px;
   border-radius: 0;
   border: 2px solid s.color(gray-400);
-  background: s.color(white);
+  background: s.color(gray-300);
   cursor: pointer;
-  transition:
+  transition: 
     background-color 0.2s,
     border-color 0.2s;
 
   &:checked {
     ~ .checkbox_png {
       opacity: 1;
     }
+    border: 2px solid s.color(gray-900);
   }
 
   @media (max-width: 640px) {

src/componets/Checkbox/Checkbox.stories.tsx

@@ -10,13 +10,13 @@ const meta: Meta<typeof Checkbox> = {
 export default meta;
 type Story = StoryObj<typeof Checkbox>;
 
-export const Primary: Story = {
+export const Default: Story = {
   args: {
     label: 'Checkbox Default'
   }
 };
 
-export const Secondary: Story = {
+export const Checked: Story = {
   args: {
     label: 'Checkbox Checked',
     checked: true

src/componets/Input/Input.scss

@@ -0,0 +1,85 @@
+@use '../../styles/index' as s;
+@use 'sass:map';
+
+
+.input_wrapper {
+  position: relative;
+  cursor: pointer;
+  box-shadow:
+    inset 1px 1px 0 0 s.color(white),
+    1px 1px 0 0 s.color(gray-600),
+    2px 2px 0 0 s.color(gray-900);
+  transition:
+    background-color 0.12s,
+    color 0.12s,
+    box-shadow 0.12s;
+}
+
+// 인풋 필드
+.input_field {
+  width: 100%;
+  padding: 10px;
+  box-sizing: border-box;
+  border: none; 
+  background: s.color(gray-300); 
+  color: s.color(gray-900);
+
+  box-shadow:
+    inset 1px 1px 0 0 s.color(white),
+    1px 1px 0 0 s.color(gray-600),
+    2px 2px 0 0 s.color(gray-900);
+  transition:
+    background-color 0.12s,
+    color 0.12s,
+    box-shadow 0.12s;
+
+
+  &:hover,
+  &:focus {
+    outline: none;
+    background: s.color(gray-300);
+    color: s.color(gray-900);
+    box-shadow:
+      inset 1px 1px 0 0 s.color(white),
+      2px 2px 0 0 s.color(gray-900); 
+  }
+
+
+  &:active {
+    background: #bbbbbb;
+    color: s.color(gray-900);
+    box-shadow:
+      inset 1px 1px 0 0 s.color(white),
+      1px 1px 0 0 #868686,
+      0px 0px 0 0 s.color(gray-900);
+  }
+
+  @media (max-width: 640px) {
+    @include s.text-style-extended(md, 400, gray-900);
+    padding: 5px 12px;
+  }
+}
+
+// placeholder 스타일
+.input_placeholder {
+  position: absolute;
+  left: 8px;
+  top: -10px;
+  @include s.text-style-extended(xs, 400, gray-900);
+  background: s.color(white);
+  padding: 0 4px;
+  pointer-events: none;
+  transition: 0.2s;
+  box-shadow:
+    inset 1px 1px 0 0 s.color(white),
+    1px 1px 0 0 s.color(gray-600),
+    0px 0px 0 0 s.color(gray-900);
+}
+
+// focus 시 placeholder 스타일
+.input_field:focus + .input_placeholder,
+.input_field:not(:placeholder-shown) + .input_placeholder {
+  @include s.text-style-extended(xs, 400, gray-900);
+  background: s.color(white);
+  padding: 0 4px;
+}

src/componets/Input/Input.stories.tsx

@@ -0,0 +1,21 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import Input from './Input';
+
+const meta: Meta<typeof Input> = {
+  title: 'Components/Input',
+  component: Input,
+  argTypes: { onClick: { action: 'changed' } }
+};
+
+export default meta;
+type Story = StoryObj<typeof Input>;
+
+export const Primary: Story = {
+  args: {
+    label: 'Input Default',
+    id: 'input-default',
+    placeholder: '여기에 입력하세요'
+  }
+
+};
+

src/componets/Input/Input.test.tsx

@@ -0,0 +1,26 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { test, expect, vi } from 'vitest';
+
+import Input from './Input';
+
+test('Input 렌더링 및 label(플레이스홀더) 확인', () => {
+  render(<Input label="테스트라벨" />);
+  expect(screen.getByText('테스트라벨')).toBeInTheDocument();
+  expect(screen.getByRole('textbox')).toBeInTheDocument();
+});
+
+test('Input에 placeholder, value props 전달 확인', () => {
+  render(<Input label="테스트라벨" placeholder="여기에 입력" value="abc" />);
+  const input = screen.getByRole('textbox');
+  expect(input).toHaveAttribute('placeholder', '여기에 입력');
+  expect(input).toHaveValue('abc');
+});
+
+test('Input 입력 시 onChange 이벤트 발생', async () => {
+  const handleChange = vi.fn();
+  render(<Input label="테스트라벨" onChange={handleChange} />);
+  const input = screen.getByRole('textbox');
+  await userEvent.type(input, 'hello');
+  expect(handleChange).toHaveBeenCalled();
+});

src/componets/Input/Input.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import './Input.scss';
+
+export interface InputProps
+  extends React.InputHTMLAttributes<HTMLInputElement> {
+  label: string;
+}
+
+const Input: React.FC<InputProps> = ({ label, id, ...rest }) => {
+  return (
+    <div className="input_wrapper">
+      <input type="text" className="input_field" id={id} {...rest} />
+      <label htmlFor={id} className="input_placeholder">{label}</label>
+    </div>
+  );
+};
+
+export default Input;