강원대 FE_허윤수 4주차 과제 STEP4 #59
Open
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
added 30 commits
July 17, 2024 05:02
- 상세 요구사항은 각 단계에서 정리 할 예정
…n routes configuration
- API 응답 데이터 구조 변경에 따른 상품 상세 정보 접근 방식 수정 (productDetail.detail) - 상품 및 옵션 정보 로딩 상태 및 에러 처리 로직 추가
- React Query 활용 방식 개선: 데이터 fetching 함수 분리 및 경로 함수 추가
- enabled 옵션 추가를 통해 productId 값 유효성 검사 후 쿼리 실행하여 불필요한 API 호출 방지
added 27 commits
July 17, 2024 21:46
- '@/components/common/Button'에서 가져온 커스텀 버튼 컴포넌트를 사용하여 결제 버튼 대체
- '@/components/common/Form/Input/UnderlineTextField'에서 가져온 커스텀 입력 필드 컴포넌트를 사용하여 영수증 번호 입력 필드 대체
- 결제 페이지 레이아웃을 2열 구조로 수정하여 선물 메시지 및 선물 내역을 좌측에, 결제 정보를 우측에 배치 - 각 섹션에 borderWidth, padding, borderRadius, background, boxShadow 스타일 적용
- 카드 메시지를 입력하지 않은 경우 경고 메시지 표시
- 카드 메시지가 100자를 초과할 경우 경고 메시지 표시
- 현금영수증 체크 시 번호 입력 필드 표시 - 번호가 입력되지 않은 경우 경고 메시지 표시
- 현금영수증 번호가 숫자인지 유효성 검사 추가
- React Hook Form 설치 및 기본 설정 - 기존 상태 관리 및 유효성 검사를 React Hook Form으로 전환
- 현금영수증 체크 시 번호 입력 필드 표시 - 번호가 입력되지 않은 경우 경고 메시지 표시
- 현금영수증 번호가 숫자인지 유효성 검사 추가
- 카드 메시지를 입력하지 않은 경우 경고 메시지 표시
- 카드 메시지가 100자를 초과할 경우 경고 메시지 표시
danmin20
requested changes
Jul 19, 2024
Comment on lines
+12
to
+26
| interface Term { | ||
| displayCode: string; | ||
| title: string; | ||
| description: string; | ||
| } | ||
|
|
||
| interface ProductDetail { | ||
| productDetailInfo: { | ||
| terms: Term[]; | ||
| }; | ||
| } | ||
|
|
||
| interface ProductTermsProps { | ||
| productDetail: ProductDetail; | ||
| } |
There was a problem hiding this comment.
다른 파일에서도 그렇고 이전 PR에서도 그렇듯, 컴포넌트에서 사용되는 데이터 값들이 api로부터 받아오는 값이라면, api dto와 일치시켜주는 게 좋을 것 같아요~ 그래야 서버측 변경이 발생했을 때도 유연하게 대응할 수 있어요!
Comment on lines
+73
to
+77
| <Textarea | ||
| {...register('message', { | ||
| required: '카드 메시지를 입력해주세요.', | ||
| maxLength: { value: 100, message: '카드 메시지는 100자를 초과할 수 없습니다.' }, | ||
| })} |
There was a problem hiding this comment.
직접 실행시켜보지 않아 chakra-ui에서 지원하고 있는지는 모르겠으나, required 필드일 경우에는 라벨에 빨간 * 를 달아주는 것도 좋은 UI일 것 같아요~
|
컨플릭트 해결 후 직접 머지하셔도 됩니다~! |
|
추가적으로, 상세쪽 form 구현은 못하신 걸까요? |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
멘토님 안녕하세요!
이번 PR에서는 퀴즈에 대한 답변을 README에 작성하였습니다.
4단계 - 질문 답변
질문 1. 제어 컴포넌트와 비제어 컴포넌트의 차이가 무엇이고 제어 컴포넌트로 Form을 만들어야 하는 경우가 있다면 어떤 경우인지 예시와 함께 설명해주세요.
제어 컴포넌트: React에서 컴포넌트의 상태로 입력 값을 관리하는 방식입니다. 입력 필드의 값은 React 상태에 의해 제어되며,
onChange이벤트 핸들러를 사용하여 상태를 업데이트합니다.비제어 컴포넌트: 비제어 컴포넌트는 DOM 요소 자체에서 입력 값을 관리하는 방식입니다.
ref를 사용하여 입력 필드에 접근하고 값을 읽어옵니다.제어 컴포넌트는 다음과 같은 경우에 사용됩니다.:
질문 2. input type의 종류와 각각 어떤 특징을 가지고 있는지 설명해 주세요.
text: 일반적인 텍스트 입력을 받습니다.password: 입력된 텍스트를 가려서 표시합니다. 주로 비밀번호 입력에 사용됩니다.email: 이메일 주소 입력을 받습니다. 브라우저는 입력된 값이 유효한 이메일 형식인지 확인합니다.number: 숫자 입력을 받습니다. 숫자 키패드를 제공하며, 입력 값이 숫자인지 확인합니다.tel: 전화번호 입력을 받습니다. 전화번호 형식을 확인하지는 않지만, 모바일 장치에서 전화번호 키패드를 제공합니다.url: URL 입력을 받습니다. 브라우저는 입력된 값이 유효한 URL 형식인지 확인합니다.date: 날짜 입력을 받습니다. 브라우저에서 날짜 선택 UI를 제공합니다.time: 시간 입력을 받습니다. 브라우저에서 시간 선택 UI를 제공합니다.datetime-local: 날짜와 시간(로컬 시간) 입력을 받습니다.checkbox: 체크박스 입력을 받습니다. 여러 값을 선택할 수 있습니다.radio: 라디오 버튼 입력을 받습니다. 그룹 내에서 하나의 값만 선택할 수 있습니다.file: 파일 업로드 입력을 받습니다. 파일 선택 대화 상자를 제공합니다.range: 범위 슬라이더 입력을 받습니다. 최소값과 최대값 사이의 숫자를 선택할 수 있습니다.color: 색상 입력을 받습니다. 색상 선택 UI를 제공합니다.hidden: 화면에 보이지 않는 입력을 받습니다. 주로 폼 데이터에 추가적인 정보를 포함시킬 때 사용됩니다.질문 3. label tag는 어떤 역할을 하며 label로 input field를 감싸면 어떻게 동작하는지 설명해 주세요.
label태그의 역할:label태그는 폼 요소의 설명을 제공하는데 사용됩니다.label태그는 접근성을 높여주며, 사용자가 폼 요소와 상호작용하기 쉽게 만들어줍니다.label태그를 사용하면 화면 리더기와 같은 접근성 도구가 폼 요소의 목적을 더 잘 이해할 수 있습니다.label로input필드를 감쌀 때의 동작:label태그를input필드 주위에 감싸면, 사용자가label을 클릭할 때 자동으로 해당input필드가 포커스됩니다. 이는 사용자가 작은 클릭 영역을 정확히 클릭하지 않아도 쉽게 입력 필드를 선택할 수 있게 합니다.