Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: 모바일에서 에디터 페이지에 접속했을 때 안내 메세지를 보여주는 기능 #720

Merged
merged 11 commits into from
Oct 28, 2021
Merged

feat: 모바일에서 에디터 페이지에 접속했을 때 안내 메세지를 보여주는 기능 #720

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
a0baf73
feat: `MobileRedirect` 페이지
yujo11 Oct 28, 2021
f14bd2d
feat: `useMobileRedirect` hook 구현
yujo11 Oct 28, 2021
2a60d7b
feat: useMobileRedirect hook 에디터 페이지들에 적용
yujo11 Oct 28, 2021
9fb06ad
refactor: hook 대신 media-query를 사용하여 화면을 보여주도록 변경
yujo11 Oct 28, 2021
e5c5082
refactor: 사용하지 않는 hook 제거
yujo11 Oct 28, 2021
cd9a5cd
refactor: `MapEditor`에 media-query 적용
yujo11 Oct 28, 2021
936903d
refactor: 불필요한 코드 제거
yujo11 Oct 28, 2021
3cb8368
refactor: 디렉토리 정리
yujo11 Oct 28, 2021
8dcdac4
refactor: 컴포넌트 이름 변경
yujo11 Oct 28, 2021
c4b414d
refactor: 전체적인 네이밍 변경
yujo11 Oct 28, 2021
e1f1971
refactor: 오타 수정
yujo11 Oct 28, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
0 frontend/src/assets/images/notFound.png → frontend/src/assets/images/gray-logo.png
View file
Open in desktop
File renamed without changes
24 changes: 24 additions & 0 deletions frontend/src/components/EditorOverlay/EditorOverlay.styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
import { Link } from 'react-router-dom';
import styled from 'styled-components';

export const Container = styled.div`
display: flex;
height: calc(100vh - 8rem);
flex-direction: column;
justify-content: center;
align-items: center;
`;

export const PageHeader = styled.h2`
font-size: 1.5rem;
font-weight: 700;
margin: 0.75rem 0 1.25rem;
`;

export const Image = styled.img``;

export const HomeLink = styled(Link)`
font-size: 1.25rem;
text-decoration: none;
color: ${({ theme }) => theme.primary[400]};
`;
15 changes: 15 additions & 0 deletions frontend/src/components/EditorOverlay/EditorOverlay.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
import GrayLogoImage from 'assets/images/gray-logo.png';
import PATH from 'constants/path';
import * as Styled from './EditorOverlay.styles';

const EditorOverlay = (): JSX.Element => {
return (
<Styled.Container>
<Styled.Image src={GrayLogoImage} alt="Not Found" />
<Styled.PageHeader>에디터는 PC에서 이용 가능합니다.</Styled.PageHeader>
<Styled.HomeLink to={PATH.MANAGER_MAIN}>이전 페이지로 이동하기</Styled.HomeLink>
</Styled.Container>
);
};

export default EditorOverlay;
4 changes: 3 additions & 1 deletion frontend/src/constants/routes.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,11 @@
import React, { ReactNode } from 'react';
import GuestReservationSuccess from 'pages/GuestReservation/GuestReservationSuccess';
import PATH from './path';

const GuestMap = React.lazy(() => import('pages/GuestMap/GuestMap'));
const GuestReservation = React.lazy(() => import('pages/GuestReservation/GuestReservation'));
const GuestReservationSuccess = React.lazy(
() => import('pages/GuestReservation/GuestReservationSuccess')
);
const Main = React.lazy(() => import('pages/Main/Main'));
const ManagerJoin = React.lazy(() => import('pages/ManagerJoin/ManagerJoin'));
const ManagerSocialJoin = React.lazy(() => import('pages/ManagerSocialJoin/ManagerSocialJoin'));
Expand Down
12 changes: 12 additions & 0 deletions frontend/src/pages/ManagerMapEditor/ManagerMapEditor.styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,18 @@ export const MapCreateGlobalStyle = createGlobalStyle`
}
`;

