feat: implement restaurant list fetching logic

components/Portfolio/About/Activity/index.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import styled from "@emotion/styled";
 import Title from "components/Portfolio/common/Title";
 import InfoList from "../common/InfoList";
-import ActivityData from "data/About/ActivityData";
+import ActivityData from "data/about/ActivityData";
 
 const Activity = () => {
   return (

components/Portfolio/About/Career/index.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import styled from "@emotion/styled";
 import InfoList from "../common/InfoList";
-import CareerData from "data/About/CareerData";
+import CareerData from "data/about/CareerData";
 import Title from "components/Portfolio/common/Title";
 
 const Career = () => {

components/Portfolio/About/Challenge/index.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import styled from "@emotion/styled";
 import Title from "components/Portfolio/common/Title";
 import InfoList from "../common/InfoList";
-import ChallengeData from "data/About/ChallengeData";
+import ChallengeData from "data/about/ChallengeData";
 
 const Challenge = () => {
   return (

components/Portfolio/About/Education/index.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import styled from "@emotion/styled";
 import Title from "components/Portfolio/common/Title";
 import InfoList from "../common/InfoList";
-import EducationData from "data/About/EducationData";
+import EducationData from "data/about/EducationData";
 
 const Education = () => {
   return (

components/Portfolio/Hero/TechStack/List.tsx

@@ -2,7 +2,7 @@ import styled from "@emotion/styled";
 import React from "react";
 import Slider from "react-slick";
 import Slide from "./Slide";
-import TechStackData from "data/About/TechStackData";
+import TechStackData from "data/about/TechStackData";
 import { palette } from "styles/palette";
 import "slick-carousel/slick/slick.css";
 import "slick-carousel/slick/slick-theme.css";

components/Portfolio/Hero/TechStack/index.tsx

@@ -7,7 +7,7 @@ import useTechStackCategory from "hooks/useTechStackCategory";
 import TechStackDescription from "./Description";
 import TechStackType from "type/TechStack";
 import { palette } from "styles/palette";
-import TechStackData from "data/About/TechStackData";
+import TechStackData from "data/about/TechStackData";
 
 export type TechCategory = "frontEnd" | "backEnd" | "mobile" | "devOps" | "cloud";
 

components/Restaurant/Detail/index.tsx

@@ -2,7 +2,7 @@ import React from "react";
 
 interface Props {}
 
-const RestaurantDetailModal = (props: Props) => {
+const RestaurantDetailModal = ({}: Props) => {
   return <div></div>;
 };
 

components/Restaurant/List/Item.tsx

@@ -1,14 +1,15 @@
 import styled from "@emotion/styled";
 import React from "react";
+import Image from "next/image";
 import { palette } from "styles/palette";
+import { Restaurant } from "type/Restaurant";
 
-interface Props {}
-
-const RestaurantListItem = (props: Props) => {
+const RestaurantListItem = ({ title, thumbnail }: Restaurant) => {
   return (
     <Container>
       <div>
-        <Title>치킨의 자존심, 깐부치킨</Title>
+        {/* <Image src={thumbnail} width={300} height={300} alt={title} /> */}
+        <Title>{title}</Title>
         <Description>깐부치킨 그는 과연 신인가</Description>
       </div>
     </Container>

components/Restaurant/List/index.tsx

@@ -2,20 +2,34 @@ import React from "react";
 import Divider from "components/Portfolio/common/Divider";
 import RestaurantListItem from "./Item";
 import styled from "@emotion/styled";
+import { motion } from "framer-motion";
+import { Restaurant } from "type/Restaurant";
 
-interface Props {}
+type RestaurantListProps = {
+  restaurantReviewList: Restaurant[];
+};
 
-const RestaurantList = (props: Props) => {
+const RestaurantList = ({ restaurantReviewList }: RestaurantListProps) => {
   return (
     <div>
       <ListTitle>
         <Title>전체 목록</Title>
         <Divider />
       </ListTitle>
-      <ContentList>
-        <RestaurantListItem />
-        <RestaurantListItem />
-        <RestaurantListItem />
+      <ContentList layout>
+        {restaurantReviewList.map((review) => {
+          const { id, title, thumbnail, location, imageList } = review;
+          return (
+            <RestaurantListItem
+              key={title}
+              title={title}
+              thumbnail={thumbnail}
+              id={id}
+              location={location}
+              imageList={imageList}
+            />
+          );
+        })}
       </ContentList>
     </div>
   );
@@ -27,10 +41,12 @@ const Title = styled.h2`
 
 const ListTitle = styled.div``;
 
-const ContentList = styled.ul`
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
+const ContentList = styled(motion.ul)`
+  display: -ms-grid;
+  display: grid;
+  -ms-grid-columns: repeat(auto-fit, minmax(15rem, 1fr));
+  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
+  grid-gap: 1rem;
 `;
 
 export default RestaurantList;

components/Restaurant/index.tsx

@@ -5,16 +5,21 @@ import RestaurantCategoryList from "./Category/List";
 import RestaurantList from "./List";
 import Map from "./Map";
 import Divider from "components/Portfolio/common/Divider";
+import { Restaurant as RestaurantType } from "type/Restaurant";
 
-const Restaurant = () => {
+type RestaurantProps = {
+  restaurantReviewList: RestaurantType[];
+};
+
+const Restaurant = ({ restaurantReviewList }: RestaurantProps) => {
   return (
     <Container>
       <Title>🍖 막간을 틈탄 맛집 소개!</Title>
       <Divider />
       <Map />
       <RestaurantSearch />
       <RestaurantCategoryList />
-      <RestaurantList />
+      <RestaurantList restaurantReviewList={restaurantReviewList} />
     </Container>
   );
 };

data/about/ActivityData.tsx

@@ -0,0 +1,48 @@
+import { InfoItemProps } from "components/Portfolio/About/common/InfoItem";
+
+const ActivityData: InfoItemProps[] = [
+  {
+    icon: "/images/university-old-logo.png",
+    title: "전북대학교 아동 교육봉사",
+    description: "전북대학교",
+    startedAt: "2016.03",
+    endedAt: "2016.05",
+  },
+  {
+    icon: "/images/goyang-logo.png",
+    title: "도래울고등학교 영어교과 멘토링",
+    description: "경기도 고양교육지원청",
+    startedAt: "2017.02",
+    endedAt: "2017.06",
+  },
+  {
+    icon: "/images/goyang-logo.png",
+    title: "고양중학교 영어교과 멘토링",
+    description: "경기도 고양교육지원청",
+    startedAt: "2020.09",
+    endedAt: "2020.11",
+  },
+  {
+    icon: "/images/koala-logo.png",
+    title: "교내 알고리즘 학회 여름방학 스터디",
+    description: "KOALA",
+    startedAt: "2021.07",
+    endedAt: "2021.08",
+  },
+  {
+    icon: "/images/university-logo.jpg",
+    title: "코딩입문(Python) 과목 조교",
+    description: "한국항공대학교",
+    startedAt: "2021.03",
+    endedAt: "2021.06",
+  },
+  {
+    icon: "/images/university-logo.jpg",
+    title: "산학프로젝트 과목 조교",
+    description: "한국항공대학교",
+    startedAt: "2022.03",
+    endedAt: "2022.06",
+  },
+];
+
+export default ActivityData;

data/about/CareerData.tsx

@@ -0,0 +1,13 @@
+import { InfoItemProps } from "components/Portfolio/About/common/InfoItem";
+
+const CareerData: InfoItemProps[] = [
+  {
+    icon: "/images/travelflan-logo.jpg",
+    title: "프리디소프트",
+    description: "프론트엔드 ICT 인턴십 인턴",
+    startedAt: "2021.09",
+    endedAt: "2022.03",
+  },
+];
+
+export default CareerData;

data/about/ChallengeData.tsx

@@ -0,0 +1,33 @@
+import { InfoItemProps } from "components/Portfolio/About/common/InfoItem";
+
+const ChallengeData: InfoItemProps[] = [
+  {
+    icon: "/images/nipa-logo.png",
+    title: "오픈소스 컨트리뷰톤",
+    description: "모던 자바스크립트 튜토리얼 / 정보통신산업진흥원장상",
+    startedAt: "",
+    endedAt: "2019.11",
+  },
+  {
+    icon: "/images/government-logo.png",
+    title: "제 5회 정부혁신제안 해커톤 본선 참여",
+    description: "행정안전부",
+    endedAt: "2021.05",
+    targetUrl: "https://github.com/C17AN/carbon-clock",
+  },
+  {
+    icon: "/images/etri-logo.png",
+    title: "ETRI OPEN API 활용사례 공모전 참여",
+    description: "한국전자통신연구원",
+    endedAt: "2021.10",
+    targetUrl: "https://github.com/C17AN/TALKYTALKY",
+  },
+  {
+    icon: "/images/university-logo.jpg",
+    title: "2021 항공대 프로그래밍 경진대회",
+    description: "한국항공대 소프트웨어학과 / 11등",
+    endedAt: "2021.11",
+  },
+];
+
+export default ChallengeData;

data/about/EducationData.tsx

@@ -0,0 +1,31 @@
+import { InfoItemProps } from "components/Portfolio/About/common/InfoItem";
+
+const EducationData: InfoItemProps[] = [
+  {
+    icon: "/images/university-logo.jpg",
+    title: "한국항공대학교",
+    description: "AI융합대학 소프트웨어학과",
+    startedAt: "2017.02",
+    endedAt: "2023.02",
+  },
+  {
+    icon: "/images/toeic-logo.jpeg",
+    title: "TOEIC",
+    description: "885점",
+    endedAt: "2022.02",
+  },
+  {
+    icon: "/images/qnet-logo.png",
+    title: "정보처리기능사",
+    description: "한국산업인력공단",
+    endedAt: "2019.03",
+  },
+  {
+    icon: "/images/az-900-logo.png",
+    title: "Azure Fundamentals (AZ-900)",
+    description: "Microsoft",
+    endedAt: "2022.01",
+  },
+];
+
+export default EducationData;