💄 UI: 수정, 삭제 버튼 생성 및 간격 조절(#11)

selab-hs · Apr 15, 2022 · 6ccbfe2 · 6ccbfe2
1 parent c788944
commit 6ccbfe2
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 11 deletions.
diff --git a/components/Header/HeaderBtns/index.tsx b/components/Header/HeaderBtns/index.tsx
@@ -20,7 +20,7 @@ const HeaderBtns = ({ currentTab }: Props) => {
           <S.LeftBtn currentTab={currentTab} onClick={handleBackBtn}>
             뒤로가기
           </S.LeftBtn>
-          <S.RightBtn>작성하기</S.RightBtn>
+          <S.RightBtn onClick={handleBackBtn}>작성하기</S.RightBtn>
         </>
       )}
       {currentTab !== 2 && (

diff --git a/components/TuiEditor/index.tsx b/components/TuiEditor/index.tsx
@@ -77,7 +77,18 @@ export default function TuiEditor() {
     }, 500);
   };
 
-  // TODO: 첫 로드 시 임시글이 있다면 불러오기
+  useEffect(() => {
+    if (!editorRef.current || !titleRef.current) return;
+    // TODO: 데이터 추가되면 변경해야함
+
+    const tmpPost = storage.get<{ id: string; title: string; content: string }[]>(TEMPORARY_POSTS);
+    const content = tmpPost ? tmpPost[0].content : '';
+    const title = tmpPost ? tmpPost[0].title : '';
+
+    titleRef.current.value = title;
+    editorRef.current.getInstance().setMarkdown(content);
+  }, []);
+
   return (
     <S.Wrapper>
       <S.Title placeholder="제목을 입력하세요" ref={titleRef} />

diff --git a/components/TuiViewer/index.tsx b/components/TuiViewer/index.tsx
@@ -50,11 +50,17 @@ const TuiEditor = () => {
       {data && (
         <S.Container>
           <S.Title>{data.titleData}</S.Title>
-          <S.Info>
-            <span>2022. 3. 25</span>
-            <span>조회수: 26</span>
-            <span>작성자: 강동진</span>
-          </S.Info>
+          <S.InfoWrapper>
+            <S.Info>
+              <span>2022. 3. 25</span>
+              <span>조회수: 26</span>
+              <span>작성자: 강동진</span>
+            </S.Info>
+            <div>
+              <span>수정</span>
+              <span>삭제</span>
+            </div>
+          </S.InfoWrapper>
           <Viewer
             initialValue={data.editorData}
             plugins={[[codeSyntaxHighlight, { highlighter: Prism }]]}

diff --git a/components/TuiViewer/style.ts b/components/TuiViewer/style.ts
@@ -23,16 +23,22 @@ export const Container = styled.div`
 `;
 
 export const Title = styled.h1`
+  margin-top: 3rem;
   font-size: 2.25rem;
   font-weight: 600;
 `;
-export const Info = styled.div`
+
+export const InfoWrapper = styled.div`
   display: flex;
-  gap: 20px;
-  height: 1.2rem;
-  margin-top: 10px;
+  justify-content: space-between;
+  margin: 4rem 0 5rem;
   font-weight: 300;
   color: #888;
+`;
+
+export const Info = styled.div`
+  display: flex;
+  gap: 20px;
 
   & > span {
     position: relative;