[FE] Input, Field 컴포넌트 구현 #64

Yoonkyoungme · 2024-07-24T06:50:31Z

작업 내용

Input
- Input 컴포넌트 구현
- Input 스토리북 작성
Field
- Field 컴포넌트 구현
- Field 스토리북 작성
useInput hook 구현

특이 사항

스토리북에서 한국어로 작성된 예제들을 포함하였으며, 각 컴포넌트의 다양한 상태를 확인할 수 있습니다.

리뷰 요구사항 (선택)

github-actions · 2024-07-24T06:51:22Z

Test Results

0 tests 0 ✅ 0s ⏱️
0 suites 0 💤
0 files 0 ❌

Results for commit de8b0a2.

♻️ This comment has been updated with latest results.

Largopie

빠르게 구현해주셨네요! 고생하셨습니다 빙봉! 역시 빙봉!

코멘트 몇개 남겨두었는데 확인 후 다시 요청해주세요! 🐫

Largopie · 2024-07-24T11:03:11Z

frontend/src/hooks/useInput/useInput.ts

@@ -0,0 +1,16 @@
+import { ChangeEvent, useState } from 'react';


[P1] ChangeEvent는 type으로 import 명시해주어야 할 것 같아요! 👀

앗 자동 import 하면서 놓쳤네요ㅜㅜ 꼼꼼히 확인해 주셔서 감사해요!! 반영하였습니다!

Largopie · 2024-07-24T11:05:18Z

frontend/src/components/_common/Field/index.tsx

