리뷰반영 및 추가기능 구현 완료

.eslintrc.json

@@ -1,3 +1,7 @@
 {
-  "extends": ["react-app", "plugin:prettier/recommended"]
+  "extends": ["react-app", "prettier"],
+  "plugins": ["prettier"],
+  "rules": {
+    "prettier/prettier": ["error", { "endOfLine": "auto" }]
+  }
 }

package.json

@@ -10,9 +10,11 @@
     "node-sass": "^4.14.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
+    "react-icons": "^4.2.0",
     "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.3",
     "styled-components": "^5.2.1",
+    "styled-reset": "^4.3.4",
     "web-vitals": "^1.0.1"
   },
   "scripts": {
@@ -40,6 +42,7 @@
     ]
   },
   "devDependencies": {
-    "eslint-config-prettier": "^8.1.0"
+    "eslint-config-prettier": "^8.1.0",
+    "prettier": "^2.2.1"
   }
 }

public/data/menu.json

@@ -0,0 +1,38 @@
+[
+  {
+    "id": 1,
+    "img": "https://www.chrischae.kr/content/images/size/w1200/2019/12/starbucks1.jpg",
+    "price": 10000.0,
+    "name": "아메리카노"
+  },
+  {
+    "id": 2,
+    "img": "https://www.chrischae.kr/content/images/size/w1200/2019/12/starbucks1.jpg",
+    "price": 10000.0,
+    "name": "라떼"
+  },
+  {
+    "id": 3,
+    "img": "https://www.chrischae.kr/content/images/size/w1200/2019/12/starbucks1.jpg",
+    "price": 10000.0,
+    "name": "쿨라임 피지오"
+  },
+  {
+    "id": 4,
+    "img": "https://www.chrischae.kr/content/images/size/w1200/2019/12/starbucks1.jpg",
+    "price": 10000.0,
+    "name": "프라푸치노"
+  },
+  {
+    "id": 5,
+    "img": "https://www.chrischae.kr/content/images/size/w1200/2019/12/starbucks1.jpg",
+    "price": 10000.0,
+    "name": "카페모카"
+  },
+  {
+    "id": 6,
+    "img": "https://www.chrischae.kr/content/images/size/w1200/2019/12/starbucks1.jpg",
+    "price": 10000.0,
+    "name": "아이스 아메리카노"
+  }
+]

public/data/storeDetail.json

