Merge pull request #117 from boostcampwm-2022/feat/responsiveWeb

[Feat] 반응형 웹 디자인 적용
boostcampwm-2022 · Feb 17, 2023 · 35caab4 · 35caab4
2 parents 98e109b + 6607ff0
commit 35caab4
Show file tree

Hide file tree

Showing 28 changed files with 282 additions and 45 deletions.
diff --git a/frontend/public/apple-touch-icon-180x180.png b/frontend/public/apple-touch-icon-180x180.png
diff --git a/frontend/public/apple-touch-icon-57x57.png b/frontend/public/apple-touch-icon-57x57.png
diff --git a/frontend/public/favicon.svg b/frontend/public/favicon.svg
diff --git a/frontend/public/index.html b/frontend/public/index.html
@@ -7,6 +7,10 @@
   <meta name="theme-color" content="#000000" />
   <meta name="description" content="Web site created using create-react-app" />
   <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+  <link rel="icon" href="%PUBLIC_URL%/favicon.svg" />
+  <link rel="mask-icon" href="%PUBLIC_URL%/favicon.svg" color="#000000" />
+  <link rel="apple-touch-icon" size='57x57' href="%PUBLIC_URL%/apple-touch-icon-57x57.png" />
+  <link rel="apple-touch-icon" size='180x180' href="%PUBLIC_URL%/apple-touch-icon-180x180.png" />
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700&display=swap" rel="stylesheet">

