오늘의집과 아주아주 똑같은 내일의집을 개발해보자.
커뮤니티와 스토어가 서로 연결되어 서로 자유롭게 넘나드는 웹페이지를 만들어보자.
: 오늘의집은 커뮤니티와 스토어를 서로 연결시켜 두었다는 것이 가장 큰 장점이다.
즉, 피드를 구경하다 방을 구성하고 있는 제품들에 대한 정보를 바로 알 수 있고 구매까지 할 수 있다.
또한 제품을 고르다 해당 제품이 게시된 피드를 보러 커뮤니티로 바로 이동할 수도 있다.
이것이 이번 클론의 핵심 기능이 될 것 같다.
: 이번 클론은 백엔드와 함께하는 첫번째 프로젝트이다.
그렇기에 서버와 연결되는 부분을 항상 고려하며 진행하는 것이 중요했다.
<클릭해서 영상으로 이동>
내가 담당하게 된 부분은 스토어쪽이다.
이번에도 역시.....클론은 어떻게?
1픽셀까지 똑같이!!! 약간의 차이도 용납하지 않는다.
: 이번에는 서버에서 넘어오는 데이터를 사용하는 것이기 때문에 어떻게 받아서 어떻게 처리할지 고민이 아주 많았다. 처음부터 Fetch를 아무데나 받아온다면 너무 복잡해질 것 같았다.
: 사이드바 메뉴와 제품리스트를 묶는 부모 컴포넌트이다.
코드가 길어 state나 렌더 부분은 생략하였으니 양해바람ㅠ (보면 이해될테니...)
class Category extends Component {
// 첫 화면에 보여줄 정보들은 컴디마에 넣었다
componentDidMount() {
this.getCategoryOtherMenu();
this.getCategoryTitleMenu();
this.getALLProductList();
}
// Title 부분이 서버로 요청된다.
getCategoryTitleMenu = () => {
fetch(`${API}/store/categories?menu=1`, {
method: 'GET',
headers: {
authorization: localStorage.getItem('token'),
},
})
.then((res) => res.json())
.then((res) => {
this.setState({
categoryTitle: res.result,
});
});
};
// Other 부분이 서버로 요청된다.
getCategoryOtherMenu = () => {
fetch(`${API}/store/categories`, {
method: 'GET',
headers: {
authorization: localStorage.getItem('token'),
},
})
.then((res) => res.json())
.then((res) => {
this.setState({
categoryOther: res.result,
});
});
};
// 컴디마로 첫 화면에 보여줄 '가구' 메뉴의 리스트들이다.
getALLProductList = () => {
fetch(`${API}/store/products?menu=1`, {
method: 'GET',
headers: {
authorization: localStorage.getItem('token'),
},
})
.then((res) => res.json())
.then((res) => {
this.setState({
productList: res.result,
});
});
};
// Other에서 메뉴를 클릭시 Title 부분이 변경되고 해당 데이터를 넘겨받게 된다.
changeTitleMenu = (otherElement) => {
fetch(`${API}/store/categories?menu=${otherElement.menu_id}`, {
method: 'GET',
headers: {
authorization: localStorage.getItem('token'),
},
})
.then((res) => res.json())
.then((res) => {
this.setState({
categoryTitle: res.result,
});
});
};
// 메뉴 > 하위 카테고리에 해당하는 제품 리스트들을 불러오는 요청 코드이다.
getProductList = (categoryElement) => {
fetch(`${API}/store/products?cat=${categoryElement.category_id}`, {
method: 'GET',
headers: {
authorization: localStorage.getItem('token'),
},
})
.then((res) => res.json())
.then((res) => {
this.setState({
productList: res.result,
});
this.setState({
catTitle: categoryElement,
});
});
};
// 메뉴 > 하위 카테고리 > 서브 카테고리에 해당하는 제품 리스트들을 불러오는 요청 코드이다.
getSubProductList = (subCategoriesElement) => {
fetch(`${API}/store/products?sub=${subCategoriesElement.subcategory_id}`, {
method: 'GET',
headers: {
authorization: localStorage.getItem('token'),
},
})
.then((res) => res.json())
.then((res) => {
this.setState({
subProductList: res.result,
});
this.setState({
subTitle: subCategoriesElement,
});
});
};
// ----- 렌더부분 생략 ----- //
<SelectOption
giveProductInfo={productList}
giveSelectedProducts={selectedProducts}
giveBookmarkColor={bookMarkSwitch}
takeSelectedColor={getSelectedProductColor}
takeSelectedOption={getSelectedProductOption}
takeSelectedProductsValue={getProductCount}
takeSelectedProductsDelIndex={handleDeleteProduct}
takeSelectedProductsCart={postCartInfo} />
: 부모인 카테고리 컴포넌트를 알아봤고 이제 위에서 설명한 분리된 4개 중 Title 컴포넌트를 알아보자.
class ListTitle extends Component {
constructor() {
super();
this.state = {
selectedCategory: '',
selectedSubcategory: '',
openCategorySwitch: false,
};
}
//카테고리 클릭 이벤트 함수
selectedCategory = (categoryElement) => {
this.setState({ selectedCategory: categoryElement.category_name });
this.props.takeClickEvent(categoryElement);
};
//서브 카테고리 클릭 이벤트 함수
selectedSubcategory = (subCategoriesElement) => {
this.setState({
selectedSubcategory: subCategoriesElement.subcategory_name,
});
this.props.takeSubClickEvent(subCategoriesElement);
};
//------ 렌더부분은 생략 ------//
<button
onClick={() => this.selectedCategory(categoryElement)}
className={selectedCategory === categoryElement.category_name
? 'subTitleList changeColorEvent '
: 'subTitleList' }>
{categoryElement.category_name}
</button>
: other는 위의 사진에서 보는 것 처럼 클릭한 메뉴만 Title로 넘어가고 나머지 메뉴들이 순서대로 나열된다. 배열의 filter와 동일하게 생긴것 같아 filter만 적용하였다.
너무 간단한 코드이므로 코드는 생략!
Banner
, Product List
는 2화에 계속 링크에 계속!
https://www.zzang79.com/sands [샌즈카지노 ]
There will be no one to advise you when is the right time to stop so it is up to you to make the decision of when to walk away. Picking that moment can be tough.
카테고리 사이드바 코드들이 인상 깊네요 담에 사이드바 만들때 응용하기 좋겠군요