Merge pull request #126 from delicious-algorithme/123-refactor-이미지-we…

…bp-포맷으로-변경 123 refactor 이미지 webp 포맷으로 변경
delicious-algorithme · Dec 8, 2024 · d22517d · d22517d
2 parents c428c02 + 1d9b02e
commit d22517d
Show file tree

Hide file tree

Showing 28 changed files with 242 additions and 177 deletions.
diff --git a/public/Logo.svg b/public/Logo.svg
diff --git a/public/index.html b/public/index.html
@@ -3,11 +3,8 @@
     <head>
         <base href="/" />
         <meta charset="utf-8" />
-        <link
-            rel="icon"
-            href="https://wnstn6945.notion.site/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F499f229c-bff2-4c82-ae94-81c36fa59a9c%2F486bd819-ad54-4f34-bd54-23ef03ca65c5%2FGroup_1000002041_(5).svg?table=block&id=965a81f4-7d80-4af9-9379-4c6ca3fe7174&spaceId=499f229c-bff2-4c82-ae94-81c36fa59a9c&userId=&cache=v2"
-        />
-        <meta name="keywords" content="맛알고리즘, 맛집, 식당" />
+        <link rel="icon" href="%PUBLIC_URL%/Logo.svg" />
+        <meta name="keywords" content="맛알고리즘, 맛집 사이트, 서울 맛집 추천" />
         <meta name="viewport" content="width=device-width, initial-scale=1" />
         <meta name="description" content="맛있는 알고리즘으로 찾는 당신의 인생 맛집!" />
         <!--naver 사이트 소유 확인-->
@@ -27,15 +24,9 @@
         <meta property="og:url" content="https://matal.store" />
         <meta name="og:title" content="맛있는 알고리즘" />
         <meta name="og:description" content="맛있는 알고리즘으로 찾는 당신의 인생 맛집!" />
-        <meta
-            property="og:image"
-            content="https://wnstn6945.notion.site/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F499f229c-bff2-4c82-ae94-81c36fa59a9c%2F486bd819-ad54-4f34-bd54-23ef03ca65c5%2FGroup_1000002041_(5).svg?table=block&id=965a81f4-7d80-4af9-9379-4c6ca3fe7174&spaceId=499f229c-bff2-4c82-ae94-81c36fa59a9c&userId=&cache=v2"
-        />
+        <meta property="og:image" content="href=%PUBLIC_URL%/Logo.svg" />
         <meta property="og:type" content="website" />
-        <link
-            rel="apple-touch-icon"
-            href="https://wnstn6945.notion.site/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F499f229c-bff2-4c82-ae94-81c36fa59a9c%2F486bd819-ad54-4f34-bd54-23ef03ca65c5%2FGroup_1000002041_(5).svg?table=block&id=965a81f4-7d80-4af9-9379-4c6ca3fe7174&spaceId=499f229c-bff2-4c82-ae94-81c36fa59a9c&userId=&cache=v2"
-        />
+        <link rel="apple-touch-icon" href="%PUBLIC_URL%/Logo.svg" />
         <title>맛알고리즘</title>
     </head>
     <body>

