From 6984484dbb0f144665b07b38c4ddfad84247470e Mon Sep 17 00:00:00 2001 From: leehyelim0691 <48082589+leehyelim0691@users.noreply.github.com> Date: Thu, 30 Jun 2022 19:38:44 +0900 Subject: [PATCH 1/3] =?UTF-8?q?[#212]=20=EB=A9=94=EC=9D=B8=ED=8E=98?= =?UTF-8?q?=EC=9D=B4=EC=A7=80=20=EC=A0=95=EB=A0=AC=20(#213)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat[#212]: 메인 페이지 select 정렬 * feat[#212]: 메인 페이지 select 정렬 --- .../rebon-frontend/src/pages/Detail/index.js | 2 +- .../src/pages/Main/Divider/index.js | 39 ++-- .../src/pages/Main/MainCard/index.js | 173 ++++++++++++------ .../rebon-frontend/src/pages/Main/index.js | 15 +- backend/security | 2 +- 5 files changed, 149 insertions(+), 82 deletions(-) diff --git a/FrontEnd/rebon-frontend/src/pages/Detail/index.js b/FrontEnd/rebon-frontend/src/pages/Detail/index.js index cf62abf7..dd135bc6 100644 --- a/FrontEnd/rebon-frontend/src/pages/Detail/index.js +++ b/FrontEnd/rebon-frontend/src/pages/Detail/index.js @@ -38,7 +38,7 @@ export default function Detail() { useEffect(() => { axios - .get('http://3.34.139.61:8080/api/shops/1') + .get('http://3.34.139.61:8080/api/shops/2') .then((response) => { setShopInfo(response.data); console.log(shopInfo); diff --git a/FrontEnd/rebon-frontend/src/pages/Main/Divider/index.js b/FrontEnd/rebon-frontend/src/pages/Main/Divider/index.js index e40df280..54a6cb2b 100644 --- a/FrontEnd/rebon-frontend/src/pages/Main/Divider/index.js +++ b/FrontEnd/rebon-frontend/src/pages/Main/Divider/index.js @@ -1,9 +1,11 @@ -import React,{useState} from 'react'; +import React, { useState } from 'react'; import '../../../styles/main.css'; import Toggle from 'react-toggle'; +import MainCard from '../MainCard'; export default function Divider() { const [toggleOn, setToggleOn] = useState(false); + const [sort, setSort] = useState('star'); const toggleChange = (event) => { if (toggleOn) setToggleOn(false); @@ -11,18 +13,29 @@ export default function Divider() { // console.log(event); }; return ( -
-
- - 현재 영업중 - + <> +
+
+ + 현재 영업중 + +
-
+
+ +
+ ); } diff --git a/FrontEnd/rebon-frontend/src/pages/Main/MainCard/index.js b/FrontEnd/rebon-frontend/src/pages/Main/MainCard/index.js index d8df24f6..6eedecfa 100644 --- a/FrontEnd/rebon-frontend/src/pages/Main/MainCard/index.js +++ b/FrontEnd/rebon-frontend/src/pages/Main/MainCard/index.js @@ -1,78 +1,133 @@ -import React,{useState} from 'react'; +import React, { useState } from 'react'; import '../../../styles/main.css'; import { FiHeart } from 'react-icons/fi'; import { FaHeart } from 'react-icons/fa'; -export default function MainCard() { - const [like,setLike] = useState(false); +export default function MainCard({ sort }) { + const [like, setLike] = useState(false); - const likeClick =()=>{ - if(like){ + const likeClick = ({ sort }) => { + if (like) { setLike(false); - }else{ + } else { setLike(true); } - } + }; - const [mainInfo,setMainInfo] = useState([ + const [mainInfo, setMainInfo] = useState([ { - "id":4, - "name":"인브리즈", - "star":0.0, - "like":false, - "tags":[{ - "id":1, - "name":"포항" - },{ - "id":3, - "name":"한동대" - }], - "image" : "https://mblogthumb-phinf.pstatic.net/MjAxODA3MDNfMjAy/MDAxNTMwNjI5NjE1MTk1.cJeJTxszRfHGMw3q3hqSN4LLBS5scVV4lUBWsjEYLgcg.b1MlKG__mr8dVbZq7KGaFVZ3uttt9Ya_RBAJTgR8F9wg.JPEG.netusu/IMG_4822.jpg?type=w800" - },{ - "id":5, - "name":"미스터 피자", - "star":0.0, - "like":false, - "tags":[ + id: 4, + name: '인브리즈', + star: 5.0, + like: false, + tags: [ { - "id" : 1, - "name" : "포항" - },{ - "id":4, - "name":"양덕" - } + id: 1, + name: '포항', + }, + { + id: 3, + name: '한동대', + }, ], - "image" : "https://cdn.tleaves.co.kr/news/photo/202202/1991_2819_1810.jpg" - } - ]) + image: + 'https://mblogthumb-phinf.pstatic.net/MjAxODA3MDNfMjAy/MDAxNTMwNjI5NjE1MTk1.cJeJTxszRfHGMw3q3hqSN4LLBS5scVV4lUBWsjEYLgcg.b1MlKG__mr8dVbZq7KGaFVZ3uttt9Ya_RBAJTgR8F9wg.JPEG.netusu/IMG_4822.jpg?type=w800', + }, + { + id: 5, + name: '미스터 피자', + star: 3.0, + like: false, + tags: [ + { + id: 1, + name: '포항', + }, + { + id: 4, + name: '양덕', + }, + ], + image: 'https://cdn.tleaves.co.kr/news/photo/202202/1991_2819_1810.jpg', + }, + ]); return ( <> - {mainInfo.map((item,idx) => ( -
- - + {sort === 'star' + ? mainInfo + .sort((a, b) => b.star - a.star) + .map((item, idx) => ( +
+ -
- {item.like? - : - - } -
-
-
-
{item.name}
-
{item.star}
-
-
- {item.tags.map((tag)=>( - {tag.name} - ))} -
-
-
- ))} - +
+ {item.like ? : } +
+
+
+
{item.name}
+
{item.star}
+
+
+ {item.tags.map((tag) => ( + {tag.name} + ))} +
+
+
+ )) + : sort === 'review' + ? mainInfo + .sort((a, b) => b.star - a.star) + .map((item, idx) => ( +
+ + +
+ {item.like ? : } +
+
+
+
{item.name}
+
{item.star}
+
+
+ {item.tags.map((tag) => ( + {tag.name} + ))} +
+
+
+ )) + : sort === 'recent' + ? mainInfo + .sort((a, b) => b.id - a.id) + .map((item, idx) => ( +
+ +
+ {item.like ? : } +
+
+
+
{item.name}
+
{item.star}
+
+
+ {item.tags.map((tag) => ( + {tag.name} + ))} +
+
+
+ )) + : ''} + + {/* {mainInfo.map((item,idx) => ( + + ))} */} + ); } diff --git a/FrontEnd/rebon-frontend/src/pages/Main/index.js b/FrontEnd/rebon-frontend/src/pages/Main/index.js index 06af4852..b5ffb30c 100644 --- a/FrontEnd/rebon-frontend/src/pages/Main/index.js +++ b/FrontEnd/rebon-frontend/src/pages/Main/index.js @@ -1,4 +1,4 @@ -import React,{useState,useEffect} from 'react'; +import React, { useState, useEffect } from 'react'; import PropTypes from 'prop-types'; import Tabs from '@mui/material/Tabs'; import Tab from '@mui/material/Tab'; @@ -16,7 +16,6 @@ import axios from 'axios'; import { useLocation } from 'react-router'; function TabPanel(props) { - const { children, value, index, ...other } = props; return ( @@ -59,13 +58,13 @@ export default function Main() { axios .get('http://34.238.48.93:8080/api/shops?tag=1&category=1&subCategories=5&subCategories=7') .then((response) => { - console.log("데이터값"); + console.log('데이터값'); console.log(response.data); }) .catch((error) => { console.log('error'); }); - },[]); + }, []); return (
@@ -102,17 +101,17 @@ export default function Main() {
-
+
📍 '한동대'식당
- +
-
+ {/*
-
+
*/}
diff --git a/backend/security b/backend/security index 05dd24aa..558cdc22 160000 --- a/backend/security +++ b/backend/security @@ -1 +1 @@ -Subproject commit 05dd24aa508585f500e7adca374812e12bfc36ef +Subproject commit 558cdc223dcbdd31fa16cac3e4905308fbad07df From 6ad33ad2b9580516e3f4ccbcdabf98d1f438980f Mon Sep 17 00:00:00 2001 From: Eugenius1st <84161508+Eugenius1st@users.noreply.github.com> Date: Thu, 30 Jun 2022 19:57:09 +0900 Subject: [PATCH 2/3] =?UTF-8?q?[#214]:=20header=20api=20=EC=97=B0=EA=B2=B0?= =?UTF-8?q?,=20=EB=94=94=ED=85=8C=EC=9D=BC=20=EC=88=98=EC=A0=95=20(#215)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: 안유진 --- .../src/components/Header/SearchModal/index.js | 2 +- FrontEnd/rebon-frontend/src/pages/Mypage/Edit/index.js | 5 +++-- FrontEnd/rebon-frontend/src/pages/Search/Tags/index.js | 2 +- 3 files changed, 5 insertions(+), 4 deletions(-) diff --git a/FrontEnd/rebon-frontend/src/components/Header/SearchModal/index.js b/FrontEnd/rebon-frontend/src/components/Header/SearchModal/index.js index a1aa50df..f42fee3b 100644 --- a/FrontEnd/rebon-frontend/src/components/Header/SearchModal/index.js +++ b/FrontEnd/rebon-frontend/src/components/Header/SearchModal/index.js @@ -31,7 +31,7 @@ export default function SearchModal() { const [tag, setTags] = useState([]); useEffect(() => { axios - .get('http://34.238.48.93:8080/api/tags') + .get('http://3.34.139.61:8080/api/tags') .then((response) => { setTags(response.data); console.log(tag[8]); diff --git a/FrontEnd/rebon-frontend/src/pages/Mypage/Edit/index.js b/FrontEnd/rebon-frontend/src/pages/Mypage/Edit/index.js index a5416203..abd6a0ec 100644 --- a/FrontEnd/rebon-frontend/src/pages/Mypage/Edit/index.js +++ b/FrontEnd/rebon-frontend/src/pages/Mypage/Edit/index.js @@ -18,18 +18,19 @@ export default function Edit() { const checkNick = () => { axios - .post('http://34.238.48.93:8080/api/members/nickname/check-duplicate', { + .post('http://3.34.139.61:8080/api/members/nickname/check-duplicate', { nickname: { name }, }) .then(function (response) { // -- 이 200일 경우 + console.log(response); setAlertState({ display: 'block', check: 'success', message: '사용 가능한 아이디 입니다' }); }) .catch(function (error) { // 오류발생시 실행 -- 이 400일 경우, alert error 출력, 닉네임 input 공백, + console.log(error); setName(userName); setAlertState({ display: 'block', check: 'error', message: '이미 있는 아이디 입니다' }); - console.log(alertState.display); }) .then(function () { // 항상 실행 diff --git a/FrontEnd/rebon-frontend/src/pages/Search/Tags/index.js b/FrontEnd/rebon-frontend/src/pages/Search/Tags/index.js index 16be250c..369d620a 100644 --- a/FrontEnd/rebon-frontend/src/pages/Search/Tags/index.js +++ b/FrontEnd/rebon-frontend/src/pages/Search/Tags/index.js @@ -7,7 +7,7 @@ export default function Tags() { const [tag, setTags] = useState([]); useEffect(() => { axios - .get('http://34.238.48.93:8080/api/tags') + .get('http://3.34.139.61:8080/api/tags') .then((response) => { setTags(response.data); console.log(tag[8]); From 6a02fa26d396e2f5eb3d26bb3857c7efd74c3c4b Mon Sep 17 00:00:00 2001 From: leehyelim0691 <48082589+leehyelim0691@users.noreply.github.com> Date: Thu, 30 Jun 2022 20:36:24 +0900 Subject: [PATCH 3/3] =?UTF-8?q?style[#216]:=20=ED=94=84=EB=A1=A0=ED=8A=B8?= =?UTF-8?q?=20=EC=97=94=EB=93=9C=20=EC=8A=A4=ED=83=80=EC=9D=BC=20=EC=88=98?= =?UTF-8?q?=EC=A0=95=20(#217)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- FrontEnd/rebon-frontend/src/Router.js | 2 +- .../rebon-frontend/src/pages/Detail/index.js | 109 +++++++--- .../src/pages/Main/BestCard/index.js | 164 +++++++++------ .../src/pages/Main/MainCard/index.js | 187 +++++++++++++----- FrontEnd/rebon-frontend/src/styles/detail.css | 6 +- FrontEnd/rebon-frontend/src/styles/main.css | 69 ++++--- 6 files changed, 364 insertions(+), 173 deletions(-) diff --git a/FrontEnd/rebon-frontend/src/Router.js b/FrontEnd/rebon-frontend/src/Router.js index 349706ff..4b1a0ebe 100644 --- a/FrontEnd/rebon-frontend/src/Router.js +++ b/FrontEnd/rebon-frontend/src/Router.js @@ -19,7 +19,7 @@ function Router() { return ( - } /> + } /> } /> } /> } /> diff --git a/FrontEnd/rebon-frontend/src/pages/Detail/index.js b/FrontEnd/rebon-frontend/src/pages/Detail/index.js index dd135bc6..c0d524f1 100644 --- a/FrontEnd/rebon-frontend/src/pages/Detail/index.js +++ b/FrontEnd/rebon-frontend/src/pages/Detail/index.js @@ -24,7 +24,63 @@ function SamplePrevArrow(props) { } export default function Detail() { - const [shopInfo, setShopInfo] = useState([]); + // const [shopInfo, setShopInfo] = useState(); + const [shopInfo, setShopInfo] = useState({ + id: 1, + name: '팜스발리', + star: 5.0, + like: true, + businessHour: '08:00~22:00', + tags: [ + { + id: 1, + name: '포항', + }, + { + id: 3, + name: '한동대', + }, + ], + phone: '010-1234-5678', + + subCategories: [ + { + id: 9, + name: '식당', + }, + ], + address: '경상북도 포항시 북구 흥해읍 한동로 558', + menus: [ + { + name: '피자류', + menus: [ + { + name: '김치 불고기', + price: 13700, + }, + { + name: '고구마', + price: 11000, + }, + ], + }, + + { + name: '치킨류', + menus: [ + { + name: '허니 치킨', + price: 13700, + }, + { + name: '후라이드 치킨', + price: 11000, + }, + ], + }, + ], + image: 'https://upload.wikimedia.org/wikipedia/commons/thumb/d/d3/Supreme_pizza.jpg/800px-Supreme_pizza.jpg', + }); const settings = { dots: false, infinite: true, @@ -36,48 +92,51 @@ export default function Detail() { prevArrow: , }; - useEffect(() => { - axios - .get('http://3.34.139.61:8080/api/shops/2') - .then((response) => { - setShopInfo(response.data); - console.log(shopInfo); - console.log(shopInfo.tags); - }) - .catch((error) => { - console.log('error'); - }); - }, []); + // useEffect(() => { + // axios + // .get('http://3.34.139.61:8080/api/shops/1') + // .then((response) => { + // setShopInfo(response.data); + // console.log(shopInfo); + // console.log(response.data); + // }) + // .catch((error) => { + // console.log('error'); + // }); + // }, []); return (
- review-image + {/* review-image */} + + {shopInfo.image ? review-image : ''}
- review-image - review-image - review-image - review-image + review-image + review-image + review-image + review-image
- review-image + review-image
- review-image - review-image - review-image - review-image + review-image + review-image + review-image + review-image
- shop-image -

{shopInfo.name}

+ shop-image + + {shopInfo.name ?

{shopInfo.name}

: ''}
{shopInfo.star === 0.0 ? ( <> diff --git a/FrontEnd/rebon-frontend/src/pages/Main/BestCard/index.js b/FrontEnd/rebon-frontend/src/pages/Main/BestCard/index.js index 737015ff..7e55c101 100644 --- a/FrontEnd/rebon-frontend/src/pages/Main/BestCard/index.js +++ b/FrontEnd/rebon-frontend/src/pages/Main/BestCard/index.js @@ -1,9 +1,11 @@ -import React,{useState,useEffect} from 'react'; +import React, { useState, useEffect } from 'react'; import '../../../styles/main.css'; import axios from 'axios'; import { FiHeart } from 'react-icons/fi'; import { FaHeart } from 'react-icons/fa'; -import {BsFillBookmarkFill} from 'react-icons/bs' +import { Link } from 'react-router-dom'; + +import { BsFillBookmarkFill } from 'react-icons/bs'; export default function BestCard() { // const [location,setLocation] = useState([]); @@ -22,77 +24,119 @@ export default function BestCard() { // }); // },[]); - const [bestInfo,setBestInfo] = useState([ + const [bestInfo, setBestInfo] = useState([ { - "id":1, - "name":"팜스발리", - "star":0.0, - "like":true, - "tags":[{ - "id":1, - "name":"포항" - },{ - "id":3, - "name":"한동대" - }], - "image" : "https://upload.wikimedia.org/wikipedia/commons/thumb/d/d3/Supreme_pizza.jpg/800px-Supreme_pizza.jpg" - },{ - "id":3, - "name":"한동대 학관", - "star":0.0, - "like":false, - "tags":[ + id: 1, + name: '팜스발리', + star: 5.0, + like: true, + tags: [ + { + id: 1, + name: '포항', + }, { - "id" : 1, - "name" : "포항" - },{ - "id":3, - "name":"한동대" - } + id: 3, + name: '한동대', + }, ], - "image" : "https://mblogthumb-phinf.pstatic.net/MjAxOTAxMTNfMTA0/MDAxNTQ3Mzc5NjQ1MzA2.jBPcIF5Tqd8GIrxEQhLG04tIQi33JGLThx4RQuimNVcg.2Nf25aUFMoCd4CdXBwv4HWg8ugDx0Ym9y9nhmEppNE0g.JPEG.let1997/Screenshot_20190113-204020_Naver_Blog.jpg?type=w800" - } - ]) + image: 'https://upload.wikimedia.org/wikipedia/commons/thumb/d/d3/Supreme_pizza.jpg/800px-Supreme_pizza.jpg', + }, + { + id: 2, + name: '한동대 학관', + star: 5.0, + like: false, + tags: [ + { + id: 1, + name: '포항', + }, + { + id: 3, + name: '한동대', + }, + ], + image: + 'https://mblogthumb-phinf.pstatic.net/MjAxOTAxMTNfMTA0/MDAxNTQ3Mzc5NjQ1MzA2.jBPcIF5Tqd8GIrxEQhLG04tIQi33JGLThx4RQuimNVcg.2Nf25aUFMoCd4CdXBwv4HWg8ugDx0Ym9y9nhmEppNE0g.JPEG.let1997/Screenshot_20190113-204020_Naver_Blog.jpg?type=w800', + }, + { + id: 3, + name: '시민 제과', + star: 4.0, + like: false, + tags: [ + { + id: 1, + name: '포항', + }, + { + id: 8, + name: '대흥동', + }, + ], + image: 'https://img.siksinhot.com/place/1604545711820158.jpg?w=307&h=300&c=Y', + }, + , + { + id: 4, + name: '가정초밥', + star: 4.0, + like: false, + tags: [ + { + id: 1, + name: '포항', + }, + { + id: 3, + name: '영일대', + }, + ], + image: 'https://mp-seoul-image-production-s3.mangoplate.com/1869758_1610938867363653.jpg', + }, + ]); - const [like,setLike] = useState(false); + const [like, setLike] = useState(false); - const likeClick =()=>{ - if(like){ + const likeClick = () => { + if (like) { setLike(false); - }else{ + } else { setLike(true); } - } + }; return ( <> - {bestInfo.map((item,idx) => ( -
- -
-
{item.name}
-
{item.star}
-
+ {bestInfo.map((item, idx) => { + var address = '/detail/' + item.id.toString(); + + return ( +
+ +
+ +
{item.name}
+ +
{item.star}
+
-
- {item.like? - : - - } -
- +
+ {item.like ? : } +
- -
{idx+1}
+ +
{idx + 1}
-
- {item.tags.map((tag)=>( - {tag.name} - ))} -
-
- ))} - +
+ {item.tags.map((tag) => ( + {tag.name} + ))} +
+
+ ); + })} + ); } diff --git a/FrontEnd/rebon-frontend/src/pages/Main/MainCard/index.js b/FrontEnd/rebon-frontend/src/pages/Main/MainCard/index.js index 6eedecfa..1c3c6e95 100644 --- a/FrontEnd/rebon-frontend/src/pages/Main/MainCard/index.js +++ b/FrontEnd/rebon-frontend/src/pages/Main/MainCard/index.js @@ -2,6 +2,8 @@ import React, { useState } from 'react'; import '../../../styles/main.css'; import { FiHeart } from 'react-icons/fi'; import { FaHeart } from 'react-icons/fa'; +import { Link } from 'react-router-dom'; +import styled from 'styled-components'; export default function MainCard({ sort }) { const [like, setLike] = useState(false); @@ -36,7 +38,7 @@ export default function MainCard({ sort }) { { id: 5, name: '미스터 피자', - star: 3.0, + star: 5.0, like: false, tags: [ { @@ -50,79 +52,166 @@ export default function MainCard({ sort }) { ], image: 'https://cdn.tleaves.co.kr/news/photo/202202/1991_2819_1810.jpg', }, + { + id: 6, + name: '교촌 치킨', + star: 3.0, + like: false, + tags: [ + { + id: 1, + name: '포항', + }, + { + id: 4, + name: '양덕', + }, + ], + image: 'https://t1.daumcdn.net/cfile/tistory/99A07D405A8C32CC1C', + }, + { + id: 7, + name: '환여 횟집', + star: 4.0, + like: false, + tags: [ + { + id: 1, + name: '포항', + }, + { + id: 5, + name: '환여동', + }, + ], + image: 'https://m.yorivery.com/data/goods/21/07/27//1000001108/1000001108_add3_070.jpg', + }, + { + id: 8, + name: '온센', + star: 5.0, + like: true, + tags: [ + { + id: 1, + name: '포항', + }, + { + id: 6, + name: '영일대', + }, + ], + image: 'https://t1.daumcdn.net/cfile/tistory/992153345D78FD301F', + }, ]); + const StyledLink = styled(Link)` + box-sizing: border-box; + display: block; + text-align: center; + text-decoration: none; + color: black; + hover: none; + `; + return ( <> {sort === 'star' ? mainInfo .sort((a, b) => b.star - a.star) - .map((item, idx) => ( -
- + .map((item, idx) => { + var address = '/detail/' + item.id.toString(); + return ( +
+ -
- {item.like ? : } -
-
-
-
{item.name}
-
{item.star}
+
+ {item.like ? ( + + ) : ( + + )}
-
- {item.tags.map((tag) => ( - {tag.name} - ))} +
+
+ +
{item.name}
+ +
{item.star}
+
+
+ {item.tags.map((tag) => ( + {tag.name} + ))} +
-
- )) + ); + }) : sort === 'review' ? mainInfo .sort((a, b) => b.star - a.star) - .map((item, idx) => ( -
- + .map((item, idx) => { + var address = '/detail/' + item.id.toString(); + return ( +
+ -
- {item.like ? : } -
-
-
-
{item.name}
-
{item.star}
+
+ {item.like ? ( + + ) : ( + + )}
-
- {item.tags.map((tag) => ( - {tag.name} - ))} +
+
+ +
{item.name}
+ +
{item.star}
+
+
+ {item.tags.map((tag) => ( + {tag.name} + ))} +
-
- )) + ); + }) : sort === 'recent' ? mainInfo .sort((a, b) => b.id - a.id) - .map((item, idx) => ( -
- + .map((item, idx) => { + var address = '/detail/' + item.id.toString(); + return ( +
+ -
- {item.like ? : } -
-
-
-
{item.name}
-
{item.star}
+
+ {item.like ? ( + + ) : ( + + )}
-
- {item.tags.map((tag) => ( - {tag.name} - ))} +
+
+ +
{item.name}
+ +
{item.star}
+
+
+ {item.tags.map((tag) => ( + {tag.name} + ))} +
-
- )) + ); + }) : ''} {/* {mainInfo.map((item,idx) => ( diff --git a/FrontEnd/rebon-frontend/src/styles/detail.css b/FrontEnd/rebon-frontend/src/styles/detail.css index a29a227a..d60c72cd 100644 --- a/FrontEnd/rebon-frontend/src/styles/detail.css +++ b/FrontEnd/rebon-frontend/src/styles/detail.css @@ -13,13 +13,13 @@ margin-top: 5%; display: grid; grid-template-columns: 1fr 1fr; - margin-bottom: 5%; + margin-bottom: 0px; } .detail-top-content-wrapper { - margin-top: 3%; + margin-top: 1%; } .detail-main-image { - width: 96%; + /* width: 96%; */ } .detail-sub-wrapper { margin-top: 5%; diff --git a/FrontEnd/rebon-frontend/src/styles/main.css b/FrontEnd/rebon-frontend/src/styles/main.css index d589ea6c..a35638a2 100644 --- a/FrontEnd/rebon-frontend/src/styles/main.css +++ b/FrontEnd/rebon-frontend/src/styles/main.css @@ -1,7 +1,7 @@ -.main-wrapper{ +.main-wrapper { background-image: url('/public/image/main-background.png'); background-repeat: no-repeat; - background-position:0 150px ; + background-position: 0 150px; } .main-wrapper { @@ -30,7 +30,7 @@ border-radius: 20px; padding: 5px 10px; font-size: 13px; - color:#898C8F !important; + color: #898c8f !important; font-weight: 100 !important; } @@ -41,7 +41,7 @@ padding: 5px 10px; font-size: 13px; background: rgba(255, 255, 255, 0.9); - color: #FF6B6C !important; + color: #ff6b6c !important; } .searchTitle { @@ -65,19 +65,19 @@ height: 280px; object-fit: cover; border-radius: 20px; - filter: brightness(70%); + filter: brightness(70%); } .best-wrapper { display: flex; flex-wrap: wrap; - justify-content:start; - gap: 25px; + justify-content: start; + gap: 20px; } .titleRow-best { position: absolute; - top:230px; + top: 230px; display: flex; margin: 8px 5px; } @@ -87,31 +87,30 @@ margin: 8px 5px; } - -.tagRow-best{ +.tagRow-best { position: absolute; - top:200px; + top: 200px; margin: 0 10px; } -.likeBtn{ +.likeBtn { position: absolute; right: 6px; - top:12px; + top: 12px; margin: 0 10px; } -.bookmark-icon{ +.bookmark-icon { position: absolute; left: 10px; - top:0px; + top: 0px; } -.best-num{ - color:white; +.best-num { + color: white; position: absolute; left: 22px; - top:2px; + top: 2px; } .placeName { @@ -123,7 +122,7 @@ .placeName-best { margin-right: 10px; margin: 0 10px; - color:white; + color: white; } .starNum { @@ -132,21 +131,21 @@ margin-left: 10px; } -.starNum-best{ +.starNum-best { font-weight: bold; - color: #FEDB04; + color: #fedb04; margin-left: 10px; } -.heart-icon, .bookmark-icon{ +.heart-icon, +.bookmark-icon { color: #ff6b6c; } -.heart-icon-fi{ +.heart-icon-fi { color: white; } - /* Main Card */ .mainCard { position: relative; @@ -154,10 +153,10 @@ margin-bottom: 35px; } -.likeBtn-main{ +.likeBtn-main { position: absolute; right: 6px; - top:12px; + top: 12px; margin: 0 10px; } @@ -166,7 +165,7 @@ height: 150px; object-fit: cover; border-radius: 16px 16px 0 0 !important; - border: 1px solid #C4C4C4; + border: 1px solid #c4c4c4; border-bottom: none; } @@ -174,13 +173,13 @@ display: flex; flex-wrap: wrap; justify-content: start !important; - gap:35px; + gap: 35px; } -.mainCard-bottom{ - border: 1px solid #C4C4C4; +.mainCard-bottom { + border: 1px solid #c4c4c4; overflow: auto; - border-radius: 0 0 15px 15px ; + border-radius: 0 0 15px 15px; padding: 0 10px 10px 10px; } @@ -201,15 +200,15 @@ margin-bottom: 24px; } -.divider-right{ - display:flex; +.divider-right { + display: flex; align-items: center; } -.main-toggle-label{ +.main-toggle-label { margin: 0 1.3rem 0 0.5rem; font-size: 0.8rem; - color: #A5A9AB; + color: #a5a9ab; } .filter {