woowacourse-teams · solo5star · Sep 20, 2023 · Sep 20, 2023 · Sep 20, 2023 · Sep 20, 2023
@@ -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>

@@ -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"

@@ -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']};
+`;
@@ -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]};

@@ -1,7 +1,6 @@
 import ReactDOM from 'react-dom/client';
 import App from './App';
 import { MSW } from './environment';
-import { worker } from './mocks/worker';
 
 declare global {
   interface Document {
@@ -19,6 +18,7 @@ Object.assign(document, { bodyRoot: document.getElementById('root') });
 
 const main = async () => {
   if (MSW) {
+    const { worker } = await import('./mocks/worker');
     await worker.start();
   }
 

@@ -7,7 +7,7 @@ const isAuthProvider = (provider: string | undefined): provider is AuthProvider
   return (['kakao', 'google'] satisfies AuthProvider[]).some((it) => it === provider);
 };
 
-const Auth = () => {
+const AuthPage = () => {
   const { provider } = useParams();
   const [searchParams] = useSearchParams();
   const code = searchParams.get('code');
@@ -41,4 +41,4 @@ const Auth = () => {
   return <Navigate to="/" />;
 };
 
-export default Auth;
+export default AuthPage;
@@ -4,7 +4,7 @@ import { styled } from 'styled-components';
 import CafeCard from '../components/CafeCard';
 import useCafe from '../hooks/useCafe';
 
-const Cafe = () => {
+const CafePage = () => {
   const { cafeId } = useParams();
   const { data: cafe } = useCafe(Number(cafeId));
 
@@ -34,7 +34,7 @@ const Cafe = () => {
   );
 };
 
-export default Cafe;
+export default CafePage;
 
 const CardList = styled.ul`
   scroll-snap-type: y mandatory;

@@ -6,7 +6,7 @@ import useUser from '../hooks/useUser';
 
 const PREFETCH_OFFSET = 2;
 
-const Home = () => {
+const HomePage = () => {
   const { data: user } = useUser();
   const { cafes, fetchNextPage, isFetching, hasNextPage } = useCafes();
   const [activeCafe, setActiveCafe] = useState(cafes[0]);
@@ -37,7 +37,7 @@ const Home = () => {
   );
 };
 
-export default Home;
+export default HomePage;
 
 const CardList = styled.ul`
   scroll-snap-type: y mandatory;

@@ -4,7 +4,7 @@ import { styled } from 'styled-components';
 import CafeCard from '../components/CafeCard';
 import useLikedCafesDetail from '../hooks/useLikedCafesDetail';
 
-const LikedCafeDetail = () => {
+const LikedCafeDetailPage = () => {
   const params = useParams();
   const cafeId = Number(params.cafeId);
 
@@ -26,7 +26,7 @@ const LikedCafeDetail = () => {
   );
 };
 
-export default LikedCafeDetail;
+export default LikedCafeDetailPage;
 
 const CardList = styled.ul`
   scroll-snap-type: y mandatory;

@@ -0,0 +1,5 @@
+const LoadingPage = () => {
+  return <div>로딩 중...</div>;
+};
+
+export default LoadingPage;
@@ -6,7 +6,7 @@ import ProfileInfo from '../components/ProfileInfo';
 import useAuth from '../hooks/useAuth';
 import useUser from '../hooks/useUser';
 
-const MyProfile = () => {
+const MyProfilePage = () => {
   const navigate = useNavigate();
   const { data: user } = useUser();
   const { clearAuthorization } = useAuth();
@@ -57,4 +57,4 @@ const LikedCafeListContainer = styled.div`
   flex: 1;
 `;
 
-export default MyProfile;
+export default MyProfilePage;
@@ -0,0 +1,5 @@
+const NotFoundPage = () => {
+  return <div>NotFound</div>;
+};
+
+export default NotFoundPage;
@@ -4,7 +4,7 @@ import RankCard from '../components/RankCard';
 import useIntersection from '../hooks/useIntersection';
 import useRank from '../hooks/useRank';
 
-const Rank = () => {
+const RankPage = () => {
   const { rankedCafes, fetchNextPage, isFetching, hasNextPage } = useRank();
 
   const ref = useRef<HTMLDivElement>(null);
@@ -40,7 +40,7 @@ const Rank = () => {
   );
 };
 
-export default Rank;
+export default RankPage;
 
 const Container = styled.section`
   padding-bottom: ${({ theme }) => theme.space[4]};

@@ -1,9 +1,9 @@
 import { Navigate, useParams } from 'react-router-dom';
 
-const TestAuthorizationCode = () => {
+const TestAuthorizationCodePage = () => {
   const { provider } = useParams();
 
   return <Navigate to={`/auth/${provider}?code=test-authorization-code`} />;
 };
 
-export default TestAuthorizationCode;
+export default TestAuthorizationCodePage;