From b25686a540bba6da65d2cd63aa0db9d21a677a18 Mon Sep 17 00:00:00 2001
From: velopert <public.velopert@gmail.com>
Date: Tue, 24 Mar 2020 23:11:56 +0900
Subject: [PATCH] Create back button on WriteFooter - Close #90

---
 src/components/write/WriteFooter.tsx          | 54 ++++++++++++++++---
 .../write/__tests__/WriteFooter.test.tsx      | 10 +++-
 .../__snapshots__/WriteFooter.test.tsx.snap   | 42 +++++++++++----
 .../write/MarkdownEditorContainer.tsx         |  5 ++
 .../write/__tests__/ActiveEditor.test.tsx     |  9 ++--
 .../__snapshots__/ActiveEditor.test.tsx.snap  | 50 ++++++++++++-----
 6 files changed, 137 insertions(+), 33 deletions(-)

diff --git a/src/components/write/WriteFooter.tsx b/src/components/write/WriteFooter.tsx
index b8614ea5..942199a6 100644
--- a/src/components/write/WriteFooter.tsx
+++ b/src/components/write/WriteFooter.tsx
@@ -1,6 +1,9 @@
 import * as React from 'react';
 import styled from 'styled-components';
 import Button from '../common/Button';
+import { MdArrowBack } from 'react-icons/md';
+import media from '../../lib/styles/media';
+import { useHistory } from 'react-router-dom';
 
 const WriteFooterBlock = styled.div`
   padding-left: 1rem;
@@ -10,6 +13,11 @@ const WriteFooterBlock = styled.div`
   box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.1);
   background: rgba(255, 255, 255, 0.85);
   display: flex;
+  justify-content: space-between;
+  align-items: center;
+`;
+
+const Group = styled.div`
   justify-content: flex-end;
   align-items: center;
 `;
@@ -22,25 +30,59 @@ const StyledButton = styled(Button)`
   }
 `;
 
+const BackButton = styled.button`
+  height: 2.5rem;
+  padding: 0.5rem 1rem;
+  align-items: center;
+  background: none;
+  border-radius: 4px;
+  cursor: pointer;
+  border: none;
+  display: flex;
+  outline: none;
+  &:hover,
+  &:focus {
+    background: rgba(0, 0, 0, 0.05);
+  }
+  svg {
+    font-size: 1.25rem;
+    margin-right: 0.5rem;
+  }
+  span {
+    font-size: 1.125rem;
+    ${media.xsmall} {
+      display: none;
+    }
+  }
+`;
+
 export interface WriteFooterProps {
   onTempSave: (notify?: boolean) => void;
   onPublish: () => void;
+  onGoBack: () => void;
   edit: boolean;
 }
 
 const WriteFooter: React.FC<WriteFooterProps> = ({
+  onGoBack,
   onTempSave,
   onPublish,
   edit,
 }) => {
   return (
     <WriteFooterBlock>
-      <StyledButton inline color="lightGray" onClick={() => onTempSave(true)}>
-        임시저장
-      </StyledButton>
-      <StyledButton inline color="teal" onClick={onPublish}>
-        {edit ? '수정하기' : '출간하기'}
-      </StyledButton>
+      <BackButton onClick={onGoBack}>
+        <MdArrowBack />
+        <span>나가기</span>
+      </BackButton>
+      <Group>
+        <StyledButton inline color="lightGray" onClick={() => onTempSave(true)}>
+          임시저장
+        </StyledButton>
+        <StyledButton inline color="teal" onClick={onPublish}>
+          {edit ? '수정하기' : '출간하기'}
+        </StyledButton>
+      </Group>
     </WriteFooterBlock>
   );
 };
diff --git a/src/components/write/__tests__/WriteFooter.test.tsx b/src/components/write/__tests__/WriteFooter.test.tsx
index 55847a19..46a6aeb0 100644
--- a/src/components/write/__tests__/WriteFooter.test.tsx
+++ b/src/components/write/__tests__/WriteFooter.test.tsx
@@ -5,6 +5,8 @@ import WriteFooter, { WriteFooterProps } from '../WriteFooter';
 describe('WriteFooter', () => {
   const setup = (props: Partial<WriteFooterProps> = {}) => {
     const initialProps: WriteFooterProps = {
+      edit: false,
+      onGoBack: () => {},
       onPublish: () => {},
       onTempSave: () => {},
     };
@@ -12,6 +14,7 @@ describe('WriteFooter', () => {
     const buttons = {
       tempSave: utils.getByText('임시저장'),
       publish: utils.getByText(/(출간|수정)하기/),
+      goBack: utils.getByText('나가기'),
     };
     return {
       ...utils,
@@ -28,12 +31,15 @@ describe('WriteFooter', () => {
   it('buttons are working properly', () => {
     const onPublish = jest.fn();
     const onTempSave = jest.fn();
-    const utils = setup({ onPublish, onTempSave });
-    const { tempSave, publish } = utils.buttons;
+    const onGoBack = jest.fn();
+    const utils = setup({ onPublish, onTempSave, onGoBack });
+    const { tempSave, publish, goBack } = utils.buttons;
     fireEvent.click(tempSave);
     expect(onTempSave).toBeCalled();
     fireEvent.click(publish);
     expect(onPublish).toBeCalled();
+    fireEvent.click(goBack);
+    expect(onGoBack).toBeCalled();
   });
   it('changes button text when edit is true', () => {
     const { buttons } = setup({
diff --git a/src/components/write/__tests__/__snapshots__/WriteFooter.test.tsx.snap b/src/components/write/__tests__/__snapshots__/WriteFooter.test.tsx.snap
index c08fc065..3ef4c439 100644
--- a/src/components/write/__tests__/__snapshots__/WriteFooter.test.tsx.snap
+++ b/src/components/write/__tests__/__snapshots__/WriteFooter.test.tsx.snap
@@ -3,20 +3,44 @@
 exports[`WriteFooter matches snapshot 1`] = `
 <div>
   <div