@@ -0,0 +1,87 @@
+{
+  "result": {
+    "store_id": 53,
+    "category": "한식",
+    "open_status": "오픈중",
+    "store_name": "순남시래기",
+    "opening_time_description": "평일 09시 ~ 23시",
+    "phone_number": "02-427-6626",
+    "store_images": [
+      "https://steemitimages.com/DQmf9fgCzGWsqj1gcoP9Z8YDCKykDGi1KRdanrZAdQtFLVE/20180221_190332.jpg",
+      "https://s3-ap-northeast-1.amazonaws.com/dcreviewsresized/20200712094922_photo1_68d1c5bf458f.jpg",
+      "https://s3-ap-northeast-1.amazonaws.com/dcreviewsresized/20200712094922_photo3_68d1c5bf458f.jpg"
+    ],
+    "one_line_introduction": "시래기와 막걸리가 맛있는 집!",
+    "full_address": "서울 강남구 강남대로66길 16",
+    "short_address": "강남구 역삼동",
+    "lon": "127.032166561787",
+    "lat": "37.4918939171295",
+    "sns_url": "https://www.instagram.com/soonnamsiraegi/",
+    "is_reservation": 1,
+    "is_wifi": 1,
+    "is_parking": 0,
+    "menu_pamphlet_image_url": "https://s3-ap-northeast-1.amazonaws.com/dcreviewsresized/20200712094922_photo3_68d1c5bf458f.jpg",
+    "menus": [
+      {
+        "name": "시래기 국밥",
+        "price": 8000,
+        "menu_image_url": "https://s3-ap-northeast-1.amazonaws.com/dcreviewsresized/20200206030137603_photo_EnjdtHHZ6jYx.jpg"
+      },
+      {
+        "name": "수육",
+        "price": 13000,
+        "menu_image_url": "https://d2t7cq5f1ua57i.cloudfront.net/images/r_images/54372/58486/54372_58486_89_0_9602_2016112213118580.jpg"
+      },
+      {
+        "name": "시래기 국밥2",
+        "price": 8000,
+        "menu_image_url": "https://s3-ap-northeast-1.amazonaws.com/dcreviewsresized/20200206030137603_photo_EnjdtHHZ6jYx.jpg"
+      },
+      {
+        "name": "수육2",
+        "price": 13000,
+        "menu_image_url": "https://d2t7cq5f1ua57i.cloudfront.net/images/r_images/54372/58486/54372_58486_89_0_9602_2016112213118580.jpg"
+      },
+      {
+        "name": "시래기 국밥3",
+        "price": 8000,
+        "menu_image_url": "https://s3-ap-northeast-1.amazonaws.com/dcreviewsresized/20200206030137603_photo_EnjdtHHZ6jYx.jpg"
+      },
+      {
+        "name": "수육3",
+        "price": 13000,
+        "menu_image_url": "https://d2t7cq5f1ua57i.cloudfront.net/images/r_images/54372/58486/54372_58486_89_0_9602_2016112213118580.jpg"
+      }
+    ],
+    "metro_stations": [
+      {
+        "name": "선릉역",
+        "line": "2호선"
+      },
+      {
+        "name": "선릉역",
+        "line": "수인분당선"
+      }
+    ],
+    "review_count": 200,
+    "rating_average": 3.5,
+    "visitor_photos": [
+      "http://travel.chosun.com/site/data/img_dir/2011/07/11/2011071101128_0.jpg",
+      "http://travel.chosun.com/site/data/img_dir/2011/07/11/2011071101128_0.jpg"
+    ],
+    "reviews": [
+      {
+        "rating": "4.5",
+        "content": "얼마나 쓸 수 있는지 한번 볼까 리뷰 남기기 몇글자까지 가능하게 할까요 얼마나 쓸 수 있는지 한번 볼까 리뷰 남기기 몇글자까지 가능하게 할까요 (이게 100자)",
+        "image_url": "http://travel.chosun.com/site/data/img_dir/2011/07/11/2011071101128_0.jpg",
+        "updated_at": "2021-04-04T00:08:02.064"
+      },
+      {
+        "rating": "1.5",
+        "content": "얼마나 쓸 수 있는지 한번 볼까 리뷰 남기기 몇글자까지 가능하게 할까요 얼마나 쓸 수 있는지 한번 볼까 리뷰 남기기 몇글자까지 가능하게 할까요 (이게 100자)",
+        "image_url": "http://travel.chosun.com/site/data/img_dir/2011/07/11/2011071101128_0.jpg",
+        "updated_at": "2021-04-04T00:08:02.064"
+      }
+    ]
+  }
+}

public/index.html

@@ -3,6 +3,10 @@
   <head>
     <meta charset="utf-8" />
     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <script
+      type="text/javascript"
+      src="https://dapi.kakao.com/v2/maps/sdk.js?appkey=16accc006e635e2dc803adb780ab60c2"
+    ></script>
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>Mukbang</title>
   </head>

src/Pages/Main/Components/StoreDetail/ImageSlider.js