export const Desktop = styled.div`
@media screen and (max-width: 752px) {
display: none;
}
`;

export const Mobile = styled.div`
@media screen and (min-width: 752px) {
display: none;
}
`;

export const Container = styled.div`
padding: 2rem 0;
display: flex;
Expand Down
52 changes: 29 additions & 23 deletions frontend/src/pages/ManagerMapEditor/ManagerMapEditor.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import { useMutation } from 'react-query';
import { useHistory, useParams } from 'react-router';
import { postMap, putMap } from 'api/managerMap';
import Button from 'components/Button/Button';
import EditorOverlay from 'components/EditorOverlay/EditorOverlay';
import Header from 'components/Header/Header';
import Layout from 'components/Layout/Layout';
import { BOARD } from 'constants/editor';
Expand Down Expand Up @@ -151,30 +152,35 @@ const ManagerMapEditor = (): JSX.Element => {
<Styled.MapCreateGlobalStyle />
<Header />
<Layout>
<Styled.Container>
<Styled.Form onSubmit={handleSubmit}>
<Styled.FormHeader>
<Styled.MapNameInput
name="name"
value={name}
onChange={onChangeBoard}
placeholder="맵 이름을 입력해주세요"
required
<Styled.Desktop>
<Styled.Container>
<Styled.Form onSubmit={handleSubmit}>
<Styled.FormHeader>
<Styled.MapNameInput
name="name"
value={name}
onChange={onChangeBoard}
placeholder="맵 이름을 입력해주세요"
required
/>
<Styled.FormControl>
<Button type="button" variant="text" onClick={handleCancel}>
취소
</Button>
<Button variant="primary">{isEdit ? '수정' : '완료'}</Button>
</Styled.FormControl>
</Styled.FormHeader>
<MapEditor
spaces={spaces}
mapElementsState={[mapElements, setMapElements]}
boardState={[{ width, height }, onChangeBoard]}
/>
<Styled.FormControl>
<Button type="button" variant="text" onClick={handleCancel}>
취소
</Button>
<Button variant="primary">{isEdit ? '수정' : '완료'}</Button>
</Styled.FormControl>
</Styled.FormHeader>
<MapEditor
spaces={spaces}
mapElementsState={[mapElements, setMapElements]}
boardState={[{ width, height }, onChangeBoard]}
/>
</Styled.Form>
</Styled.Container>
</Styled.Form>
</Styled.Container>
</Styled.Desktop>
<Styled.Mobile>
<EditorOverlay />
</Styled.Mobile>
</Layout>
</>
);
Expand Down
12 changes: 12 additions & 0 deletions frontend/src/pages/ManagerSpaceEditor/ManagerSpaceEditor.styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,18 @@ interface FormContainerProps {
disabled: boolean;
}

export const Desktop = styled.div`
@media screen and (max-width: 752px) {
display: none;
}
`;

export const Mobile = styled.div`
@media screen and (min-width: 752px) {
display: none;
}
`;

export const Page = styled.div`
padding: 2rem 0;
display: flex;
Expand Down
93 changes: 50 additions & 43 deletions frontend/src/pages/ManagerSpaceEditor/ManagerSpaceEditor.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ import {
putManagerSpace,
PutManagerSpaceParams,
} from 'api/managerSpace';
import EditorOverlay from 'components/EditorOverlay/EditorOverlay';
import Header from 'components/Header/Header';
import Layout from 'components/Layout/Layout';
import { BOARD } from 'constants/editor';
Expand Down Expand Up @@ -132,53 +133,59 @@ const ManagerSpaceEditor = (): JSX.Element => {
return (
<>
<Header />

<Layout>
<Styled.Page>
<EditorHeader mapName={mapName} />

<Styled.EditorMain>
<SpaceFormProvider>
<Styled.EditorContainer>
{isDrawingMode && <ShapeSelectToolbar mode={mode} setMode={setMode} />}

<Editor
modeState={[mode, setMode]}
boardState={[board, setBoard]}
selectedSpaceIdState={[selectedSpaceId, setSelectedSpaceId]}
mapElements={mapElements}
spaces={spaces}
/>
</Styled.EditorContainer>

<Styled.FormContainer disabled={isDrawingMode}>
<SpaceSelect
spaces={spaces}
selectedSpaceIdState={[selectedSpaceId, setSelectedSpaceId]}
disabled={isDrawingMode}
>
<Styled.AddButtonWrapper>
<SpaceAddButton onClick={handleAddSpace} />
</Styled.AddButtonWrapper>
</SpaceSelect>

{mode === Mode.Form || isDrawingMode ? (
<Form
<Styled.Desktop>
<Styled.Page>
<EditorHeader mapName={mapName} />

<Styled.EditorMain>
<SpaceFormProvider>
<Styled.EditorContainer>
{isDrawingMode && <ShapeSelectToolbar mode={mode} setMode={setMode} />}

<Editor
modeState={[mode, setMode]}
mapData={{ width: board.width, height: board.height, mapElements }}
boardState={[board, setBoard]}
selectedSpaceIdState={[selectedSpaceId, setSelectedSpaceId]}
mapElements={mapElements}
spaces={spaces}
selectedSpaceId={selectedSpaceId}
disabled={isDrawingMode}
onCreateSpace={handleCreateSpace}
onUpdateSpace={handleUpdateSpace}
onDeleteSpace={handleDeleteSpace}
/>
) : (
<Styled.NoSpaceMessage>공간을 선택해주세요</Styled.NoSpaceMessage>
)}
</Styled.FormContainer>
</SpaceFormProvider>
</Styled.EditorMain>
</Styled.Page>
</Styled.EditorContainer>

<Styled.FormContainer disabled={isDrawingMode}>
<SpaceSelect
spaces={spaces}
selectedSpaceIdState={[selectedSpaceId, setSelectedSpaceId]}
disabled={isDrawingMode}
>
<Styled.AddButtonWrapper>
<SpaceAddButton onClick={handleAddSpace} />
</Styled.AddButtonWrapper>
</SpaceSelect>

{mode === Mode.Form || isDrawingMode ? (
<Form
modeState={[mode, setMode]}
mapData={{ width: board.width, height: board.height, mapElements }}
spaces={spaces}
selectedSpaceId={selectedSpaceId}
disabled={isDrawingMode}
onCreateSpace={handleCreateSpace}
onUpdateSpace={handleUpdateSpace}
onDeleteSpace={handleDeleteSpace}
/>
) : (
<Styled.NoSpaceMessage>공간을 선택해주세요</Styled.NoSpaceMessage>
)}
</Styled.FormContainer>
</SpaceFormProvider>
</Styled.EditorMain>
</Styled.Page>
</Styled.Desktop>
<Styled.Mobile>
<EditorOverlay />
</Styled.Mobile>
</Layout>
</>
);
Expand Down
4 changes: 2 additions & 2 deletions frontend/src/pages/NotFound/NotFound.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import NotFoundImage from 'assets/images/notFound.png';
import GrayLogoImage from 'assets/images/gray-logo.png';
import Header from 'components/Header/Header';
import Layout from 'components/Layout/Layout';
import PATH from 'constants/path';
Expand All @@ -10,7 +10,7 @@ const Main = (): JSX.Element => {
<Header />
<Layout>
<Styled.Container>
<Styled.Image src={NotFoundImage} alt="Not Found" />
<Styled.Image src={GrayLogoImage} alt="Not Found" />
<Styled.PageHeader>해당 페이지를 찾지 못했습니다.</Styled.PageHeader>
<Styled.HomeLink to={PATH.MAIN}>홈으로 이동하기</Styled.HomeLink>
</Styled.Container>
Expand Down