Merge branch 'feature-community' into comment/#138

components/viewProduct/FilterDropdown.tsx

@@ -64,7 +64,7 @@ export default function FilterDropdown(props: FilterDropdownProps) {
         isDrop ? 'slide-fade-in-dropdown' : 'slide-fade-out-dropdown'
       }`}
     >
-      {categoryKey === '장난감 종류' && toyKindList.length !== 0
+      {categoryKey === '종류' && toyKindList.length !== 0
         ? toyKindList.map((tagText: string, elementIdx: number) => {
             return (
               <StLabel

components/viewProduct/ProductFilter.tsx

@@ -74,7 +74,7 @@ export default function ProductFilter() {
               categoryInfo={filterListData[idx]}
               categoryIdx={idx}
               isExcept={
-                idx == 3 || (idx == 4 && toyKindList.length !== 0)
+                idx == 3 || (idx == 0 && toyKindList.length !== 0)
                   ? true
                   : false
               }

components/viewProduct/ToyList.tsx

@@ -11,15 +11,15 @@ export default function ToyList(props: ToyListProps) {
 
   return (
     <StToyListWrapper>
-      {toyList.map(({ image, title, price, month, siteUrl }, idx) => (
+      {toyList.map(({ image, title, price, month, link, toySite }, idx) => (
         <ToyPreview
           key={idx}
           src={image}
-          store="그린키드그린키드그린키드그린키드그린키드그린키드그린키드그린키드그린키드그린키드"
+          store={toySite.toySite}
           title={title}
           price={price}
-          age="36개월이상"
-          siteUrl={siteUrl}
+          age={month}
+          siteUrl={link}
         />
       ))}
     </StToyListWrapper>

components/viewProduct/ToyPreview.tsx

@@ -29,7 +29,9 @@ export default function ToyPreview(props: ToyPreviewProps) {
   return (
     <StToyWrapper onClick={handleToySite}>
       <StImgWrapper>
-        <StToyImg src="https://www.littlebaby.co.kr:14019/shop/data/goods/1632018070797m0.jpg" />
+        <StToyImg
+          src={`https://nori-image.s3.ap-northeast-2.amazonaws.com/${src}`}
+        />
         <StToyMarkWrapper onClick={handleToyMark}>
           <StToyMark />
           {isMark && <StFillToyMark />}

core/api/viewProduct.ts

@@ -15,5 +15,5 @@ export const useGetBannerViewProduct = (params: { category: number }) => {
   };
 };
 export const getBannerViewProduct = () => {
-  return;
+  return baseInstance.get('/toy/list');
 };

core/atom.ts

