Merge pull request #76 from delicious-algorithme/dev

fix: 가게 상세페이지 레이아웃 수정
delicious-algorithme · Nov 17, 2024 · 30775b1 · 30775b1
2 parents dee4b36 + 557db57
commit 30775b1
Show file tree

Hide file tree

Showing 20 changed files with 1,030 additions and 548 deletions.
diff --git a/src/App.jsx b/src/App.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { GlobalStyle } from './styles';
 import { Route, Routes, BrowserRouter } from 'react-router-dom';
-import { MainPage, WebMap, StoreDetailPage, SignUpPage, LoginPage } from './pages';
+import { MainPage, WebMap, SignUpPage, StoreDetailPage, LoginPage } from './pages';
 import './App.css';
 import { HeaderLayout } from './components/common';
 import BookmarkPage from './pages/BookmarkPage';
@@ -17,10 +17,10 @@ function App() {
                         <Route path="/login" element={<LoginPage />} />
                         <Route path="/signup" element={<SignUpPage />} />
                         <Route path="/bookmark" element={<BookmarkPage />} />
+                        <Route path="/webmap/storeDetail/:id" element={<StoreDetailPage />} />
                     </Route>
                     <Route path="/webmap" element={<WebMap />} />
                     <Route path="/webmap/storeList/:item" element={<WebMap />} />
-                    <Route path="/webmap/storeDetail/:id" element={<StoreDetailPage />} />
                 </Routes>
             </BrowserRouter>
         </div>

diff --git a/src/components/common/bookmark/BookmarkContainer.jsx b/src/components/common/bookmark/BookmarkContainer.jsx
@@ -13,6 +13,7 @@ const BookmarkContainer = ({ bookmarkId, storeId }) => {
 
     const auth = JSON.parse(localStorage.getItem('auth')) || {};
     const isSaved = savedId.includes(bookmarkId) && auth.state.isLoggedIn;
+
     const navigate = useNavigate();
 
     useEffect(() => {

diff --git a/src/components/common/button/LocationButton.jsx b/src/components/common/button/LocationButton.jsx
@@ -0,0 +1,34 @@
+import styled from 'styled-components';
+import { White, Orange } from '../../../color';
+import { ReactComponent as Path } from '../../../assets/Icon/detail/Path.svg';
+
+const LocationButton = ({ pathClickHandler }) => {
+    return (
+        <StyledButton onClick={pathClickHandler}>
+            <Path />
+            길찾기
+        </StyledButton>
+    );
+};
+
+export default LocationButton;
+
+const StyledButton = styled.button`
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: ${Orange};
+    gap: 5px;
+    width: 100px;
+    height: 35px;
+    font-size: 16px;
+    font-weight: 600;
+    border-radius: 10px;
+    border: 1px solid ${Orange};
+    background-color: ${White};
+
+    & > svg {
+        width: 17px;
+    }
+    cursor: pointer;
+`;
diff --git a/src/components/common/footer/Footer.jsx b/src/components/common/footer/Footer.jsx
@@ -10,7 +10,7 @@ const Footer = () => {
                 </p>
                 <p>맛알고리즘은 AI가 다수의 고객 리뷰를 정밀히 분석하여 숨겨진 인사이트를 찾아주는 서비스입니다.</p>
                 <p>
-                    <span>Email :</span> gmail@gmail.com
+                    <span>Email :</span> aktdkfrhflwma@gmail.com
                 </p>
             </div>
         </FooterLayout>

diff --git a/src/components/common/header/Header.jsx b/src/components/common/header/Header.jsx
@@ -5,7 +5,7 @@ import Button from '../button/Button';
 import { ReactComponent as Logo } from '../../../assets/Icon/Logo.svg';
 import { logout } from '../../../apis/api/login';
 import Swal from 'sweetalert2';
-import { LightGrey } from '../../../color';
+import { LightGrey, White } from '../../../color';
 
 const Header = () => {
     const { isLoggedIn, setLogout } = useLogin();
@@ -61,6 +61,7 @@ const HeaderLayout = styled.header`
     display: flex;
     justify-content: space-between;
     padding-right: 100px;
+    background-color: ${White};
     padding-left: 50px;
     & > svg {
         width: 250px;

diff --git a/src/components/common/index.js b/src/components/common/index.js
@@ -9,4 +9,20 @@ import Button from './button/Button';
 import Header from './header/Header';
 import HeaderLayout from './header/HeaderLayout';
 import FormField from './form/FormField';
-export { Category, MyMap, StoreList, StoreCard, Filtering, Footer, Button, SearchBar, Header, HeaderLayout, FormField };
+import LocationButton from './button/LocationButton';
+import Keyword from './keyword/Keyword';
+export {
+    Category,
+    MyMap,
+    StoreList,
+    StoreCard,
+    Filtering,
+    Footer,
+    Button,
+    SearchBar,
+    Header,
+    HeaderLayout,
+    FormField,
+    LocationButton,
+    Keyword,
+};
diff --git a/src/components/common/keyword/Keyword.jsx b/src/components/common/keyword/Keyword.jsx
@@ -0,0 +1,51 @@
+import styled from 'styled-components';
+import { DarkGreen, Orange } from '../../../color';
+
+const Keyword = ({ keyword, type }) => {
+    if (!keyword) {
+        return <p>로딩 중...</p>;
+    }
+    const keywordItem = keyword.split(', ');
+
+    return (
+        <KeywordBox>
+            {keywordItem.map((item) => {
+                return (
+                    <KeywordTag type={type} key={type}>
+                        <p>#{item}</p>
+                    </KeywordTag>
+                );
+            })}
+        </KeywordBox>
+    );
+};
+
+export default Keyword;
+
+const KeywordBox = styled.div`
+    width: 100%;
+    display: flex;
+    gap: 10px;
+    flex-direction: row;
+    align-items: center;
+`;
+
+const KeywordTag = styled.div`
+    width: fit-content;
+    padding: 10px;
+    height: 40px;
+    display: flex;
+    border-radius: 50px;
+    align-items: center;
+    justify-content: center;
+    font-weight: 700;
+    font-size: 15px;
+
+    border: 1px solid ${(props) => (props.type === 'positive' ? `${Orange}` : `${DarkGreen}`)};
+    color: ${(props) => (props.type === 'positive' ? `${Orange}` : `${DarkGreen}`)};
+
+    @media screen and (max-width: 768px) {
+        font-size: 13px;
+        padding: 5px;
+    }
+`;
diff --git a/src/components/storeDetail/DetailBox.jsx b/src/components/storeDetail/DetailBox.jsx
@@ -0,0 +1,57 @@
+import React from 'react';
+import styled from 'styled-components';
+import { DarkGrey, Orange, White } from '../../color';
+
+const DetailBox = ({ label, content, type }) => {
+    return (
+        <DetailBoxContainer type={type}>
+            <Label>
+                <span>{label}</span>
+            </Label>
+            {type !== 'time' && type !== 'address' && <p>{content}</p>}
+            {type === 'address' && <button>{content}</button>}
+            {type === 'time' && (
+                <Time>{Array.isArray(content) && content.map((item, idx) => <p key={idx}>{item}</p>)}</Time>
+            )}
+        </DetailBoxContainer>
+    );
+};
+
+export default DetailBox;
+
+const DetailBoxContainer = styled.div`
+    display: flex;
+    flex-direction: row;
+    gap: 20px;
+    font-size: 15px;
+
+    & > svg {
+        width: 16px;
+        height: 16px;
+        color: ${DarkGrey};
+    }
+
+    & > button {
+        background-color: ${White};
+        font-size: 16px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        &:hover {
+            cursor: pointer;
+        }
+        color: ${(props) => (props.type === 'address' ? `${Orange}` : `${DarkGrey}`)};
+    }
+`;
+
+const Time = styled.div`
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+`;
+
+const Label = styled.div`
+    width: 70px;
+    font-size: 16px;
+    font-weight: 600;
+`;
diff --git a/src/components/storeDetail/PieChart.jsx b/src/components/storeDetail/PieChart.jsx
@@ -0,0 +1,86 @@
+import { DarkGrey, Orange } from '../../color';
+import styled from 'styled-components';
+
+const PieChart = ({ positiveRatio, neutralRatio, negativeRatio }) => {
+    const total = positiveRatio + neutralRatio + negativeRatio;
+
+    const positive = (positiveRatio / total) * 100;
+    const neutral = (neutralRatio / total) * 100;
+    const negative = (negativeRatio / total) * 100;
+
+    const piechart = [neutral, neutral + negative, 100];
+    return (
+        <PieChartBox>
+            <PieChartStyle piechart={piechart} />
+            <p>
+                긍정 {positive.toFixed(1)}% | 중립 {neutral.toFixed(1)}% | 부정 {negative.toFixed(1)}%
+            </p>
+            <Legend>
+                <LegendItem color={Orange}>
+                    <span />
+                    긍정
+                </LegendItem>
+                <LegendItem color="#fff1e1">
+                    <span />
+                    중립
+                </LegendItem>
+                <LegendItem color="#ff9a62">
+                    <span />
+                    부정
+                </LegendItem>
+            </Legend>
+        </PieChartBox>
+    );
+};
+
+export default PieChart;
+
+const PieChartBox = styled.div`
+    border-radius: 20px;
+    display: flex;
+    flex-direction: column;
+    padding: 20px;
+    gap: 20px;
+
+    & > p {
+        font-size: 14px;
+        color: ${DarkGrey};
+        font-weight: 600;
+    }
+    border-radius: 20px;
+`;
+
+const Legend = styled.div`
+    display: flex;
+    gap: 20px;
+`;
+
+const LegendItem = styled.div`
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    font-size: 13px;
+    font-weight: 500;
+    color: ${DarkGrey};
+
+    & > span {
+        width: 15px;
+        height: 15px;
+        border-radius: 50%;
+        background-color: ${(props) => props.color};
+    }
+`;
+
+const PieChartStyle = styled.div`
+    display: inline-block;
+    position: relative;
+    width: 120px;
+    height: 120px;
+    background: ${(props) => `conic-gradient(
+        #fff1e1 0% ${props.piechart[0]}%, 
+        #ff9a62 ${props.piechart[0]}% ${props.piechart[0] + props.piechart[1]}%, 
+        ${Orange} ${props.piechart[0] + props.piechart[1]}% 100%
+    )`};
+    border-radius: 50%;
+    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
+`;
diff --git a/src/components/storeDetail/PopOver.jsx b/src/components/storeDetail/PopOver.jsx
@@ -0,0 +1,68 @@
+import { useState } from 'react';
+import styled from 'styled-components';
+import { Orange, White, LightGrey, DarkGrey, Grey } from '../../color';
+
+const PopOver = ({ text, label }) => {
+    const [isHovered, setIsHovered] = useState();
+
+    return (
+        <PopOverContainer onMouseEnter={() => setIsHovered(true)} onMouseLeave={() => setIsHovered(false)}>
+            <Button> ? </Button>
+            {isHovered && (
+                <PopoverText>
+                    <Label>{label}</Label>
+                    <p>{text}</p>
+                </PopoverText>
+            )}
+        </PopOverContainer>
+    );
+};
+
+export default PopOver;
+
+const PopOverContainer = styled.div`
+    display: flex;
+    align-items: center;
+    position: relative;
+`;
+
+const Label = styled.label`
+    font-weight: bold;
+    color: ${DarkGrey};
+`;
+
+const Button = styled.button`
+    width: 15px;
+    height: 15px;
+    border-radius: 100px;
+    display: flex;
+    background: ${White};
+    text-align: center;
+    align-items: center;
+    justify-content: center;
+    border: 1px solid ${Orange};
+    color: ${Orange};
+    font-size: 10px;
+    font-weight: 600;
+`;
+
+const PopoverText = styled.div`
+    width: fit-content;
+    min-width: 400px;
+    position: absolute;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 10px;
+    background-color: ${LightGrey};
+    z-index: 10;
+    padding: 30px;
+    margin: 50px;
+    height: 70px;
+    box-shadow: 2px 2px 2px 2px ${Grey};
+    border-radius: 20px;
+    border: 1px solid ${Grey};
+
+    font-size: 14px;
+`;