Merge branch 'main' into feat/302-javascript-controlled-swipe

woowacourse-teams · Sep 20, 2023 · 4c72e87 · 4c72e87
2 parents 611a9dd + 1775c47
commit 4c72e87
Show file tree

Hide file tree

Showing 30 changed files with 1,924 additions and 1,828 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/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]};

diff --git a/client/src/environment.ts b/client/src/environment.ts
@@ -3,4 +3,4 @@ export const IS_DEV = process.env.NODE_ENV === 'development';
 export const MSW = (process.env.MSW ?? (IS_DEV ? 'true' : 'false'))?.toLowerCase() === 'true';
 
 export const IMAGE_HOST = ({ size }: { size: string }) =>
-  MSW ? '' : IS_DEV ? `https://image.yozm.cafe/dev/${size}` : `https://image.yozm.cafe/prod/${size}`;
+  MSW ? '' : IS_DEV ? `/images/${size}` : `/images/${size}`;
diff --git a/client/src/index.tsx b/client/src/index.tsx
@@ -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();
   }
 

diff --git a/client/src/pages/Auth.tsx → client/src/pages/AuthPage.tsx b/client/src/pages/Auth.tsx → client/src/pages/AuthPage.tsx
@@ -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;
diff --git a/client/src/pages/Cafe.tsx → client/src/pages/CafePage.tsx b/client/src/pages/Cafe.tsx → client/src/pages/CafePage.tsx
@@ -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;

diff --git a/client/src/pages/Home.tsx → client/src/pages/HomePage.tsx b/client/src/pages/Home.tsx → client/src/pages/HomePage.tsx
@@ -7,7 +7,7 @@ import { easeOutExpo } from '../utils/timingFunctions';
 
 const PREFETCH_OFFSET = 2;
 
-const Home = () => {
+const HomePage = () => {
   const { cafes, fetchNextPage, isFetching, hasNextPage } = useCafes();
 
   const [scrollPosition, setScrollPosition] = useState(0);
@@ -38,4 +38,4 @@ const Home = () => {
   );
 };
 
-export default Home;
+export default HomePage;
diff --git a/client/src/pages/LikedCafeDetail.tsx → client/src/pages/LikedCafeDetailPage.tsx b/client/src/pages/LikedCafeDetail.tsx → client/src/pages/LikedCafeDetailPage.tsx
@@ -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;

diff --git a/client/src/pages/Loading.tsx b/client/src/pages/Loading.tsx
diff --git a/client/src/pages/LoadingPage.tsx b/client/src/pages/LoadingPage.tsx
@@ -0,0 +1,5 @@
+const LoadingPage = () => {
+  return <div>로딩 중...</div>;
+};
+
+export default LoadingPage;
diff --git a/client/src/pages/MyProfile.tsx → client/src/pages/MyProfilePage.tsx b/client/src/pages/MyProfile.tsx → client/src/pages/MyProfilePage.tsx
@@ -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;
diff --git a/client/src/pages/NotFound.tsx b/client/src/pages/NotFound.tsx
diff --git a/client/src/pages/NotFoundPage.tsx b/client/src/pages/NotFoundPage.tsx
@@ -0,0 +1,5 @@
+const NotFoundPage = () => {
+  return <div>NotFound</div>;
+};
+
+export default NotFoundPage;
diff --git a/client/src/pages/Rank.tsx → client/src/pages/RankPage.tsx b/client/src/pages/Rank.tsx → client/src/pages/RankPage.tsx
@@ -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]};

diff --git a/client/src/pages/TestAuthorizationCode.tsx → ...t/src/pages/TestAuthorizationCodePage.tsx b/client/src/pages/TestAuthorizationCode.tsx → ...t/src/pages/TestAuthorizationCodePage.tsx
@@ -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;