feat: 모바일 로그인 페이지 디자인 (#519)

* fix: storybook ts-loader 에러 해결 (#516) * fix: categoryNavbar svg 관련 오류 해결 및 네이밍 수정 (#516) * chore: install react-refresh * feat: 로그인 페이지 구현 (#516) * feat: 음식점 카드에서 좋아요 갯수 보여주기 (#516) * design: 모바일에서 로그인 버튼이 가려지는 문제 개선 (#516)
woowacourse-teams · Sep 26, 2023 · 521cbb9 · 521cbb9
1 parent 054c669
commit 521cbb9
Show file tree

Hide file tree

Showing 11 changed files with 247 additions and 38 deletions.
diff --git a/frontend/.babelrc b/frontend/.babelrc
@@ -15,15 +15,17 @@
       {
         "runtime": "automatic"
       }
-    ]
+    ],
+    "@babel/preset-typescript"
   ],
   "plugins": [
     [
       "babel-plugin-root-import",
       {
         "rootPathPrefix": "~",
         "rootPathSuffix": "src"
-      }
+      },
+      "react-refresh/babel"
     ]
   ],
   "env": {

diff --git a/frontend/.webpack/webpack.config.js b/frontend/.webpack/webpack.config.js
@@ -4,6 +4,7 @@ const commonConfig = require('./webpack.common.js');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
+const RefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
 const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
 
 const commonPlugins = [
@@ -23,15 +24,7 @@ const commonPlugins = [
 const commonRules = [
   {
     test: /\.(ts|tsx)$/,
-    use: [
-      'babel-loader',
-      {
-        loader: 'ts-loader',
-        options: {
-          transpileOnly: true,
-        },
-      },
-    ],
+    use: ['babel-loader'],
     exclude: /node_modules/,
   },
   {
@@ -75,6 +68,7 @@ module.exports = (env, args) => {
       new Dotenv({
         path: path.resolve(__dirname, `../.${TARGET_ENV}.env`),
       }),
+      new RefreshWebpackPlugin(),
     ],
   };
 };
diff --git a/frontend/package.json b/frontend/package.json
@@ -37,7 +37,8 @@
     "@babel/core": "^7.22.5",
     "@babel/preset-env": "^7.22.5",
     "@babel/preset-react": "^7.22.5",
-    "@babel/preset-typescript": "^7.22.5",
+    "@babel/preset-typescript": "^7.22.15",
+    "@pmmmwh/react-refresh-webpack-plugin": "^0.5.11",
     "@storybook/addon-essentials": "^7.0.25",
     "@storybook/addon-interactions": "^7.0.25",
     "@storybook/addon-links": "^7.0.25",
@@ -87,6 +88,7 @@
     "msw": "^1.2.1",
     "postcss-styled-syntax": "^0.4.0",
     "prettier": "^2.8.8",
+    "react-refresh": "^0.14.0",
     "storybook": "^7.0.25",
     "style-loader": "^3.3.3",
     "stylelint": "^15.10.1",

diff --git a/frontend/src/assets/icons/celuveat-login-icon.svg b/frontend/src/assets/icons/celuveat-login-icon.svg
diff --git a/...sets/icons/restaurantCategory/ijakaya.svg → ...sets/icons/restaurantCategory/izakaya.svg b/...sets/icons/restaurantCategory/ijakaya.svg → ...sets/icons/restaurantCategory/izakaya.svg
diff --git a/frontend/src/components/CategoryNavbar/CategoryNavbar.stories.tsx b/frontend/src/components/CategoryNavbar/CategoryNavbar.stories.tsx
@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import CategoryNavbar from './CategoryNavbar';
-import FastFood from '~/assets/icons/fastFood.svg';
+import Izakaya from '~/assets/icons/restaurantCategory/izakaya.svg';
 import { RestaurantCategory } from '~/@types/restaurant.types';
 
 interface Category {
@@ -11,43 +11,43 @@ interface Category {
 const categories: Category[] = [
   {
     label: '일식당',
-    icon: <FastFood />,
+    icon: <Izakaya />,
   },
   {
     label: '한식',
-    icon: <FastFood />,
+    icon: <Izakaya />,
   },
   {
     label: '초밥,롤',
-    icon: <FastFood />,
+    icon: <Izakaya />,
   },
   {
     label: '생선회',
-    icon: <FastFood />,
+    icon: <Izakaya />,
   },
   {
     label: '양식',
-    icon: <FastFood />,
+    icon: <Izakaya />,
   },
   {
     label: '육류,고기요리',
-    icon: <FastFood />,
+    icon: <Izakaya />,
   },
   {
     label: '이자카야',
-    icon: <FastFood />,
+    icon: <Izakaya />,
   },
   {
     label: '돼지고기구이',
-    icon: <FastFood />,
+    icon: <Izakaya />,
   },
   {
     label: '요리주점',
-    icon: <FastFood />,
+    icon: <Izakaya />,
   },
   {
     label: '와인',
-    icon: <FastFood />,
+    icon: <Izakaya />,
   },
 ];
 

diff --git a/frontend/src/components/RestaurantCard/RestaurantCard.tsx b/frontend/src/components/RestaurantCard/RestaurantCard.tsx
@@ -20,7 +20,7 @@ interface RestaurantCardProps {
 }
 
 function RestaurantCard({ restaurant, celebs, size, type = 'list', setHoveredId = () => {} }: RestaurantCardProps) {
-  const { id, images, name, roadAddress, category, phoneNumber } = restaurant;
+  const { id, images, name, roadAddress, category, phoneNumber, likeCount } = restaurant;
   const { isModalOpen, closeModal, toggleRestaurantLike, isLiked } = useToggleLikeNotUpdate(restaurant);
 
   const navigate = useNavigate();
@@ -59,6 +59,7 @@ function RestaurantCard({ restaurant, celebs, size, type = 'list', setHoveredId
             <StyledAddress>{phoneNumber}</StyledAddress>
           </StyledInfo>
           <StyledProfileImageSection>
+            <span>좋아요 {likeCount.toLocaleString()}개</span>
             {celebs && <ProfileImageList celebs={celebs} size={size} />}
           </StyledProfileImageSection>
         </StyledInfoSection>
@@ -123,12 +124,26 @@ const StyledAddress = styled.span`
 `;
 
 const StyledCategory = styled.span`
+  display: flex;
+  justify-content: space-between;
+
   color: var(--gray-3);
   font-size: ${FONT_SIZE.sm};
 `;
 
 const StyledProfileImageSection = styled.div`
-  align-self: flex-end;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: flex-end;
+
+  min-width: fit-content;
+
+  & > span {
+    font-size: ${FONT_SIZE.sm};
+    font-weight: 700;
+    padding-top: 0.4rem;
+  }
 `;
 
 const LikeButton = styled.button`

diff --git a/frontend/src/components/RestaurantWishItem/RestaurantWishItem.tsx b/frontend/src/components/RestaurantWishItem/RestaurantWishItem.tsx
@@ -18,7 +18,7 @@ interface RestaurantWishItemProps {
 }
 
 function RestaurantWishItem({ restaurant, celebs }: RestaurantWishItemProps) {
-  const { id, images, name, roadAddress, category, phoneNumber } = restaurant;
+  const { id, images, name, roadAddress, category, phoneNumber, likeCount } = restaurant;
   const { isModalOpen, closeModal, isLiked, toggleRestaurantLike } = useToggleLikeNotUpdate(restaurant);
   const navigate = useNavigate();
 
@@ -47,6 +47,7 @@ function RestaurantWishItem({ restaurant, celebs }: RestaurantWishItemProps) {
             <StyledAddress>{phoneNumber}</StyledAddress>
           </StyledInfo>
           <StyledProfileImageSection>
+            <span>좋아요 {likeCount.toLocaleString()}개</span>
             {celebs && <ProfileImageList celebs={celebs} size="42px" />}
           </StyledProfileImageSection>
         </section>
@@ -109,7 +110,18 @@ const StyledCategory = styled.span`
 `;
 
 const StyledProfileImageSection = styled.div`
-  align-self: flex-end;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: flex-end;
+
+  min-width: fit-content;
+
+  & > span {
+    font-size: ${FONT_SIZE.sm};
+    font-weight: 700;
+    padding-top: 0.4rem;
+  }
 `;
 
 const LikeButton = styled.button`

diff --git a/frontend/src/constants/restaurantCategory.tsx b/frontend/src/constants/restaurantCategory.tsx
@@ -1,4 +1,4 @@
-import Ijakaya from '~/assets/icons/restaurantCategory/ijakaya.svg';
+import Izakaya from '~/assets/icons/restaurantCategory/izakaya.svg';
 import Japanese from '~/assets/icons/restaurantCategory/japanese.svg';
 import Korean from '~/assets/icons/restaurantCategory/korean.svg';
 import Meat from '~/assets/icons/restaurantCategory/meat.svg';
@@ -25,7 +25,7 @@ const RESTAURANT_CATEGORY: Category[] = [
   { label: '양식', icon: <Pasta /> },
   { label: '와인', icon: <Wine /> },
   { label: '육류,고기요리', icon: <Meat /> },
-  { label: '이자카야', icon: <Ijakaya /> },
+  { label: '이자카야', icon: <Izakaya /> },
   { label: '돼지고기구이', icon: <Pig /> },
   { label: '요리주점', icon: <Pub /> },
 ];

diff --git a/frontend/src/pages/SignUpPage.tsx b/frontend/src/pages/SignUpPage.tsx
@@ -1,23 +1,84 @@
 import { styled } from 'styled-components';
+import { useNavigate } from 'react-router-dom';
 import LoginButton from '~/components/@common/LoginButton';
-import LoginPageUI from '~/components/LoginPageUI';
+import CeluveatIcon from '~/assets/icons/celuveat-login-icon.svg';
+import { FONT_SIZE } from '~/styles/common';
 
 function SignUpPage() {
+  const navigate = useNavigate();
+
+  const clickHomeButton = () => {
+    navigate('/');
+  };
+
   return (
-    <LoginPageUI title="로그인 및 회원가입">
-      <StyledLoginContainer>
+    <StyledContainer>
+      <StyledIconWrapper>
+        <CeluveatIcon />
+        <StyledName>Celuveat</StyledName>
+      </StyledIconWrapper>
+      <StyledLoginButtonBox>
+        <StyledHomeButton onClick={clickHomeButton}>비회원으로 이용하기</StyledHomeButton>
+        <StyledLine> or </StyledLine>
         <LoginButton type="kakao" />
         <LoginButton type="google" />
-      </StyledLoginContainer>
-    </LoginPageUI>
+      </StyledLoginButtonBox>
+    </StyledContainer>
   );
 }
 
 export default SignUpPage;
 
-const StyledLoginContainer = styled.div`
+const StyledContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 4.8rem;
+
+  height: calc(100vh - 44px);
+
+  background-color: var(--primary-6);
+`;
+
+const StyledIconWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 2rem;
+`;
+
+const StyledName = styled.h2`
+  color: var(--white);
+`;
+
+const StyledLoginButtonBox = styled.div`
   display: flex;
   flex-direction: column;
+  justify-content: end;
+  align-items: center;
+
+  width: 100%;
+
+  padding: 2rem;
+`;
+
+const StyledHomeButton = styled.button`
+  width: 100%;
+  height: 48px;
+
+  border: none;
+  border-radius: 8px;
+  background-color: var(--white);
+
+  font-size: ${FONT_SIZE.md};
+  font-weight: 600;
+  box-shadow: var(--shadow);
+`;
+
+const StyledLine = styled.div`
+  margin: 1.2rem 0;
 
-  margin-bottom: 1.6rem;
+  color: var(--white);
+  font-size: ${FONT_SIZE.md};
 `;