Merge pull request #478 from woowacourse-teams/fix/477-remove-console…

…-log 불필요한 `console.log` 삭제
woowacourse-teams · Sep 25, 2023 · 89ccc35 · 89ccc35
2 parents c2d288b + 72a5cfb
commit 89ccc35
Show file tree

Hide file tree

Showing 34 changed files with 2,362 additions and 1,887 deletions.
diff --git a/client/index.html b/client/index.html
@@ -3,19 +3,19 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <link rel="icon" type="image/x-icon" href="favicon.ico" />
+    <link rel="icon" type="image/x-icon" href="/assets/favicon.ico" />
     <meta name="theme-color" content="#FFD3D8" />
 
     <meta name="apple-mobile-web-app-title" content="요즘카페" />
     <meta name="apple-mobile-web-app-capable" content="yes" />
     <meta name="apple-mobile-web-app-status-bar-style" content="#FFD3D8" />
-    <link rel="apple-touch-icon" sizes="128x128" href="ios.png" />
+    <link rel="apple-touch-icon" sizes="128x128" href="/assets/ios.png" />
     <link rel="apple-touch-icon-precomposed" sizes="128x128" href="ios.png" />
 
     <meta property="og:title" content="요즘카페" />
     <meta property="og:url" content="https://yozm.cafe/" />
     <meta property="og:type" content="website" />
-    <meta property="og:image" content="thumbnail-image.png" />
+    <meta property="og:image" content="/assets/thumbnail-image.png" />
     <meta property="og:description" content="트렌디한 성수 지역의 카페를 손쉽게 탐색하는 서비스, 요즘카페" />
 
     <title>요즘카페</title>

diff --git a/client/package.json b/client/package.json
@@ -10,8 +10,8 @@
     "solo5star <[email protected]>"
   ],
   "scripts": {
-    "start": "cross-env NODE_ENV=development webpack serve",
-    "build": "cross-env NODE_ENV=production webpack",
+    "start": "cross-env NODE_ENV=development webpack serve --config webpack.development.js",
+    "build": "cross-env NODE_ENV=production webpack --config webpack.production.js",
     "storybook": "cross-env NODE_ENV=development storybook dev -p 6006",
     "build:storybook": "cross-env NODE_ENV=production storybook build",
     "cypress:open": "cypress open --e2e --browser chrome",
@@ -23,7 +23,7 @@
     "axios": "^1.4.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-icons": "^4.10.1",
+    "react-icons": "^4.11.0",
     "react-router-dom": "^6.14.1",
     "styled-components": "^6.0.2"
   },
@@ -74,6 +74,7 @@
     "stylelint-order": "^6.0.3",
     "typescript": "^5.1.6",
     "webpack": "^5.88.1",
+    "webpack-bundle-analyzer": "^4.9.1",
     "webpack-cli": "^5.1.4",
     "webpack-dev-server": "^4.15.1",
     "webpack-merge": "^5.9.0"

diff --git a/client/public/favicon.ico → client/public/assets/favicon.ico b/client/public/favicon.ico → client/public/assets/favicon.ico
diff --git a/client/public/ios.png → client/public/assets/ios.png b/client/public/ios.png → client/public/assets/ios.png
diff --git a/client/public/assets/logo.svg b/client/public/assets/logo.svg
diff --git a/client/public/thumbnail-image.png → client/public/assets/thumbnail-image.png b/client/public/thumbnail-image.png → client/public/assets/thumbnail-image.png
diff --git a/client/src/components/CafeCard.tsx b/client/src/components/CafeCard.tsx
@@ -1,6 +1,5 @@
 import { useEffect, useRef, useState } from 'react';
 import { styled } from 'styled-components';
-import useIntersection from '../hooks/useIntersection';
 import type { Cafe } from '../types';
 import Image from '../utils/Image';
 import CafeActionBar from './CafeActionBar';
