-
Notifications
You must be signed in to change notification settings - Fork 50
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[Team18] [FE] 배민찬 프로젝트 마무리 #68
Conversation
[FE] MainContents 부분 구현 완료
[FE] Carousel (Slider) 컴포넌트의 재사용성을 위해 리팩토링
- Modal (틀, 재사용 가능한 컴포넌트) 완성 - 상세정보 창에서 쓰일 SideDishStore(context) 생성
- DetailTop 1차 완성
- DetailTopGallery 동작 방식 변경
- 버그 많음.. 수정 중 - customHook - useFetch 통합
- 이미지 제대로 안뜨던 버그 수정완료
- Detail 페이지 1차 완성
[FE] 상세정보 창 (Detail - Modal) 1차 완성
- SubContents 컴포넌트 작동 방식 변경 (리팩토링) - 카테고리 모두 보이기 / 가리기 기능 추가
- DetailTopGallery의 Ref 관련 수정
* useRef로 classList 수정하는 방식에서 state변경하는 방식으로 변경
fix: hover 버그 수정
[FE] 서브 콘텐츠, 상세 페이지 버그 수정
- 이에 따라 페이지 초기 렌더시 SubContents에서 비동기 통신 시 (데이터 가져올 시) 서브콘텐츠 (슬라이더) 데이터의 구조 변경
- DetailTopInfo의 volumne -> quantity로 변경
[FE] API 적용 완료
회고마지막에 소통이 잘 안 된 부분이 있어 특정 기능을 구현 못한 것이 아쉽습니다. 항상 잘 따라와준 이브에게 너무너무 고맙고 😄 |
재사용 가능 컴포넌트들이 많아 보여서 좋네요. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
`; | ||
|
||
const App = () => ( | ||
<ThemeProvider theme={theme}> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
테마로 스타일 관리 좋아요.
const { alt: subject, badge, detail_hash, type } = currProductData; | ||
executeFetch(`/api/detail/${detail_hash}`, {subject, badge, type}); | ||
// eslint-disable-next-line react-hooks/exhaustive-deps | ||
}, [currProductData]); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
아시겠지만 'currProductData' 값이 변경될때마다 useFffect 콜백함수는 실행됩니다.
const visibleOptions = { | ||
isModalVisible, | ||
setIsModalVisible, | ||
addCbFunc: handleAddCloseBtnClick, | ||
}; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
jsx가 복잡하면 이렇게 분리해서 선언하는것도 괜찮아요.
import DetailTopInfo from "./DetailTopInfo"; | ||
|
||
const DetailTop = ({ result }) => { | ||
return result && result.data && ( |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
optional chaining 문법을 활용해보세요.
const aGalleryItems = | ||
thumb_images.map((image, i) => ( | ||
<GalleryItem key={i} onClick={handleItemClick}> | ||
<img src={image} alt={"image" + (i+1)} /> | ||
</GalleryItem> | ||
)); | ||
|
||
while(aGalleryItems.length < 5) | ||
aGalleryItems.push(<GalleryItem key={aGalleryItems.length} empty />); | ||
|
||
setGalleryItems(aGalleryItems); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
렌더링 => useEffect 전달된 콜백실행
이른 흐름으로 렌더링될텐데요.
useEffect 전달된 함수안에서 jsx 코드를 만들어서 상태변경을 시킬필요는 없을거 같아요.
그부분은 useEffect 밖에서 처리해서 jsx안에 바로 결과를 넣어주면 좋겠습니다.
useEffect(() => { | ||
if (!addProps) return; | ||
if (addProps.length > 0) { | ||
const flag = addProps.some((v) => !v); | ||
if (flag) { | ||
isExecuteFunc && addFunc && addFunc(); | ||
return; | ||
}; | ||
} | ||
|
||
fetchData(); | ||
isExecuteFunc && addFunc && addFunc(); | ||
// eslint-disable-next-line react-hooks/exhaustive-deps | ||
}, [...addProps]); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
useEffect 가 막강하게 다양한 옵션을 받아서 처리하는 것인 인상적이네요.
어려운문제겠지만, 좀더 역할에 집중한다고 생각하면, useFetch 는 fetching 작업에만 집중하고 그 결과를 반환하는 것 까지만 해도 될 거 같아요.
그런점에서 두 번째 useEffect 역할은 안하고 그것은 해당 컴포넌트에서 하는 것이 어떨가 싶어요.
@@ -0,0 +1,23 @@ | |||
import styled from 'styled-components' | |||
|
|||
const Tag = ({ type }) => { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
컴포넌트를 모두 작게 잘 나눈점이 좋아요.
구현기능
Header (헤더)
MainContents (상단 탭)
SubContents (카테고리 - 슬라이더)
Detail (상세페이지 - 모달)
utilComponent (공용 컴포넌트)
hooks (커스텀 훅)
기타
컴포넌트 구조
추후 공부! (못다한 기능들)