style: 글쓰기화면 스타일 수정

- table의 전체적인 요소들의 스타일 수정 - input의 스타일 수정 ref #37
nolmungshemung · Feb 8, 2022 · e434462 · e434462
1 parent 58bb7e2
commit e434462
Show file tree

Hide file tree

Showing 5 changed files with 75 additions and 36 deletions.
diff --git a/components/Input/BasicInput.tsx b/components/Input/BasicInput.tsx
@@ -5,8 +5,33 @@ const DEFAULT_TAG = 'input';
 
 const StyledBasicInput = styled(DEFAULT_TAG, {
   width: '100%',
-  border: '0',
+  height: '100%',
   padding: '0',
+  border: 'none',
+  fontSize: '$ft-15',
+  lineHeight: '$base',
+  caretColor: '$d_gray',
+  fontFamily: '$noto',
+
+  '&::placeholder': {
+    color: '#999999',
+  },
+
+  '&:focus': {
+    outline: 'none',
+    '&::-webkit-input-placeholder': {
+      color: 'transparent',
+    },
+    '&:-moz-placeholder': {
+      color: 'transparent',
+    },
+    '&::-moz-placeholder': {
+      color: 'transparent',
+    },
+    '&:-ms-input-placeholder': {
+      color: 'transparent',
+    },
+  },
 });
 
 type BasicInputProps = StitchesProps<typeof StyledBasicInput> &

diff --git a/components/Table/ContentsTd.tsx b/components/Table/ContentsTd.tsx
@@ -4,9 +4,11 @@ import React from 'react';
 const DEFAULT_TAG = 'td';
 
 const StyledContentsTd = styled(DEFAULT_TAG, {
-  display: 'inline-block',
+  display: 'flex',
   width: '100%',
+  height: '100%',
   padding: '0 10px 0',
+  alignItems: 'center',
 });
 
 type ContentsTdProps = StitchesProps<typeof StyledContentsTd> &

diff --git a/components/Table/TitleTd.tsx b/components/Table/TitleTd.tsx
@@ -5,8 +5,10 @@ const DEFAULT_TAG = 'td';
 
 const StyledTitleTd = styled(DEFAULT_TAG, {
   backgroundColor: '#F0F0F0',
-  padding: '0',
+  padding: '$sp-12 $sp-32',
   borderBottom: '1px solid #ffffff',
+  verticalAlign: 'middle',
+  textAlign: 'center',
 });
 
 type TitleTdProps = StitchesProps<typeof StyledTitleTd> &

diff --git a/components/TextEditor/TextEditor.tsx b/components/TextEditor/TextEditor.tsx
@@ -26,10 +26,9 @@ const TextEditor = function (props: TextEditorProps) {
       modules={modules}
       theme="snow"
       style={{
-        padding: '10px 0 10px',
-        height: '83%',
+        height: '90%',
         width: '100%',
-        marginBottom: '-6%',
+        marginBottom: '40px',
       }}
     />
   );

diff --git a/pages/writing.tsx b/pages/writing.tsx
@@ -1,18 +1,14 @@
 import React, { useState } from 'react';
-
+import { NextSeo } from 'next-seo';
 import { Box, Button } from '@nolmungshemung/ui-kits';
-import * as Input from '~/components/Input';
+import { BasicInput } from '~/components/Input';
 import * as Table from '~/components/Table';
 import { NextPage } from 'next';
 import { WritingContentsRequest } from '~/data/services/services.model';
 import TextEditor from '~/components/TextEditor/TextEditor';
 import { usePostContents } from '~/data/services/services.hooks';
 
-interface WritingContentsType extends WritingContentsRequest {
-  folder: number;
-}
-const initialWriting: WritingContentsType = {
-  folder: 0,
+const initialWriting: WritingContentsRequest = {
   title: '',
   thumbnail: '',
   introduction: '',
@@ -24,7 +20,7 @@ const initialWriting: WritingContentsType = {
 };
 
 const Writing: NextPage = function () {
-  const [data, setData] = useState<WritingContentsType>(initialWriting);
+  const [data, setData] = useState<WritingContentsRequest>(initialWriting);
 
   const mutation = usePostContents(data);
 
@@ -52,15 +48,25 @@ const Writing: NextPage = function () {
   };
 
   return (
-    <Box css={{ margin: '0 200px 0' }}>
-      <Box>
-        <Table.Wrapper>
+    <>
+      <NextSeo
+        title="WritingHub: 글쓰기"
+        description="라이팅허브 글쓰기 화면"
+      />
+      <Box
+        css={{
+          display: 'flex',
+          flexDirection: 'column',
+          justifyContent: 'center',
+          alignItems: 'center',
+        }}
+      >
+        <Table.Wrapper css={{ width: '1200px', height: '750px' }}>
           <tbody>
             <Table.TableRow>
               <Table.TitleTd>{'제목'}</Table.TitleTd>
               <Table.ContentsTd>
-                <Input.BasicInput
-                  css={{ width: 900 }}
+                <BasicInput
                   onChange={onTitleChange}
                   placeholder={'제목을 입력해주세요.'}
                 />
@@ -69,48 +75,53 @@ const Writing: NextPage = function () {
             <Table.TableRow>
               <Table.TitleTd>{'글 소개'}</Table.TitleTd>
               <Table.ContentsTd>
-                <Input.BasicInput
-                  css={{ width: 900 }}
+                <BasicInput
                   onChange={onDescChange}
+                  placeholder={'"이 글은 어떤 글인가요?" 최대 30자'}
+                  maxLength={30}
                 />
               </Table.ContentsTd>
             </Table.TableRow>
             <Table.TableRow>
               <Table.TitleTd>{'썸네일'}</Table.TitleTd>
               <Table.ContentsTd>
-                <Input.BasicInput
-                  css={{ width: 900 }}
-                  onChange={onThumbnailChange}
-                />
+                <BasicInput onChange={onThumbnailChange} />
               </Table.ContentsTd>
             </Table.TableRow>
-            <Table.TableRow>
-              <Table.TitleTd css={{ height: '360px' }}>{'내용'}</Table.TitleTd>
-              <Table.ContentsTd css={{ height: '360px' }}>
+            <Table.TableRow css={{ height: '600px' }}>
+              <Table.TitleTd>{'내용'}</Table.TitleTd>
+              <Table.ContentsTd>
                 <TextEditor value={data.contents} onChange={onContentsChange} />
               </Table.ContentsTd>
             </Table.TableRow>
           </tbody>
         </Table.Wrapper>
-      </Box>
-      <Box css={{ display: 'flex' }}>
-        <Box css={{ margin: 'auto' }}>
-          <Button css={{ border: '1px solid #C4C7CA', margin: '0 5px 0' }}>
+        <Box css={{ marginTop: '$sp-30' }}>
+          <Button
+            size="lg"
+            css={{
+              width: '5rem',
+              border: '1px solid #C4C7CA',
+              margin: '0 $sp-06',
+              cursor: 'pointer',
+            }}
+          >
             {'취소'}
           </Button>
           <Button
+            size="lg"
+            color="primary"
             css={{
-              color: '#ffffff',
-              background: '$primary',
-              margin: '0 5px 0',
+              width: '5rem',
+              cursor: 'pointer',
             }}
             onClick={onSubmit}
           >
             {'등록완료'}
           </Button>
         </Box>
       </Box>
-    </Box>
+    </>
   );
 };