부산대 FE_이경서 4주차 과제 step3,4 #115
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
JunilHwang
requested changes
Jul 21, 2024
Comment on lines
+16
to
+19
| const BASE_URL = 'https://kakao-tech-campus-mock-server.vercel.app/api/v1/products/'; | ||
|
|
||
| const getProductDetail = async (productId: string) => { | ||
| const res = await axios.get<{ detail: ProductDetailData }>(`${BASE_URL}${productId}/detail`); |
There was a problem hiding this comment.
aixosInstance, axios.create 등을 활용해보세요!
Comment on lines
+25
to
+28
| const BASE_URL = 'https://kakao-tech-campus-mock-server.vercel.app/api/v1/products/'; | ||
|
|
||
| export const getProductOption = async (productId: string) => { | ||
| const res = await axios.get<ProductOptionData>( | ||
| `https://kakao-tech-campus-mock-server.vercel.app/api/v1/products/${productId}/detail`, | ||
| ); | ||
| const res = await axios.get<ProductOptionData>(`${BASE_URL}${productId}/detail`); |
Comment on lines
+24
to
26
| const { data: productDetail } = useGetProductDetail(productId ?? ''); | ||
| const { data: productOption, isLoading: isOptionLoading } = useGetProductOption(productId ?? ''); | ||
| const [isLoading, setIsLoading] = useState(true); |
Comment on lines
34
to
51
| useEffect(() => { | ||
| const fetchProductDetail = async () => { | ||
| try { | ||
| console.log('ID:', productId); | ||
| const res = await axios.get( | ||
| `https://kakao-tech-campus-mock-server.vercel.app/api/v1/products/${productId}/detail`, | ||
| ); | ||
| if (!res.data.detail) { | ||
| navigate(RouterPath.notFound); | ||
| return; | ||
| } | ||
| setProductDetail(res.data.detail); | ||
| setIsLoading(false); | ||
| } catch (error) { | ||
| console.error(error); | ||
| } finally { | ||
| setIsLoading(false); | ||
| } | ||
| }; | ||
| fetchProductDetail(); | ||
| }, [productId, navigate]); |
| @@ -78,15 +78,18 @@ export const DetailPage = () => { | |||
| } | |||
| }; | |||
|
|
|||
| if (isLoading || !productDetail) { | |||
| if (isLoading || !productDetail || !productOption) { | |||
There was a problem hiding this comment.
const { loading, detail, options } = useProductDetailWithOptions();
앞에서 언급한 커스텀 훅을 사용해서 이 부분을 loading 하나로 묶어버리를 수 있을 것 같아요!
| value={productCount} | ||
| onChange={handleProductCountChange} | ||
| {...register('productCount', { min: 1 })} | ||
| onChange={(e) => handleProductCountChange(parseInt(e.target.value))} |
There was a problem hiding this comment.
changeProductCount 처럼 이 함수를 표현해야 더 적합할 것 같아요.
handleProductCountChange라는 이름은 결국 onProductCountChange 라는 이벤트를 처리한다는 이야기인데
이 페이지에서 onProductCountChange 가 발생하는 순간이 언제일까요?
아마 이벤트를 표현하려면 이렇게 해야 적합하지 않을까요?
const handleProductCountChange = () => console.log('productCount 가 변경되었음을 알리는 이벤트입니다.');
const changeProductCount = (value: number) => {
setValue('productCount', value);
handleProductCountChange();
};이런식으로 이벤트와 함수를 명확히 구준해주세요!
Comment on lines
+68
to
+83
| if (!message.trim()) { | ||
| alert('메시지를 입력해주세요.'); | ||
| return; | ||
| } | ||
| if (message.length > 100) { | ||
| alert('메시지를 100자 이내로 입력해주세요.'); | ||
| return; | ||
| } | ||
| if (receiptRequested) { | ||
| if (!receiptNumber.trim()) { | ||
| alert('현금 영수증 번호를 입력해주세요.'); | ||
| return; | ||
| } | ||
| if (isNaN(Number(receiptNumber))) { | ||
| alert('현금 영수증 번호를 숫자만 입력해주세요.'); | ||
| return; |
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.
안녕하세요 멘토님
4주차 과제 step3,4 제출합니당
이번에 react hook form을 처음 사용해봐서 이렇게 사용하는 게 맞는지 잘 모르겠지만 열심히 구현하는 것에 초점을 두었습니다!
이번 주도 너무 고생 많으셨고 항상 꼼꼼한 피드백 감사합니다~!!