-    class="sc-bwzfXH cvCbtW"
+    class="sc-bwzfXH prIea"
   >
     <button
-      class="sc-bdVaJa eORyJT sc-htpNat bGXGEN"
-      color="lightGray"
+      class="sc-ifAKCX ehUtwD"
     >
-      임시저장
+      <svg
+        fill="currentColor"
+        height="1em"
+        stroke="currentColor"
+        stroke-width="0"
+        viewBox="0 0 24 24"
+        width="1em"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"
+        />
+      </svg>
+      <span>
+        나가기
+      </span>
     </button>
-    <button
-      class="sc-bdVaJa czPBkf sc-htpNat bGXGEN"
-      color="teal"
+    <div
+      class="sc-htpNat SXVIf"
     >
-      출간하기
-    </button>
+      <button
+        class="sc-bdVaJa eORyJT sc-bxivhb eFySeT"
+        color="lightGray"
+      >
+        임시저장
+      </button>
+      <button
+        class="sc-bdVaJa czPBkf sc-bxivhb eFySeT"
+        color="teal"
+      >
+        출간하기
+      </button>
+    </div>
   </div>
 </div>
 `;
diff --git a/src/containers/write/MarkdownEditorContainer.tsx b/src/containers/write/MarkdownEditorContainer.tsx
index 7aa9a25e..f32574ca 100644
--- a/src/containers/write/MarkdownEditorContainer.tsx
+++ b/src/containers/write/MarkdownEditorContainer.tsx
@@ -69,6 +69,10 @@ const MarkdownEditorContainer: React.FC<MarkdownEditorContainerProps> = () => {
     body: initialBody,
   });
 
+  const onGoBack = () => {
+    history.goBack();
+  };
+
   useEffect(() => {
     setLastSavedData({
       title: initialTitle,
@@ -270,6 +274,7 @@ const MarkdownEditorContainer: React.FC<MarkdownEditorContainerProps> = () => {
           <WriteFooter
             onPublish={onPublish}
             onTempSave={onTempSave}
+            onGoBack={onGoBack}
             edit={!!postId && !isTemp}
           />
         }
diff --git a/src/containers/write/__tests__/ActiveEditor.test.tsx b/src/containers/write/__tests__/ActiveEditor.test.tsx
index ca16a64b..51469dd7 100644
--- a/src/containers/write/__tests__/ActiveEditor.test.tsx
+++ b/src/containers/write/__tests__/ActiveEditor.test.tsx
@@ -2,13 +2,16 @@ import * as React from 'react';
 import ActiveEditor, { ActiveEditorProps } from '../ActiveEditor';
 import renderWithProviders from '../../../lib/renderWithProviders';
 import { HelmetProvider } from 'react-helmet-async';
+import { MemoryRouter } from 'react-router-dom';
 
 describe('ActiveEditor', () => {
   const setup = (props: Partial<ActiveEditorProps> = {}) => {
     const utils = renderWithProviders(
-      <HelmetProvider>
-        <ActiveEditor {...props} />
-      </HelmetProvider>,
+      <MemoryRouter>
+        <HelmetProvider>
+          <ActiveEditor {...props} />
+        </HelmetProvider>
+      </MemoryRouter>,
     );
     return {
       ...utils,
diff --git a/src/containers/write/__tests__/__snapshots__/ActiveEditor.test.tsx.snap b/src/containers/write/__tests__/__snapshots__/ActiveEditor.test.tsx.snap
index f5f2978b..023b96f0 100644
--- a/src/containers/write/__tests__/__snapshots__/ActiveEditor.test.tsx.snap
+++ b/src/containers/write/__tests__/__snapshots__/ActiveEditor.test.tsx.snap
@@ -346,20 +346,44 @@ exports[`ActiveEditor matches snapshot 1`] = `
           style="width: 50%;"
         >
           <div