diff --git a/public/manifest.json b/public/manifest.json
@@ -3,17 +3,17 @@
     "name": "맛있는 알고리즘으로 찾는 당신의 인생 맛집!",
     "icons": [
         {
-            "src": "https://wnstn6945.notion.site/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F499f229c-bff2-4c82-ae94-81c36fa59a9c%2F486bd819-ad54-4f34-bd54-23ef03ca65c5%2FGroup_1000002041_(5).svg?table=block&id=965a81f4-7d80-4af9-9379-4c6ca3fe7174&spaceId=499f229c-bff2-4c82-ae94-81c36fa59a9c&userId=&cache=v2",
+            "src": "./Logo.svg",
             "sizes": "64x64 32x32 24x24 16x16",
             "type": "image/x-icon"
         },
         {
-            "src": "https://wnstn6945.notion.site/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F499f229c-bff2-4c82-ae94-81c36fa59a9c%2F486bd819-ad54-4f34-bd54-23ef03ca65c5%2FGroup_1000002041_(5).svg?table=block&id=965a81f4-7d80-4af9-9379-4c6ca3fe7174&spaceId=499f229c-bff2-4c82-ae94-81c36fa59a9c&userId=&cache=v2",
+            "src": "./Logo.svg",
             "type": "image/png",
             "sizes": "192x192"
         },
         {
-            "src": "https://wnstn6945.notion.site/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F499f229c-bff2-4c82-ae94-81c36fa59a9c%2F486bd819-ad54-4f34-bd54-23ef03ca65c5%2FGroup_1000002041_(5).svg?table=block&id=965a81f4-7d80-4af9-9379-4c6ca3fe7174&spaceId=499f229c-bff2-4c82-ae94-81c36fa59a9c&userId=&cache=v2",
+            "src": "./Logo.svg",
             "type": "image/png",
             "sizes": "512x512"
         }

diff --git a/public/marker.svg b/public/marker.svg
diff --git a/src/assets/Icon/Logo.svg b/src/assets/Icon/Logo.svg
diff --git a/src/assets/Icon/clock.webp b/src/assets/Icon/clock.webp
diff --git a/src/assets/Icon/park.webp b/src/assets/Icon/park.webp
diff --git a/src/assets/Icon/tag.svg b/src/assets/Icon/tag.svg
diff --git a/src/assets/Icon/trophy.svg b/src/assets/Icon/trophy.svg
diff --git a/src/assets/banner.webp b/src/assets/banner.webp
diff --git a/src/components/common/bookmark/BookmarkContainer.jsx b/src/components/common/bookmark/BookmarkContainer.jsx
@@ -1,9 +1,12 @@
 import { deleteBookmarkStore, postBookmarkStore } from '../../../apis/api/bookmarks';
 import { useNavigate } from 'react-router-dom';
 import styled from 'styled-components';
+import BookmarkRoundedIcon from '@mui/icons-material/BookmarkRounded';
+import BookmarkBorderRoundedIcon from '@mui/icons-material/BookmarkBorderRounded';
 import { getAllBookmarksIds } from '../../../apis/api/bookmarks';
 import { useSaveBookmarkId } from '../../../store';
 import { useState } from 'react';
+import { Orange } from '../../../color';
 
 const BookmarkContainer = ({ storeId }) => {
     const { savedId, setSaveBookmarkId } = useSaveBookmarkId();
@@ -64,18 +67,8 @@ const BookmarkContainer = ({ storeId }) => {
     return (
         !isLoading && (
             <BookmarkBox onClick={handleClickBookmarks}>
-                {!isSaved && (
-                    <img
-                        src="https://wnstn6945.notion.site/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F499f229c-bff2-4c82-ae94-81c36fa59a9c%2F36a09915-8f56-4547-843b-ef56ecef4922%2FVector_(20).svg?table=block&id=2c906fd9-ead9-41c7-bcf5-1a5f05e052de&spaceId=499f229c-bff2-4c82-ae94-81c36fa59a9c&userId=&cache=v2"
-                        alt="bookmark"
-                    />
-                )}
-                {isSaved && (
-                    <img
-                        src="https://wnstn6945.notion.site/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F499f229c-bff2-4c82-ae94-81c36fa59a9c%2F5a28ad27-0c60-43da-b35c-e4515852dac2%2FVector_(21).svg?table=block&id=44a15545-ec6b-4c1d-9573-9cbe209f0c40&spaceId=499f229c-bff2-4c82-ae94-81c36fa59a9c&userId=&cache=v2"
-                        alt="saved-bookmark"
-                    />
-                )}
+                {!isSaved && <BookmarkBorderRoundedIcon alt="bookmark" />}
+                {isSaved && <BookmarkRoundedIcon alt="saved-bookmark" />}
             </BookmarkBox>
         )
     );
@@ -89,6 +82,7 @@ const BookmarkBox = styled.div`
     padding: 10px;
 
     & > svg {
+        color: ${Orange};
         cursor: pointer;
     }
 `;
diff --git a/src/components/common/header/Header.jsx b/src/components/common/header/Header.jsx
@@ -5,6 +5,7 @@ import Button from '../button/Button';
 import { logout } from '../../../apis/api/login';
 import Swal from 'sweetalert2';
 import { LightGrey } from '../../../color';
+import { ReactComponent as Logo } from '../../../assets/Icon/Logo.svg';
 
 const Header = () => {
     const { isLoggedIn, setLogout } = useLogin();
@@ -40,11 +41,7 @@ const Header = () => {
 
     return (
         <HeaderLayout>
-            <img
-                src="https://wnstn6945.notion.site/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F499f229c-bff2-4c82-ae94-81c36fa59a9c%2F486bd819-ad54-4f34-bd54-23ef03ca65c5%2FGroup_1000002041_(5).svg?table=block&id=965a81f4-7d80-4af9-9379-4c6ca3fe7174&spaceId=499f229c-bff2-4c82-ae94-81c36fa59a9c&userId=&cache=v2"
-                onClick={handleClick.logo}
-                alt="logo"
-            />
+            <Logo onClick={handleClick.logo} alt="logo" />
             <ButtonContainer>
                 {buttons.map((button, index) => (
                     <Button
@@ -71,7 +68,7 @@ const HeaderLayout = styled.header`
     background-color: rgba(255, 255, 255, 0.8);
     padding-left: 50px;
 
-    & > img {
+    & > svg {
         margin-left: 20px;
         width: 120px;
         height: 80px;
@@ -80,6 +77,7 @@ const HeaderLayout = styled.header`
             fill: none;
         }
     }
+
     align-items: center;
     width: 100%;
     transition: all 0ms ease;
@@ -88,6 +86,7 @@ const HeaderLayout = styled.header`
             width: 100px;
             height: 75px;
         }
+
         padding: 0px;
         padding-right: 10px;
     }

diff --git a/src/components/common/map/Map.jsx b/src/components/common/map/Map.jsx
@@ -73,8 +73,8 @@ const MyMap = () => {
                     title: name,
                     clickable: true,
                     icon: {
-                        url: 'https://wnstn6945.notion.site/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F499f229c-bff2-4c82-ae94-81c36fa59a9c%2F207bae82-72cc-4a5d-86e0-0ec55d24d9bc%2Flocation_(3).svg?table=block&id=8e914cbf-ecb5-48da-8467-a201dc304f3b&spaceId=499f229c-bff2-4c82-ae94-81c36fa59a9c&userId=&cache=v2',
-                        size: new naver.maps.Size(60, 60),
+                        url: './marker.svg',
+                        size: new naver.maps.Size(40, 50),
                         origin: new naver.maps.Point(0, 0),
                         anchor: new naver.maps.Point(11, 35),
                         animation: naver.maps.Animation.DROP,

diff --git a/src/components/common/searchBar/SearchBar.jsx b/src/components/common/searchBar/SearchBar.jsx
@@ -1,14 +1,12 @@
 import styled from 'styled-components';
-import { Orange } from '../../../color';
+import { DarkGrey, LightGrey } from '../../../color';
+import SearchRoundedIcon from '@mui/icons-material/SearchRounded';
 
 const SearchBar = ({ onChangeHandler, onKeyDownHandler, searchInput }) => {
     return (
         <StyledSearchBar>
             <Icon>
-                <img
-                    src="https://wnstn6945.notion.site/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F499f229c-bff2-4c82-ae94-81c36fa59a9c%2Fa38d3a64-cd82-45b2-83b7-c3710caa064a%2FFeather_Icon.svg?table=block&id=042552b6-28a0-4f1c-a753-45c60a3aaafc&spaceId=499f229c-bff2-4c82-ae94-81c36fa59a9c&userId=&cache=v2"
-                    alt="search-icon"
-                />
+                <SearchRoundedIcon alt="search-icon" />
             </Icon>
             <input
                 type="text"
@@ -28,23 +26,27 @@ const StyledSearchBar = styled.div`
     display: flex;
     position: relative;
     text-align: left;
+
     & > input {
         width: 100%;
         height: 45px;
-        border-radius: 30px;
-        border: 1px solid ${Orange};
+        border-radius: 10px;
         z-index: 1;
         padding-left: 70px;
         font-size: 16px;
-        color: ${Orange};
+        color: ${DarkGrey};
+        background: ${LightGrey};
     }
+
     input::placeholder {
-        color: ${Orange};
+        color: ${DarkGrey};
     }
 `;
 
 const Icon = styled.div`
     position: absolute;
     z-index: 2;
     padding: 10px 30px;
+
+    color: ${DarkGrey};
 `;
diff --git a/src/components/main/CategoryAndMap.jsx b/src/components/main/CategoryAndMap.jsx
@@ -1,15 +1,13 @@
 import styled from 'styled-components';
 import { Category, MyMap } from '../common';
+import tagIcon from '../../assets/Icon/tag.svg';
 import { Grey } from '../../color';
 
 const CategoryAndMap = () => {
     return (
         <CategoryAndMapLayout>
             <label>
-                <img
-                    src="https://wnstn6945.notion.site/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F499f229c-bff2-4c82-ae94-81c36fa59a9c%2F3e54984f-c8a7-47cf-a649-d34c9c52c200%2Fflowbite_tag-solid.svg?table=block&id=adec29ff-2727-42b8-837e-0329b87daafc&spaceId=499f229c-bff2-4c82-ae94-81c36fa59a9c&userId=&cache=v2"
-                    alt="feater-icon"
-                />
+                <img src={tagIcon} alt="feater-icon" />
                 <h3>카테고리로 검색하기</h3>
             </label>
             <CategoryAndMapBox>

diff --git a/src/components/main/SearchKeyword.jsx b/src/components/main/SearchKeyword.jsx
@@ -1,13 +1,13 @@
 import styled from 'styled-components';
-import { Orange } from '../../color';
+import { DarkGreen } from '../../color';
 
 const SearchKeyword = () => {
     return (
         <SearchKeywordBox>
-            <p>카테고리 별 검색</p>
-            <p>애견 동반 가능 맛집</p>
-            <p>웨이팅 맛집</p>
-            <p>긍정 키워드</p>
+            <p># 카테고리 별 검색</p>
+            <p># 애견 동반 가능 맛집</p>
+            <p># 웨이팅 맛집</p>
+            <p># 긍정 키워드</p>
         </SearchKeywordBox>
     );
 };
@@ -18,8 +18,9 @@ const SearchKeywordBox = styled.div`
     display: flex;
     flex-direction: row;
     gap: 30px;
-    color: ${Orange};
+    color: ${DarkGreen};
     font-size: 16px;
+    font-weight: 600;
     @media screen and (max-width: 780px) {
         display: none;
     }

diff --git a/src/components/main/TopRecommendations.jsx b/src/components/main/TopRecommendations.jsx
@@ -1,7 +1,8 @@
 import styled, { keyframes, css } from 'styled-components';
 import { TopStoreCard } from '../storeCard';
 import { useEffect, useState } from 'react';
-import { Grey, White } from '../../color';
+import { Grey, Orange, White } from '../../color';
+import trophyIcon from '../../assets/Icon/trophy.svg';
 import { getTopStores } from '../../apis/api/getTopStores';
 
 const TopRecommendations = () => {
@@ -61,18 +62,15 @@ const TopRecommendations = () => {
     return (
         <TopRecommendationsLayout>
             <label>
-                <img
-                    src="https://wnstn6945.notion.site/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F499f229c-bff2-4c82-ae94-81c36fa59a9c%2F76fa7cf8-0453-43c1-9c95-c4839a8cb344%2Ftwemoji_trophy_(1).svg?table=block&id=07f9a035-d469-451c-8351-3b2d5aba3b73&spaceId=499f229c-bff2-4c82-ae94-81c36fa59a9c&userId=&cache=v2"
-                    alt="trophy"
-                />
+                <img src={trophyIcon} alt="trophy" />
                 <h3>Top10 #푸짐한 양/ 친절한 서비스/ 신선한 재료</h3>
             </label>
             <p>AI 긍정키워드로 분석한 TOP 10</p>
             {!isLoading && topStores.length > 0 && (
                 <AnimatedContainer isAnimating={isAnimating} animationDirection={animationDirection}>
                     {visibleStores.map((store, idx) => (
                         <div key={idx}>
-                            <p style={{ fontSize: '24px', fontWeight: 'bold' }}>Top {next + idx - 2}</p>
+                            <p style={{ fontSize: '24px', fontWeight: 'bold' }}> {next + idx - 2}</p>
                             <TopStoreCard
                                 image={store.imageUrls}
                                 address={store.address}
@@ -141,6 +139,7 @@ const AnimatedContainer = styled.div`
 
     & > div > p {
         margin-bottom: 20px;
+        color: ${Orange};
     }
     @media screen and (max-width: 768px) {
         width: 100%;

diff --git a/src/components/storeDetail/StoreDtailNav.jsx b/src/components/storeDetail/StoreDtailNav.jsx
diff --git a/src/components/storeDetail/StoreInfoCard.jsx b/src/components/storeDetail/StoreInfoCard.jsx
diff --git a/src/components/storeDetail/StoreInfoTag.jsx b/src/components/storeDetail/StoreInfoTag.jsx
@@ -0,0 +1,30 @@
+import styled from 'styled-components';
+import { LightGrey, White } from '../../color';
+
+const StoreInfoTag = ({ text }) => {
+    return (
+        <StoreInfoTagBox>
+            <p>{text}</p>
+        </StoreInfoTagBox>
+    );
+};
+
+export default StoreInfoTag;
+
+const StoreInfoTagBox = styled.div`
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    width: fit-content;
+    padding: 15px;
+    height: 30px;
+    border-radius: 10px;
+    color: #333333;
+    border: 1px solid ${White};
+    background: ${LightGrey};
+    & > p {
+        font-weight: 600;
+        font-size: 14px;
+    }
+`;