-
Notifications
You must be signed in to change notification settings - Fork 3
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
5f0dd90
commit 5aa0a12
Showing
20 changed files
with
1,401 additions
and
149 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -4,4 +4,4 @@ | |
"rules": { | ||
"prettier/prettier": ["error", { "endOfLine": "auto" }] | ||
} | ||
} | ||
} |
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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": "아이스 아메리카노" | ||
} | ||
] |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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" | ||
} | ||
] | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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; | ||
} | ||
`; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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; | ||
`; |
Oops, something went wrong.