Repository: SOPT-all/36-COLLABORATION-WEB-INTERPARK-TICKET
Pull request #36: feat: textfield 구현
Author: login: karnelll
Labels: name: 서희
name: feature
description: 기능 추가
Created: 2025-05-14T21:02:07Z | Merged: 2025-05-15T18:04:38Z

## 📝 PR 내용 요약

- textfield component 구현

## ✅ 작업 상세

### 1. `TextField`

```tsx
<TextField
  placeholder="예매자 이름"
  value={name}
  onChange={setName}
/>
```
* **역할**: 사용자 이름 입력 필드
* **동작**: `value`와 `onChange`를 통해 상태 연동
* **props**

  * `placeholder: string`
  * `value: string`
  * `onChange: (value: string) => void`
  
## #️⃣ 연관 이슈

#29

## 🖼️ 변경된 화면 (선택)

> UI 변경이 있다면 스크린샷 첨부
<img width="759" alt="스크린샷 2025-05-15 오전 6 01 40" src="https://github.com/user-attachments/assets/c2df0a25-0ace-4cbf-b2c1-ee0a34b78ed0" />
<img width="743" alt="스크린샷 2025-05-15 오전 6 01 57" src="https://github.com/user-attachments/assets/7da950e7-63cc-481d-b208-a3b275c96d84" />

## 📌 추가 정보

* 모든 버튼 UI는 **vanilla-extract + tokens.css.ts** 기반 스타일 적용
* 아이콘은 모두 **`svg?react` 방식**으로 import

## 💬 기타 논의 사항 (선택)

- 이슈/리뷰 요청/고민 중인 내용 등

## 💬 리뷰 요구사항 (선택)

- 리뷰 시 꼭 봐줬으면 하는 부분이 있다면 작성



Diff:
diff --git a/src/pages/Payment/components/TextField/TextField.css.ts b/src/pages/Payment/components/TextField/TextField.css.ts
new file mode 100644
index 0000000..f8b68a5
--- /dev/null
+++ b/src/pages/Payment/components/TextField/TextField.css.ts
@@ -0,0 +1,40 @@
+import { style } from "@vanilla-extract/css";
+import { vars } from "@/shared/styles/tokens.css.ts";
+import { fontStyle } from "@/shared/styles/fontStyle";
+
+export const textField = style({
+  display: "flex",
+  width: "33.6rem",
+  height: "5rem",
+  padding: "1.6rem 1.5rem",
+  alignItems: "center",
+  flexShrink: 0,
+  background: vars.color.gray10,
+  borderRadius: "0.4rem",
+  border: `1px solid ${vars.color.gray20}`,
+  transition: "border 0.2s",
+  selectors: {
+    "&:focus-within": {
+      border: `1px solid ${vars.color.blue90}`,
+    },
+  },
+});
+
+export const input = style({
+  width: "100%",
+  background: "transparent",
+  border: "none",
+  outline: "none",
+  color: vars.color.gray30,
+  ...fontStyle("b8_sb_14"),
+  selectors: {
+    "&::placeholder": {
+      color: vars.color.gray30,
+      fontWeight: vars.font.b8_sb_14.weight as any,
+    },
+  },
+});
+
+export const inputHasText = style({
+  color: vars.color.gray90,
+});
diff --git a/src/pages/Payment/components/TextField/TextField.tsx b/src/pages/Payment/components/TextField/TextField.tsx
new file mode 100644
index 0000000..606b76d
--- /dev/null
+++ b/src/pages/Payment/components/TextField/TextField.tsx
@@ -0,0 +1,23 @@
+import type { ChangeEvent } from "react";
+import clsx from "clsx";
+import * as styles from "./TextField.css";
+
+interface TextFieldProps {
+  placeholder: string;
+  value: string;
+  onChange: (value: string) => void;
+}
+
+export default function TextField({ placeholder, value, onChange }: TextFieldProps) {
+  return (
+    <div className={styles.textField}>
+      <input
+        className={clsx(styles.input, value && styles.inputHasText)}
+        type="text"
+        placeholder={placeholder}
+        value={value}
+        onChange={(e: ChangeEvent<HTMLInputElement>) => onChange(e.target.value)}
+      />
+    </div>
+  );
+}


Reviews:
user: login: mnbvcxzyj
body: 텍스트필드의 달인 ~~~~!!! 고생하셨습니다 ㅎㅎ 

폰트 변경이랑 지금 파일명 하이픈 대신 파스칼 케이스로 변경해주세요 !!!  
state: CHANGES_REQUESTED
author_association: MEMBER
submitted_at: 2025-05-15T07:11:26Z
user: login: karnelll
state: COMMENTED
author_association: COLLABORATOR
submitted_at: 2025-05-15T07:56:47Z
user: login: soyyyyy
body: 깔끔한 텍스트 필드 수고하셨습니다!!
state: DISMISSED
author_association: COLLABORATOR
submitted_at: 2025-05-15T08:27:06Z
user: login: mnbvcxzyj
body: 굿 !!! 반영 확인했습니당 
state: DISMISSED
author_association: MEMBER
submitted_at: 2025-05-15T15:30:21Z
user: login: mnbvcxzyj
state: DISMISSED
author_association: MEMBER
submitted_at: 2025-05-15T15:50:50Z
user: login: jllee000
body: 짱짱텍스트필드! 고생했어용!
state: COMMENTED
author_association: MEMBER
submitted_at: 2025-05-15T16:06:10Z

Review comments:
path: src/pages/Payment/components/TextField/Text-Field.css.ts
user: login: mnbvcxzyj
body: 여기도 폰트 변경 부탁드립니당 
created_at: 2025-05-15T07:10:37Z
author_association: MEMBER
path: src/pages/Payment/components/TextField/Text-Field.css.ts
user: login: karnelll
body: 넵!!👍👍👍🙏
created_at: 2025-05-15T07:56:47Z
author_association: COLLABORATOR

PR comments:
user: login: github-actions[bot]
created_at: 2025-05-14T21:02:36Z
body: ### 빌드 결과
빌드 성공 🎉
author_association: NONE
user: login: github-actions[bot]
created_at: 2025-05-15T11:56:11Z
body: ### 빌드 결과
빌드 실패 ❌
author_association: NONE
user: login: github-actions[bot]
created_at: 2025-05-15T11:56:43Z
body: ### 빌드 결과
빌드 성공 🎉
author_association: NONE
user: login: github-actions[bot]
created_at: 2025-05-15T11:57:59Z
body: ### 빌드 결과
빌드 실패 ❌
author_association: NONE
user: login: github-actions[bot]
created_at: 2025-05-15T12:11:27Z
body: ### 빌드 결과
빌드 성공 🎉
author_association: NONE