부산대 FE_송지혁 4주차 과제 Step 3~4 #111

00306 · 2024-07-20T18:23:22Z

안녕하세요 멘토님!!!!

인증 상태를 확인하고 사용자를 적절한 페이지로 리디렉션하는 훅을 추가했습니다.

상품 상세 정보를 조회하는 useGetDetailProduct 훅을 추가했습니다.

상품 상세 정보를 정의하는 타입을 추가했습니다.

상품 상세 페이지와 주문 페이지로 이동하기 위한 동적 경로 생성 함수를 추가했습니다.

주문 폼의 상태와 유효성 검사를 처리하는 커스텀 훅을 추가했습니다.

Provider를 적용해 Chakra UI의 테마와 스타일을 적용할 수 있도록 설정했습니다.

api call이 두 번 불려지는 현상을 막기 위해 React.StrictMode를 비활성화했습니다.

재사용 가능한 CTA 버튼 컴포넌트를 추가했습니다.

이렇게 간편할 수 가

…into 00306

JunilHwang

안녕하세요 지혁님~
마지막 단계라서 Request Changes 로 남겨봅니다!
몇 가지 리뷰 남겼으니 확인 부탁드려요 ㅎㅎ

JunilHwang · 2024-07-21T04:01:26Z

src/api/hooks/useQuantity.ts

