From 02990ec5f6e284a0723a8502ee59640620de5a51 Mon Sep 17 00:00:00 2001 From: say-young516 Date: Fri, 22 Jul 2022 00:14:11 +0900 Subject: [PATCH 01/10] =?UTF-8?q?[=20feat=20]=20=EC=95=84=EC=9D=B4?= =?UTF-8?q?=EC=BD=98=EB=B0=94=20=EB=88=8C=EB=A0=80=EC=9D=84=20=EB=95=8C=20?= =?UTF-8?q?api=20=EC=97=B0=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/viewProduct/ToyPreview.tsx | 5 ++-- components/viewProduct/ViewProductBanner.tsx | 9 ++++++++ core/api/viewProduct.ts | 23 ++++++++----------- core/axios.ts | 2 -- pages/viewProduct.tsx | 24 ++++++++++++++------ types/viewProduct.ts | 10 +++++++- 6 files changed, 47 insertions(+), 26 deletions(-) diff --git a/components/viewProduct/ToyPreview.tsx b/components/viewProduct/ToyPreview.tsx index ad34a7c..8ecb3ff 100644 --- a/components/viewProduct/ToyPreview.tsx +++ b/components/viewProduct/ToyPreview.tsx @@ -26,12 +26,11 @@ export default function ToyPreview(props: ToyPreviewProps) { const handleToyMark = () => { setIsMark((prev) => !prev); }; + let img = `https://nori-image.s3.ap-northeast-2.amazonaws.com/${src}`; return ( - + {isMark && } diff --git a/components/viewProduct/ViewProductBanner.tsx b/components/viewProduct/ViewProductBanner.tsx index e2d3ba2..b8ae933 100644 --- a/components/viewProduct/ViewProductBanner.tsx +++ b/components/viewProduct/ViewProductBanner.tsx @@ -1,6 +1,8 @@ import styled from '@emotion/styled'; +import router, { useRouter } from 'next/router'; import { useState } from 'react'; import { useRecoilState } from 'recoil'; +import { getBannerViewProduct } from '../../core/api/viewProduct'; import { checkedItemsState, filterTagState, @@ -43,6 +45,7 @@ export default function ViewProductBanner() { useRecoilState[]>(checkedItemsState); const [filterTagList, setFilterTagList] = useRecoilState(filterTagState); + const handleProductIcon = (selectIdx: number) => { if (selectedIcon == selectIdx) return; setSeletedIcon(selectIdx); @@ -54,6 +57,7 @@ export default function ViewProductBanner() { new Set(), ]); setFilterTagList([]); + switch (selectIdx) { case 0: setToyKindList([]); @@ -77,6 +81,11 @@ export default function ViewProductBanner() { setToyKindList(['소꿉 놀이', '역할 놀이']); break; } + + router.push({ + pathname: '/viewProduct', + query: { iconId: selectIdx }, + }); }; return ( diff --git a/core/api/viewProduct.ts b/core/api/viewProduct.ts index 5cabe9c..306a9cc 100644 --- a/core/api/viewProduct.ts +++ b/core/api/viewProduct.ts @@ -2,9 +2,12 @@ import useSWR from 'swr'; import { ViewProductProps } from '../../types/viewProduct'; import { baseInstance } from '../axios'; -export const useGetViewProduct = (viewProductData: ViewProductProps) => { +export const useGetViewProduct = ( + currentPage: number, + viewProductData: ViewProductProps, +) => { const { data, error } = useSWR( - ['/toy/list', viewProductData], + [`/toy/list?page=${currentPage}&`, viewProductData], baseInstance.get, { errorRetryCount: 3, @@ -18,10 +21,11 @@ export const useGetViewProduct = (viewProductData: ViewProductProps) => { }; export const useGetBannerViewProduct = ( category: number, + currentPage: number, viewProductData: ViewProductProps, ) => { const { data, error } = useSWR( - ['/toy/list', category, viewProductData], + [`${category}?page=${currentPage}&`, viewProductData], baseInstance.get, { errorRetryCount: 3, @@ -33,16 +37,9 @@ export const useGetBannerViewProduct = ( isError: error, }; }; -export const getBannerViewProduct = (params: { category: number }) => { - const { data, error } = useSWR(['/toy/list', params], baseInstance.get, { - errorRetryCount: 3, - }); - return { - toyFilterList: data, - isLoading: !error && !data, - isError: error, - }; +export const getBannerViewProduct = (category: number, currentPage: number) => { + return baseInstance.get(`/toy/list/${category}?page=${currentPage}`); }; export const getViewProduct = (currentPage: number) => { - return baseInstance.get(`/toy/list?page=${currentPage}`); + return baseInstance.get(`/toy/list/?page=${currentPage}`); }; diff --git a/core/axios.ts b/core/axios.ts index 117ac55..29cfe8b 100644 --- a/core/axios.ts +++ b/core/axios.ts @@ -22,8 +22,6 @@ baseInstance.interceptors.request.use((config) => { baseInstance.interceptors.response.use( async function (res) { - console.log('응답'); - console.log(res); return res; }, async function (error: { config: any; response: { status: any } }) { diff --git a/pages/viewProduct.tsx b/pages/viewProduct.tsx index 7d93e9e..0f7e73e 100644 --- a/pages/viewProduct.tsx +++ b/pages/viewProduct.tsx @@ -158,12 +158,22 @@ const StEmptyView = styled.section` margin: 0 23.8rem; `; export const getServerSideProps: GetServerSideProps = async (context) => { - const res = await getViewProduct(0); + if (context.query.iconId && Number(context.query.iconId) !== 0) { + const res = await getBannerViewProduct(Number(context.query.iconId), 0); + return { + props: { + filterData: res.data.data.filterData, + result: res.data.data.result, + }, + }; + } else { + const res = await getViewProduct(0); - return { - props: { - filterData: res.data.data.filterData, - result: res.data.data.result, - }, - }; + return { + props: { + filterData: res.data.data.filterData, + result: res.data.data.result, + }, + }; + } }; diff --git a/types/viewProduct.ts b/types/viewProduct.ts index 60a580d..7c15f3a 100644 --- a/types/viewProduct.ts +++ b/types/viewProduct.ts @@ -16,7 +16,15 @@ export interface FilterTagProps { } export interface ViewProductProps { search?: string; - type: string; + type?: string; + month?: string; + price?: string; + playHow?: string; + store?: string; +} +export interface BannerProductProps { + search?: string; + type?: string; month?: string; price?: string; playHow?: string; From 0f90ffbd3e700e5a62cf2c3d7532823357a1f6df Mon Sep 17 00:00:00 2001 From: say-young516 Date: Fri, 22 Jul 2022 04:27:24 +0900 Subject: [PATCH 02/10] =?UTF-8?q?[=20feat=20]=20swr=20=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/viewProduct/FilterDropdown.tsx | 39 +++++++------------ core/api/viewProduct.ts | 4 +- core/atom.ts | 13 ++++++- pages/viewProduct.tsx | 47 ++++++++++++++++++----- types/viewProduct.ts | 28 ++++++++++---- 5 files changed, 86 insertions(+), 45 deletions(-) diff --git a/components/viewProduct/FilterDropdown.tsx b/components/viewProduct/FilterDropdown.tsx index 228b63a..797f1d3 100644 --- a/components/viewProduct/FilterDropdown.tsx +++ b/components/viewProduct/FilterDropdown.tsx @@ -2,10 +2,15 @@ import styled from '@emotion/styled'; import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil'; import { checkedItemsState, + filterCheckQuery, filterTagState, toyKindState, } from '../../core/atom'; -import { FilterDropdownProps, FilterTagProps } from '../../types/viewProduct'; +import { + FilterDropdownProps, + FilterTagProps, + ViewProductProps, +} from '../../types/viewProduct'; export default function FilterDropdown(props: FilterDropdownProps) { const { @@ -21,6 +26,10 @@ export default function FilterDropdown(props: FilterDropdownProps) { useRecoilState[]>(checkedItemsState); const [filterTagList, setFilterTagList] = useRecoilState(filterTagState); + + const [filterQuery, setFilterCheckQuery] = + useRecoilState(filterCheckQuery); + const handleCheckedItems = ( categoryIdx: number, elementIdx: number, @@ -48,6 +57,10 @@ export default function FilterDropdown(props: FilterDropdownProps) { checkedItems[categoryIdx].add(elementIdx); setFilterTagList([...filterTagList, tag]); console.log(filterTagList); + + console.log('체크리스트', checkedItems); + const sJson = checkedItems[0]; + console.log('체크리스트2', sJson); } setCheckedItems({ @@ -211,27 +224,3 @@ const StDropdownWrapper = styled.div<{ isExcept: boolean; isDrop: boolean }>` ? 'slide-fade-in-dropdown-animation 0.2s ease-out' : 'slide-fade-out-dropdown-animation 0.2s ease-out'}; `; -// display `-객체의 노출여부/표현방식--` -// ( justify-content / align-items) -// ( flex-direction / flex-wrap / flex-flow ) → flex ~로 시작하는 것들 -// list-style -// position `-위치/좌표--` -// float -// clear - -// width -// height `-크기/여백--` -// padding -// margin - -// border -// background `-윤곽/배경--` -// color -// font `-글자/정렬--` - -// text-decoration -// text-align / vertical-align - -// white-space -// other text -// content `-내용--` diff --git a/core/api/viewProduct.ts b/core/api/viewProduct.ts index 306a9cc..54b5533 100644 --- a/core/api/viewProduct.ts +++ b/core/api/viewProduct.ts @@ -4,7 +4,7 @@ import { baseInstance } from '../axios'; export const useGetViewProduct = ( currentPage: number, - viewProductData: ViewProductProps, + viewProductData: string, ) => { const { data, error } = useSWR( [`/toy/list?page=${currentPage}&`, viewProductData], @@ -22,7 +22,7 @@ export const useGetViewProduct = ( export const useGetBannerViewProduct = ( category: number, currentPage: number, - viewProductData: ViewProductProps, + viewProductData: string, ) => { const { data, error } = useSWR( [`${category}?page=${currentPage}&`, viewProductData], diff --git a/core/atom.ts b/core/atom.ts index 62d5990..dbd6d4b 100644 --- a/core/atom.ts +++ b/core/atom.ts @@ -2,7 +2,7 @@ import { atom } from 'recoil'; import { recoilPersist } from 'recoil-persist'; //페이지가 변경되더라도 상태관리를 유지 import { PostCommunityBody, IsChangeCommunity } from '../types/community'; import { PostLoginBody } from '../types/user'; -import { FilterTagProps } from '../types/viewProduct'; +import { FilterTagProps, ViewProductProps } from '../types/viewProduct'; const { persistAtom } = recoilPersist(); @@ -111,3 +111,14 @@ export const toyKindState = atom({ key: 'toyKindState', default: [], }); +export const filterCheckQuery = atom({ + key: 'filterCheckQuery', + default: { + search: '', + type: '', + month: '', + price: '', + playHow: '', + store: '', + }, +}); diff --git a/pages/viewProduct.tsx b/pages/viewProduct.tsx index 0f7e73e..b837090 100644 --- a/pages/viewProduct.tsx +++ b/pages/viewProduct.tsx @@ -17,16 +17,22 @@ import { import { PriceFilter, PageNavigation } from '../components/common'; import { ToyData } from '../types/toy'; import { GetServerSideProps, InferGetServerSidePropsType } from 'next'; -import { useRecoilValue } from 'recoil'; -import { FilterTagProps } from '../types/viewProduct'; -import { filterTagState } from '../core/atom'; +import { useRecoilState, useRecoilValue } from 'recoil'; +import { FilterTagProps, ViewProductProps } from '../types/viewProduct'; +import { + checkedItemsState, + filterCheckQuery, + filterTagState, +} from '../core/atom'; import { IcGrayEmpty } from '../public/assets/icons'; import { getBannerViewProduct, getViewProduct, useGetBannerViewProduct, + useGetViewProduct, } from '../core/api/viewProduct'; - +import { Router, useRouter } from 'next/router'; +import { GetViewProduct } from '../types/viewProduct'; const limit = 40; export default function viewProduct({ @@ -34,9 +40,14 @@ export default function viewProduct({ result, }: InferGetServerSidePropsType) { console.log(filterData, result); + const router = useRouter(); + const [priceDesc, setPriceDesc] = useState(true); const [toyList, setToyList] = useState([]); const [currentPage, setCurrentPage] = useState(1); + const filterQuery = useRecoilValue(filterCheckQuery); + const [checkedItems, setCheckedItems] = + useRecoilState[]>(checkedItemsState); const handleClickPrice = (clickPrice: string) => { clickPrice === 'price-desc' ? setPriceDesc(true) : setPriceDesc(false); @@ -47,10 +58,17 @@ export default function viewProduct({ }; const filterTagList = useRecoilValue(filterTagState); - - // let { productList, isLoading, isError } = priceDesc - // ? (useGetCollectionProduct('price-desc') as GetCollectionProduct) - // : (useGetCollectionProduct('price-asc') as GetCollectionProduct); + let { toyFilterList, isLoading, isError } = + Number(router.query.iconId) !== 0 + ? useGetBannerViewProduct( + Number(router.query.iconId), + 0, + `search=${filterQuery.search}&type=${filterQuery.type}&month=${filterQuery.month}&price=${filterQuery.price}&playHow=${filterQuery.playHow}&store=${filterQuery.store}`, + ) + : useGetViewProduct( + 0, + `search=${filterQuery.search}&type=${filterQuery.type}&month=${filterQuery.month}&price=${filterQuery.price}&playHow=${filterQuery.playHow}&store=${filterQuery.store}`, + ); useEffect(() => { if (result) { @@ -61,8 +79,17 @@ export default function viewProduct({ setToyList(filterData); window.scrollTo(0, 0); } - }, [result, currentPage]); - + }, [result, currentPage, filterQuery]); + // useEffect(() => { + // if (toyFilterList) { + // const filterData = toyFilterList.data.filter( + // (_: any, idx: number) => + // (currentPage - 1) * 40 <= idx && idx < currentPage * 40, + // ); + // setToyList(filterData); + // window.scrollTo(0, 0); + // } + // }, [toyFilterList]); return ( {!filterData ? ( diff --git a/types/viewProduct.ts b/types/viewProduct.ts index 7c15f3a..8bfba26 100644 --- a/types/viewProduct.ts +++ b/types/viewProduct.ts @@ -22,11 +22,25 @@ export interface ViewProductProps { playHow?: string; store?: string; } -export interface BannerProductProps { - search?: string; - type?: string; - month?: string; - price?: string; - playHow?: string; - store?: string; +export interface FilterData { + type: string[]; + month: string[]; + price: string[]; + playHow: string[]; + store: string[]; +} +export interface ToyFilterData { + image: string; + title: string; + siteName: string; + price: string; + month: number; + siteUrl: string; +} +export interface GetViewProduct { + result: { + data: { data: { filterData: FilterData; toyFilterList: ToyFilterData[] } }; + }; + isLoading: boolean; + isError: string; } From 74623adeddb2cac4728ba27391dfddada6e95ca7 Mon Sep 17 00:00:00 2001 From: say-young516 Date: Fri, 22 Jul 2022 05:52:53 +0900 Subject: [PATCH 03/10] =?UTF-8?q?[=20feat=20]=20=ED=8C=8C=EB=9D=BC?= =?UTF-8?q?=EB=AF=B8=ED=84=B0=20=EB=84=A3=EC=96=B4=EC=A3=BC=EA=B8=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/viewProduct/FilterDropdown.tsx | 106 +++++++++++++++++++--- core/api/viewProduct.ts | 59 +++++++++--- pages/viewProduct.tsx | 51 +++++++---- 3 files changed, 175 insertions(+), 41 deletions(-) diff --git a/components/viewProduct/FilterDropdown.tsx b/components/viewProduct/FilterDropdown.tsx index 797f1d3..d873488 100644 --- a/components/viewProduct/FilterDropdown.tsx +++ b/components/viewProduct/FilterDropdown.tsx @@ -13,14 +13,7 @@ import { } from '../../types/viewProduct'; export default function FilterDropdown(props: FilterDropdownProps) { - const { - categoryInfo, - isDrop, - isExcept, - categoryIdx, - checkedItem, - categoryKey, - } = props; + const { categoryInfo, isDrop, isExcept, categoryIdx, categoryKey } = props; const toyKindList = useRecoilValue(toyKindState); const [checkedItems, setCheckedItems] = useRecoilState[]>(checkedItemsState); @@ -56,11 +49,7 @@ export default function FilterDropdown(props: FilterDropdownProps) { } else { checkedItems[categoryIdx].add(elementIdx); setFilterTagList([...filterTagList, tag]); - console.log(filterTagList); - - console.log('체크리스트', checkedItems); - const sJson = checkedItems[0]; - console.log('체크리스트2', sJson); + handleQuery(categoryIdx, elementIdx, tagText); } setCheckedItems({ @@ -68,7 +57,96 @@ export default function FilterDropdown(props: FilterDropdownProps) { [categoryIdx]: checkedItems[categoryIdx], }); }; - + const handleQuery = ( + categoryIdx: number, + elementIdx: number, + tagText: string, + ) => { + let newQuery: ViewProductProps; + let newStr: string; + switch (categoryIdx) { + case 0: + newStr = ''; + checkedItems[0].forEach(function (item, index) { + newStr += `${categoryInfo[index]},`; + }); + newQuery = { + search: filterQuery.search, + type: newStr, + month: filterQuery.month, + price: filterQuery.price, + playHow: filterQuery.playHow, + store: filterQuery.store, + }; + setFilterCheckQuery(newQuery); + console.log('str', newStr); + break; + case 1: + newStr = ''; + checkedItems[1].forEach(function (item, index) { + newStr += `${item},`; + }); + newQuery = { + search: filterQuery.search, + type: filterQuery.type, + month: newStr, + price: filterQuery.price, + playHow: filterQuery.playHow, + store: filterQuery.store, + }; + setFilterCheckQuery(newQuery); + console.log('str', newStr); + break; + case 2: + newStr = ''; + checkedItems[2].forEach(function (item, index) { + newStr += `${item},`; + }); + newQuery = { + search: filterQuery.search, + type: filterQuery.type, + month: filterQuery.month, + price: newStr, + playHow: filterQuery.playHow, + store: filterQuery.store, + }; + setFilterCheckQuery(newQuery); + console.log('str', newStr); + break; + case 3: + newStr = ''; + checkedItems[3].forEach(function (item, index) { + newStr += `${item},`; + }); + newQuery = { + search: filterQuery.search, + type: filterQuery.type, + month: filterQuery.month, + price: filterQuery.price, + playHow: newStr, + store: filterQuery.store, + }; + setFilterCheckQuery(newQuery); + console.log('str', newStr); + break; + case 4: + newStr = ''; + checkedItems[4].forEach(function (item, index) { + newStr += `${item},`; + }); + newQuery = { + search: filterQuery.search, + type: filterQuery.type, + month: filterQuery.month, + price: filterQuery.price, + playHow: filterQuery.playHow, + store: newStr, + }; + setFilterCheckQuery(newQuery); + console.log('str', newStr); + break; + } + }; return ( { +// export const useGetViewProduct = ( +// currentPage: number, +// viewProductData: string, +// ) => { +// const { data, error } = useSWR( +// [`/toy/list?page=${currentPage}&`, viewProductData], +// baseInstance.get, +// { +// errorRetryCount: 3, +// }, +// ); +// return { +// toyFilterList: data, +// isLoading: !error && !data, +// isError: error, +// }; +// }; +// export const useGetBannerViewProduct = ( +// category: number, +// currentPage: number, +// viewProductData: string, +// ) => { +// const { data, error } = useSWR( +// [`${category}?page=${currentPage}&`, viewProductData], +// baseInstance.get, +// { +// errorRetryCount: 3, +// }, +// ); +// return { +// toyFilterList: data, +// isLoading: !error && !data, +// isError: error, +// }; +// }; +// export const getBannerViewProduct = (category: number, currentPage: number) => { +// return baseInstance.get(`/toy/list/${category}?page=${currentPage}`); +// }; +// export const getViewProduct = (currentPage: number) => { +// return baseInstance.get(`/toy/list/?page=${currentPage}`); +// }; +export const useGetViewProduct = (viewProductData: string) => { const { data, error } = useSWR( - [`/toy/list?page=${currentPage}&`, viewProductData], + [`/toy/list/?`, viewProductData], baseInstance.get, { errorRetryCount: 3, @@ -21,11 +59,10 @@ export const useGetViewProduct = ( }; export const useGetBannerViewProduct = ( category: number, - currentPage: number, viewProductData: string, ) => { const { data, error } = useSWR( - [`${category}?page=${currentPage}&`, viewProductData], + [`/toy/list/${category}?&`, viewProductData], baseInstance.get, { errorRetryCount: 3, @@ -37,9 +74,9 @@ export const useGetBannerViewProduct = ( isError: error, }; }; -export const getBannerViewProduct = (category: number, currentPage: number) => { - return baseInstance.get(`/toy/list/${category}?page=${currentPage}`); +export const getBannerViewProduct = (category: number) => { + return baseInstance.get(`/toy/list/${category}?`); }; -export const getViewProduct = (currentPage: number) => { - return baseInstance.get(`/toy/list/?page=${currentPage}`); +export const getViewProduct = () => { + return baseInstance.get(`/toy/list/`); }; diff --git a/pages/viewProduct.tsx b/pages/viewProduct.tsx index b837090..6547f98 100644 --- a/pages/viewProduct.tsx +++ b/pages/viewProduct.tsx @@ -56,17 +56,15 @@ export default function viewProduct({ const handleCurrentPage = (nextPage: number) => { setCurrentPage(nextPage); }; - + console.log('체크', Object.keys(checkedItems)); const filterTagList = useRecoilValue(filterTagState); let { toyFilterList, isLoading, isError } = Number(router.query.iconId) !== 0 ? useGetBannerViewProduct( Number(router.query.iconId), - 0, `search=${filterQuery.search}&type=${filterQuery.type}&month=${filterQuery.month}&price=${filterQuery.price}&playHow=${filterQuery.playHow}&store=${filterQuery.store}`, ) : useGetViewProduct( - 0, `search=${filterQuery.search}&type=${filterQuery.type}&month=${filterQuery.month}&price=${filterQuery.price}&playHow=${filterQuery.playHow}&store=${filterQuery.store}`, ); @@ -79,17 +77,18 @@ export default function viewProduct({ setToyList(filterData); window.scrollTo(0, 0); } - }, [result, currentPage, filterQuery]); - // useEffect(() => { - // if (toyFilterList) { - // const filterData = toyFilterList.data.filter( - // (_: any, idx: number) => - // (currentPage - 1) * 40 <= idx && idx < currentPage * 40, - // ); - // setToyList(filterData); - // window.scrollTo(0, 0); - // } - // }, [toyFilterList]); + }, [result, currentPage]); + useEffect(() => { + if (toyFilterList) { + // const filterData = toyFilterList.data.filter( + // (_: any, idx: number) => + // (currentPage - 1) * 40 <= idx && idx < currentPage * 40, + // ); + // setToyList(filterData); + // window.scrollTo(0, 0); + console.log('토이리스트', toyFilterList); + } + }, [toyFilterList]); return ( {!filterData ? ( @@ -184,9 +183,29 @@ const StEmptyView = styled.section` margin: 0 23.8rem; `; +// export const getServerSideProps: GetServerSideProps = async (context) => { +// if (context.query.iconId && Number(context.query.iconId) !== 0) { +// const res = await getBannerViewProduct(Number(context.query.iconId), 0); +// return { +// props: { +// filterData: res.data.data.filterData, +// result: res.data.data.result, +// }, +// }; +// } else { +// const res = await getViewProduct(0); + +// return { +// props: { +// filterData: res.data.data.filterData, +// result: res.data.data.result, +// }, +// }; +// } +// }; export const getServerSideProps: GetServerSideProps = async (context) => { if (context.query.iconId && Number(context.query.iconId) !== 0) { - const res = await getBannerViewProduct(Number(context.query.iconId), 0); + const res = await getBannerViewProduct(Number(context.query.iconId)); return { props: { filterData: res.data.data.filterData, @@ -194,7 +213,7 @@ export const getServerSideProps: GetServerSideProps = async (context) => { }, }; } else { - const res = await getViewProduct(0); + const res = await getViewProduct(); return { props: { From e02175abb5186c56c87f8f8ba62c35d54567c103 Mon Sep 17 00:00:00 2001 From: say-young516 Date: Fri, 22 Jul 2022 08:22:16 +0900 Subject: [PATCH 04/10] =?UTF-8?q?[=20feat=20]=20=ED=95=84=ED=84=B0=20?= =?UTF-8?q?=EC=9A=94=EC=86=8C=20=EB=88=8C=EB=A0=80=EC=9D=84=20=EB=95=8C=20?= =?UTF-8?q?=ED=86=B5=EC=8B=A0=20=EA=B0=80=EB=8A=A5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/viewProduct/FilterDropdown.tsx | 8 +-- core/api/viewProduct.ts | 68 +++++++++++------------ pages/viewProduct.tsx | 7 ++- 3 files changed, 42 insertions(+), 41 deletions(-) diff --git a/components/viewProduct/FilterDropdown.tsx b/components/viewProduct/FilterDropdown.tsx index d873488..49f4388 100644 --- a/components/viewProduct/FilterDropdown.tsx +++ b/components/viewProduct/FilterDropdown.tsx @@ -84,7 +84,7 @@ export default function FilterDropdown(props: FilterDropdownProps) { case 1: newStr = ''; checkedItems[1].forEach(function (item, index) { - newStr += `${item},`; + newStr += `${item + 1}`; }); newQuery = { search: filterQuery.search, @@ -100,7 +100,7 @@ export default function FilterDropdown(props: FilterDropdownProps) { case 2: newStr = ''; checkedItems[2].forEach(function (item, index) { - newStr += `${item},`; + newStr += `${item + 1}`; }); newQuery = { search: filterQuery.search, @@ -116,7 +116,7 @@ export default function FilterDropdown(props: FilterDropdownProps) { case 3: newStr = ''; checkedItems[3].forEach(function (item, index) { - newStr += `${item},`; + newStr += `${item + 1}`; }); newQuery = { search: filterQuery.search, @@ -132,7 +132,7 @@ export default function FilterDropdown(props: FilterDropdownProps) { case 4: newStr = ''; checkedItems[4].forEach(function (item, index) { - newStr += `${item},`; + newStr += `${item + 1}`; }); newQuery = { search: filterQuery.search, diff --git a/core/api/viewProduct.ts b/core/api/viewProduct.ts index da4aa6e..3a33897 100644 --- a/core/api/viewProduct.ts +++ b/core/api/viewProduct.ts @@ -19,33 +19,13 @@ import { baseInstance } from '../axios'; // isError: error, // }; // }; -// export const useGetBannerViewProduct = ( -// category: number, -// currentPage: number, -// viewProductData: string, -// ) => { -// const { data, error } = useSWR( -// [`${category}?page=${currentPage}&`, viewProductData], -// baseInstance.get, -// { -// errorRetryCount: 3, -// }, -// ); -// return { -// toyFilterList: data, -// isLoading: !error && !data, -// isError: error, -// }; -// }; -// export const getBannerViewProduct = (category: number, currentPage: number) => { -// return baseInstance.get(`/toy/list/${category}?page=${currentPage}`); -// }; -// export const getViewProduct = (currentPage: number) => { -// return baseInstance.get(`/toy/list/?page=${currentPage}`); -// }; -export const useGetViewProduct = (viewProductData: string) => { +export const useGetBannerViewProduct = ( + category: number, + currentPage: number, + viewProductData: string, +) => { const { data, error } = useSWR( - [`/toy/list/?`, viewProductData], + [`/toy/list/${category}?page=${currentPage}&`, viewProductData], baseInstance.get, { errorRetryCount: 3, @@ -57,12 +37,15 @@ export const useGetViewProduct = (viewProductData: string) => { isError: error, }; }; -export const useGetBannerViewProduct = ( - category: number, - viewProductData: string, -) => { +export const getBannerViewProduct = (category: number, currentPage: number) => { + return baseInstance.get(`/toy/list/${category}?page=${currentPage}`); +}; +// export const getViewProduct = (currentPage: number) => { +// return baseInstance.get(`/toy/list/?page=${currentPage}`); +// }; +export const useGetViewProduct = (viewProductData: string) => { const { data, error } = useSWR( - [`/toy/list/${category}?&`, viewProductData], + [`/toy/list/`, viewProductData], baseInstance.get, { errorRetryCount: 3, @@ -74,9 +57,26 @@ export const useGetBannerViewProduct = ( isError: error, }; }; -export const getBannerViewProduct = (category: number) => { - return baseInstance.get(`/toy/list/${category}?`); -}; +// export const useGetBannerViewProduct = ( +// category: number, +// viewProductData: string, +// ) => { +// const { data, error } = useSWR( +// [`/toy/list/${category}?`, viewProductData], +// baseInstance.get, +// { +// errorRetryCount: 3, +// }, +// ); +// return { +// toyFilterList: data, +// isLoading: !error && !data, +// isError: error, +// }; +// }; +// export const getBannerViewProduct = (category: number) => { +// return baseInstance.get(`/toy/list/${category}?`); +// }; export const getViewProduct = () => { return baseInstance.get(`/toy/list/`); }; diff --git a/pages/viewProduct.tsx b/pages/viewProduct.tsx index 6547f98..fd4ed30 100644 --- a/pages/viewProduct.tsx +++ b/pages/viewProduct.tsx @@ -62,6 +62,7 @@ export default function viewProduct({ Number(router.query.iconId) !== 0 ? useGetBannerViewProduct( Number(router.query.iconId), + 0, `search=${filterQuery.search}&type=${filterQuery.type}&month=${filterQuery.month}&price=${filterQuery.price}&playHow=${filterQuery.playHow}&store=${filterQuery.store}`, ) : useGetViewProduct( @@ -70,7 +71,7 @@ export default function viewProduct({ useEffect(() => { if (result) { - const filterData = result.filter( + filterData = result.filter( (_: any, idx: number) => (currentPage - 1) * 40 <= idx && idx < currentPage * 40, ); @@ -86,7 +87,7 @@ export default function viewProduct({ // ); // setToyList(filterData); // window.scrollTo(0, 0); - console.log('토이리스트', toyFilterList); + console.log('토이리스트', toyFilterList.data.data.result); } }, [toyFilterList]); return ( @@ -205,7 +206,7 @@ const StEmptyView = styled.section` // }; export const getServerSideProps: GetServerSideProps = async (context) => { if (context.query.iconId && Number(context.query.iconId) !== 0) { - const res = await getBannerViewProduct(Number(context.query.iconId)); + const res = await getBannerViewProduct(Number(context.query.iconId), 0); return { props: { filterData: res.data.data.filterData, From 9c635decf25103e47c73afc62bb4c63e810cdbb4 Mon Sep 17 00:00:00 2001 From: say-young516 Date: Fri, 22 Jul 2022 12:59:30 +0900 Subject: [PATCH 05/10] [ error ] ssr, swr --- core/api/viewProduct.ts | 4 ++-- pages/viewProduct.tsx | 18 +++++++++++++----- 2 files changed, 15 insertions(+), 7 deletions(-) diff --git a/core/api/viewProduct.ts b/core/api/viewProduct.ts index 3a33897..dead7b2 100644 --- a/core/api/viewProduct.ts +++ b/core/api/viewProduct.ts @@ -45,7 +45,7 @@ export const getBannerViewProduct = (category: number, currentPage: number) => { // }; export const useGetViewProduct = (viewProductData: string) => { const { data, error } = useSWR( - [`/toy/list/`, viewProductData], + [`/toy/list?`, viewProductData], baseInstance.get, { errorRetryCount: 3, @@ -78,5 +78,5 @@ export const useGetViewProduct = (viewProductData: string) => { // return baseInstance.get(`/toy/list/${category}?`); // }; export const getViewProduct = () => { - return baseInstance.get(`/toy/list/`); + return baseInstance.get(`/toy/list`); }; diff --git a/pages/viewProduct.tsx b/pages/viewProduct.tsx index fd4ed30..3ccc9eb 100644 --- a/pages/viewProduct.tsx +++ b/pages/viewProduct.tsx @@ -39,12 +39,13 @@ export default function viewProduct({ filterData, result, }: InferGetServerSidePropsType) { - console.log(filterData, result); + // console.log(filterData, result); const router = useRouter(); const [priceDesc, setPriceDesc] = useState(true); const [toyList, setToyList] = useState([]); const [currentPage, setCurrentPage] = useState(1); + const [initial, setInitial] = useState(true); const filterQuery = useRecoilValue(filterCheckQuery); const [checkedItems, setCheckedItems] = useRecoilState[]>(checkedItemsState); @@ -58,8 +59,9 @@ export default function viewProduct({ }; console.log('체크', Object.keys(checkedItems)); const filterTagList = useRecoilValue(filterTagState); - let { toyFilterList, isLoading, isError } = - Number(router.query.iconId) !== 0 + + let { toyFilterList } = + router.query.iconId && Number(router.query.iconId) !== 0 ? useGetBannerViewProduct( Number(router.query.iconId), 0, @@ -70,23 +72,29 @@ export default function viewProduct({ ); useEffect(() => { - if (result) { + if (result && initial) { filterData = result.filter( (_: any, idx: number) => (currentPage - 1) * 40 <= idx && idx < currentPage * 40, ); setToyList(filterData); window.scrollTo(0, 0); + setInitial(false); + console.log('초기렌더링'); } }, [result, currentPage]); useEffect(() => { - if (toyFilterList) { + if (toyFilterList && !initial) { // const filterData = toyFilterList.data.filter( // (_: any, idx: number) => // (currentPage - 1) * 40 <= idx && idx < currentPage * 40, // ); // setToyList(filterData); // window.scrollTo(0, 0); + console.log( + '이것은?', + Boolean(router.query.iconId && Number(router.query.iconId) !== 0), + ); console.log('토이리스트', toyFilterList.data.data.result); } }, [toyFilterList]); From 6bf25ff57008293522fe7bef296f7f49661a4479 Mon Sep 17 00:00:00 2001 From: seohee0112 Date: Fri, 22 Jul 2022 14:51:40 +0900 Subject: [PATCH 06/10] =?UTF-8?q?[=20fix=20]=20=ED=95=84=ED=84=B0=20?= =?UTF-8?q?=EC=84=9C=EB=B2=84=ED=86=B5=EC=8B=A0=20=EC=9D=BC=EB=B6=80=20?= =?UTF-8?q?=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/viewProduct/FilterDropdown.tsx | 31 ++++++-- core/api/viewProduct.ts | 9 +++ core/axios.ts | 1 + pages/viewProduct.tsx | 88 +++++++++++++---------- types/viewProduct.ts | 9 +++ 5 files changed, 94 insertions(+), 44 deletions(-) diff --git a/components/viewProduct/FilterDropdown.tsx b/components/viewProduct/FilterDropdown.tsx index 49f4388..441c64c 100644 --- a/components/viewProduct/FilterDropdown.tsx +++ b/components/viewProduct/FilterDropdown.tsx @@ -11,6 +11,7 @@ import { FilterTagProps, ViewProductProps, } from '../../types/viewProduct'; +import Router from 'next/router'; export default function FilterDropdown(props: FilterDropdownProps) { const { categoryInfo, isDrop, isExcept, categoryIdx, categoryKey } = props; @@ -23,6 +24,24 @@ export default function FilterDropdown(props: FilterDropdownProps) { const [filterQuery, setFilterCheckQuery] = useRecoilState(filterCheckQuery); + const handleFilterQuery = (newQuery: ViewProductProps) => { + setFilterCheckQuery(newQuery); + + Router.push({ + pathname: '/viewProduct', + query: { + filter: true, + search: newQuery.search, + type: newQuery.type, + month: newQuery.month, + price: newQuery.price, + playHow: newQuery.playHow, + store: newQuery.store, + }, + }); + // if doesn't work then use window.location.href + }; + const handleCheckedItems = ( categoryIdx: number, elementIdx: number, @@ -68,7 +87,7 @@ export default function FilterDropdown(props: FilterDropdownProps) { case 0: newStr = ''; checkedItems[0].forEach(function (item, index) { - newStr += `${categoryInfo[index]},`; + newStr += `${categoryInfo[index]} `; }); newQuery = { search: filterQuery.search, @@ -78,7 +97,7 @@ export default function FilterDropdown(props: FilterDropdownProps) { playHow: filterQuery.playHow, store: filterQuery.store, }; - setFilterCheckQuery(newQuery); + handleFilterQuery(newQuery); console.log('str', newStr); break; case 1: @@ -94,7 +113,7 @@ export default function FilterDropdown(props: FilterDropdownProps) { playHow: filterQuery.playHow, store: filterQuery.store, }; - setFilterCheckQuery(newQuery); + handleFilterQuery(newQuery); console.log('str', newStr); break; case 2: @@ -110,7 +129,7 @@ export default function FilterDropdown(props: FilterDropdownProps) { playHow: filterQuery.playHow, store: filterQuery.store, }; - setFilterCheckQuery(newQuery); + handleFilterQuery(newQuery); console.log('str', newStr); break; case 3: @@ -126,7 +145,7 @@ export default function FilterDropdown(props: FilterDropdownProps) { playHow: newStr, store: filterQuery.store, }; - setFilterCheckQuery(newQuery); + handleFilterQuery(newQuery); console.log('str', newStr); break; case 4: @@ -142,7 +161,7 @@ export default function FilterDropdown(props: FilterDropdownProps) { playHow: filterQuery.playHow, store: newStr, }; - setFilterCheckQuery(newQuery); + handleFilterQuery(newQuery); console.log('str', newStr); break; } diff --git a/core/api/viewProduct.ts b/core/api/viewProduct.ts index dead7b2..11a7a39 100644 --- a/core/api/viewProduct.ts +++ b/core/api/viewProduct.ts @@ -37,6 +37,15 @@ export const useGetBannerViewProduct = ( isError: error, }; }; +export const getBannerViewProductFilter = (filterQuery: ViewProductProps) => { + console.log(filterQuery); + return baseInstance.get( + encodeURI( + `/toy/list?search=${filterQuery.search}&type=${filterQuery.type}&month=${filterQuery.month}&price=${filterQuery.price}&playHow=${filterQuery.playHow}&store=${filterQuery.store}`, + ), + ); +}; + export const getBannerViewProduct = (category: number, currentPage: number) => { return baseInstance.get(`/toy/list/${category}?page=${currentPage}`); }; diff --git a/core/axios.ts b/core/axios.ts index 29cfe8b..5c48544 100644 --- a/core/axios.ts +++ b/core/axios.ts @@ -11,6 +11,7 @@ const baseInstance = axios.create({ // // client side base instance (default) // // 로컬스토리지 접근이 가능하고 token이 필요한 api 호출에서 사용 baseInstance.interceptors.request.use((config) => { + console.log(config); const headers = { ...config.headers, accessToken: LocalStorage.getItem('accessToken'), diff --git a/pages/viewProduct.tsx b/pages/viewProduct.tsx index 3ccc9eb..5ae47a5 100644 --- a/pages/viewProduct.tsx +++ b/pages/viewProduct.tsx @@ -18,7 +18,11 @@ import { PriceFilter, PageNavigation } from '../components/common'; import { ToyData } from '../types/toy'; import { GetServerSideProps, InferGetServerSidePropsType } from 'next'; import { useRecoilState, useRecoilValue } from 'recoil'; -import { FilterTagProps, ViewProductProps } from '../types/viewProduct'; +import { + FilterTagProps, + ViewProductProps, + ViewProductServerSide, +} from '../types/viewProduct'; import { checkedItemsState, filterCheckQuery, @@ -27,6 +31,7 @@ import { import { IcGrayEmpty } from '../public/assets/icons'; import { getBannerViewProduct, + getBannerViewProductFilter, getViewProduct, useGetBannerViewProduct, useGetViewProduct, @@ -39,9 +44,9 @@ export default function viewProduct({ filterData, result, }: InferGetServerSidePropsType) { - // console.log(filterData, result); const router = useRouter(); + console.log(result); const [priceDesc, setPriceDesc] = useState(true); const [toyList, setToyList] = useState([]); const [currentPage, setCurrentPage] = useState(1); @@ -57,7 +62,8 @@ export default function viewProduct({ const handleCurrentPage = (nextPage: number) => { setCurrentPage(nextPage); }; - console.log('체크', Object.keys(checkedItems)); + // console.log('체크', Object.keys(checkedItems)); + // console.log('결과조회', filterData); const filterTagList = useRecoilValue(filterTagState); let { toyFilterList } = @@ -72,32 +78,34 @@ export default function viewProduct({ ); useEffect(() => { - if (result && initial) { + if (result) { filterData = result.filter( (_: any, idx: number) => (currentPage - 1) * 40 <= idx && idx < currentPage * 40, ); + console.log('여기', filterData); setToyList(filterData); window.scrollTo(0, 0); setInitial(false); console.log('초기렌더링'); } }, [result, currentPage]); - useEffect(() => { - if (toyFilterList && !initial) { - // const filterData = toyFilterList.data.filter( - // (_: any, idx: number) => - // (currentPage - 1) * 40 <= idx && idx < currentPage * 40, - // ); - // setToyList(filterData); - // window.scrollTo(0, 0); - console.log( - '이것은?', - Boolean(router.query.iconId && Number(router.query.iconId) !== 0), - ); - console.log('토이리스트', toyFilterList.data.data.result); - } - }, [toyFilterList]); + // useEffect(() => { + // if (toyFilterList && !initial) { + // // const filterData = toyFilterList.data.filter( + // // (_: any, idx: number) => + // // (currentPage - 1) * 40 <= idx && idx < currentPage * 40, + // // ); + // // setToyList(filterData); + // // window.scrollTo(0, 0); + // console.log( + // '이것은?', + // Boolean(router.query.iconId && Number(router.query.iconId) !== 0), + // ); + // console.log('토이리스트', toyFilterList.data.data.result); + // } + // }, [toyFilterList]); + console.log('목록', toyList); return ( {!filterData ? ( @@ -192,29 +200,33 @@ const StEmptyView = styled.section` margin: 0 23.8rem; `; -// export const getServerSideProps: GetServerSideProps = async (context) => { -// if (context.query.iconId && Number(context.query.iconId) !== 0) { -// const res = await getBannerViewProduct(Number(context.query.iconId), 0); -// return { -// props: { -// filterData: res.data.data.filterData, -// result: res.data.data.result, -// }, -// }; -// } else { -// const res = await getViewProduct(0); -// return { -// props: { -// filterData: res.data.data.filterData, -// result: res.data.data.result, -// }, -// }; -// } -// }; export const getServerSideProps: GetServerSideProps = async (context) => { + // useGetBa + + console.log(context.query); + if (context.query.filter === 'true') { + const { search, type, month, price, playHow, store } = + context.query as ViewProductProps; + const res = await getBannerViewProductFilter({ + search, + type, + month, + price, + playHow, + store, + }); + console.log(res); + return { + props: { + filterData: res.data.data.filterData, + result: res.data.data.result, + }, + }; + } if (context.query.iconId && Number(context.query.iconId) !== 0) { const res = await getBannerViewProduct(Number(context.query.iconId), 0); + console.log(res.data.data.result); return { props: { filterData: res.data.data.filterData, diff --git a/types/viewProduct.ts b/types/viewProduct.ts index 8bfba26..a0a4843 100644 --- a/types/viewProduct.ts +++ b/types/viewProduct.ts @@ -44,3 +44,12 @@ export interface GetViewProduct { isLoading: boolean; isError: string; } + +export interface ViewProductServerSide { + search: string; + type: string; + month: string; + price: string; + playHow: string; + store: string; +} From 25e6f3c29333b7637bc06638416a2502dea200fa Mon Sep 17 00:00:00 2001 From: say-young516 Date: Fri, 22 Jul 2022 15:02:04 +0900 Subject: [PATCH 07/10] =?UTF-8?q?[=20fix=20]=20=EC=BF=BC=EB=A6=AC=20?= =?UTF-8?q?=ED=8C=8C=EB=9D=BC=EB=AF=B8=ED=84=B0=20=EB=B3=80=EC=88=98?= =?UTF-8?q?=EB=AA=85=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/viewProduct/FilterDropdown.tsx | 36 +++++++++++------------ core/atom.ts | 6 ++-- pages/viewProduct.tsx | 12 ++++---- types/viewProduct.ts | 6 ++-- 4 files changed, 30 insertions(+), 30 deletions(-) diff --git a/components/viewProduct/FilterDropdown.tsx b/components/viewProduct/FilterDropdown.tsx index 441c64c..8862160 100644 --- a/components/viewProduct/FilterDropdown.tsx +++ b/components/viewProduct/FilterDropdown.tsx @@ -34,9 +34,9 @@ export default function FilterDropdown(props: FilterDropdownProps) { search: newQuery.search, type: newQuery.type, month: newQuery.month, - price: newQuery.price, - playHow: newQuery.playHow, - store: newQuery.store, + priceCd: newQuery.priceCd, + playHowCd: newQuery.playHowCd, + toySiteCd: newQuery.toySiteCd, }, }); // if doesn't work then use window.location.href @@ -93,9 +93,9 @@ export default function FilterDropdown(props: FilterDropdownProps) { search: filterQuery.search, type: newStr, month: filterQuery.month, - price: filterQuery.price, - playHow: filterQuery.playHow, - store: filterQuery.store, + priceCd: filterQuery.priceCd, + playHowCd: filterQuery.playHowCd, + toySiteCd: filterQuery.toySiteCd, }; handleFilterQuery(newQuery); console.log('str', newStr); @@ -109,9 +109,9 @@ export default function FilterDropdown(props: FilterDropdownProps) { search: filterQuery.search, type: filterQuery.type, month: newStr, - price: filterQuery.price, - playHow: filterQuery.playHow, - store: filterQuery.store, + priceCd: filterQuery.priceCd, + playHowCd: filterQuery.playHowCd, + toySiteCd: filterQuery.toySiteCd, }; handleFilterQuery(newQuery); console.log('str', newStr); @@ -125,9 +125,9 @@ export default function FilterDropdown(props: FilterDropdownProps) { search: filterQuery.search, type: filterQuery.type, month: filterQuery.month, - price: newStr, - playHow: filterQuery.playHow, - store: filterQuery.store, + priceCd: newStr, + playHowCd: filterQuery.playHowCd, + toySiteCd: filterQuery.toySiteCd, }; handleFilterQuery(newQuery); console.log('str', newStr); @@ -141,9 +141,9 @@ export default function FilterDropdown(props: FilterDropdownProps) { search: filterQuery.search, type: filterQuery.type, month: filterQuery.month, - price: filterQuery.price, - playHow: newStr, - store: filterQuery.store, + priceCd: filterQuery.priceCd, + playHowCd: newStr, + toySiteCd: filterQuery.toySiteCd, }; handleFilterQuery(newQuery); console.log('str', newStr); @@ -157,9 +157,9 @@ export default function FilterDropdown(props: FilterDropdownProps) { search: filterQuery.search, type: filterQuery.type, month: filterQuery.month, - price: filterQuery.price, - playHow: filterQuery.playHow, - store: newStr, + priceCd: filterQuery.priceCd, + playHowCd: filterQuery.playHowCd, + toySiteCd: newStr, }; handleFilterQuery(newQuery); console.log('str', newStr); diff --git a/core/atom.ts b/core/atom.ts index dbd6d4b..f053398 100644 --- a/core/atom.ts +++ b/core/atom.ts @@ -117,8 +117,8 @@ export const filterCheckQuery = atom({ search: '', type: '', month: '', - price: '', - playHow: '', - store: '', + priceCd: '', + playHowCd: '', + toySiteCd: '', }, }); diff --git a/pages/viewProduct.tsx b/pages/viewProduct.tsx index 5ae47a5..66cb638 100644 --- a/pages/viewProduct.tsx +++ b/pages/viewProduct.tsx @@ -71,10 +71,10 @@ export default function viewProduct({ ? useGetBannerViewProduct( Number(router.query.iconId), 0, - `search=${filterQuery.search}&type=${filterQuery.type}&month=${filterQuery.month}&price=${filterQuery.price}&playHow=${filterQuery.playHow}&store=${filterQuery.store}`, + `search=${filterQuery.search}&type=${filterQuery.type}&month=${filterQuery.month}&priceCd=${filterQuery.priceCd}&playHowCd=${filterQuery.playHowCd}&toySiteCd=${filterQuery.toySiteCd}`, ) : useGetViewProduct( - `search=${filterQuery.search}&type=${filterQuery.type}&month=${filterQuery.month}&price=${filterQuery.price}&playHow=${filterQuery.playHow}&store=${filterQuery.store}`, + `search=${filterQuery.search}&type=${filterQuery.type}&month=${filterQuery.month}&priceCd=${filterQuery.priceCd}&playHowCd=${filterQuery.playHowCd}&toySiteCd=${filterQuery.toySiteCd}`, ); useEffect(() => { @@ -206,15 +206,15 @@ export const getServerSideProps: GetServerSideProps = async (context) => { console.log(context.query); if (context.query.filter === 'true') { - const { search, type, month, price, playHow, store } = + const { search, type, month, priceCd, playHowCd, toySiteCd } = context.query as ViewProductProps; const res = await getBannerViewProductFilter({ search, type, month, - price, - playHow, - store, + priceCd, + playHowCd, + toySiteCd, }); console.log(res); return { diff --git a/types/viewProduct.ts b/types/viewProduct.ts index a0a4843..0a92c4c 100644 --- a/types/viewProduct.ts +++ b/types/viewProduct.ts @@ -18,9 +18,9 @@ export interface ViewProductProps { search?: string; type?: string; month?: string; - price?: string; - playHow?: string; - store?: string; + priceCd?: string; + playHowCd?: string; + toySiteCd?: string; } export interface FilterData { type: string[]; From c1de235e4450a394ccc1d536562d06d4e3008e5e Mon Sep 17 00:00:00 2001 From: say-young516 Date: Fri, 22 Jul 2022 15:29:21 +0900 Subject: [PATCH 08/10] =?UTF-8?q?[=20feat=20]=20=EC=B9=B4=ED=85=8C?= =?UTF-8?q?=EA=B3=A0=EB=A6=AC=20=EB=AF=B8=EC=84=A0=ED=83=9D=EC=8B=9C=20?= =?UTF-8?q?=ED=95=84=ED=84=B0=EB=A7=81=20=EC=99=84=EB=A3=8C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/viewProduct/ViewProductBanner.tsx | 19 +++++ core/api/viewProduct.ts | 88 +++++++++++--------- pages/viewProduct.tsx | 28 +++---- 3 files changed, 81 insertions(+), 54 deletions(-) diff --git a/components/viewProduct/ViewProductBanner.tsx b/components/viewProduct/ViewProductBanner.tsx index b8ae933..0019232 100644 --- a/components/viewProduct/ViewProductBanner.tsx +++ b/components/viewProduct/ViewProductBanner.tsx @@ -45,7 +45,26 @@ export default function ViewProductBanner() { useRecoilState[]>(checkedItemsState); const [filterTagList, setFilterTagList] = useRecoilState(filterTagState); + const [filterQuery, setFilterCheckQuery] = + useRecoilState(filterCheckQuery); + const handleFilterQuery = (newQuery: ViewProductProps) => { + setFilterCheckQuery(newQuery); + + Router.push({ + pathname: '/viewProduct', + query: { + filter: true, + search: newQuery.search, + type: newQuery.type, + month: newQuery.month, + priceCd: newQuery.priceCd, + playHowCd: newQuery.playHowCd, + toySiteCd: newQuery.toySiteCd, + }, + }); + // if doesn't work then use window.location.href + }; const handleProductIcon = (selectIdx: number) => { if (selectedIcon == selectIdx) return; setSeletedIcon(selectIdx); diff --git a/core/api/viewProduct.ts b/core/api/viewProduct.ts index 11a7a39..fb8c31e 100644 --- a/core/api/viewProduct.ts +++ b/core/api/viewProduct.ts @@ -19,53 +19,63 @@ import { baseInstance } from '../axios'; // isError: error, // }; // }; -export const useGetBannerViewProduct = ( - category: number, - currentPage: number, - viewProductData: string, -) => { - const { data, error } = useSWR( - [`/toy/list/${category}?page=${currentPage}&`, viewProductData], - baseInstance.get, - { - errorRetryCount: 3, - }, +// export const useGetBannerViewProduct = ( +// category: number, +// currentPage: number, +// viewProductData: string, +// ) => { +// const { data, error } = useSWR( +// [`/toy/list/${category}?page=${currentPage}&`, viewProductData], +// baseInstance.get, +// { +// errorRetryCount: 3, +// }, +// ); +// return { +// toyFilterList: data, +// isLoading: !error && !data, +// isError: error, +// }; +// }; +export const getViewProductFilter = (filterQuery: ViewProductProps) => { + console.log(filterQuery); + return baseInstance.get( + encodeURI( + `/toy/list?search=${filterQuery.search}&type=${filterQuery.type}&month=${filterQuery.month}&priceCd=${filterQuery.priceCd}&playHowCd=${filterQuery.playHowCd}&toySiteCd=${filterQuery.toySiteCd}`, + ), ); - return { - toyFilterList: data, - isLoading: !error && !data, - isError: error, - }; }; -export const getBannerViewProductFilter = (filterQuery: ViewProductProps) => { +export const getBannerViewProductFilter = ( + category: number, + filterQuery: ViewProductProps, +) => { console.log(filterQuery); return baseInstance.get( encodeURI( - `/toy/list?search=${filterQuery.search}&type=${filterQuery.type}&month=${filterQuery.month}&price=${filterQuery.price}&playHow=${filterQuery.playHow}&store=${filterQuery.store}`, + `/toy/list/${category}?search=${filterQuery.search}&type=${filterQuery.type}&month=${filterQuery.month}&priceCd=${filterQuery.priceCd}&playHowCd=${filterQuery.playHowCd}&toySiteCd=${filterQuery.toySiteCd}`, ), ); }; - -export const getBannerViewProduct = (category: number, currentPage: number) => { - return baseInstance.get(`/toy/list/${category}?page=${currentPage}`); -}; +// export const getBannerViewProduct = (category: number, currentPage: number) => { +// return baseInstance.get(`/toy/list/${category}?page=${currentPage}`); +// }; // export const getViewProduct = (currentPage: number) => { // return baseInstance.get(`/toy/list/?page=${currentPage}`); // }; -export const useGetViewProduct = (viewProductData: string) => { - const { data, error } = useSWR( - [`/toy/list?`, viewProductData], - baseInstance.get, - { - errorRetryCount: 3, - }, - ); - return { - toyFilterList: data, - isLoading: !error && !data, - isError: error, - }; -}; +// export const useGetViewProduct = (viewProductData: string) => { +// const { data, error } = useSWR( +// [`/toy/list?`, viewProductData], +// baseInstance.get, +// { +// errorRetryCount: 3, +// }, +// ); +// return { +// toyFilterList: data, +// isLoading: !error && !data, +// isError: error, +// }; +// }; // export const useGetBannerViewProduct = ( // category: number, // viewProductData: string, @@ -83,9 +93,9 @@ export const useGetViewProduct = (viewProductData: string) => { // isError: error, // }; // }; -// export const getBannerViewProduct = (category: number) => { -// return baseInstance.get(`/toy/list/${category}?`); -// }; +export const getBannerViewProduct = (category: number) => { + return baseInstance.get(`/toy/list/${category}?`); +}; export const getViewProduct = () => { return baseInstance.get(`/toy/list`); }; diff --git a/pages/viewProduct.tsx b/pages/viewProduct.tsx index 66cb638..ff36036 100644 --- a/pages/viewProduct.tsx +++ b/pages/viewProduct.tsx @@ -31,10 +31,9 @@ import { import { IcGrayEmpty } from '../public/assets/icons'; import { getBannerViewProduct, - getBannerViewProductFilter, + getViewProductFilter, getViewProduct, - useGetBannerViewProduct, - useGetViewProduct, + getBannerViewProductFilter, } from '../core/api/viewProduct'; import { Router, useRouter } from 'next/router'; import { GetViewProduct } from '../types/viewProduct'; @@ -66,16 +65,15 @@ export default function viewProduct({ // console.log('결과조회', filterData); const filterTagList = useRecoilValue(filterTagState); - let { toyFilterList } = - router.query.iconId && Number(router.query.iconId) !== 0 - ? useGetBannerViewProduct( - Number(router.query.iconId), - 0, - `search=${filterQuery.search}&type=${filterQuery.type}&month=${filterQuery.month}&priceCd=${filterQuery.priceCd}&playHowCd=${filterQuery.playHowCd}&toySiteCd=${filterQuery.toySiteCd}`, - ) - : useGetViewProduct( - `search=${filterQuery.search}&type=${filterQuery.type}&month=${filterQuery.month}&priceCd=${filterQuery.priceCd}&playHowCd=${filterQuery.playHowCd}&toySiteCd=${filterQuery.toySiteCd}`, - ); + // let { toyFilterList } = + // router.query.iconId && Number(router.query.iconId) !== 0 + // ? getBannerViewProductFilter( + // Number(router.query.iconId), + // `search=${filterQuery.search}&type=${filterQuery.type}&month=${filterQuery.month}&priceCd=${filterQuery.priceCd}&playHowCd=${filterQuery.playHowCd}&toySiteCd=${filterQuery.toySiteCd}`, + // ) + // : getViewProductFilter( + // `search=${filterQuery.search}&type=${filterQuery.type}&month=${filterQuery.month}&priceCd=${filterQuery.priceCd}&playHowCd=${filterQuery.playHowCd}&toySiteCd=${filterQuery.toySiteCd}`, + // ); useEffect(() => { if (result) { @@ -208,7 +206,7 @@ export const getServerSideProps: GetServerSideProps = async (context) => { if (context.query.filter === 'true') { const { search, type, month, priceCd, playHowCd, toySiteCd } = context.query as ViewProductProps; - const res = await getBannerViewProductFilter({ + const res = await getViewProductFilter({ search, type, month, @@ -225,7 +223,7 @@ export const getServerSideProps: GetServerSideProps = async (context) => { }; } if (context.query.iconId && Number(context.query.iconId) !== 0) { - const res = await getBannerViewProduct(Number(context.query.iconId), 0); + const res = await getBannerViewProduct(Number(context.query.iconId)); console.log(res.data.data.result); return { props: { From 2b31e469c70bd7c89b966f74301ca1cd0bf4f1a4 Mon Sep 17 00:00:00 2001 From: say-young516 Date: Fri, 22 Jul 2022 16:11:03 +0900 Subject: [PATCH 09/10] =?UTF-8?q?[=20feat=20]=20=EC=B9=B4=ED=85=8C?= =?UTF-8?q?=EA=B3=A0=EB=A6=AC=20=EC=84=A0=ED=83=9D=EC=8B=9C=20=ED=95=84?= =?UTF-8?q?=ED=84=B0=EB=A7=81=20=EC=99=84=EB=A3=8C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/viewProduct/FilterDropdown.tsx | 7 +- components/viewProduct/ProductFilter.tsx | 4 +- components/viewProduct/ViewProductBanner.tsx | 120 +++++++++++++++++-- core/atom.ts | 23 +++- pages/viewProduct.tsx | 21 ++++ 5 files changed, 157 insertions(+), 18 deletions(-) diff --git a/components/viewProduct/FilterDropdown.tsx b/components/viewProduct/FilterDropdown.tsx index 8862160..97f7dcb 100644 --- a/components/viewProduct/FilterDropdown.tsx +++ b/components/viewProduct/FilterDropdown.tsx @@ -68,9 +68,8 @@ export default function FilterDropdown(props: FilterDropdownProps) { } else { checkedItems[categoryIdx].add(elementIdx); setFilterTagList([...filterTagList, tag]); - handleQuery(categoryIdx, elementIdx, tagText); } - + handleQuery(categoryIdx, elementIdx, tagText); setCheckedItems({ ...checkedItems, [categoryIdx]: checkedItems[categoryIdx], @@ -87,7 +86,7 @@ export default function FilterDropdown(props: FilterDropdownProps) { case 0: newStr = ''; checkedItems[0].forEach(function (item, index) { - newStr += `${categoryInfo[index]} `; + newStr += `${toyKindList[index]} `; }); newQuery = { search: filterQuery.search, @@ -174,7 +173,7 @@ export default function FilterDropdown(props: FilterDropdownProps) { isDrop ? 'slide-fade-in-dropdown' : 'slide-fade-out-dropdown' }`} > - {categoryKey === '종류' && toyKindList.length !== 0 + {categoryKey === '종류' ? toyKindList.map((tagText: string, elementIdx: number) => { return ( (filterCheckQuery); - const handleFilterQuery = (newQuery: ViewProductProps) => { - setFilterCheckQuery(newQuery); + const handleFilterQuery = (selectIdx: number, newQuery: ViewProductProps) => { + if (newQuery) setFilterCheckQuery(newQuery); Router.push({ pathname: '/viewProduct', query: { filter: true, + categoryId: selectIdx, search: newQuery.search, type: newQuery.type, month: newQuery.month, @@ -76,36 +79,133 @@ export default function ViewProductBanner() { new Set(), ]); setFilterTagList([]); - + let newQuery: ViewProductProps; switch (selectIdx) { case 0: - setToyKindList([]); + setToyKindList([ + '아기체육관', + '모빌', + '바운서', + '쏘서', + '점퍼루', + '위고', + '보행기', + '걸음마 보조기', + '러닝홈', + '러닝테이블', + '기타 학습완구', + '미끄럼틀', + '에어바운스', + '트램펄린', + '어린이 자동차', + '흔들말', + '그네', + '소꿉놀이', + '역할놀이', + '기타', + ]); + newQuery = { + search: '', + type: '', + month: '', + priceCd: '', + playHowCd: '', + toySiteCd: '', + }; + handleFilterQuery(0, newQuery); break; case 1: setToyKindList(['아기체육관', '모빌', '바운서']); + // newQuery = { + // search: '', + // type: '아기체육관 모빌 바운서', + // month: '', + // priceCd: '', + // playHowCd: '', + // toySiteCd: '', + // }; + newQuery = { + search: '', + type: '', + month: '', + priceCd: '', + playHowCd: '', + toySiteCd: '', + }; + handleFilterQuery(1, newQuery); break; case 2: setToyKindList(['쏘서', '점퍼루', '위고', '보행기', '걸음마 보조기']); + // newQuery = { + // search: '', + // type: '쏘서 점퍼루 위고 보행기 걸음마 보조기', + // month: '', + // priceCd: '', + // playHowCd: '', + // toySiteCd: '', + // }; + newQuery = { + search: '', + type: '', + month: '', + priceCd: '', + playHowCd: '', + toySiteCd: '', + }; + handleFilterQuery(2, newQuery); break; case 3: + newQuery = { + search: '', + type: '', + month: '', + priceCd: '', + playHowCd: '', + toySiteCd: '', + }; setToyKindList(['러닝홈', '러닝테이블', '기타 학습 완구']); + handleFilterQuery(3, newQuery); break; case 4: + newQuery = { + search: '', + type: '', + month: '', + priceCd: '', + playHowCd: '', + toySiteCd: '', + }; setToyKindList(['미끄럼틀', '에어바운스', '트램펄린']); + handleFilterQuery(4, newQuery); break; case 5: + newQuery = { + search: '', + type: '', + month: '', + priceCd: '', + playHowCd: '', + toySiteCd: '', + }; setToyKindList(['어린이 자동차', '흔들말', '그네']); + handleFilterQuery(5, newQuery); break; case 6: + newQuery = { + search: '', + type: '', + month: '', + priceCd: '', + playHowCd: '', + toySiteCd: '', + }; setToyKindList(['소꿉 놀이', '역할 놀이']); + handleFilterQuery(6, newQuery); break; } - - router.push({ - pathname: '/viewProduct', - query: { iconId: selectIdx }, - }); }; + // 패패 + return (

상품보기

diff --git a/core/atom.ts b/core/atom.ts index f053398..bdfa332 100644 --- a/core/atom.ts +++ b/core/atom.ts @@ -109,7 +109,28 @@ export const checkedItemsState = atom[]>({ export const toyKindState = atom({ key: 'toyKindState', - default: [], + default: [ + '아기체육관', + '모빌', + '바운서', + '쏘서', + '점퍼루', + '위고', + '보행기', + '걸음마 보조기', + '러닝홈', + '러닝테이블', + '기타 학습완구', + '미끄럼틀', + '에어바운스', + '트램펄린', + '어린이 자동차', + '흔들말', + '그네', + '소꿉놀이', + '역할놀이', + '기타', + ], }); export const filterCheckQuery = atom({ key: 'filterCheckQuery', diff --git a/pages/viewProduct.tsx b/pages/viewProduct.tsx index ff36036..25ed65a 100644 --- a/pages/viewProduct.tsx +++ b/pages/viewProduct.tsx @@ -206,6 +206,27 @@ export const getServerSideProps: GetServerSideProps = async (context) => { if (context.query.filter === 'true') { const { search, type, month, priceCd, playHowCd, toySiteCd } = context.query as ViewProductProps; + + if (context.query.categoryId && Number(context.query.categoryId) !== 0) { + const res = await getBannerViewProductFilter( + Number(context.query.categoryId), + { + search, + type, + month, + priceCd, + playHowCd, + toySiteCd, + }, + ); + console.log(res.data); + return { + props: { + filterData: res.data.data.filterData, + result: res.data.data.result, + }, + }; + } const res = await getViewProductFilter({ search, type, From 1aeeffbfd9615f1faabe3bedc7af17227613136b Mon Sep 17 00:00:00 2001 From: say-young516 Date: Fri, 22 Jul 2022 20:23:24 +0900 Subject: [PATCH 10/10] =?UTF-8?q?[=20feat=20]=20=EA=B2=80=EC=83=89?= =?UTF-8?q?=ED=96=88=EC=9D=84=20=EB=95=8C=20=EA=B2=80=EC=83=89=EC=96=B4=20?= =?UTF-8?q?=EB=82=98=EC=98=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/common/Header.tsx | 8 +++++++ components/viewProduct/ViewProductBanner.tsx | 23 +++++++++++++++++--- pages/viewProduct.tsx | 2 +- 3 files changed, 29 insertions(+), 4 deletions(-) diff --git a/components/common/Header.tsx b/components/common/Header.tsx index 4c7a41f..f34afcb 100644 --- a/components/common/Header.tsx +++ b/components/common/Header.tsx @@ -3,6 +3,9 @@ import Link from 'next/link'; import { IcNoriHeaderLogo, IcSearchIcon } from '../../public/assets/icons'; import React, { useState } from 'react'; import Router from 'next/router'; +import { ViewProductProps } from '../../types/viewProduct'; +import { filterCheckQuery } from '../../core/atom'; +import { useRecoilState } from 'recoil'; export default function Header() { const [inputValue, setInputValue] = useState(''); @@ -10,12 +13,17 @@ export default function Header() { const handleInputValue = (e: React.ChangeEvent) => { setInputValue(e.target.value); }; + const [filterQuery, setFilterCheckQuery] = + useRecoilState(filterCheckQuery); const handleClick = () => { Router.push({ pathname: '/viewProduct', query: { search: inputValue }, }); + setFilterCheckQuery({ + search: inputValue, + }); }; return ( diff --git a/components/viewProduct/ViewProductBanner.tsx b/components/viewProduct/ViewProductBanner.tsx index 6f04fca..557fee3 100644 --- a/components/viewProduct/ViewProductBanner.tsx +++ b/components/viewProduct/ViewProductBanner.tsx @@ -1,7 +1,7 @@ import styled from '@emotion/styled'; import Router from 'next/router'; import router, { useRouter } from 'next/router'; -import { useState } from 'react'; +import React, { useState } from 'react'; import { useRecoilState } from 'recoil'; import { getBannerViewProduct } from '../../core/api/viewProduct'; import { @@ -226,11 +226,16 @@ export default function ViewProductBanner() { ); })} + {filterQuery.search && ( + + {`“ ${filterQuery.search} ”`} 에 대한 검색 결과에요 + + )} ); } -const StProductBannerWrapper = styled.div` +const StProductBannerWrapper = styled.div<{ isSearch: boolean }>` display: flex; align-items: center; justify-content: center; @@ -238,7 +243,7 @@ const StProductBannerWrapper = styled.div` width: 117.6rem; margin: 7.1rem 0 0.4rem 0; - padding: 0 3.6rem 5.4rem 3.6rem; + // padding: 0 3.6rem 5.4rem 3.6rem; border-bottom: 1px solid #d9d9d9; @@ -255,6 +260,7 @@ const StCategoryNav = styled.nav` width: 110.4rem; height: 14.4rem; + margin: 0 3.6rem 5.4rem 3.6rem; `; const StProductItem = styled.div<{ isClicked: number; selectedIcon: number }>` display: flex; @@ -268,3 +274,14 @@ const StProductItem = styled.div<{ isClicked: number; selectedIcon: number }>` cursor: pointer; `; +const StSearchContent = styled.div` + align-self: flex-start; + + height: 2.5rem; + margin: 0 0 1.2rem 0; + color: ${({ theme }) => theme.colors.gray007}; + ${({ theme }) => theme.fonts.t3_19_medium_130}; + & > span { + color: ${({ theme }) => theme.colors.gray009}; + } +`; diff --git a/pages/viewProduct.tsx b/pages/viewProduct.tsx index 25ed65a..7e27a05 100644 --- a/pages/viewProduct.tsx +++ b/pages/viewProduct.tsx @@ -202,7 +202,7 @@ const StEmptyView = styled.section` export const getServerSideProps: GetServerSideProps = async (context) => { // useGetBa - console.log(context.query); + console.log('쿼링', context.query); if (context.query.filter === 'true') { const { search, type, month, priceCd, playHowCd, toySiteCd } = context.query as ViewProductProps;