[1단계 - 페이먼츠] - 버건디(전태헌) 미션 제출합니다.

.prettierrc

@@ -0,0 +1,11 @@
+{
+  "singleQuote": true,
+  "semi": true,
+  "useTabs": false,
+  "tabWidth": 2,
+  "trailingComma": "all",
+  "printWidth": 100,
+  "bracketSpacing": true,
+  "arrowParens": "always",
+  "endOfLine": "auto"
+}

README.md

@@ -1 +1,25 @@
-# react-payments
+# 💳 페이먼츠
+
+페이먼츠 사용자의 카드 정보를 입력하고 해당 카드를 어플리케이션에 등록한다.
+
+### 카드 번호 입력 및 식별
+
+- 사용자가 입력하는 카드 번호를 실시간으로 파악하여, Visa나 MasterCard에 해당하면 해당 브랜드의 로고를 UI에 표시한다.
+- 입력은 숫자만 가능하며, 유효하지 않은 번호 입력 시 피드백을 제공한다.
+
+### 카드 유효기간 입력
+
+- 월과 년도를 범위 내에서만 입력할 수 있어야 하며, 입력 제한을 두어 사용자가 숫자만 입력할 수 있도록 한다.
+
+### 카드 소유자 이름 입력
+
+- 영문자 대문자만 입력 가능한 폼을 구현한다.
+
+### 실시간 프리뷰 업데이트
+
+- 사용자의 카드 정보 입력에 따라 카드 프리뷰를 동시에 업데이트한다.
+
+### ⚠️ 주의 사항
+
+- 사용자의 입력 input에 포커스를 자동으로 이동하는 부분을 1단계에서 고려하지 않는다. **'기능' 자체에 집중해서 구현**한다. 만약 리뷰어가 사용자 경험 측면에서 피드백을 준다면, 피드백을 반영하는 시점에서 사용자 경험도 함께 고려하여 개선한다.
+- 기본적인 기능 요구사항을 만족하지 못한 코드는 코드 리뷰 대상이 아니다.

package.json

@@ -13,7 +13,9 @@
   },
   "dependencies": {
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "styled-components": "^6.1.8",
+    "styled-reset": "^4.5.2"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^1.3.3",

src/components/composables/Input.tsx

@@ -0,0 +1,23 @@
+import styled from 'styled-components';
+
+type InputProps = {
+  value: string;
+  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  type: 'text' | 'number' | 'email' | 'password';
+  placeholder: string;
+  id: string;
+};
+
+const StyledInput = styled.input`
+  border: 1px solid rgba(172, 172, 172, 1);
+  padding: 8px;
+  font-size: 0.6875rem;
+  border-radius: 2px;
+  height: 32px;
+`;
+
+export default function Input({ value, onChange, type, placeholder, id }: InputProps) {
+  return (
+    <StyledInput value={value} onChange={onChange} type={type} placeholder={placeholder} id={id} />
+  );
+}