@@ -42,30 +42,7 @@ export const filterListState = atom({
   key: 'filterListState',
   default: {
     filterList: {
-      스토어: [
-        '국민장난감',
-        '그린키드',
-        '러브로',
-        '리틀베이비',
-        '빌리바바',
-        '어텐션홈이벤트',
-        '장난감점빵',
-        '젤리바운스',
-        '해피장난감',
-      ],
-      '사용 연령': [
-        '0~5개월',
-        '6~11개월',
-        '12~17개월',
-        '18~23개월',
-        '24~35개월',
-        '36~47개월',
-        '48~60개월',
-        '기타',
-      ],
-      가격: ['1만원 미만', '1-3만원', '3-5만원', '5-8만원', '8만원이상'],
-      특성: ['타고 노는', '만지고 노는', '기타'],
-      '장난감 종류': [
+      종류: [
         '아기체육관',
         '모빌',
         '바운서',
@@ -87,6 +64,29 @@ export const filterListState = atom({
         '역할놀이',
         '기타',
       ],
+      '사용 연령': [
+        '0~5개월',
+        '6~11개월',
+        '12~17개월',
+        '18~23개월',
+        '24~35개월',
+        '36~47개월',
+        '48~60개월',
+        '기타',
+      ],
+      가격: ['1만원 미만', '1-3만원', '3-5만원', '5-8만원', '8만원이상'],
+      특성: ['타고 노는', '만지고 노는', '기타'],
+      스토어: [
+        '국민장난감',
+        '그린키드',
+        '러브로',
+        '리틀베이비',
+        '빌리바바',
+        '어텐션홈이벤트',
+        '장난감점빵',
+        '젤리바운스',
+        '해피장난감',
+      ],
     },
   },
 });

core/axios.ts

@@ -1,6 +1,7 @@
 import axios from 'axios';
 import LocalStorage from './localStorage';
 
+console.log(process.env.NEXT_PUBLIC_BASE_URL);
 const baseInstance = axios.create({
   baseURL: `${process.env.NEXT_PUBLIC_BASE_URL}`,
   headers: {
@@ -26,13 +27,10 @@ baseInstance.interceptors.response.use(
     return res;
   },
   async function (error: { config: any; response: { status: any } }) {
-    const {
-      config,
-      response: { status },
-    } = error;
-
+    const { config, response } = error;
+    console.log(error);
     const originalRequest = config;
-    if (status === 401) {
+    if (response?.status === 401) {
       // token refresh 요청
       const { data } = await axios.post(
         `/auth/token/refresh`, // token refresh api

core/localStorage.ts

@@ -2,11 +2,16 @@ class LocalStorage {
   constructor() {}
 
   static setItem(key: string, item: string) {
-    localStorage.setItem(key, item);
+    if (typeof window !== 'undefined') {
+      localStorage.setItem(key, item);
+    }
   }
 
   static getItem(key: string) {
-    return localStorage.getItem(key) as string;
+    if (typeof window !== 'undefined') {
+      return localStorage.getItem(key) as string;
+    }
+    return '';
   }
 
   static removeItem(key: string) {

pages/index.tsx

@@ -156,6 +156,7 @@ const StCollectionTitle = styled(StConceptTitle)`
 `;
 export const getStaticProps: GetStaticProps = async (context) => {
   const res = await getMainProduct();
+  console.log(res);
   return {
     props: {
       mainData: res.data.data,

pages/viewProduct.tsx

@@ -16,53 +16,55 @@ import {
 } from '../components/landing/viewProduct';
 import { PriceFilter, PageNavigation } from '../components/common';
 import { ToyData } from '../types/toy';
-import { toyMockData } from '../mocks/data/toyMockData';
 import { GetServerSideProps, InferGetServerSidePropsType } from 'next';
 import { useRecoilValue } from 'recoil';
 import { FilterTagProps } from '../types/viewProduct';
 import { filterTagState } from '../core/atom';
 import { IcGrayEmpty } from '../public/assets/icons';
+import {
+  getBannerViewProduct,
+  useGetBannerViewProduct,
+} from '../core/api/viewProduct';
 
 const limit = 40;
 
 export default function viewProduct({
-  data,
+  filterData,
+  result,
 }: InferGetServerSidePropsType<typeof getServerSideProps>) {
+  console.log(filterData, result);
   const [priceDesc, setPriceDesc] = useState<boolean>(true);
   const [toyList, setToyList] = useState<ToyData[]>([]);
   const [currentPage, setCurrentPage] = useState<number>(1);
-  console.log(data);
+
   const handleClickPrice = (clickPrice: string) => {
     clickPrice === 'price-desc' ? setPriceDesc(true) : setPriceDesc(false);
   };
 
   const handleCurrentPage = (nextPage: number) => {
     setCurrentPage(nextPage);
   };
-
-  const [selectPrice, setSelectPrice] = useState<boolean[]>([true, false]);
   // useSWR로 로딩 판단할 것임
-  const isLoading = false;
   const filterTagList = useRecoilValue<FilterTagProps[]>(filterTagState);
 
   // let { productList, isLoading, isError } = priceDesc
   //   ? (useGetCollectionProduct('price-desc') as GetCollectionProduct)
   //   : (useGetCollectionProduct('price-asc') as GetCollectionProduct);
 
   useEffect(() => {
-    if (data) {
-      const filterData = data.filter(
+    if (result) {
+      const filterData = result.filter(
         (_: any, idx: number) =>
           (currentPage - 1) * 40 <= idx && idx < currentPage * 40,
       );
       setToyList(filterData);
       window.scrollTo(0, 0);
     }
-  }, [data, currentPage]);
+  }, [result, currentPage]);
 
   return (
     <StViewProductWrapper>
-      {false ? (
+      {!filterData ? (
         <>
           <LandingViewProductBanner />
           <StFilterSectionWrapper>
@@ -113,7 +115,7 @@ export default function viewProduct({
           </StFilterSectionWrapper>
           <PageNavigation
             currentPage={currentPage}
-            lastPage={Math.ceil(data.length / limit)}
+            lastPage={Math.ceil(result.length / limit)}
             handleCurrentPage={handleCurrentPage}
           />
         </>
@@ -155,10 +157,12 @@ const StEmptyView = styled.section`
   margin: 0 23.8rem;
 `;
 export const getServerSideProps: GetServerSideProps = async (context) => {
-  const data: ToyData[] = toyMockData;
+  const res = await getBannerViewProduct();
+  console.log(res.data.data);
   return {
     props: {
-      data,
+      filterData: res.data.data.filterData,
+      result: res.data.data.result,
     },
   };
 };

types/toy.ts

@@ -1,13 +1,22 @@
 export interface ToyData {
-  price: number; //가격
-  priceCode?: number;
-  image: string; //이미지
-  siteUrl: string;
+  id: number;
   title: string;
+  price: number; //가격
+  priceCd?: number;
   month?: string; //연령
-  playHow: number;
-  type: number;
-  siteName: string;
+  minMonth: number;
+  maxMonth: number;
+  link: string;
+  playHow: string;
+  playHowCd: number;
+  image: string; //이미지
+  category: string;
+  categoryCd: number;
+  toySiteCd: number;
+  toySite: {
+    id: number;
+    toySite: string;
+  };
 }
 
 export interface MainToyData {