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

.github/PULL_REQUEST_TEMPLATE/solo-template.yml

@@ -1,6 +1,6 @@
 name: '📝 PR Template (Solo)'
 description: '혼자 쓰는 컴포넌트 PR 템플릿'
-labels: ['pr']
+labels: ['feat']
 body:
   - type: input
     id: title

pnpm-workspace.yaml

@@ -0,0 +1,5 @@
+ignoredBuiltDependencies:
+  - unrs-resolver
+
+packages:
+  - 'xp-components'

src/componets/Button/Button.scss

@@ -2,7 +2,7 @@
 @use 'sass:map';
 
 .btn {
-  background: #d4d4d4;
+  background: s.color(gray-300);
   @include s.text-style-extended(lg, 400, gray-900);
   border: none;
   padding: 6px 18px;
@@ -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,77 @@
+@use '../../styles/index' as s;
+@use 'sass:map';
+
+
+.input_wrapper {
+  position: relative;
+  cursor: pointer;
+  width: 100%;
+}
+
+// 인풋 필드
+.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: 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),
+      0px 0px 0 0 s.color(gray-900);
+  }
+
+  @media (max-width: 640px) {
+    @include s.text-style-extended(md, 400, gray-900);
+    padding: 5px 13px;
+  }
+}
+
+// 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 {
+
+  background: s.color(white);
+  padding: 0 4px;
+}

src/componets/Input/Input.stories.tsx

@@ -0,0 +1,45 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import Input from './Input';
+
+const meta: Meta<typeof Input> = {
+  title: 'Components/Input',
+  component: Input,
+  argTypes: { onChange: { action: 'changed' } }
+};
+
+export default meta;
+type Story = StoryObj<typeof Input>;
+
+export const Text: Story = {
+  args: {
+    label: 'Text 입력',
+    id: 'input-text',
+    type: 'text',
+    placeholder: '텍스트 입력'
+  }
+};
+
+export const Password: Story = {
+  args: {
+    label: '비밀번호 입력',
+    id: 'input-password',
+    type: 'password',
+    placeholder: '비밀번호 입력'
+  }
+};
+
+export const Email: Story = {
+  args: {
+    label: '이메일 입력',
+    id: 'input-email',
+    type: 'email',
+    placeholder: '이메일 입력'
+  }
+};
+
+export const AutoId: Story = {
+  args: {
+    label: '자동 ID Input',
+    placeholder: 'id 없이 렌더링'
+  }
+};

src/componets/Input/Input.test.tsx

@@ -0,0 +1,43 @@
+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('label(플레이스홀더)과 input이 id로 연결되어 있다', () => {
+  render(<Input label="테스트라벨" />);
+  const label = screen.getByText('테스트라벨');
+  const input = screen.getByRole('textbox');
+  expect(label).toHaveAttribute('for', input.getAttribute('id'));
+});
+
+test('type, placeholder, value props 전달 확인', () => {
+  render(
+    <Input
+      label="이메일"
+      type="email"
+      placeholder="이메일 입력"
+      value="[email protected]"
+    />
+  );
+  const input = screen.getByRole('textbox');
+  expect(input).toHaveAttribute('type', 'email');
+  expect(input).toHaveAttribute('placeholder', '이메일 입력');
+  expect(input).toHaveValue('[email protected]');
+});
+
+test('Input 입력 시 onChange 이벤트 발생', async () => {
+  const handleChange = vi.fn();
+  render(<Input label="패스워드" type="password" onChange={handleChange} />);
+  const input = screen.getByLabelText('패스워드');
+  await userEvent.type(input, 'secret');
+  expect(handleChange).toHaveBeenCalled();
+});
+
+test('id 소품 없을 때 자동 id 생성', () => {
+  render(<Input label="자동ID" />);
+  const input = screen.getByRole('textbox');
+  const label = screen.getByText('자동ID');
+  expect(input.getAttribute('id')).toBeTruthy();
+  expect(label).toHaveAttribute('for', input.getAttribute('id'));
+});

src/componets/Input/Input.tsx

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