[Jangbagoony - FE- PR1] #21
Conversation
스프링 프로젝트 생성, jdbc 설정
-Fetch custom Hook 작성 -초기데이터: 메인메뉴, 카테고리1번
todo : category 작업하기
- 배경색설정/상세페이지 위치 가운데로 설정/x버튼구현 - x버튼 클릭 시 기존 페이지로 보여줌 #36
…into fe/feature/detail
| import Category from "./components/category/Category"; | ||
| import Header from "./components/header/Header"; | ||
| import { createGlobalStyle } from "styled-components"; | ||
| const GlobalStyle = createGlobalStyle` |
There was a problem hiding this comment.
GlobalStyle 도 내용이 많아지면 별도 파일로 분리해도 좋습니다.
| return props.size === "L" ? "384px" : "308px"; | ||
| }}; | ||
| height: ${(props) => { | ||
| return props.size === "L" ? "384px" : "308px"; |
There was a problem hiding this comment.
반복적인 체크를 없애기 위해서 styled component 의 attrs 에 대해서 공부해보세요.
|
|
||
| function ItemCard({ data, size }) { | ||
| const [detailFetchUrl, setDetailFetchUrl] = useState(null); | ||
| const [ModalMode, setModalState] = useState(false); |
| const [ModalMode, setModalState] = useState(false); | ||
| const handleClick = (hash) => { | ||
| setModalState(!ModalMode); //작업중 | ||
| setDetailFetchUrl( |
There was a problem hiding this comment.
detailFetchUrl 을 생략하고 handleClick 에서 바로 URL 생성해서, fetch 요청을 보낼 수도 있을거 같아요.
뭐가 더 간단할지?에 대한 문제일거 같기도 하고요.
There was a problem hiding this comment.
저희는 useFetch 라는 커스텀 훅을 사용해서 fetch를 하는 중이였기때문에 handleclick 안에서 커스텀 훅을 사용할수 없었습니다. 그렇기 때문에 setDetailFetchUrl 을 사용해서 url을 업데이트하면서 useFetch가 실행되게 했는데 크롱이 해주신 리뷰와 같이 handleClick 에서 바로 넘겨줄수 있는 방법이 있을까요?? @crongro
| } | ||
| cursor: pointer; | ||
| `; | ||
| const CategoryBtn = styled(Button)` |
| </ButtonLeft> | ||
| <CategoryWrapper> | ||
| <CategoryColumn> | ||
| {!loadingState && |
There was a problem hiding this comment.
loadingstate를 좀더 잘 활용하기 위해서 loading 중임을 표시하는 것도 좋을 거 같네요.
| const HeaderLonIn = styled.button`` | ||
|
|
||
| const HeaderCart = styled.button`` |
There was a problem hiding this comment.
미래를 위한거겠죠? 그렇지 않다면 styled component가 아닌 button으로 표현하셔도 될 거 같고요.
| const [bestDishMenu, bestDishLoading] = useFetch(basicUrl); | ||
| const bestDishData = bestDishMenu.body; |
There was a problem hiding this comment.
해체할당을 잘 활용하시면,
a = [
{body: "lorem"}, 'foo'
]
const [{body:data}, second] = a;
console.log(data) //lorem
TODO