-            class="sc-hMqMXs dtEIDI"
+            class="sc-hMqMXs gLyvHa"
           >
             <button
-              class="sc-fjdhpX jXoOWc sc-kEYyzF kWApkt"
-              color="lightGray"
+              class="sc-iAyFgw ibDznP"
             >
-              임시저장
+              <svg
+                fill="currentColor"
+                height="1em"
+                stroke="currentColor"
+                stroke-width="0"
+                viewBox="0 0 24 24"
+                width="1em"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"
+                />
+              </svg>
+              <span>
+                나가기
+              </span>
             </button>
-            <button
-              class="sc-fjdhpX ilmKPu sc-kEYyzF kWApkt"
-              color="teal"
+            <div
+              class="sc-kEYyzF eLvYji"
             >
-              출간하기
-            </button>
+              <button
+                class="sc-fjdhpX jXoOWc sc-kkGfuU kNVwQV"
+                color="lightGray"
+              >
+                임시저장
+              </button>
+              <button
+                class="sc-fjdhpX ilmKPu sc-kkGfuU kNVwQV"
+                color="teal"
+              >
+                출간하기
+              </button>
+            </div>
           </div>
         </div>
       </div>
@@ -370,17 +394,17 @@ exports[`ActiveEditor matches snapshot 1`] = `
       style="background-color: rgb(251, 253, 252);"
     >
       <div
-        class="sc-cvbbAY cwRsVU"
+        class="sc-brqgnP bNesev"
         id="preview"
       >
         <h1
-          class="sc-jWBwVP PMTxR"
+          class="sc-cMljjf hxoyKh"
         />
         <div
-          class="sc-hSdWYo izVxtR"
+          class="sc-cvbbAY cgBRCb"
         >
           <div
-            class="sc-eHgmQL cxxJmN atom-one-light"
+            class="sc-jWBwVP OSClR atom-one-light"
           >