@@ -0,0 +1,71 @@
+import { useState } from 'react';
+import { RiArrowLeftSLine, RiArrowRightSLine } from 'react-icons/ri';
+import styled from 'styled-components';
+
+const ImageSlider = props => {
+  const [index, setIndex] = useState(0);
+
+  const slideImage = e => {
+    e.target.value === RiArrowLeftSLine()
+      ? index && setIndex((index - 1) % props.images.length)
+      : setIndex((index + 1) % props.images.length);
+  };
+
+  return (
+    props.images.length && (
+      <ImgSlider>
+        <Left onClick={slideImage}>{RiArrowLeftSLine()}</Left>
+        <Img src={props.images[index]} />
+        <Right onClick={slideImage}>{RiArrowRightSLine()}</Right>
+      </ImgSlider>
+    )
+  );
+};
+
+export default ImageSlider;
+
+const ImgSlider = styled.div`
+  position: relative;
+  display: flex;
+  justify-content: space-around;
+`;
+
+const Img = styled.img`
+  width: 100%;
+  height: 200px;
+  transition-property: width;
+  transition-duration: 2ms;
+`;
+
+const Left = styled.div`
+  position: absolute;
+  padding-top: 21%;
+  left: 0;
+  height: 100%;
+  width: 10%;
+  cursor: pointer;
+  background-color: #ffa409;
+  opacity: 0.2;
+  font-size: 50px;
+  color: white;
+  :hover {
+    opacity: 0.8;
+  }
+`;
+
+const Right = styled.div`
+  position: absolute;
+  text-align: center;
+  padding-top: 21%;
+  right: 0;
+  height: 100%;
+  width: 10%;
+  cursor: pointer;
+  background-color: #ffa409;
+  opacity: 0.2;
+  font-size: 50px;
+  color: white;
+  :hover {
+    opacity: 0.8;
+  }
+`;

src/Pages/Main/Components/StoreDetail/Info.js

@@ -0,0 +1,130 @@
+import React, { useState } from 'react';
+import { BiChevronDown, BiChevronUp } from 'react-icons/bi';
+import StoreInfo from './StoreInfo';
+import Map from './Map';
+import Menu from './Menu';
+import Review from './Review';
+import ReviewImg from './ReviewImg';
+import styled from 'styled-components';
+
+const Info = props => {
+  const [isActive, setActive] = useState([
+    false,
+    false,
+    false,
+    false,
+    false,
+    false,
+  ]);
+
+  const activeToggle = index => {
+    let toggleClick = [...isActive];
+    for (let i = 0; i < 6; i++) {
+      i <= index ? (toggleClick[i] = true) : (toggleClick[i] = false);
+    }
+    setActive(toggleClick);
+  };
+
+  const INFO = [
+    {
+      title: '가게 정보',
+      content: (
+        <StoreInfo
+          address={props.address}
+          parking={props.parking}
+          phone_number={props.phone_number}
+          wifi={props.wifi}
+          reservation={props.reservation}
+          opening_time={props.opening_time}
+          sns_url={props.sns_url}
+        />
+      ),
+    },
+    {
+      title: '메뉴',
+      content: (
+        <Content>
+          <Menu menu_pamphlet={props.menu_pamphlet} menuList={props.menuList} />
+        </Content>
+      ),
+    },
+    {
+      title: '위치',
+      content: (
+        <Content>
+          {props.address}
+          <Map
+            openRoadview={props.openRoadview}
+            latitude={props.latitude}
+            longitude={props.longitude}
+          />
+        </Content>
+      ),
+    },
+    {
+      title: '인근 전철역',
+      content: <Content>{props.metro_stations.toString()}</Content>,
+    },
+    {
+      title: '방문자 사진',
+      content: (
+        <Content>
+          <ReviewImg visitor_photos={props.visitor_photos} />
+        </Content>
+      ),
+    },
+    {
+      title: '리뷰',
+      content: (
+        <Content>
+          <Review reviews={props.reviews} />
+        </Content>
+      ),
+    },
+  ];
+
+  return (
+    <>
+      {INFO.map((data, idx) => (
+        <Infomation key={idx}>
+          <Toggle>
+            {data.title}
+            <Button onClick={() => activeToggle(idx)}>
+              {isActive[idx] ? BiChevronUp() : BiChevronDown()}
+            </Button>
+          </Toggle>
+          {isActive[idx] && data.content}
+        </Infomation>
+      ))}
+    </>
+  );
+};
+
+export default Info;
+
+const Infomation = styled.div`
+  padding: 18px;
+  margin-top: 10px;
+  background-color: white;
+`;
+
+const Toggle = styled.div`
+  color: #222222;
+  font-size: 18px;
+  position: relative;
+  padding: 5px 0px;
+`;
+
+const Button = styled.button`
+  position: absolute;
+  right: 0px;
+  top: 2px;
+  font-size: 30px;
+  cursor: pointer;
+`;
+
+const Content = styled.div`
+  border-top: 1px solid rgb(238, 238, 238);
+  padding: 18px 0px;
+  color: #757575;
+`;