Merge branch 'develop' into feat/fe/캘린더-바-드래그

woowacourse-teams · Nov 13, 2023 · f9df389 · f9df389
2 parents 4ec43c0 + 520de20
commit f9df389
Show file tree

Hide file tree

Showing 54 changed files with 832 additions and 186 deletions.
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
@@ -15,23 +15,39 @@ import TeamOverviewPage from '~/pages/TeamOverviewPage/TeamOverviewPage';
 import PolicyPage from '~/pages/PolicyPage/PolicyPage';
 import Error404Page from '~/pages/Error404Page/Error404Page';
 import './App.css';
+import { getIsMobile } from '~/utils/getIsMobile';
+import M_LandingPage from '~/mobilePages/M_LandingPage/M_LandingPage';
+import M_TeamSelectPage from '~/mobilePages/M_TeamSelectPage/M_TeamSelectPage';
+import M_PageTemplate from '~/mobilePages/M_PageTemplate/M_PageTemplate';
 
 const App = () => {
+  const isMobile = getIsMobile();
+
   return (
     <Routes>
-      <Route path={PATH_NAME.LANDING} element={<LandingPage />} />
+      {isMobile ? (
+        <Route path={PATH_NAME.LANDING} element={<M_LandingPage />} />
+      ) : (
+        <Route path={PATH_NAME.LANDING} element={<LandingPage />} />
+      )}
       <Route path={PATH_NAME.LOGIN} element={<LoginPage />} />
       <Route path={PATH_NAME.POLICY} element={<PolicyPage />} />
       <Route element={<ProtectRoute />}>
         <Route path={PATH_NAME.START} element={<StartPage />} />
         <Route path={PATH_NAME.CREATE} element={<CreatePage />} />
         <Route path={PATH_NAME.JOIN} element={<JoinPage />} />
-        <Route element={<PageTemplate />}>
-          <Route path={PATH_NAME.TEAM_SELECT} element={<TeamSelectPage />} />
+
+        <Route element={isMobile ? <M_PageTemplate /> : <PageTemplate />}>
           <Route
-            path={PATH_NAME.TEAM_OVERVIEW}
-            element={<TeamOverviewPage />}
+            path={PATH_NAME.TEAM_SELECT}
+            element={isMobile ? <M_TeamSelectPage /> : <TeamSelectPage />}
           />
+          {!isMobile && (
+            <Route
+              path={PATH_NAME.TEAM_OVERVIEW}
+              element={<TeamOverviewPage />}
+            />
+          )}
           <Route
             path={PATH_NAME.TEAM_CALENDAR}
             element={<TeamCalendarPage />}

diff --git a/frontend/src/components/common/Error404/Error404.styled.ts b/frontend/src/components/common/Error404/Error404.styled.ts
@@ -51,4 +51,5 @@ export const ErrorTextImage = styled.img`
 
 export const errorText = css`
   font-size: 24px;
+  white-space: nowrap;
 `;
diff --git a/frontend/src/components/common/Error404/Error404.tsx b/frontend/src/components/common/Error404/Error404.tsx
@@ -3,25 +3,48 @@ import { error404Image, error404TextImage } from '~/assets/webp';
 import Text from '~/components/common/Text/Text';
 import BackButton from '~/components/common/BackButton/BackButton';
 import { PATH_NAME } from '~/constants/routes';
+import { getIsMobile } from '~/utils/getIsMobile';
 
 interface Error404Props {
   isLoggedIn: boolean;
 }
 
 const Error404 = (props: Error404Props) => {
   const { isLoggedIn } = props;
+  const isMobile = getIsMobile();
+  const location = window.location.href;
 
   return (
     <S.Container>
       <S.ErrorImage src={error404Image} alt="해당 페이지를 찾을 수 없어요" />
       <S.ErrorDetails>
-        <S.ErrorTextImage src={error404TextImage} alt="404" />
-        <Text size="xxl" weight="bold" css={S.errorText}>
-          해당 페이지를 찾을 수 없어요!
-        </Text>
+        {isMobile && location.includes('overview') ? (
+          <Text size="xxl" weight="bold" css={S.errorText}>
+            모바일에서는 이용할 수 없는 페이지에요!
+          </Text>
+        ) : (
+          <>
+            <S.ErrorTextImage src={error404TextImage} alt="404" />
+            <Text size="xxl" weight="bold" css={S.errorText}>
+              해당 페이지를 찾을 수 없어요!
+            </Text>
+          </>
+        )}
         <BackButton
-          href={isLoggedIn ? PATH_NAME.TEAM_OVERVIEW : PATH_NAME.LANDING}
-          label={isLoggedIn ? '모아보기 페이지로' : '랜딩 페이지로'}
+          href={
+            isLoggedIn
+              ? isMobile
+                ? PATH_NAME.TEAM_CALENDAR
+                : PATH_NAME.TEAM_OVERVIEW
+              : PATH_NAME.LANDING
+          }
+          label={
+            isLoggedIn
+              ? isMobile
+                ? '팀 캘린더 페이지로'
+                : '모아보기 페이지로'
+              : '랜딩 페이지로'
+          }
         />
       </S.ErrorDetails>
     </S.Container>

diff --git a/frontend/src/components/common/Header/Header.styled.ts b/frontend/src/components/common/Header/Header.styled.ts
@@ -1,7 +1,7 @@
 import { css, styled } from 'styled-components';
 import type { HeaderModalType } from '~/components/common/Header/Header';
 
-export const Header = styled.header`
+export const Header = styled.header<{ $isMobile: boolean }>`
   display: flex;
   justify-content: space-between;
 
@@ -10,12 +10,20 @@ export const Header = styled.header`
   padding: 0 14px;
 
   border-bottom: 2px solid ${({ theme }) => theme.color.GRAY200};
+
+  ${({ $isMobile }) =>
+    $isMobile &&
+    css`
+      height: 110px;
+      flex-wrap: wrap;
+      flex-direction: row-reverse;
+    `}
 `;
 
 export const InnerContainer = styled.div`
   display: flex;
   column-gap: 20px;
-
+  width: 100%;
   & > div {
     display: flex;
     align-items: center;
@@ -85,6 +93,7 @@ export const notificationButton = css`
 
 export const teamPlaceInfoButton = css`
   display: flex;
+  flex-direction: column;
   align-items: center;
   justify-content: center;
 
@@ -138,3 +147,7 @@ export const teamColorButton = (
     opacity: 1;
   }
 `;
+
+export const explainText = css`
+  font-size: 10px;
+`;
diff --git a/frontend/src/components/common/Header/Header.tsx b/frontend/src/components/common/Header/Header.tsx
@@ -16,6 +16,8 @@ import UserInfoModal from '~/components/user/UserInfoModal/UserInfoModal';
 import TeamColorEditModal from '~/components/team/TeamColorEditModal/TeamColorEditModal';
 import AccountDeleteModal from '~/components/user/AccountDeleteModal/AccountDeleteModal';
 import ServiceCenterModal from '~/components/user/ServiceCenterModal/ServiceCenterModal';
+import { getIsMobile } from '~/utils/getIsMobile';
+import Text from '~/components/common/Text/Text';
 import { fetchTeamPlaceInviteCode, fetchTeamPlaceMembers } from '~/apis/team';
 import { STALE_TIME } from '~/constants/query';
 
@@ -36,6 +38,9 @@ const Header = () => {
   } = useTeamPlace();
   const navigate = useNavigate();
   const { openModal, isModalOpen } = useModal();
+
+  const isMobile = getIsMobile();
+
   const queryClient = useQueryClient();
 
   const { userInfo } = useFetchUserInfo();
@@ -83,7 +88,9 @@ const Header = () => {
       setTeamName(() => value);
 
       if (location.pathname === PATH_NAME.TEAM_SELECT) {
-        navigate(PATH_NAME.TEAM_OVERVIEW);
+        isMobile
+          ? navigate(PATH_NAME.TEAM_CALENDAR)
+          : navigate(PATH_NAME.TEAM_OVERVIEW);
       }
     },
     /*eslint-disable-next-line*/
@@ -125,14 +132,16 @@ const Header = () => {
 
   return (
     <>
-      <S.Header tabIndex={0}>
+      <S.Header tabIndex={0} $isMobile={isMobile}>
         <S.InnerContainer>
-          <Link
-            to={PATH_NAME.TEAM_OVERVIEW}
-            aria-label="모아보기 페이지로 가기"
-          >
-            <LogoIcon />
-          </Link>
+          {!isMobile && (
+            <Link
+              to={PATH_NAME.TEAM_OVERVIEW}
+              aria-label="모아보기 페이지로 가기"
+            >
+              <LogoIcon />
+            </Link>
+          )}
           <div>
             <Button
               type="button"
@@ -165,7 +174,12 @@ const Header = () => {
             css={S.teamPlaceInfoButton}
             aria-label="팀 정보 보기"
           >
-            <TeamIcon />
+            <TeamIcon height={isMobile ? '32' : '22'} />
+            {!isMobile && (
+              <Text as="span" css={S.explainText}>
+                팀 정보
+              </Text>
+            )}
           </Button>
 
           <S.Divider />

diff --git a/frontend/src/components/common/NavigationBar/NavigationBar.styled.ts b/frontend/src/components/common/NavigationBar/NavigationBar.styled.ts
@@ -2,21 +2,41 @@ import { styled } from 'styled-components';
 import { NavLink } from 'react-router-dom';
 import { css } from 'styled-components';
 
-export const Nav = styled.nav`
+export const Nav = styled.nav<{ $isMobile: boolean }>`
   display: flex;
+  ${({ $isMobile }) => {
+    if ($isMobile)
+      return css`
+        width: 100%;
+        height: 60px;
+        padding: 10px;
+      `;
 
-  width: 70px;
-  height: 100%;
-  padding: 14px 0 18px 0;
+    return css`
+      width: 70px;
+      height: 100%;
+      padding: 14px 0 18px 0;
+    `;
+  }}
 `;
 
-export const MenuContainer = styled.div`
+export const MenuContainer = styled.div<{ $isMobile: boolean }>`
   display: flex;
-  flex-direction: column;
   align-items: center;
 
   width: 100%;
-  gap: 30px;
+  ${({ $isMobile }) => {
+    if ($isMobile)
+      return css`
+        justify-content: space-between;
+      `;
+
+    return css`
+      flex-direction: column;
+
+      gap: 30px;
+    `;
+  }}
 `;
 
 export const MenuLink = styled(NavLink)`

diff --git a/frontend/src/components/common/NavigationBar/NavigationBar.tsx b/frontend/src/components/common/NavigationBar/NavigationBar.tsx
@@ -10,33 +10,37 @@ import {
 import * as S from './NavigationBar.styled';
 import Text from '~/components/common/Text/Text';
 import Button from '~/components/common/Button/Button';
+import { getIsMobile } from '~/utils/getIsMobile';
 
 const NavigationBar = () => {
   const navigate = useNavigate();
   const location = useLocation();
-
+  const isMobile = getIsMobile();
   const handleTeamAddButtonClick = () => {
     navigate(PATH_NAME.START, { state: { from: location } });
   };
 
   return (
-    <S.Nav>
-      <S.MenuContainer>
-        <S.MenuLink to={PATH_NAME.TEAM_OVERVIEW}>
-          <HomeIcon />
-          <Text as="span">모아보기</Text>
-        </S.MenuLink>
+    <S.Nav $isMobile={isMobile}>
+      <S.MenuContainer $isMobile={isMobile}>
+        {!isMobile && (
+          <S.MenuLink to={PATH_NAME.TEAM_OVERVIEW}>
+            <HomeIcon />
+            <Text as="span">모아보기</Text>
+          </S.MenuLink>
+        )}
+
         <S.MenuLink to={PATH_NAME.TEAM_CALENDAR}>
           <CalendarIcon />
-          <Text as="span">캘린더</Text>
+          {!isMobile && <Text as="span">캘린더</Text>}
         </S.MenuLink>
         <S.MenuLink to={PATH_NAME.TEAM_FEED}>
           <FeedIcon />
-          <Text as="span">피드</Text>
+          {!isMobile && <Text as="span">채팅</Text>}
         </S.MenuLink>
         <S.MenuLink to={PATH_NAME.TEAM_LINK}>
           <ChainIcon />
-          <Text as="span">링크</Text>
+          {!isMobile && <Text as="span">링크</Text>}
         </S.MenuLink>
         <Button
           type="button"
@@ -45,9 +49,11 @@ const NavigationBar = () => {
           onClick={handleTeamAddButtonClick}
         >
           <TeamAddIcon />
-          <Text as="span" css={S.teamAddText}>
-            팀 참가/개설
-          </Text>
+          {!isMobile && (
+            <Text as="span" css={S.teamAddText}>
+              팀 참가/개설
+            </Text>
+          )}
         </Button>
       </S.MenuContainer>
     </S.Nav>

diff --git a/frontend/src/components/feed/ImageUploadDrawer/ImageUploadDrawer.styled.ts b/frontend/src/components/feed/ImageUploadDrawer/ImageUploadDrawer.styled.ts
@@ -1,19 +1,32 @@
 import { styled, css } from 'styled-components';
 
-export const Container = styled.div<{ $isOpen: boolean }>`
+export const Container = styled.div<{ $isOpen: boolean; $isMobile: boolean }>`
   display: flex;
   position: absolute;
-  bottom: 46px;
-  left: 30px;
 
-  width: calc(100% - 60px);
+  ${({ $isMobile }) => {
+    if ($isMobile) {
+      return css`
+        bottom: 10px;
+        width: 100%;
+      `;
+    }
+
+    return css`
+      bottom: 46px;
+      left: 30px;
+
+      width: calc(100% - 60px);
+    `;
+  }}
+
   height: 136px;
 
   border-radius: 20px 20px 0 0;
   background: linear-gradient(30deg, #bfc3ff, #eaebff);
 
   transition: 0.35s;
-  transform: translateY(${({ $isOpen }) => ($isOpen ? '-168px' : '0')});
+  transform: translateY(${({ $isOpen }) => ($isOpen ? '-163px' : '0')});
 `;
 
 export const ContentWrapper = styled.div`

diff --git a/frontend/src/components/feed/ImageUploadDrawer/ImageUploadDrawer.tsx b/frontend/src/components/feed/ImageUploadDrawer/ImageUploadDrawer.tsx
@@ -2,6 +2,7 @@ import type { PropsWithChildren } from 'react';
 import * as S from './ImageUploadDrawer.styled';
 import Button from '~/components/common/Button/Button';
 import { CloseBoldIcon } from '~/assets/svg';
+import { getIsMobile } from '~/utils/getIsMobile';
 
 interface ImageUploadDrawerProps {
   isOpen: boolean;
@@ -13,9 +14,10 @@ const ImageUploadDrawer = (
   props: PropsWithChildren<ImageUploadDrawerProps>,
 ) => {
   const { isOpen, onClose, children, isUploading } = props;
+  const isMobile = getIsMobile();
 
   return (
-    <S.Container $isOpen={isOpen}>
+    <S.Container $isOpen={isOpen} $isMobile={isMobile}>
       <S.ContentWrapper>{children}</S.ContentWrapper>
       {!isUploading && (
         <S.CloseButtonWrapper>