Skip to content

Commit b25686a

Browse files
velopertvelopert
committed
Create back button on WriteFooter - Close velopert#90 
1 parent 688cc06 commit b25686a

File tree

6 files changed

+137
-33
lines changed

6 files changed

+137
-33
lines changed

‎src/components/write/WriteFooter.tsx

Lines changed: 48 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,9 @@
11
import * as React from 'react';
22
import styled from 'styled-components';
33
import Button from '../common/Button';
4+
import { MdArrowBack } from 'react-icons/md';
5+
import media from '../../lib/styles/media';
6+
import { useHistory } from 'react-router-dom';
47

58
const WriteFooterBlock = styled.div`
69
padding-left: 1rem;
@@ -10,6 +13,11 @@ const WriteFooterBlock = styled.div`
1013
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.1);
1114
background: rgba(255, 255, 255, 0.85);
1215
display: flex;
16+
justify-content: space-between;
17+
align-items: center;
18+
`;
19+
20+
const Group = styled.div`
1321
justify-content: flex-end;
1422
align-items: center;
1523
`;
@@ -22,25 +30,59 @@ const StyledButton = styled(Button)`
2230
}
2331
`;
2432

33+
const BackButton = styled.button`
34+
height: 2.5rem;
35+
padding: 0.5rem 1rem;
36+
align-items: center;
37+
background: none;
38+
border-radius: 4px;
39+
cursor: pointer;
40+
border: none;
41+
display: flex;
42+
outline: none;
43+
&:hover,
44+
&:focus {
45+
background: rgba(0, 0, 0, 0.05);
46+
}
47+
svg {
48+
font-size: 1.25rem;
49+
margin-right: 0.5rem;
50+
}
51+
span {
52+
font-size: 1.125rem;
53+
${media.xsmall} {
54+
display: none;
55+
}
56+
}
57+
`;
58+
2559
export interface WriteFooterProps {
2660
onTempSave: (notify?: boolean) => void;
2761
onPublish: () => void;
62+
onGoBack: () => void;
2863
edit: boolean;
2964
}
3065

3166
const WriteFooter: React.FC<WriteFooterProps> = ({
67+
onGoBack,
3268
onTempSave,
3369
onPublish,
3470
edit,
3571
}) => {
3672
return (
3773
<WriteFooterBlock>
38-
<StyledButton inline color="lightGray" onClick={() => onTempSave(true)}>
39-
임시저장
40-
</StyledButton>
41-
<StyledButton inline color="teal" onClick={onPublish}>
42-
{edit ? '수정하기' : '출간하기'}
43-
</StyledButton>
74+
<BackButton onClick={onGoBack}>
75+
<MdArrowBack />
76+
<span>나가기</span>
77+
</BackButton>
78+
<Group>
79+
<StyledButton inline color="lightGray" onClick={() => onTempSave(true)}>
80+
임시저장
81+
</StyledButton>
82+
<StyledButton inline color="teal" onClick={onPublish}>
83+
{edit ? '수정하기' : '출간하기'}
84+
</StyledButton>
85+
</Group>
4486
</WriteFooterBlock>
4587
);
4688
};

‎src/components/write/__tests__/WriteFooter.test.tsx

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,13 +5,16 @@ import WriteFooter, { WriteFooterProps } from '../WriteFooter';
55
describe('WriteFooter', () => {
66
const setup = (props: Partial<WriteFooterProps> = {}) => {
77
const initialProps: WriteFooterProps = {
8+
edit: false,
9+
onGoBack: () => {},
810
onPublish: () => {},
911
onTempSave: () => {},
1012
};
1113
const utils = render(<WriteFooter {...initialProps} {...props} />);
1214
const buttons = {
1315
tempSave: utils.getByText('임시저장'),
1416
publish: utils.getByText(/(출간|수정)하기/),
17+
goBack: utils.getByText('나가기'),
1518
};
1619
return {
1720
...utils,
@@ -28,12 +31,15 @@ describe('WriteFooter', () => {
2831
it('buttons are working properly', () => {
2932
const onPublish = jest.fn();
3033
const onTempSave = jest.fn();
31-
const utils = setup({ onPublish, onTempSave });
32-
const { tempSave, publish } = utils.buttons;
34+
const onGoBack = jest.fn();
35+
const utils = setup({ onPublish, onTempSave, onGoBack });
36+
const { tempSave, publish, goBack } = utils.buttons;
3337
fireEvent.click(tempSave);
3438
expect(onTempSave).toBeCalled();
3539
fireEvent.click(publish);
3640
expect(onPublish).toBeCalled();
41+
fireEvent.click(goBack);
42+
expect(onGoBack).toBeCalled();
3743
});
3844
it('changes button text when edit is true', () => {
3945
const { buttons } = setup({

‎src/components/write/__tests__/__snapshots__/WriteFooter.test.tsx.snap

Lines changed: 33 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -3,20 +3,44 @@
33
exports[`WriteFooter matches snapshot 1`] = `
44
<div>
55
<div
6-
class="sc-bwzfXH cvCbtW"
6+
class="sc-bwzfXH prIea"
77
>
88
<button
9-
class="sc-bdVaJa eORyJT sc-htpNat bGXGEN"
10-
color="lightGray"
9+
class="sc-ifAKCX ehUtwD"
1110
>
12-
임시저장
11+
<svg
12+
fill="currentColor"
13+
height="1em"
14+
stroke="currentColor"
15+
stroke-width="0"
16+
viewBox="0 0 24 24"
17+
width="1em"
18+
xmlns="http://www.w3.org/2000/svg"
19+
>
20+
<path
21+
d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"
22+
/>
23+
</svg>
24+
<span>
25+
나가기
26+
</span>
1327
</button>
14-
<button
15-
class="sc-bdVaJa czPBkf sc-htpNat bGXGEN"
16-
color="teal"
28+
<div
29+
class="sc-htpNat SXVIf"
1730
>
18-
출간하기
19-
</button>
31+
<button
32+
class="sc-bdVaJa eORyJT sc-bxivhb eFySeT"
33+
color="lightGray"
34+
>
35+
임시저장
36+
</button>
37+
<button
38+
class="sc-bdVaJa czPBkf sc-bxivhb eFySeT"
39+
color="teal"
40+
>
41+
출간하기
42+
</button>
43+
</div>
2044
</div>
2145
</div>
2246
`;

‎src/containers/write/MarkdownEditorContainer.tsx

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -69,6 +69,10 @@ const MarkdownEditorContainer: React.FC<MarkdownEditorContainerProps> = () => {
6969
body: initialBody,
7070
});
7171

72+
const onGoBack = () => {
73+
history.goBack();
74+
};
75+
7276
useEffect(() => {
7377
setLastSavedData({
7478
title: initialTitle,
@@ -270,6 +274,7 @@ const MarkdownEditorContainer: React.FC<MarkdownEditorContainerProps> = () => {
270274
<WriteFooter
271275
onPublish={onPublish}
272276
onTempSave={onTempSave}
277+
onGoBack={onGoBack}
273278
edit={!!postId && !isTemp}
274279
/>
275280
}

‎src/containers/write/__tests__/ActiveEditor.test.tsx

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,16 @@ import * as React from 'react';
22
import ActiveEditor, { ActiveEditorProps } from '../ActiveEditor';
33
import renderWithProviders from '../../../lib/renderWithProviders';
44
import { HelmetProvider } from 'react-helmet-async';
5+
import { MemoryRouter } from 'react-router-dom';
56

67
describe('ActiveEditor', () => {
78
const setup = (props: Partial<ActiveEditorProps> = {}) => {
89
const utils = renderWithProviders(
9-
<HelmetProvider>
10-
<ActiveEditor {...props} />
11-
</HelmetProvider>,
10+
<MemoryRouter>
11+
<HelmetProvider>
12+
<ActiveEditor {...props} />
13+
</HelmetProvider>
14+
</MemoryRouter>,
1215
);
1316
return {
1417
...utils,

‎src/containers/write/__tests__/__snapshots__/ActiveEditor.test.tsx.snap

Lines changed: 37 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -346,20 +346,44 @@ exports[`ActiveEditor matches snapshot 1`] = `
346346
style="width: 50%;"
347347
>
348348
<div
349-
class="sc-hMqMXs dtEIDI"
349+
class="sc-hMqMXs gLyvHa"
350350
>
351351
<button
352-
class="sc-fjdhpX jXoOWc sc-kEYyzF kWApkt"
353-
color="lightGray"
352+
class="sc-iAyFgw ibDznP"
354353
>
355-
임시저장
354+
<svg
355+
fill="currentColor"
356+
height="1em"
357+
stroke="currentColor"
358+
stroke-width="0"
359+
viewBox="0 0 24 24"
360+
width="1em"
361+
xmlns="http://www.w3.org/2000/svg"
362+
>
363+
<path
364+
d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"
365+
/>
366+
</svg>
367+
<span>
368+
나가기
369+
</span>
356370
</button>
357-
<button
358-
class="sc-fjdhpX ilmKPu sc-kEYyzF kWApkt"
359-
color="teal"
371+
<div
372+
class="sc-kEYyzF eLvYji"
360373
>
361-
출간하기
362-
</button>
374+
<button
375+
class="sc-fjdhpX jXoOWc sc-kkGfuU kNVwQV"
376+
color="lightGray"
377+
>
378+
임시저장
379+
</button>
380+
<button
381+
class="sc-fjdhpX ilmKPu sc-kkGfuU kNVwQV"
382+
color="teal"
383+
>
384+
출간하기
385+
</button>
386+
</div>
363387
</div>
364388
</div>
365389
</div>
@@ -370,17 +394,17 @@ exports[`ActiveEditor matches snapshot 1`] = `
370394
style="background-color: rgb(251, 253, 252);"
371395
>
372396
<div
373-
class="sc-cvbbAY cwRsVU"
397+
class="sc-brqgnP bNesev"
374398
id="preview"
375399
>
376400
<h1
377-
class="sc-jWBwVP PMTxR"
401+
class="sc-cMljjf hxoyKh"
378402
/>
379403
<div
380-
class="sc-hSdWYo izVxtR"
404+
class="sc-cvbbAY cgBRCb"
381405
>
382406
<div
383-
class="sc-eHgmQL cxxJmN atom-one-light"
407+
class="sc-jWBwVP OSClR atom-one-light"
384408
>
385409
386410

0 commit comments

Comments
 (0)