@@ -9,23 +8,15 @@ import CafeSummary from './CafeSummary';
 
 type CardProps = {
   cafe: Cafe;
-  onIntersect?: (intersection: IntersectionObserverEntry) => void;
 };
 
 const CafeCard = (props: CardProps) => {
-  const { cafe, onIntersect } = props;
+  const { cafe } = props;
 
   const [isShowDetail, setIsShowDetail] = useState(false);
   const [currentImageIndex, setCurrentImageIndex] = useState(0);
 
   const ref = useRef<HTMLDivElement>(null);
-  const intersection = useIntersection(ref, { threshold: 0.7 });
-
-  useEffect(() => {
-    if (intersection) {
-      onIntersect?.(intersection);
-    }
-  }, [intersection?.isIntersecting]);
 
   useEffect(() => {
     const handleScroll = () => {

diff --git a/client/src/components/LoginModal.tsx b/client/src/components/LoginModal.tsx
@@ -4,7 +4,6 @@ import { styled } from 'styled-components';
 import useAuthUrls from '../hooks/useAuthUrls';
 import type { Theme } from '../styles/theme';
 import LoginButton from './LoginButton';
-import Logo from './Logo';
 
 const brandColors: Record<string, keyof Theme['color']> = {
   kakao: 'yellow',
@@ -30,7 +29,7 @@ const LoginModal = (props: ModalProps) => {
         <CloseButtonContainer aria-label="닫기 버튼" role="dialog" aria-modal="true" aria-hidden="true">
           <CloseIcon onClick={onClose} />
         </CloseButtonContainer>
-        <Logo fontSize="5xl" />
+        <Logo />
         <LoginTitle>간편 로그인</LoginTitle>
         <ButtonContainer>
           {urls.map(({ provider, authorizationUrl }) => (
@@ -129,3 +128,7 @@ const ButtonContainer = styled.section`
   justify-content: space-evenly;
   width: 100%;
 `;
+
+const Logo = styled.img.attrs({ src: '/assets/logo.svg' })`
+  height: ${({ theme }) => theme.fontSize['5xl']};
+`;
diff --git a/client/src/components/Logo.stories.tsx b/client/src/components/Logo.stories.tsx
diff --git a/client/src/components/Logo.tsx b/client/src/components/Logo.tsx
diff --git a/client/src/components/Navbar.tsx b/client/src/components/Navbar.tsx
@@ -1,14 +1,12 @@
 import { Suspense, useState } from 'react';
-import { useNavigate } from 'react-router-dom';
+import { Link } from 'react-router-dom';
 import { styled } from 'styled-components';
 import useUser from '../hooks/useUser';
 import Button from './Button';
 import LoginModal from './LoginModal';
-import Logo from './Logo';
 
 const Navbar = () => {
   const { data: user } = useUser();
-  const navigate = useNavigate();
   const [isLoginModalOpen, setIsLoginModalOpen] = useState(false);
 
   const openLoginModal = () => {
@@ -19,34 +17,28 @@ const Navbar = () => {
     setIsLoginModalOpen(false);
   };
 
-  const handleLogoClick = () => {
-    navigate('/');
-  };
-
-  const handleRankClick = () => {
-    navigate('/rank');
-  };
-
-  const handleProfileClick = () => {
-    navigate('/my-profile');
-  };
-
   return (
     <Container>
       <LogoContainer>
-        <Logo onClick={handleLogoClick} fontSize="4xl" />
+        <Link to="/">
+          <Logo />
+        </Link>
       </LogoContainer>
       <ButtonContainer>
         <RankButtonContainer>
-          <Button $fullWidth $fullHeight $variant="secondary" onClick={handleRankClick}>
-            랭킹
-          </Button>
+          <Link to="/rank">
+            <Button $fullWidth $fullHeight $variant="secondary">
+              랭킹
+            </Button>
+          </Link>
         </RankButtonContainer>
         <LoginAndProfileButtonContainer>
           {user ? (
-            <Button $variant="outlined" $fullWidth $fullHeight onClick={handleProfileClick}>
-              프로필
-            </Button>
+            <Link to="/my-profile">
+              <Button $variant="outlined" $fullWidth $fullHeight>
+                프로필
+              </Button>
+            </Link>
           ) : (
             <Button $fullWidth $fullHeight onClick={openLoginModal} aria-haspopup="dialog">
               로그인
@@ -80,6 +72,10 @@ const LogoContainer = styled.div`
   flex: 6;
 `;
 
+const Logo = styled.img.attrs({ src: '/assets/logo.svg' })`
+  height: ${({ theme }) => theme.fontSize['4xl']};
+`;
+
 const RankButtonContainer = styled.div`
   width: 44px;
   margin-right: ${({ theme }) => theme.space[2]};