From e7755f92c08bad256f4388f007e0e699ca55f6ac Mon Sep 17 00:00:00 2001 From: iyu88 Date: Fri, 17 Feb 2023 02:50:57 +0900 Subject: [PATCH 01/14] =?UTF-8?q?feat:=20breakpoint=20=EC=A0=95=EC=9D=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 반응형 디자인을 적용하가 위한 너비 기준 값을 정의합니다. 모바일 레이아웃을 표현하는 너비 기준을 390px 로 정했습니다. --- frontend/src/constants/breakpoints.ts | 9 +++++++++ 1 file changed, 9 insertions(+) create mode 100644 frontend/src/constants/breakpoints.ts diff --git a/frontend/src/constants/breakpoints.ts b/frontend/src/constants/breakpoints.ts new file mode 100644 index 0000000..45392ba --- /dev/null +++ b/frontend/src/constants/breakpoints.ts @@ -0,0 +1,9 @@ +const breakpoints = { + mobile: '390px', +}; + +const devices = { + mobile: `(max-width: ${breakpoints.mobile})`, +}; + +export { devices }; From 0bdbf1d24a59376b8bea6bd01415c326e301878e Mon Sep 17 00:00:00 2001 From: iyu88 Date: Fri, 17 Feb 2023 02:51:24 +0900 Subject: [PATCH 02/14] =?UTF-8?q?feat:=20LandingPage=20=EB=B0=98=EC=9D=91?= =?UTF-8?q?=ED=98=95=20=EB=94=94=EC=9E=90=EC=9D=B8=20=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/loginButton/LoginButton.tsx | 15 +++++++++++++ frontend/src/pages/LandingPage.tsx | 22 +++++++++++++++++++ 2 files changed, 37 insertions(+) diff --git a/frontend/src/components/loginButton/LoginButton.tsx b/frontend/src/components/loginButton/LoginButton.tsx index 4a0f442..46e2368 100644 --- 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) => { @@ -39,6 +40,20 @@ const GitHubButton = styled.button` color: ${({ theme }) => theme.white}; } + + @media screen and ${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/pages/LandingPage.tsx b/frontend/src/pages/LandingPage.tsx index e9a8a86..65ecaea 100644 --- a/frontend/src/pages/LandingPage.tsx +++ b/frontend/src/pages/LandingPage.tsx @@ -4,6 +4,7 @@ import debugImage from '../assets/background-1.svg'; import talkingImage from '../assets/background-2.svg'; import { LoginButton } from '../components/loginButton'; import { SiteLogo } from '../components/siteLogo'; +import { devices } from '../constants/breakpoints'; const LandingPage = () => { return ( @@ -27,6 +28,11 @@ const PageWrapper = styled.div` justify-content: space-evenly; align-items: center; padding: 2rem; + + @media screen and ${devices.mobile} { + justify-content: space-between; + padding: 1rem; + } `; const LogoWrapper = styled.div` @@ -41,6 +47,12 @@ const Title = styled.span` text-align: center; padding: 2rem; color: ${({ theme }) => theme.text}; + + @media screen and ${devices.mobile} { + font-size: 2.25rem; + text-align: center; + padding: 0; + } `; const DebugImage = styled.img` @@ -48,6 +60,11 @@ const DebugImage = styled.img` width: 30vw; height: 30vh; align-self: flex-end; + + @media screen and ${devices.mobile} { + width: auto; + height: 25vh; + } `; const TalkingImage = styled.img` @@ -55,6 +72,11 @@ const TalkingImage = styled.img` width: 30vw; height: 30vh; align-self: flex-start; + + @media screen and ${devices.mobile} { + width: auto; + height: 25vh; + } `; export default LandingPage; From 62227fcd280b8ba8204b0048f560633b0c8388cd Mon Sep 17 00:00:00 2001 From: iyu88 Date: Fri, 17 Feb 2023 03:00:07 +0900 Subject: [PATCH 03/14] =?UTF-8?q?feat:=20Header=20=EC=BB=B4=ED=8F=AC?= =?UTF-8?q?=EB=84=8C=ED=8A=B8=20=EB=B0=98=EC=9D=91=ED=98=95=20=EB=94=94?= =?UTF-8?q?=EC=9E=90=EC=9D=B8=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/components/header/Header.tsx | 2 +- frontend/src/components/siteLogo/SiteLogo.tsx | 7 ++++++- frontend/src/components/userProfile/UserProfile.tsx | 5 +++++ 3 files changed, 12 insertions(+), 2 deletions(-) diff --git a/frontend/src/components/header/Header.tsx b/frontend/src/components/header/Header.tsx index 6e0616e..829b78d 100644 --- 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/siteLogo/SiteLogo.tsx b/frontend/src/components/siteLogo/SiteLogo.tsx index 83f91b4..cc322d1 100644 --- 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/userProfile/UserProfile.tsx b/frontend/src/components/userProfile/UserProfile.tsx index 78a8e8b..b633121 100644 --- a/frontend/src/components/userProfile/UserProfile.tsx +++ b/frontend/src/components/userProfile/UserProfile.tsx @@ -1,6 +1,7 @@ import React from 'react'; import styled from 'styled-components'; import { useQueryClient } from 'react-query'; +import { devices } from '../../constants/breakpoints'; interface cachedProfile { name: string, @@ -40,6 +41,10 @@ const UserName = styled.span` padding: 0.5rem; color: ${({ theme }) => theme.text}; text-shadow: ${({ theme }) => `0px 4px 4px ${theme.defaultShadow}`};; + + @media ${devices.mobile} { + display: none; + } `; export { UserProfile }; From f4074eb69c3d29b06a7a404805560ff82d75bb0e Mon Sep 17 00:00:00 2001 From: iyu88 Date: Fri, 17 Feb 2023 03:23:01 +0900 Subject: [PATCH 04/14] =?UTF-8?q?feat:=20MainPage=20=EB=B0=98=EC=9D=91?= =?UTF-8?q?=ED=98=95=20=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 모바일 화면에서 좌측에 있던 사이드바를 상단으로 위치시킵니다. 사이트에서 현재 사용자의 위치를 보여주는 PageName 은 모바일 화면에서 숨깁니다. 새로운 문서를 작성하는 버튼의 font-weight 를 감소시킵니다. --- frontend/src/components/sideBar/SideBar.tsx | 12 ++++++++++++ frontend/src/pages/MainLayout.tsx | 5 +++++ frontend/src/pages/MainPage.tsx | 20 ++++++++++++++++++++ 3 files changed, 37 insertions(+) diff --git a/frontend/src/components/sideBar/SideBar.tsx b/frontend/src/components/sideBar/SideBar.tsx index 3f54b2b..2b1f907 100644 --- 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/pages/MainLayout.tsx b/frontend/src/pages/MainLayout.tsx index 7811d38..58c74f5 100644 --- a/frontend/src/pages/MainLayout.tsx +++ b/frontend/src/pages/MainLayout.tsx @@ -4,6 +4,7 @@ import useGetProfileQuery from '../query/profile/useGetProfileQuery'; import { Header } from '../components/header'; import { SideBar } from '../components/sideBar'; import { Outlet } from 'react-router-dom'; +import { devices } from '../constants/breakpoints'; const MainLayout = () => { const { data: profile } = useGetProfileQuery(); @@ -24,6 +25,10 @@ const MainLayout = () => { const Container = styled.main` display: flex; + + @media ${devices.mobile} { + flex-direction: column; + } `; export default MainLayout; diff --git a/frontend/src/pages/MainPage.tsx b/frontend/src/pages/MainPage.tsx index 1b5c559..2919791 100644 --- a/frontend/src/pages/MainPage.tsx +++ b/frontend/src/pages/MainPage.tsx @@ -6,6 +6,8 @@ import usePageName from '../hooks/usePageName'; import useToast from '../hooks/useToast'; import { DocList } from '../components/docList'; import { Spinner } from '../components/spinner'; +import { devices } from '../constants/breakpoints'; + const { REACT_APP_API_URL } = process.env; const MainPage = () => { @@ -55,6 +57,10 @@ const ContentWrapper = styled.section` &::-webkit-scrollbar { display: none; } + + @media ${devices.mobile} { + margin: 0; + } `; const ContentHeaderGroup = styled.div` @@ -68,6 +74,10 @@ const PageName = styled.h1` font-weight: 800; font-size: 2rem; color: ${({ theme }) => theme.text}; + + @media ${devices.mobile} { + display: none; + } `; const NewDocBtn = styled.button` @@ -93,6 +103,12 @@ const NewDocBtn = styled.button` } background-color: ${({ theme }) => theme.background};; } + + @media ${devices.mobile} { + margin: auto; + margin-top: 2rem; + padding: 1rem 1.75rem 1rem 1.5rem; + } `; const BtnText = styled.span` @@ -101,6 +117,10 @@ const BtnText = styled.span` margin-left: 0.5rem; color: ${({ theme }) => theme.white}; text-shadow: ${({ theme }) => `0px 4px 4px ${theme.defaultShadow}`}; + + @media ${devices.mobile} { + font-weight: 400; + } `; export default MainPage; From 2d6daee12080d39d4d6e5d911696d17b66bbd903 Mon Sep 17 00:00:00 2001 From: iyu88 Date: Fri, 17 Feb 2023 03:36:59 +0900 Subject: [PATCH 05/14] =?UTF-8?q?feat:=20=EB=82=B4=20=EB=AC=B8=EC=84=9C?= =?UTF-8?q?=ED=95=A8,=20=EA=B3=B5=EC=9C=A0=20=EB=AC=B8=EC=84=9C=ED=95=A8,?= =?UTF-8?q?=20=EB=B6=81=EB=A7=88=ED=81=AC=20=EB=B0=98=EC=9D=91=ED=98=95=20?= =?UTF-8?q?=EB=A0=88=EC=9D=B4=EC=95=84=EC=9B=83=20=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/pages/BookmarkPage.tsx | 16 ++++++++++++++++ frontend/src/pages/PrivatePage.tsx | 16 ++++++++++++++++ frontend/src/pages/SharedPage.tsx | 16 ++++++++++++++++ 3 files changed, 48 insertions(+) diff --git a/frontend/src/pages/BookmarkPage.tsx b/frontend/src/pages/BookmarkPage.tsx index 8975481..39ae31a 100644 --- a/frontend/src/pages/BookmarkPage.tsx +++ b/frontend/src/pages/BookmarkPage.tsx @@ -5,6 +5,7 @@ import useSortOption from '../hooks/useSortOption'; import { DocList } from '../components/docList'; import { Spinner } from '../components/spinner'; import { Dropdown } from '../components/dropdown'; +import { devices } from '../constants/breakpoints'; const BookmarkPage = () => { const { pageName } = usePageName(); @@ -36,6 +37,13 @@ const ContentWrapper = styled.section` &::-webkit-scrollbar { display: none; } + + @media ${devices.mobile} { + margin: auto; + display: flex; + flex-direction: column; + align-items: flex-end; + } `; const ContentHeaderGroup = styled.div` @@ -43,12 +51,20 @@ const ContentHeaderGroup = styled.div` justify-content: space-between; align-items: center; margin-bottom: 2rem; + + @media ${devices.mobile} { + margin-top: 2rem; + } `; const PageName = styled.h1` font-weight: 800; font-size: 2rem; color: ${({ theme }) => theme.text}; + + @media ${devices.mobile} { + display: none; + } `; export default BookmarkPage; diff --git a/frontend/src/pages/PrivatePage.tsx b/frontend/src/pages/PrivatePage.tsx index 19f7ce9..588ef1d 100644 --- a/frontend/src/pages/PrivatePage.tsx +++ b/frontend/src/pages/PrivatePage.tsx @@ -5,6 +5,7 @@ import useSortOption from '../hooks/useSortOption'; import { DocList } from '../components/docList'; import { Spinner } from '../components/spinner'; import { Dropdown } from '../components/dropdown'; +import { devices } from '../constants/breakpoints'; const PrivatePage = () => { const { pageName } = usePageName(); @@ -36,6 +37,13 @@ const ContentWrapper = styled.section` &::-webkit-scrollbar { display: none; } + + @media ${devices.mobile} { + margin: auto; + display: flex; + flex-direction: column; + align-items: flex-end; + } `; const ContentHeaderGroup = styled.div` @@ -43,12 +51,20 @@ const ContentHeaderGroup = styled.div` justify-content: space-between; align-items: center; margin-bottom: 2rem; + + @media ${devices.mobile} { + margin-top: 2rem; + } `; const PageName = styled.h1` font-weight: 800; font-size: 2rem; color: ${({ theme }) => theme.text}; + + @media ${devices.mobile} { + display: none; + } `; export default PrivatePage; diff --git a/frontend/src/pages/SharedPage.tsx b/frontend/src/pages/SharedPage.tsx index 26c748e..6a11752 100644 --- a/frontend/src/pages/SharedPage.tsx +++ b/frontend/src/pages/SharedPage.tsx @@ -5,6 +5,7 @@ import useSortOption from '../hooks/useSortOption'; import { DocList } from '../components/docList'; import { Spinner } from '../components/spinner'; import { Dropdown } from '../components/dropdown'; +import { devices } from '../constants/breakpoints'; const SharedPage = () => { const { pageName } = usePageName(); @@ -36,6 +37,13 @@ const ContentWrapper = styled.section` &::-webkit-scrollbar { display: none; } + + @media ${devices.mobile} { + margin: auto; + display: flex; + flex-direction: column; + align-items: flex-end; + } `; const ContentHeaderGroup = styled.div` @@ -43,12 +51,20 @@ const ContentHeaderGroup = styled.div` justify-content: space-between; align-items: center; margin-bottom: 2rem; + + @media ${devices.mobile} { + margin-top: 2rem; + } `; const PageName = styled.h1` font-weight: 800; font-size: 2rem; color: ${({ theme }) => theme.text}; + + @media ${devices.mobile} { + display: none; + } `; export default SharedPage; From 6805de8503a69b5a27df8f05fcc10ad2c44908f1 Mon Sep 17 00:00:00 2001 From: iyu88 Date: Fri, 17 Feb 2023 03:56:22 +0900 Subject: [PATCH 06/14] =?UTF-8?q?feat:=20ModalForm=20=EB=B0=98=EC=9D=91?= =?UTF-8?q?=ED=98=95=20=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/modalForm/ModalForm.tsx | 38 ++++++++++++++++--- 1 file changed, 33 insertions(+), 5 deletions(-) diff --git a/frontend/src/components/modalForm/ModalForm.tsx b/frontend/src/components/modalForm/ModalForm.tsx index df8f9fb..74e4d1f 100644 --- 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,13 +42,21 @@ const ModalFormWrapper = styled.div` display: flex; flex-direction: column; justify-content: space-evenly; - width: 550px; - min-height: 300px; + width: 35rem; + 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` @@ -57,17 +66,31 @@ const QuestionGroup = styled.div` align-items: center; margin: 2rem 4rem; 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; + max-width: 20rem; word-break: keep-all; - margin-top: 0; + margin-top: 1rem; + + @media ${devices.mobile} { + max-width: 16rem; + text-align: start; + } `; const AnswerGroup = styled.div` @@ -82,6 +105,11 @@ const AnswerBtn = styled('button')` padding: 1rem 6rem; color: ${({ theme }) => theme.text}; background-color: ${(props) => props.backgroundColor}; + + @media ${devices.mobile} { + font-size: 1rem; + padding: 1rem 3.5rem; + } `; export { ModalForm }; From 2fe83c9c0ed58df178a7a05b25c80f8ba573a107 Mon Sep 17 00:00:00 2001 From: iyu88 Date: Fri, 17 Feb 2023 04:09:55 +0900 Subject: [PATCH 07/14] =?UTF-8?q?feat:=20=ED=86=A0=EC=8A=A4=ED=8A=B8=20?= =?UTF-8?q?=EB=A9=94=EC=84=B8=EC=A7=80=20=EB=B0=98=EC=9D=91=ED=98=95=20?= =?UTF-8?q?=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/components/toastMsg/ToastMsg.tsx | 22 ++++++++++++++----- .../useRemoveDocumentBookmarkMutation.tsx | 2 +- 2 files changed, 17 insertions(+), 7 deletions(-) diff --git a/frontend/src/components/toastMsg/ToastMsg.tsx b/frontend/src/components/toastMsg/ToastMsg.tsx index 37b1d5c..c4715d9 100644 --- a/frontend/src/components/toastMsg/ToastMsg.tsx +++ b/frontend/src/components/toastMsg/ToastMsg.tsx @@ -4,6 +4,7 @@ import { useRecoilValue } from 'recoil'; import { toastMsgState } from '../../atoms/toastMsgAtom'; import { ReactComponent as CheckIcon } from '../../assets/check.svg'; import { ReactComponent as ExclamationIcon } from '../../assets/exclamation.svg'; +import { devices } from '../../constants/breakpoints'; const ToastMsg = () => { const theme = useTheme(); @@ -37,21 +38,21 @@ const ToastMsg = () => { const toggleVisibility = keyframes` 0% { visibility: visible; } - 10% { transform: translate(-50%, 96px); } - 90% { transform: translate(-50%, 96px); } - 99% { transform: translate(-50%, -70px); } + 10% { transform: translate(-50%, 6rem); } + 90% { transform: translate(-50%, 6rem); } + 99% { transform: translate(-50%, -4.5rem); } 100% { visibility: hidden; } `; const ToastMsgWrapper = styled.div` position: fixed; - top: -70px; + top: -4.5rem; left: 50%; display: flex; align-items: center; - max-width: 640px; + max-width: 40rem; margin: auto; - padding: 1.2rem 1rem; + padding: 1.25rem 1rem; border-radius: 10px; z-index: 99; visibility: hidden; @@ -59,6 +60,10 @@ const ToastMsgWrapper = styled.div` border: 2px solid ${(props) => props.color}; background-color: ${({ theme }) => theme.background}; animation: ${toggleVisibility} 3s 1; + + @media ${devices.mobile} { + min-width: 15rem; + } `; const ToastText = styled.span` @@ -68,6 +73,11 @@ const ToastText = styled.span` margin-left: 0.5rem; color: ${(props) => props.color}; text-shadow: ${({ theme }) => `0px 4px 4px ${theme.defaultShadow}`};; + + @media ${devices.mobile} { + font-weight: 400; + font-size: 1rem; + } `; export { ToastMsg }; diff --git a/frontend/src/query/document/useRemoveDocumentBookmarkMutation.tsx b/frontend/src/query/document/useRemoveDocumentBookmarkMutation.tsx index 6044b4a..59a1265 100644 --- a/frontend/src/query/document/useRemoveDocumentBookmarkMutation.tsx +++ b/frontend/src/query/document/useRemoveDocumentBookmarkMutation.tsx @@ -22,7 +22,7 @@ const useRemoveDocumentBookmarkMutation = (documentType: string) => { alertToast('INFO', '북마크를 해제했습니다.'); }, onError: () => { - alertToast('WARNING', '북마크를 해제하지 못했습니다. 다시 시도해주세요.'); + alertToast('WARNING', '북마크 해제에 실패했습니다. 다시 시도해주세요.'); } } ); From f2cf2b4ff43d4f6f962de75535117928a3d2380c Mon Sep 17 00:00:00 2001 From: iyu88 Date: Fri, 17 Feb 2023 14:40:58 +0900 Subject: [PATCH 08/14] =?UTF-8?q?feat:=20DocumentPage=20=EB=B0=98=EC=9D=91?= =?UTF-8?q?=ED=98=95=20=EB=94=94=EC=9E=90=EC=9D=B8=20=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/editorHeader/EditorHeader.tsx | 18 ++++++++++++++---- .../src/components/onlineUser/OnlineUser.tsx | 6 +++++- 2 files changed, 19 insertions(+), 5 deletions(-) diff --git a/frontend/src/components/editorHeader/EditorHeader.tsx b/frontend/src/components/editorHeader/EditorHeader.tsx index 8fd4bbb..bdd164a 100644 --- 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,7 +50,7 @@ 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; @@ -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/onlineUser/OnlineUser.tsx b/frontend/src/components/onlineUser/OnlineUser.tsx index 99785e0..6de5076 100644 --- 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,7 +50,6 @@ const OnlineUser = () => { }; const OnlineUserWrapper = styled.div` - width: 140px; z-index: 500; 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')` From 52674f83f36d8e8f0d14e3e2c237012c16538e1f Mon Sep 17 00:00:00 2001 From: iyu88 Date: Fri, 17 Feb 2023 14:46:55 +0900 Subject: [PATCH 09/14] =?UTF-8?q?chore:=20z-index=20=EC=A1=B0=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/components/modal/Modal.tsx | 2 +- frontend/src/components/onlineUser/OnlineUser.tsx | 2 +- frontend/src/components/themeSwitcher/ThemeSwitcher.tsx | 2 +- frontend/src/components/toastMsg/ToastMsg.tsx | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) diff --git a/frontend/src/components/modal/Modal.tsx b/frontend/src/components/modal/Modal.tsx index fdda5c0..1e2adaa 100644 --- 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/onlineUser/OnlineUser.tsx b/frontend/src/components/onlineUser/OnlineUser.tsx index 6de5076..0b51530 100644 --- a/frontend/src/components/onlineUser/OnlineUser.tsx +++ b/frontend/src/components/onlineUser/OnlineUser.tsx @@ -50,7 +50,7 @@ const OnlineUser = () => { }; const OnlineUserWrapper = styled.div` - z-index: 500; + z-index: 1000; cursor: pointer; `; diff --git a/frontend/src/components/themeSwitcher/ThemeSwitcher.tsx b/frontend/src/components/themeSwitcher/ThemeSwitcher.tsx index b6c3e81..60a50e8 100644 --- a/frontend/src/components/themeSwitcher/ThemeSwitcher.tsx +++ b/frontend/src/components/themeSwitcher/ThemeSwitcher.tsx @@ -29,7 +29,7 @@ const ThemeSwitchButton = styled('button')` 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}; diff --git a/frontend/src/components/toastMsg/ToastMsg.tsx b/frontend/src/components/toastMsg/ToastMsg.tsx index c4715d9..2e98a93 100644 --- a/frontend/src/components/toastMsg/ToastMsg.tsx +++ b/frontend/src/components/toastMsg/ToastMsg.tsx @@ -54,7 +54,7 @@ const ToastMsgWrapper = styled.div` margin: auto; padding: 1.25rem 1rem; border-radius: 10px; - z-index: 99; + z-index: 3000; visibility: hidden; transform: translate(-50%); border: 2px solid ${(props) => props.color}; From 5e10e4f939a3465acdf2cdc5fd22f83a2b92e4f9 Mon Sep 17 00:00:00 2001 From: iyu88 Date: Fri, 17 Feb 2023 14:51:02 +0900 Subject: [PATCH 10/14] =?UTF-8?q?fix:=20App.tsx=20=EC=97=90=20GlobalStyles?= =?UTF-8?q?=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit App.tsx 에서 GlobalStyles 이 누락되어 있어 추가했습니다. --- frontend/src/App.tsx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index bf5ea26..e8ef965 100644 --- 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 ( - {REACT_APP_NODE_ENV === 'development' ?? } + {REACT_APP_NODE_ENV === 'development' && } + From d8d37eacad482afa48978f3beab8597cb90d5412 Mon Sep 17 00:00:00 2001 From: iyu88 Date: Fri, 17 Feb 2023 21:10:01 +0900 Subject: [PATCH 11/14] =?UTF-8?q?fix:=20Modal=20=EA=B3=BC=20Toast=20UI=20?= =?UTF-8?q?=EC=86=8D=EC=84=B1=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 불필요한 속성을 삭제하고 너비 크기를 수정했습니다. 토스트 메세지가 너무 긴 경우 짧은 말투로 수정했습니다. --- frontend/src/components/modalForm/ModalForm.tsx | 13 ++++++------- frontend/src/components/toastMsg/ToastMsg.tsx | 9 +++++---- frontend/src/constants/modalContent.ts | 2 +- 3 files changed, 12 insertions(+), 12 deletions(-) diff --git a/frontend/src/components/modalForm/ModalForm.tsx b/frontend/src/components/modalForm/ModalForm.tsx index 74e4d1f..a8b3095 100644 --- a/frontend/src/components/modalForm/ModalForm.tsx +++ b/frontend/src/components/modalForm/ModalForm.tsx @@ -42,7 +42,7 @@ const ModalFormWrapper = styled.div` display: flex; flex-direction: column; justify-content: space-evenly; - width: 35rem; + width: 30rem; min-height: 18rem; border-radius: 10px; padding: 3rem 2rem; @@ -64,7 +64,7 @@ const QuestionGroup = styled.div` flex-direction: column; justify-content: space-between; align-items: center; - margin: 2rem 4rem; + margin: 2rem 0; color: ${({ theme }) => theme.text}; @media ${devices.mobile} { @@ -83,8 +83,7 @@ const Title = styled.h2` `; const Description = styled.p` - max-width: 20rem; - word-break: keep-all; + word-break: break-all; margin-top: 1rem; @media ${devices.mobile} { @@ -96,19 +95,19 @@ const Description = styled.p` const AnswerGroup = styled.div` display: flex; justify-content: space-between; - margin: 1rem 0; + margin: 1rem 1rem; `; const AnswerBtn = styled('button')` 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 3.5rem; + padding: 1rem 2.5rem; } `; diff --git a/frontend/src/components/toastMsg/ToastMsg.tsx b/frontend/src/components/toastMsg/ToastMsg.tsx index 2e98a93..367bc9c 100644 --- a/frontend/src/components/toastMsg/ToastMsg.tsx +++ b/frontend/src/components/toastMsg/ToastMsg.tsx @@ -50,9 +50,9 @@ const ToastMsgWrapper = styled.div` left: 50%; display: flex; align-items: center; - max-width: 40rem; + min-width: 20rem; margin: auto; - padding: 1.25rem 1rem; + padding: 1.25rem; border-radius: 10px; z-index: 3000; visibility: hidden; @@ -66,11 +66,12 @@ const ToastMsgWrapper = styled.div` } `; -const ToastText = styled.span` +const ToastText = styled.p` font-weight: 500; font-size: 1.5rem; + text-align: center; word-break: break-all; - margin-left: 0.5rem; + margin: auto; color: ${(props) => props.color}; text-shadow: ${({ theme }) => `0px 4px 4px ${theme.defaultShadow}`};; diff --git a/frontend/src/constants/modalContent.ts b/frontend/src/constants/modalContent.ts index 4c3bbf0..ff2ca0b 100644 --- a/frontend/src/constants/modalContent.ts +++ b/frontend/src/constants/modalContent.ts @@ -10,7 +10,7 @@ export interface TYPE_QUESTION_MAP { const MODAL_CONTENT: TYPE_QUESTION_MAP = { 'DELETE': { title: '정말로 삭제하시겠습니까?', - description: '한 번 삭제한 문서는 복원할 수 없습니다. 그래도 진행하시겠습니까?' + description: '한 번 삭제한 문서는 복원할 수 없습니다. 진행하시겠습니까?' }, 'BOOKMARK': { title: '북마크에 등록하시겠습니까?', From 9fb17f46f0a54bd914939060bbfb69f4442f6a59 Mon Sep 17 00:00:00 2001 From: iyu88 Date: Fri, 17 Feb 2023 21:11:21 +0900 Subject: [PATCH 12/14] =?UTF-8?q?chore:=20=EB=AF=B8=EB=94=94=EC=96=B4=20?= =?UTF-8?q?=EC=BF=BC=EB=A6=AC=20=EA=B5=AC=EB=AC=B8=20=EB=B0=8F=20GlobalSty?= =?UTF-8?q?le=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 불필요한 GlobalStyle 을 삭제합니다. --- frontend/src/GlobalStyles.ts | 8 -------- frontend/src/components/editorHeader/EditorHeader.tsx | 2 +- frontend/src/components/loginButton/LoginButton.tsx | 2 +- frontend/src/pages/LandingPage.tsx | 8 ++++---- 4 files changed, 6 insertions(+), 14 deletions(-) diff --git a/frontend/src/GlobalStyles.ts b/frontend/src/GlobalStyles.ts index 20f2c6a..a9e6217 100644 --- 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 index bdd164a..6dde50f 100644 --- a/frontend/src/components/editorHeader/EditorHeader.tsx +++ b/frontend/src/components/editorHeader/EditorHeader.tsx @@ -57,7 +57,7 @@ const HeaderContainer = styled.header` `; const DocumentTitle = styled.input` - width: 16rem; + width: 12rem; font-weight: 200; font-size: 1.5rem; line-height: 1.75rem; diff --git a/frontend/src/components/loginButton/LoginButton.tsx b/frontend/src/components/loginButton/LoginButton.tsx index 46e2368..34d520c 100644 --- a/frontend/src/components/loginButton/LoginButton.tsx +++ b/frontend/src/components/loginButton/LoginButton.tsx @@ -41,7 +41,7 @@ const GitHubButton = styled.button` color: ${({ theme }) => theme.white}; } - @media screen and ${devices.mobile} { + @media ${devices.mobile} { padding: 0.75rem 1rem; img { diff --git a/frontend/src/pages/LandingPage.tsx b/frontend/src/pages/LandingPage.tsx index 65ecaea..876495a 100644 --- a/frontend/src/pages/LandingPage.tsx +++ b/frontend/src/pages/LandingPage.tsx @@ -29,7 +29,7 @@ const PageWrapper = styled.div` align-items: center; padding: 2rem; - @media screen and ${devices.mobile} { + @media ${devices.mobile} { justify-content: space-between; padding: 1rem; } @@ -48,7 +48,7 @@ const Title = styled.span` padding: 2rem; color: ${({ theme }) => theme.text}; - @media screen and ${devices.mobile} { + @media ${devices.mobile} { font-size: 2.25rem; text-align: center; padding: 0; @@ -61,7 +61,7 @@ const DebugImage = styled.img` height: 30vh; align-self: flex-end; - @media screen and ${devices.mobile} { + @media ${devices.mobile} { width: auto; height: 25vh; } @@ -73,7 +73,7 @@ const TalkingImage = styled.img` height: 30vh; align-self: flex-start; - @media screen and ${devices.mobile} { + @media ${devices.mobile} { width: auto; height: 25vh; } From f65d83367401e990b159291354a87f111103959d Mon Sep 17 00:00:00 2001 From: iyu88 Date: Fri, 17 Feb 2023 21:11:34 +0900 Subject: [PATCH 13/14] =?UTF-8?q?feat:=20ErrorPage=20=EB=B0=98=EC=9D=91?= =?UTF-8?q?=ED=98=95=20=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/pages/NotFoundPage.tsx | 20 ++++++++++++++++++++ 1 file changed, 20 insertions(+) diff --git a/frontend/src/pages/NotFoundPage.tsx b/frontend/src/pages/NotFoundPage.tsx index 1028bdd..734c24f 100644 --- a/frontend/src/pages/NotFoundPage.tsx +++ b/frontend/src/pages/NotFoundPage.tsx @@ -2,6 +2,7 @@ import React from 'react'; import styled from 'styled-components'; import ErrorIcon from '../assets/404.svg'; import { useNavigate } from 'react-router-dom'; +import { devices } from '../constants/breakpoints'; const NotFoundPage = () => { const navigate = useNavigate(); @@ -52,16 +53,29 @@ const ErrorMessage = styled.strong` font-size: 3rem; line-height: 4rem; color: ${({ theme }) => theme.text}; + + @media ${devices.mobile} { + font-size: 2rem; + } `; const PageDescription = styled.span` font-size: 2rem; line-height: 6rem; color: ${({ theme }) => theme.text}; + + @media ${devices.mobile} { + font-size: 1.5rem; + } `; const ErrorImage = styled.img` width: 30vw; + + @media ${devices.mobile} { + width: auto; + height: 30vh; + } `; const ReplaceButton = styled.button` @@ -71,6 +85,12 @@ const ReplaceButton = styled.button` padding: 1rem 3rem; color: ${({ theme }) => theme.white}; background-color: ${({ theme }) => theme.primary}; + + @media ${devices.mobile} { + font-weight: 500; + font-size: 1rem; + padding: 1rem 1.5rem; + } `; export default NotFoundPage; From 6607ff0bd98a4cf98b4011548420eff5eae278f4 Mon Sep 17 00:00:00 2001 From: iyu88 Date: Fri, 17 Feb 2023 21:15:23 +0900 Subject: [PATCH 14/14] =?UTF-8?q?feat:=20favicon=20=EC=9D=B4=EB=AF=B8?= =?UTF-8?q?=EC=A7=80=20=ED=8C=8C=EC=9D=BC=20=EC=B6=94=EA=B0=80=20=EB=B0=8F?= =?UTF-8?q?=20=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 브라우저 탭에 어플리케이션 아이콘을 표시하기 위해서 favicon 을 추가했습니다. manifest.json 에 이미지 관련 정보를 등록하고 index.html 의 head 에서 가져옵니다. 웹에서 표시할 때 사용하는 svg 파일을 추가했고 나머지 두 개의 png 파일은 애플 모바일에서 표시하기 위한 이미지입니다. svg 파일의 경우에는 내부에서 사용자 OS의 테마를 참조하여 색상이 바뀌게 됩니다. --- frontend/public/apple-touch-icon-180x180.png | Bin 0 -> 1271 bytes frontend/public/apple-touch-icon-57x57.png | Bin 0 -> 485 bytes frontend/public/favicon.svg | 16 ++++++++++++++++ frontend/public/index.html | 4 ++++ frontend/public/manifest.json | 18 ++++++++++++++---- 5 files changed, 34 insertions(+), 4 deletions(-) create mode 100644 frontend/public/apple-touch-icon-180x180.png create mode 100644 frontend/public/apple-touch-icon-57x57.png create mode 100644 frontend/public/favicon.svg diff --git a/frontend/public/apple-touch-icon-180x180.png b/frontend/public/apple-touch-icon-180x180.png new file mode 100644 index 0000000000000000000000000000000000000000..050e9399d07dd0c8fa3593985219d227a974daef GIT binary patch literal 1271 zcmeAS@N?(olHy`uVBq!ia0vp^TR@nD4M^IaWitX&oCO|{#S9GG!XV7ZFl&wkP>``W z$lZxy-8q?;Kn_c~qpu?a!^VE@KZ&eBZjYynV@L(#+q)M7rNc!U9!@^;{+MV*tm6Wv z$$Sf%I=Gy)7PP2{CWJGrb9kjtq7cJavf#~DpGO~4gf6VRx!L``dGWFLAAT2=e_toU z2s9oE94Oh>E!Fqi^3C((=l{!nxy*Y1)T;U4|L);-E536+|L>izn++$QG1}J6&Mb5M z8@pwD{EvMuXZdys6kW6AocCn4TGl5;x zjB+h+?R}<~(4eDTa{av33}fvt;(APO6CT!wiibVtT61B(EPIcN^96hMo|ISi!fyr3 zXEp2cB%K!ACf$?sYQfy=2_eDkf6WqHg4y4)db^pHUWh%=v235wU6#-trx}xlO_p-Z z3S#lqY+5Gb7~Hi$)Ahm>r3|l|zZdB1>nCr%Ic4tGDp_{+zB4w{J?%|5zutA$E<#7_ z{KwBe2d6b7>q}kVyl?;h|0Y-O-n(~f-;LkqVZWlwFW$e_wJL1&)#a6JcJfwxnnF9n zHzeesS|w<*)Z)SW27BeA1OFv09`GBhW_SU`Ag<#3Vf`S!i}@elkN%^K{|gT67h?aD zh-m;eFTl;fu#OnjlFqZ%3kjPf@90!vIV*9`U1;C6-i7OaTlNCE0^9$}wAz}uZdvQL z>isl5@h>M&dg@F+y<_+8?z3sh|I)9$F6EiEEwj4V96TW9v8n(ET=e z?K$7h1<^-xL+vaqIObi=RWbgpd;IVzoo9DLq8Fyie>r;e=<*daTNWI@;uNPN#>k&0 zyM_C}L%X^^64twVTY&Mj`F_!X>1ncG4rrHf&9Zvo7=E(pS@veWU%!4?y?cN8uH~$$ z*Vo4%@7v{(@oEA4T-FT3`X3(@9~`{m_`c@+i-SLZ?p%Akz4I38hzclS?XwQP9f1aJ4ZDDQQeKjlf zXx);=@1JaM{t|z_u~zi-nf$u`6eF96N^wsA+>aXh$~U(uJ73U!X0ra^XO-O3g`%B4 zf3JOSUN^tgAl&|_$8{&?zXFz9LU;XrZpHU(MYl?Q>gF{Ud~bLEmGqQf`Dy;GCX*L! z-y)3WZp*fxvN@seQjA2JwcV~)&-)u>Q*Ra3tcT(b6@J+wBuie^ANt3)(W} zYwy%;^YgYhU8=nzvNN@gb+zkVyPKEhS=rCG`^EBh&GGdQKUSpuoAho$_uHNQZ`jMe z6^b1^*Oy#<&|-Rg+1E(6#V?X}C#_G8V+`rGyqdXt&GxtRR^7d4-B;gdT=r1#*Y->6 oQg6-MIrnabI8spoVt&}ZpFyl?u~2ZuZ7~qv)78&qol`;+05LI13wdjNt2r!_e z6Y?E_QVl8lKS7{$LIz8B@C4~0Lh4>8R}s-triNiyYD)ygJCUYoCL4qhYu}YX(L=QB zlj1s>>#VXcNfImV+P3XlyS~b0u!yk#4LP^#f2>c}s;ZWjHI-!<>biyv-d;jZCwn(p z)-^BhqWS=}04>$+~) zTi*DD1B5#}fjQvhnmql3!45<+YS%PP5dt1OSH^oE7Da)bXbk|>!6QSqxcM)XWr=Yd z5yvrH`QsSG*;6(Fe~v!RaOexbQ}-sT$M2d58)372*W=9e@fu-_Y5A7G3z b#@zb>jEoBya&h+M00000NkvXXu0mjfM;*bi literal 0 HcmV?d00001 diff --git a/frontend/public/favicon.svg b/frontend/public/favicon.svg new file mode 100644 index 0000000..38c0b18 --- /dev/null +++ b/frontend/public/favicon.svg @@ -0,0 +1,16 @@ + + + + + diff --git a/frontend/public/index.html b/frontend/public/index.html index 6e14ff5..be239c1 100644 --- a/frontend/public/index.html +++ b/frontend/public/index.html @@ -7,6 +7,10 @@ + + + + diff --git a/frontend/public/manifest.json b/frontend/public/manifest.json index 1f2f141..e112e92 100644 --- 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": ".",