+  inputProps?: InputHTMLAttributes<HTMLInputElement>;
+}
+
+export default function Field({ label, description = '', inputProps }: FieldProps) {


[P3] label이라는 prop 이름이 htmlFor과 input의 id를 명시한다는 것이 제가 느끼기엔 이해하기 조금 어려운 것 같아요!
label보다는 직접적으로 id라고 명시하는 것은 어떨까요?

[C]

아니면 현재 label props를 지우고 InputHTMLAttributes<HTMLInputElement>의 타입을 활용해서 id를 직접 내려준 다음 필요한 곳에 할당하는 것은 어떨까요~?

확실히 그러네요 label을 id, htmlFor 값으로 같이 사용하고 있어서 어색하게 느껴지는 것 같습니다🥹
낙타와 해리 코멘트를 확인하고 변경해 보았어요.

변경 사항

label prop을 labelText로 변경 (해당 prop의 네이밍을 명확하게 하기 위함)

Field 컴포넌트에서 labelText와 id를 명시적으로 받아서 label과 Input의 id에 적용하도록 수정

반영 커밋: ace237b

Largopie · 2024-07-24T11:06:05Z

frontend/src/components/_common/Input/Input.styles.ts

+import { css } from '@emotion/react';
+
+export const s_input = css`
+  box-sizing: border-box;


[P2]
해당 속성도 전역 GlobalStyle에 정의되어 있어서 제외하셔도 좋을 것 같습니다!

Largopie · 2024-07-24T11:09:19Z

frontend/src/components/_common/Field/index.tsx

+interface FieldProps {
+  label: string;
+  description?: string;
+  inputProps?: InputHTMLAttributes<HTMLInputElement>;
+}
+
+export default function Field({ label, description = '', inputProps }: FieldProps) {


[P3]

Suggested change

interface FieldProps {

label: string;

description?: string;

inputProps?: InputHTMLAttributes<HTMLInputElement>;

}

export default function Field({ label, description = '', inputProps }: FieldProps) {

interface FieldProps extends InputHTMLAttributes<HTMLInputElement> {

label: string;

description?: string;

}

export default function Field({ label, description = '', ...props }: FieldProps) {

이렇게 표현해볼 수도 있을 것 같습니다! 가벼운 제안입니다!

오옷!!! 낙타🐫 좋은 의견이네요! InputHTMLAttributes를 확장하는 것이 훨씬 깔끔한 것 같습니다. 반영하였습니다~

hwinkr

빙봉 소소한 코멘트 남깁니다~

hwinkr · 2024-07-24T14:48:28Z

frontend/src/components/_common/Input/Input.styles.ts

+
+export const s_input = css`
+  box-sizing: border-box;
+  width: 20rem;


[p2]

피그마 시안이랑 width가 다른 것 같아요! rem으로 정의해두는 것 보다 디바이스 크기에 따라 Input 컴포넌트가 차지하는 공간의 비율이 달리지게 될 것 같은데 100%으로 설정해두는게 어떨까요~?

좋은 의견이네요~!~! 반영하였습니다!

hwinkr · 2024-07-24T14:49:02Z

frontend/src/hooks/useInput/useInput.ts

+const useInput = (initialValue = '') => {
+  const [value, setValue] = useState(initialValue);
+
+  const handleValueChange = (event: ChangeEvent<HTMLInputElement>) => {


이벤트 핸들러 함수 컨벤션 잊지 않고 잘 챙기고 있군요~ 좋습니다!

hwinkr · 2024-07-24T14:53:13Z

frontend/src/components/_common/Field/index.tsx

+  inputProps?: InputHTMLAttributes<HTMLInputElement>;
+}
+
+export default function Field({ label, description = '', inputProps }: FieldProps) {


[C]

아니면 현재 label props를 지우고 InputHTMLAttributes<HTMLInputElement>의 타입을 활용해서 id를 직접 내려준 다음 필요한 곳에 할당하는 것은 어떨까요~?

Yoonkyoungme

@Largopie @hwinkr
낙타, 해리! 남겨주신 코멘트를 반영하였습니다🐫🍀 좋은 의견 공유 감사해요!

Yoonkyoungme · 2024-07-24T17:17:42Z

frontend/src/hooks/useInput/useInput.ts

@@ -0,0 +1,16 @@
+import { ChangeEvent, useState } from 'react';


앗 자동 import 하면서 놓쳤네요ㅜㅜ 꼼꼼히 확인해 주셔서 감사해요!! 반영하였습니다!

Yoonkyoungme · 2024-07-24T17:18:08Z

frontend/src/components/_common/Input/Input.styles.ts

+
+export const s_input = css`
+  box-sizing: border-box;
+  width: 20rem;


좋은 의견이네요~!~! 반영하였습니다!

Yoonkyoungme · 2024-07-24T17:21:42Z

frontend/src/components/_common/Field/index.tsx

+interface FieldProps {
+  label: string;
+  description?: string;
+  inputProps?: InputHTMLAttributes<HTMLInputElement>;
+}
+
+export default function Field({ label, description = '', inputProps }: FieldProps) {


오옷!!! 낙타🐫 좋은 의견이네요! InputHTMLAttributes를 확장하는 것이 훨씬 깔끔한 것 같습니다. 반영하였습니다~

Yoonkyoungme · 2024-07-24T17:25:01Z

frontend/src/components/_common/Field/index.tsx

+  inputProps?: InputHTMLAttributes<HTMLInputElement>;
+}
+
+export default function Field({ label, description = '', inputProps }: FieldProps) {


확실히 그러네요 label을 id, htmlFor 값으로 같이 사용하고 있어서 어색하게 느껴지는 것 같습니다🥹
낙타와 해리 코멘트를 확인하고 변경해 보았어요.

변경 사항

label prop을 labelText로 변경 (해당 prop의 네이밍을 명확하게 하기 위함)

Field 컴포넌트에서 labelText와 id를 명시적으로 받아서 label과 Input의 id에 적용하도록 수정

반영 커밋: ace237b

hwinkr

뱅뱅봉봉빙빙방방, 리뷰 반영하느라 고생했어요~ 🔮

Largopie

의견 반영 감사합니다 👍👍👍 💯💯💯

- `width` 속성을 `100%`로 변경하여 입력 필드가 부모 요소의 너비에 맞추어 반응하도록 조정 - 전역 스타일에서 정의된 속성(`box-sizing: border-box;`)를 중복하여 정의하지 않도록 수정

- `label` prop을 `labelText`로 변경 - `Field` 컴포넌트에서 `labelText`와 `id`를 명시적으로 받아서 `label`과 `Input`의 `id`에 적용하도록 수정 -`InputHTMLAttributes<HTMLInputElement>`를 상속받아 추가적인 `input` 속성을 직접 전달할 수 있도록 개선

Yoonkyoungme requested review from hwinkr and Largopie as code owners July 24, 2024 06:50

Yoonkyoungme self-assigned this Jul 24, 2024

Yoonkyoungme added 🐈 프론트엔드 프론트엔드 관련 이슈에요 :) 🚀 기능 기능을 개발해요 :) labels Jul 24, 2024

Largopie requested changes Jul 24, 2024

View reviewed changes

hwinkr requested changes Jul 24, 2024

View reviewed changes

Yoonkyoungme commented Jul 24, 2024

View reviewed changes

hwinkr approved these changes Jul 24, 2024

View reviewed changes

Largopie approved these changes Jul 25, 2024

View reviewed changes

Yoonkyoungme added 11 commits July 25, 2024 10:51

feat: Input 컴포넌트 구현

9fefd9c

design: Input 컴포넌트 스타일 정의 및 적용

ffd1e78

test: Input 컴포넌트 스토리북 작성

a2223e1

feat: Field 컴포넌트 구현

1fd6aea

design: Field 컴포넌트 스타일 정의 및 적용

fe1e402

test: Field 컴포넌트 스토리북 작성

86deba4

feat: useInput hook 구현

28fd6db

style: ChangeEvent를 type으로 import

5ce1173

style: css 선언 순서 정렬

213027a

Yoonkyoungme force-pushed the feat/61-input-and-field branch from ace237b to de8b0a2 Compare July 25, 2024 01:51

Yoonkyoungme merged commit 73b8c14 into develop Jul 25, 2024
5 checks passed

Yoonkyoungme deleted the feat/61-input-and-field branch July 25, 2024 15:32

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[FE] Input, Field 컴포넌트 구현 #64

[FE] Input, Field 컴포넌트 구현 #64

Yoonkyoungme commented Jul 24, 2024 •

edited

Loading

github-actions bot commented Jul 24, 2024 •

edited

Loading

Largopie left a comment

Largopie Jul 24, 2024

Yoonkyoungme Jul 24, 2024

Largopie Jul 24, 2024

hwinkr Jul 24, 2024

Yoonkyoungme Jul 24, 2024

Largopie Jul 24, 2024

Largopie Jul 24, 2024

Yoonkyoungme Jul 24, 2024

hwinkr left a comment

hwinkr Jul 24, 2024

Yoonkyoungme Jul 24, 2024

hwinkr Jul 24, 2024

hwinkr Jul 24, 2024

Yoonkyoungme left a comment

Yoonkyoungme Jul 24, 2024

Yoonkyoungme Jul 24, 2024

Yoonkyoungme Jul 24, 2024

Yoonkyoungme Jul 24, 2024

hwinkr left a comment

Largopie left a comment

		@@ -0,0 +1,16 @@
		import { ChangeEvent, useState } from 'react';

[FE] Input, Field 컴포넌트 구현 #64

[FE] Input, Field 컴포넌트 구현 #64

Conversation

Yoonkyoungme commented Jul 24, 2024 • edited Loading

관련 이슈

작업 내용

특이 사항

리뷰 요구사항 (선택)

github-actions bot commented Jul 24, 2024 • edited Loading

Test Results

Largopie left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

변경 사항

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

hwinkr left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Yoonkyoungme left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

변경 사항

hwinkr left a comment

Choose a reason for hiding this comment

Largopie left a comment

Choose a reason for hiding this comment

Yoonkyoungme commented Jul 24, 2024 •

edited

Loading

github-actions bot commented Jul 24, 2024 •

edited

Loading