diff --git a/frontend/public/manifest.json b/frontend/public/manifest.json
@@ -1,11 +1,21 @@
 {
-  "short_name": "React App",
-  "name": "Create React App Sample",
+  "short_name": "Codocs",
+  "name": "Realtime Co-Document Editing Application",
   "icons": [
     {
-      "src": "favicon.ico",
+      "src": "favicon.svg",
       "sizes": "64x64 32x32 24x24 16x16",
-      "type": "image/x-icon"
+      "type": "image/svg+xml"
+    },
+    {
+      "src": "apple-touch-icon-57x57.png",
+      "sizes": "57x57",
+      "type": "image/png"
+    },
+    {
+      "src": "apple-touch-icon-180x180.png",
+      "sizes": "180x180",
+      "type": "image/png"
     }
   ],
   "start_url": ".",

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
@@ -5,6 +5,7 @@ import { ReactQueryDevtools } from 'react-query/devtools';
 import { RecoilRoot } from 'recoil';
 import { ThemeSwitcher } from './components/themeSwitcher';
 import { light, dark } from './theme';
+import GlobalStyles from './GlobalStyles';
 import Router from './Router';
 import useDarkMode from './hooks/useDarkMode';
 
@@ -13,12 +14,13 @@ const queryClient = new QueryClient();
 
 const App = () => {
   const {themeMode, toggleTheme} = useDarkMode();
-
+  
   return (
     <QueryClientProvider client={queryClient}>
-      {REACT_APP_NODE_ENV === 'development' ?? <ReactQueryDevtools initialIsOpen={true} />}
+      {REACT_APP_NODE_ENV === 'development' && <ReactQueryDevtools initialIsOpen={true} />}
       <RecoilRoot>
         <ThemeProvider theme={themeMode === 'light' ? light : dark}>
+          <GlobalStyles />
           <ThemeSwitcher themeMode={themeMode} toggleTheme={toggleTheme}/>
           <Router />
         </ThemeProvider>

diff --git a/frontend/src/GlobalStyles.ts b/frontend/src/GlobalStyles.ts
@@ -10,14 +10,6 @@ const GlobalStyles = createGlobalStyle`
       box-sizing: border-box;
     }
 
-    html {
-      height: 100%;
-    }
-
-    #root {
-      height: 100%;
-    }
-
     body {
       height: 100%;
       font-family: 'Inter', sans-serif;

diff --git a/frontend/src/components/editorHeader/EditorHeader.tsx b/frontend/src/components/editorHeader/EditorHeader.tsx
@@ -5,6 +5,7 @@ import useDocumentTitle from '../../hooks/useDocumentTitle';
 import useToast from '../../hooks/useToast';
 import { SiteLogo } from '../siteLogo';
 import { OnlineUser } from '../onlineUser/OnlineUser';
+import { devices } from '../../constants/breakpoints';
 
 const EditorHeader = ({ fetchedTitle }: {fetchedTitle: string}) => {
   const { documentTitle, setDocumentTitle, updateDocumentTitle } = useDocumentTitle(fetchedTitle);
@@ -15,7 +16,7 @@ const EditorHeader = ({ fetchedTitle }: {fetchedTitle: string}) => {
     const document_URL = window.location.href;
     navigator.clipboard
       .writeText(document_URL)
-      .then(() => alertToast('INFO', '링크를 복사했어요! 공유해보세요!'))
+      .then(() => alertToast('INFO', '링크를 복사했어요!'))
       .catch(() => alertToast('WARNING', '링크 복사에 실패했어요!'));
   };
 
@@ -49,14 +50,14 @@ const EditorHeader = ({ fetchedTitle }: {fetchedTitle: string}) => {
 };
 
 const HeaderContainer = styled.header`
-  padding: 0 1rem;
+  padding: 0.5rem 1rem;
   display: flex;
   justify-content: space-between;
   align-items: center;
 `;
 
 const DocumentTitle = styled.input`
-  width: 16rem;
+  width: 12rem;
   font-weight: 200;
   font-size: 1.5rem;
   line-height: 1.75rem;
@@ -69,13 +70,17 @@ const DocumentTitle = styled.input`
     border: 1px solid;
     border-color: ${({ theme }) => theme.primary};
   }
+
+  @media ${devices.mobile} {
+    width: 10rem;
+    margin-left: 2rem;
+  }
 `;
 
 const RightButtonWrapper = styled.div`
-  height: 1.5rem;
-  width: 9rem;
   gap: 0.5rem;
   display: flex;
+  justify-content: flex-end;
   align-items: center;
 `;
 
@@ -87,6 +92,11 @@ const ShareButton = styled.button`
   padding: 0.5rem 1.5rem;
   background: ${({ theme }) => theme.primary};;
   color: ${({ theme }) => theme.white};
+
+  @media ${devices.mobile} {
+    font-weight: 400;
+    padding: 0.5rem;
+  }
 `;
 
 export { EditorHeader };
diff --git a/frontend/src/components/header/Header.tsx b/frontend/src/components/header/Header.tsx
@@ -23,7 +23,7 @@ const HeaderWrapper = styled.div`
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 0 1rem;
+  padding: 0.5rem 1rem;
   border-bottom: 1px solid;
   border-color: ${({ theme }) => theme.border};
 `;

diff --git a/frontend/src/components/loginButton/LoginButton.tsx b/frontend/src/components/loginButton/LoginButton.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import styled from 'styled-components';
 import githubIcon from '../../assets/github.svg';
+import { devices } from '../../constants/breakpoints';
 
 const LoginButton = () => {
   const handleGithubOAuth = (e: React.MouseEvent<HTMLButtonElement>) => {
@@ -39,6 +40,20 @@ const GitHubButton = styled.button`
 
     color: ${({ theme }) => theme.white};
   }
+
+  @media ${devices.mobile} {
+    padding: 0.75rem 1rem;
+
+    img {
+      width: 2rem;
+      height: 2rem;
+    }
+
+    span {
+      font-weight: 500;
+      font-size: 1rem;
+    }
+  }
 `;
 
 export { LoginButton };
diff --git a/frontend/src/components/modal/Modal.tsx b/frontend/src/components/modal/Modal.tsx
@@ -25,7 +25,7 @@ const Dimmed = styled.div`
   top: 0;
   left: 0;
   background-color: rgba(30, 30, 30, 0.9);
-  z-index: 1000;
+  z-index: 5000;
 `;
 
 export { Modal };
diff --git a/frontend/src/components/modalForm/ModalForm.tsx b/frontend/src/components/modalForm/ModalForm.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import styled, { useTheme } from 'styled-components';
 import MODAL_CONTENT from '../../constants/modalContent';
+import { devices } from '../../constants/breakpoints';
 
 interface ModalFormProps {
   type: string;
@@ -41,47 +42,73 @@ const ModalFormWrapper = styled.div`
   display: flex;
   flex-direction: column;
   justify-content: space-evenly;
-  width: 550px;
-  min-height: 300px;
+  width: 30rem;
+  min-height: 18rem;
   border-radius: 10px;
   padding: 3rem 2rem;
   margin: 0 auto;
-  margin-top: 4rem;
+  margin-top: 6rem;
   background-color: ${({ theme }) => theme.gray};
+
+  @media ${devices.mobile} {
+    width: 20rem;
+    min-height: 16rem;
+    padding: 2rem 1rem;
+    margin: 0 auto;
+    margin-top: 14rem;
+  }
 `;
 
 const QuestionGroup = styled.div`
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   align-items: center;
-  margin: 2rem 4rem;
+  margin: 2rem 0;
   color: ${({ theme }) => theme.text};
+
+  @media ${devices.mobile} {
+    margin: 2rem 0.25rem;
+  }
 `;
 
 const Title = styled.h2`
   font-size: 2rem;
   font-weight: 700;
+
+  @media ${devices.mobile} {
+    font-size: 1.5rem;
+    font-weight: 500;
+  }
 `;
 
 const Description = styled.p`
-  max-width: 330px;
-  word-break: keep-all;
-  margin-top: 0;
+  word-break: break-all;
+  margin-top: 1rem;
+
+  @media ${devices.mobile} {
+    max-width: 16rem;
+    text-align: start;
+  }
 `;
 
 const AnswerGroup = styled.div`
   display: flex;
   justify-content: space-between;
-  margin: 1rem 0;
+  margin: 1rem 1rem;
 `;
 
 const AnswerBtn = styled('button')<AnswerBtnProps>`
   font-size: 1.5rem;
   border-radius: 10px;
-  padding: 1rem 6rem;
+  padding: 1rem 4rem;
   color: ${({ theme }) => theme.text};
   background-color: ${(props) => props.backgroundColor};
+
+  @media ${devices.mobile} {
+    font-size: 1rem;
+    padding: 1rem 2.5rem;
+  }
 `;
 
 export { ModalForm };
diff --git a/frontend/src/components/onlineUser/OnlineUser.tsx b/frontend/src/components/onlineUser/OnlineUser.tsx
@@ -5,6 +5,7 @@ import { ReactComponent as TogetherIcon } from '../../assets/together.svg';
 import { ReactComponent as OnlineIcon } from '../../assets/online.svg';
 import { useRecoilState } from 'recoil';
 import { onlineUserState } from '../../atoms/onlineUserAtom';
+import { devices } from '../../constants/breakpoints';
 
 interface OnlineUserState {
   id: string;
@@ -49,8 +50,7 @@ const OnlineUser = () => {
 };
 
 const OnlineUserWrapper = styled.div`
-  width: 140px;
-  z-index: 500;
+  z-index: 1000;
   cursor: pointer;
 `;
 
@@ -65,6 +65,10 @@ const BtnNumber = styled.span`
   margin-left: 0.5rem;
   color: ${({ theme }) => theme.text};
   text-shadow: ${({ theme }) => `0px 4px 4px ${theme.defaultShadow}`};
+
+  @media ${devices.mobile} {
+    display: none;
+  }
 `;
 
 const OnlineUserList = styled('ul')<OptionOpenedProps>`

diff --git a/frontend/src/components/sideBar/SideBar.tsx b/frontend/src/components/sideBar/SideBar.tsx
@@ -6,6 +6,7 @@ import { ReactComponent as LockIcon } from '../../assets/lock.svg';
 import { ReactComponent as TogetherIcon } from '../../assets/together.svg';
 import { ReactComponent as BookmarkIcon } from '../../assets/bookmark.svg';
 import { IconButton } from '../iconButton';
+import { devices } from '../../constants/breakpoints';
 
 const SideBar = () => {
   const theme = useTheme();
@@ -54,6 +55,17 @@ const SideBarWrapper = styled.nav`
   flex-direction: column;
   border-right: 1px solid;
   border-color: ${({ theme }) => theme.border};
+
+  @media ${devices.mobile} {
+    position: static;
+    height: auto;
+    padding: 0;
+    flex-direction: row;
+    justify-content: space-evenly;
+    border-right: none;
+    border-bottom: 1px solid;
+    border-color: ${({ theme }) => theme.border};
+  }
 `;
 
 const NavMenu = styled(NavLink)`

diff --git a/frontend/src/components/siteLogo/SiteLogo.tsx b/frontend/src/components/siteLogo/SiteLogo.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 import styled, { useTheme } from 'styled-components';
 import { NavLink } from 'react-router-dom';
 import { ReactComponent as LogoIcon } from '../../assets/logo.svg';
+import { devices } from '../../constants/breakpoints';
 
 const SiteLogo = () => {
   const theme = useTheme();
@@ -22,8 +23,12 @@ const LogoWrapper = styled(NavLink)`
 const LogoTitle = styled.span`
   font-size: 1.5rem;
   font-weight: 700;
-  padding: 0.5rem;
+  padding: 0 0.5rem;
   color: ${({ theme }) => theme.text};
+
+  @media ${devices.mobile} {
+    display: none;
+  }
 `;
 
 export { SiteLogo };
diff --git a/frontend/src/components/themeSwitcher/ThemeSwitcher.tsx b/frontend/src/components/themeSwitcher/ThemeSwitcher.tsx
@@ -29,7 +29,7 @@ const ThemeSwitchButton = styled('button')<ThemeSwitchButtonProps>`
   border: 1px solid;
   border-radius: 50%;
   transition: 0.2s all ease-in;
-  z-index: 500;
+  z-index: 2000;
   border-color: ${({ theme }) => theme.border};
   background-color: ${({ theme }) => theme.background};