diff --git a/components/viewProduct/FilterDropdown.tsx b/components/viewProduct/FilterDropdown.tsx
index 3e20528..228b63a 100644
--- a/components/viewProduct/FilterDropdown.tsx
+++ b/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
diff --git a/components/viewProduct/ProductFilter.tsx b/components/viewProduct/ProductFilter.tsx
index ba3734c..8595677 100644
--- a/components/viewProduct/ProductFilter.tsx
+++ b/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
               }
diff --git a/components/viewProduct/ToyList.tsx b/components/viewProduct/ToyList.tsx
index 017bdf5..bbddddc 100644
--- a/components/viewProduct/ToyList.tsx
+++ b/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>
diff --git a/components/viewProduct/ToyPreview.tsx b/components/viewProduct/ToyPreview.tsx
index 05826f6..ad34a7c 100644
--- a/components/viewProduct/ToyPreview.tsx
+++ b/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 />}
diff --git a/core/api/viewProduct.ts b/core/api/viewProduct.ts
index e0eb76e..b09c1e5 100644
--- a/core/api/viewProduct.ts
+++ b/core/api/viewProduct.ts
@@ -15,5 +15,5 @@ export const useGetBannerViewProduct = (params: { category: number }) => {
   };
 };
 export const getBannerViewProduct = () => {
-  return;
+  return baseInstance.get('/toy/list');
 };
diff --git a/core/atom.ts b/core/atom.ts
index d109029..62d5990 100644
--- a/core/atom.ts
+++ b/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만원이상'],
+      특성: ['타고 노는', '만지고 노는', '기타'],
+      스토어: [
+        '국민장난감',
+        '그린키드',
+        '러브로',
+        '리틀베이비',
+        '빌리바바',
+        '어텐션홈이벤트',
+        '장난감점빵',
+        '젤리바운스',
+        '해피장난감',
+      ],
     },
   },
 });
diff --git a/core/axios.ts b/core/axios.ts
index f0e782e..117ac55 100644
--- a/core/axios.ts
+++ b/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
diff --git a/core/localStorage.ts b/core/localStorage.ts
index 10287ef..bc9d351 100644
--- a/core/localStorage.ts
+++ b/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) {
diff --git a/pages/index.tsx b/pages/index.tsx
index 5ce95be..33c7181 100755
--- a/pages/index.tsx
+++ b/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,
diff --git a/pages/viewProduct.tsx b/pages/viewProduct.tsx
index 96945e4..291c76a 100644
--- a/pages/viewProduct.tsx
+++ b/pages/viewProduct.tsx
@@ -16,22 +16,27 @@ 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);
   };
@@ -39,10 +44,7 @@ export default function viewProduct({
   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
@@ -50,19 +52,19 @@ export default function viewProduct({
   //   : (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,
     },
   };
 };
diff --git a/types/toy.ts b/types/toy.ts
index 0a3b045..aaa1493 100644
--- a/types/toy.ts
+++ b/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 {