+export const useQuantity = ({ watch, setValue }: UseQuantityParams) => {
+  const quantity = watch('quantity');
+
+  const handleIncrement = () => {
+    setValue('quantity', quantity + 1);
+  };
+
+  const handleDecrement = () => {
+    setValue('quantity', quantity > 1 ? quantity - 1 : 1);
+  };
+
+  return {
+    quantity,
+    handleIncrement,
+    handleDecrement,
+  };


이 훅이랑 API 랑 어떤 연관이 있는걸까요?

JunilHwang · 2024-07-21T04:01:43Z

src/api/hooks/useOrderValidation.ts

+interface ValidationRule {
+  isValid: (state: OrderFormData) => boolean;
+  errorMessage: string;
+}
+
+const validationRules: ValidationRule[] = [
+  {
+    isValid: ({ message }) => message.length <= 99,
+    errorMessage: '메시지는 100자 이내로 입력해주세요.',
+  },
+  {
+    isValid: ({ message }) => message.trim() !== '',
+    errorMessage: '메시지를 입력해주세요.',
+  },
+  {
+    isValid: ({ checkedReceipt, receiptNumber }) =>
+      !checkedReceipt || /^[0-9]+$/.test(receiptNumber.trim()),
+    errorMessage: '현금영수증 번호에는 숫자만 입력해주세요.',
+  },
+  {
+    isValid: ({ checkedReceipt, receiptNumber }) => !checkedReceipt || receiptNumber.trim() !== '',
+    errorMessage: '현금영수증 번호를 입력해주세요.',
+  },
+];
+
+export const useOrderValidation = () => {
+  const validateOrder = (state: OrderFormData): string | null => {
+    for (const rule of validationRules) {
+      if (!rule.isValid(state)) {
+        return rule.errorMessage;
+      }
+    }
+    return null;
+  };
+
+  return validateOrder;
+};


마찬가지로 이 훅과 API 는 전혀 연관이 없어보여요
그런데 왜 api/hooks 폴더에 위치하는걸까요?

헉 hook 폴더가 두 개가 있어서 헷갈렸던 것 같습니다🚐.. ㅣ

JunilHwang · 2024-07-21T04:02:31Z

src/components/features/Order/OrderFoam.tsx

 import { Text, Textarea } from '@chakra-ui/react';
+import { useFormContext } from 'react-hook-form';

-interface OrderFormProps {
-  message: string;
-  setMessage: (value: string) => void;
-}
+import type { OrderFormData } from '@/pages/Order/OrderPage';

-export const OrderForm = ({ message, setMessage }: OrderFormProps) => (
-  <>
-    <Text fontSize="18px" fontWeight="bold">
-      나에게 주는 선물
-    </Text>
-    <Textarea
-      variant="filled"
-      w="100%"
-      h="100px"
-      placeholder="선물과 함께 보낼 메시지를 적어주세요"
-      padding="12px 16px"
-      textAlign="left"
-      value={message}
-      onChange={(e) => setMessage(e.target.value)}
-    />
-  </>
-);
+export const OrderForm = () => {
+  const { register } = useFormContext<OrderFormData>();


컴포넌트 폴더가 페이지 폴더를 의존하는건 자연스러운 의존성 방향이 아닌 것 같아요!

컴포넌트가 페이지의 존재를 아예 모르도록 만들어야 하지 않을까요?
아니면 그냥 이 컴포넌트를 페이지 폴더에 위치시킨다거나

JunilHwang · 2024-07-21T04:06:01Z

src/api/hooks/useQuantity.ts

+  const handleIncrement = () => {
+    setValue('quantity', quantity + 1);
+  };
+
+  const handleDecrement = () => {
+    setValue('quantity', quantity > 1 ? quantity - 1 : 1);
+  };
+
+  return {
+    quantity,
+    handleIncrement,
+    handleDecrement,


제가 이전 PR에서 이벤트와 함수에 대해 이야기를 했었는데요
이 친구들은 이벤트 핸들러의 모습인가요 함수의 모습인가요?
지금은 이벤트랑 전혀 무관해보여요.

JunilHwang · 2024-07-21T04:06:34Z

README.md

+> 질문 3. label tag는 어떤 역할을 하며 label로 input field를 감싸면 어떻게 동작하는지 설명해 주세요.
+
+  <label> 태그는 HTML에서 폼 요소에 대한 설명을 제공하는 데 사용됩니다. 주로 input, textarea, select 등의 폼 요소와 함께 사용되어 사용자에게 해당 폼 필드의 목적을 명확히 알리는 역할을 합니다.
+
+
+<br />
+
+
+> 역할
+
+  >- 접근성 향상: 스크린 리더와 같은 보조 기술을 사용하는 사용자에게 폼 요소의 목적을 설명합니다.
+  >- 사용자 경험 향상: 사용자가 폼 요소를 더 쉽게 이해하고 사용할 수 있도록 도와줍니다.
+
+
+  <br />
+
+
+> input 요소를 label 태그로 감싸서 연결
+> 
+  >- 포커스 이동: 이 경우 for 속성을 사용하지 않아도 <label>을 클릭하면 자동으로 <input> 요소가 포커스됩니다. 이는 사용자 경험에 긍정적인 영향을 줍니다, 특히 폼 필드가 작거나 모바일 기기에서 유용합니다.  
+  >- 접근성: 스크린 리더가 <label> 태그를 읽어 사용자에게 폼 필드의 목적을 설명합니다. 이는 시각 장애가 있는 사용자에게 큰 도움이 됩니다.


label로 input을 감싸서 사용하지 않고 label을 클릭했을 때 input에 focus가 가도록 하려면 어떻게 해야 할까요?

JunilHwang · 2024-07-21T04:07:06Z

README.md

+> 질문 1. 제어 컴포넌트와 비제어 컴포넌트의 차이가 무엇이고 제어 컴포넌트로 Form을 만들어야 하는 경우가 있다면 어떤 경우인지 예시와 함께 설명해주세요.
+
+>- 제어 컴포넌트는 React 상태(state)를 통해 폼 데이터가 관리됩니다. 폼 요소의 값(value)은 상태에 저장되고, 상태를 업데이트하는 함수(setState)로 값이 변경됩니다. 모든 폼 입력 값은 컴포넌트의 상태를 통해 제어되므로 "제어" 컴포넌트라고 합니다.
+
+>- 비제어 컴포넌트는 DOM 자체에서 폼 데이터를 관리합니다. React의 상태를 사용하지 않고, ref를 통해 직접 DOM 요소에 접근하여 값을 가져오거나 설정합니다.
+
+>- 즉각적인 사용자 피드백(실시간 유효성 검사), 상태 기반의 동적 폼 업데이트 등이 필요한 경우에 제어 컴포넌트로 Form을 만드는 것이 유용합니다.


성능에 대한 관점으로는 어떤 차이가 있을까요?

00306 and others added 30 commits July 17, 2024 15:12

docs: 1단계 기능 요구 사항 정리

8344657

chore: chakra-ui 패키지 설치

8176f73

feat: useAuthRedirectHandler hook 추가

d0eb242

인증 상태를 확인하고 사용자를 적절한 페이지로 리디렉션하는 훅을 추가했습니다.

feat: useGetDetailProduct hook 추가

e86d17c

상품 상세 정보를 조회하는 useGetDetailProduct 훅을 추가했습니다.

feat: ProductDetailData type 정의 추가

f0ea6db

상품 상세 정보를 정의하는 타입을 추가했습니다.

feat: 동적 경로 생성 함수 추가

b8e7ca4

상품 상세 페이지와 주문 페이지로 이동하기 위한 동적 경로 생성 함수를 추가했습니다.

feat: 상세 페이지와 주문 페이지 라우트 추가

cc8be6b

feat: useOrderFoam hook 추가

a7712a5

주문 폼의 상태와 유효성 검사를 처리하는 커스텀 훅을 추가했습니다.

feat: ChakraProvider 추가

b21c6d7

Provider를 적용해 Chakra UI의 테마와 스타일을 적용할 수 있도록 설정했습니다.

test: React.StrictMode 비활성화

5ae1b11

api call이 두 번 불려지는 현상을 막기 위해 React.StrictMode를 비활성화했습니다.

feat: useAuthRedirect hook 추가

03dbb7d

feat: CTA 버튼 컴포넌트 추가

224cdbe

재사용 가능한 CTA 버튼 컴포넌트를 추가했습니다.

feat: Stepper 컴포넌트 추가

9ed8349

feat: GiftDetails 컴포넌트 추가

9ba4108

feat: OrderFoam 컴포넌트 추가

9ffee5a

feat: PaymentDetails 컴포넌트 추가

32dbbf1

feat: ProductDetailSection 컴포넌트 추가

9cbb044

feat: TotalPrice 컴포넌트 추가

ac88182

feat: Link 컴포넌트를 사용하여 상품 상세 페이지로 이동 추가

0ae2f48

feat: DetailGoodsItemPage 추가

4f30b62

feat: OrderPage 추가

b42b5f9

Merge branch 'main' of https://github.com/00306/react-product-order

f924d03

�docs: 2단계 기능 요구 사항 정리

893ee6c

docs: 1~2단계 완료한 기능 체크

ed19f48

docs: 3~4단계 기능 요구 사항 및 답변 정리

0b730a5

docs: 가독성 수정

559589a

chore: react-hook-form 패키지 설치

c88aae8

move: useAuthRedirect hook 코드 이동

4cafc83

feat: useOrderValidation hook 추가

423e059

chore: eslint any 타입 허용

dd1b929

00306 added 11 commits July 21, 2024 03:09

refactor: useGetDetailProduct hook useQuery 적용

8f4bb91

이렇게 간편할 수 가

feat: useQuantity hook 추가

4be23b5

refactor: useQuantity hook을 통한 로직 분리

fea559b

feat: react-hook-form 사용을 위한 form 태그 추가

6a36a87

feat: OrderPage FormProvider 추가

ca78486

feat: validateOrder hook 추가

7b68f65

feat: OrderPage 하위 컴포넌트 useFormContext 추가

090fe52

feat: CTAButton ButtonProps 상속으로 인한 기능 확장

b814040

feat: useGetDetailProduct hook return 값 변경으로 인한 변수 추가

6fc5620

Merge branch '00306' of https://github.com/00306/react-product-order …

29e58d3

…into 00306

merge: Conflict 해결!

64e070b

JunilHwang self-assigned this Jul 21, 2024

JunilHwang self-requested a review July 21, 2024 03:58

JunilHwang assigned 00306 Jul 21, 2024

JunilHwang requested changes Jul 21, 2024

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

부산대 FE_송지혁 4주차 과제 Step 3~4 #111

부산대 FE_송지혁 4주차 과제 Step 3~4 #111

00306 commented Jul 20, 2024

JunilHwang left a comment

JunilHwang Jul 21, 2024

JunilHwang Jul 21, 2024

00306 Jul 22, 2024

JunilHwang Jul 21, 2024

JunilHwang Jul 21, 2024

JunilHwang Jul 21, 2024

JunilHwang Jul 21, 2024

부산대 FE_송지혁 4주차 과제 Step 3~4 #111

Are you sure you want to change the base?

부산대 FE_송지혁 4주차 과제 Step 3~4 #111

Conversation

00306 commented Jul 20, 2024

JunilHwang left a comment

Choose a reason for hiding this comment

JunilHwang Jul 21, 2024

Choose a reason for hiding this comment

JunilHwang Jul 21, 2024

Choose a reason for hiding this comment

00306 Jul 22, 2024

Choose a reason for hiding this comment

JunilHwang Jul 21, 2024

Choose a reason for hiding this comment

JunilHwang Jul 21, 2024

Choose a reason for hiding this comment

JunilHwang Jul 21, 2024

Choose a reason for hiding this comment

JunilHwang Jul 21, 2024

Choose a reason for hiding this comment