From 313f7f4a1a8f2309c13d7734a951bff9a84868ea Mon Sep 17 00:00:00 2001 From: se0jinYoon Date: Mon, 15 Jan 2024 07:40:03 +0900 Subject: [PATCH 1/5] =?UTF-8?q?feat:=20=EC=9D=B4=EB=AF=B8=EC=A7=80=20?= =?UTF-8?q?=EC=97=85=EB=A1=9C=EB=93=9C,=20=EB=AF=B8=EB=A6=AC=EB=B3=B4?= =?UTF-8?q?=EA=B8=B0=20=EA=B8=B0=EB=8A=A5=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/svgs/editorThuminputIcnActive.svg | 9 ++++ src/assets/svgs/editorThuminputIcnHover.svg | 10 ++++ .../svgs/editorThuminputIcnUnactive.svg | 9 ++++ src/assets/svgs/index.tsx | 4 ++ src/pages/postDetail/PostDetail.tsx | 10 ++-- src/pages/postPage/PostPage.tsx | 4 ++ src/pages/postPage/components/ImageUpload.tsx | 54 +++++++++++++++++++ src/pages/postPage/components/editor.css | 7 +++ 8 files changed, 103 insertions(+), 4 deletions(-) create mode 100644 src/assets/svgs/editorThuminputIcnActive.svg create mode 100644 src/assets/svgs/editorThuminputIcnHover.svg create mode 100644 src/assets/svgs/editorThuminputIcnUnactive.svg create mode 100644 src/pages/postPage/components/ImageUpload.tsx diff --git a/src/assets/svgs/editorThuminputIcnActive.svg b/src/assets/svgs/editorThuminputIcnActive.svg new file mode 100644 index 00000000..a20d741a --- /dev/null +++ b/src/assets/svgs/editorThuminputIcnActive.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/assets/svgs/editorThuminputIcnHover.svg b/src/assets/svgs/editorThuminputIcnHover.svg new file mode 100644 index 00000000..38167515 --- /dev/null +++ b/src/assets/svgs/editorThuminputIcnHover.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/assets/svgs/editorThuminputIcnUnactive.svg b/src/assets/svgs/editorThuminputIcnUnactive.svg new file mode 100644 index 00000000..a96ee97d --- /dev/null +++ b/src/assets/svgs/editorThuminputIcnUnactive.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/assets/svgs/index.tsx b/src/assets/svgs/index.tsx index 50adf66c..71e0bffe 100644 --- a/src/assets/svgs/index.tsx +++ b/src/assets/svgs/index.tsx @@ -48,3 +48,7 @@ export { default as QuestionDefaultIc } from './questionDefaultIc.svg?react'; export { default as QuestioHoverIc } from './questionHoverIc.svg?react'; export { default as GroupThumnailImgIc } from './groupThumnailImg.svg?react'; + +export { default as EditorThuminputIcnUnactive } from './editorThuminputIcnUnactive.svg?react'; +export { default as EditorThuminputIcnHover } from './editorThuminputIcnHover.svg?react'; +export { default as EditorThuminputIcnActive } from './editorThuminputIcnHover.svg?react'; diff --git a/src/pages/postDetail/PostDetail.tsx b/src/pages/postDetail/PostDetail.tsx index a638a276..9594d3e7 100644 --- a/src/pages/postDetail/PostDetail.tsx +++ b/src/pages/postDetail/PostDetail.tsx @@ -1,15 +1,17 @@ import styled from '@emotion/styled'; import { useNavigate } from 'react-router-dom'; +import Comment from './components/Comment'; +import CuriousBtn from './components/CuriousBtn'; + +import MakeGroupBtn from '../groupFeed/components/MakeGroupBtn'; +import MyGroupBtn from '../groupFeed/components/MyGroupBtn'; + import Image from './../../assets/images/defaultSeaImage.png'; import { CheckboxIc, DefaultProfileIc, HeaderLogoIc } from './../../assets/svgs'; import Button from './../../components/commons/Button'; import LogInOutBtn from './../../components/commons/LogInOutBtn'; import Spacing from './../../components/commons/Spacing'; -import MakeGroupBtn from '../groupFeed/components/MakeGroupBtn'; -import MyGroupBtn from '../groupFeed/components/MyGroupBtn'; -import Comment from './components/Comment'; -import CuriousBtn from './components/CuriousBtn'; const PostDetail = () => { const navigate = useNavigate(); diff --git a/src/pages/postPage/PostPage.tsx b/src/pages/postPage/PostPage.tsx index f3cde829..715ae9b6 100644 --- a/src/pages/postPage/PostPage.tsx +++ b/src/pages/postPage/PostPage.tsx @@ -1,10 +1,12 @@ import styled from '@emotion/styled'; import Editor from './components/Editor'; +import ImageUpload from './components/ImageUpload'; const PostPage = () => { return ( + ); @@ -14,5 +16,7 @@ export default PostPage; const PostPageWrapper = styled.div` display: flex; + flex-direction: column; justify-content: center; + width: 100%; `; diff --git a/src/pages/postPage/components/ImageUpload.tsx b/src/pages/postPage/components/ImageUpload.tsx new file mode 100644 index 00000000..b686874f --- /dev/null +++ b/src/pages/postPage/components/ImageUpload.tsx @@ -0,0 +1,54 @@ +import styled from '@emotion/styled'; + +import { useState } from 'react'; + +import { + EditorThuminputIcnUnactive, + EditorThuminputIcnHover, + EditorThuminputIcnActive, +} from './../../../assets/svgs'; +import Spacing from '../../../components/commons/Spacing'; + +const ImageUpload = () => { + const [editorThumImg, setEditorThumImg] = useState(''); + const onImageUpload = (e) => { + const reader = new FileReader(); + reader.onload = (e) => { + setEditorThumImg(e.target.result); + }; + reader.readAsDataURL(e.target.files[0]); + }; + + return ( + <> + + + + + + + + ); +}; + +export default ImageUpload; + +const ThumbNailImg = styled.img` + position: relative; + width: 100%; + height: 30.7rem; + object-fit: cover; +`; + +const ImageLabel = styled.label` + position: absolute; + right: 27.495rem; + bottom: 2.225rem; + z-index: 3; + + cursor: pointer; +`; + +const ImageInput = styled.input` + display: none; +`; diff --git a/src/pages/postPage/components/editor.css b/src/pages/postPage/components/editor.css index 0b19be01..628a1342 100644 --- a/src/pages/postPage/components/editor.css +++ b/src/pages/postPage/components/editor.css @@ -1,3 +1,10 @@ +.text-editor { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} + .ql-container { width: 82.5rem; height: 64.5rem; From 37dca8527e7d78bfb05aef315cdfe53e60edf487 Mon Sep 17 00:00:00 2001 From: se0jinYoon Date: Mon, 15 Jan 2024 15:29:29 +0900 Subject: [PATCH 2/5] =?UTF-8?q?feat:=20=EC=9D=B4=EB=AF=B8=EC=A7=80=20?= =?UTF-8?q?=EC=97=85=EB=A1=9C=EB=93=9C=20=EB=B2=84=ED=8A=BC=20hover=20?= =?UTF-8?q?=EC=A0=81=EC=9A=A9,=20=EA=B8=B0=EB=B3=B8=20=EC=9D=B4=EB=AF=B8?= =?UTF-8?q?=EC=A7=80=20=EB=84=A3=EA=B8=B0,=20=EB=B2=84=ED=8A=BC=20?= =?UTF-8?q?=EC=9C=84=EC=B9=98=20=EC=A1=B0=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../svgs/editorThuminputIcnUnactive.svg | 11 ++-- src/assets/svgs/index.tsx | 6 +-- src/pages/postPage/components/ImageUpload.tsx | 51 +++++++++++++++---- 3 files changed, 49 insertions(+), 19 deletions(-) diff --git a/src/assets/svgs/editorThuminputIcnUnactive.svg b/src/assets/svgs/editorThuminputIcnUnactive.svg index a96ee97d..81ef4e52 100644 --- a/src/assets/svgs/editorThuminputIcnUnactive.svg +++ b/src/assets/svgs/editorThuminputIcnUnactive.svg @@ -1,9 +1,10 @@ - - - + + + + - - + + diff --git a/src/assets/svgs/index.tsx b/src/assets/svgs/index.tsx index 71e0bffe..230e54fc 100644 --- a/src/assets/svgs/index.tsx +++ b/src/assets/svgs/index.tsx @@ -49,6 +49,6 @@ export { default as QuestioHoverIc } from './questionHoverIc.svg?react'; export { default as GroupThumnailImgIc } from './groupThumnailImg.svg?react'; -export { default as EditorThuminputIcnUnactive } from './editorThuminputIcnUnactive.svg?react'; -export { default as EditorThuminputIcnHover } from './editorThuminputIcnHover.svg?react'; -export { default as EditorThuminputIcnActive } from './editorThuminputIcnHover.svg?react'; +export { default as EditorThuminputIcnUnactiveIc } from './editorThuminputIcnUnactive.svg?react'; +export { default as EditorThuminputIcnHoverIc } from './editorThuminputIcnHover.svg?react'; +export { default as EditorThuminputIcnActiveIc } from './editorThuminputIcnHover.svg?react'; diff --git a/src/pages/postPage/components/ImageUpload.tsx b/src/pages/postPage/components/ImageUpload.tsx index b686874f..be6dec8c 100644 --- a/src/pages/postPage/components/ImageUpload.tsx +++ b/src/pages/postPage/components/ImageUpload.tsx @@ -1,11 +1,11 @@ import styled from '@emotion/styled'; -import { useState } from 'react'; +import React, { useState } from 'react'; import { - EditorThuminputIcnUnactive, - EditorThuminputIcnHover, - EditorThuminputIcnActive, + EditorThuminputIcnUnactiveIc, + EditorThuminputIcnHoverIc, + EditorThuminputIcnActiveIc, } from './../../../assets/svgs'; import Spacing from '../../../components/commons/Spacing'; @@ -19,13 +19,24 @@ const ImageUpload = () => { reader.readAsDataURL(e.target.files[0]); }; + // 기본 이미지 박아넣기 (조건부 렌더링 - state하나 만들기) + // 이미지 업로드 버튼 위치 조정 + // 이미지 업로드 버튼 호버, active 조정 (위에서 만든 state로 관리 가능) + // 이미지 업로드 함수 타입 지정해서 에러 없애기 + return ( <> - + + + - - - + + {editorThumImg.length > 0 ? ( + + ) : ( + + )} + ); @@ -33,22 +44,40 @@ const ImageUpload = () => { export default ImageUpload; -const ThumbNailImg = styled.img` +const ThumbNailGradient = styled.div` + background: ${({ theme }) => theme.colors.thumbnailGradient}; +`; + +const ThumbNailImg = styled.img<{ $imgExist: string }>` position: relative; + display: inline-block; width: 100%; height: 30.7rem; object-fit: cover; + + background-color: #e4f4b5; + + ${({ $imgExist }) => $imgExist.length === 0 && 'content: "";'} `; -const ImageLabel = styled.label` +const ImageUploadBtn = styled.label` position: absolute; + top: 23rem; right: 27.495rem; - bottom: 2.225rem; z-index: 3; cursor: pointer; `; +const EditorThuminputIcnActiveIcon = styled(EditorThuminputIcnUnactiveIc)` + :hover { + path { + fill: ${({ theme }) => theme.colors.mainViolet}; + stroke: ${({ theme }) => theme.colors.mainViolet}; + } + } +`; + const ImageInput = styled.input` display: none; `; From 23b1efa84740f769b51ac0718e6dd1a8a2ddfc3f Mon Sep 17 00:00:00 2001 From: se0jinYoon Date: Mon, 15 Jan 2024 17:24:42 +0900 Subject: [PATCH 3/5] =?UTF-8?q?design:=20=EC=A4=91=EC=95=99=EC=A0=95?= =?UTF-8?q?=EB=A0=AC=20fix?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/postPage/PostPage.tsx | 2 +- src/pages/postPage/components/editor.css | 3 ++- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/src/pages/postPage/PostPage.tsx b/src/pages/postPage/PostPage.tsx index ec3b2e63..f1255e91 100644 --- a/src/pages/postPage/PostPage.tsx +++ b/src/pages/postPage/PostPage.tsx @@ -58,6 +58,7 @@ const PostPage = () => { + ); }; @@ -77,5 +78,4 @@ const DropDownEditorWrapper = styled.div` align-items: center; justify-content: center; width: 100%; - padding: 0 27rem; `; diff --git a/src/pages/postPage/components/editor.css b/src/pages/postPage/components/editor.css index 628a1342..f3482d39 100644 --- a/src/pages/postPage/components/editor.css +++ b/src/pages/postPage/components/editor.css @@ -3,11 +3,12 @@ flex-direction: column; justify-content: center; align-items: center; + width: 82.6rem; } .ql-container { width: 82.5rem; - height: 64.5rem; + min-height: 64.5rem; padding: 2.8rem; border-radius: 0.8rem; background-color: white; From 63e20103e6c6101ebd2a849c46cb85f563303e53 Mon Sep 17 00:00:00 2001 From: se0jinYoon Date: Tue, 16 Jan 2024 14:36:25 +0900 Subject: [PATCH 4/5] =?UTF-8?q?feat:=20=EC=97=90=EB=94=94=ED=84=B0=20?= =?UTF-8?q?=EB=B7=B0=20=ED=95=98=EB=82=98=EB=A1=9C=20=ED=95=A9=EC=B9=A8,?= =?UTF-8?q?=20=ED=95=A8=EC=88=98=20=ED=83=80=EC=9E=85=20=EC=97=90=EB=9F=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/svgs/editorBoldSvgActive.svg | 17 ++++--- src/assets/svgs/editorBoldSvgActivehover.svg | 16 +++++++ src/assets/svgs/editorBoldSvgEnable.svg | 16 +++++++ src/assets/svgs/editorBoldSvgHover.svg | 17 ++++--- src/assets/svgs/editorBoldSvgc.svg | 9 ---- src/assets/svgs/editorBulletSvgActive.svg | 22 +++++++--- .../svgs/editorBulletSvgActivehover.svg | 21 +++++++++ src/assets/svgs/editorBulletSvgEnable.svg | 22 +++++++--- src/assets/svgs/editorBulletSvgHover.svg | 22 +++++++--- src/assets/svgs/editorCenterSvgActive.svg | 17 +++++-- .../svgs/editorCenterSvgActivehover.svg | 20 +++++++++ src/assets/svgs/editorCenterSvgEnable.svg | 17 +++++-- src/assets/svgs/editorCenterSvgHover.svg | 17 +++++-- src/assets/svgs/editorHorizonIcnUnactive.svg | 8 ---- src/assets/svgs/editorHorizonSvgActive.svg | 6 +-- .../svgs/editorHorizonSvgActivehover.svg | 9 ++++ src/assets/svgs/editorHorizonSvgEnable.svg | 6 +-- src/assets/svgs/editorHorizonSvgHover.svg | 6 +-- src/assets/svgs/editorItalicSvgActive.svg | 6 +-- .../svgs/editorItalicSvgActivehover.svg | 9 ++++ src/assets/svgs/editorItalicSvgEnable.svg | 6 +-- src/assets/svgs/editorItalicSvgHover.svg | 6 +-- src/assets/svgs/editorLeftSvgActive.svg | 17 +++++-- src/assets/svgs/editorLeftSvgActivehover.svg | 20 +++++++++ src/assets/svgs/editorLeftSvgEnable.svg | 17 +++++-- src/assets/svgs/editorLeftSvgHover.svg | 17 +++++-- src/assets/svgs/editorLineSvgActive.svg | 14 ++++-- src/assets/svgs/editorLineSvgActivehover.svg | 17 +++++++ src/assets/svgs/editorLineSvgEnable.svg | 14 ++++-- src/assets/svgs/editorLineSvgHover.svg | 14 ++++-- src/assets/svgs/editorNumberSvgActive.svg | 20 +++++++-- .../svgs/editorNumberSvgActivehover.svg | 21 +++++++++ src/assets/svgs/editorNumberSvgEnable.svg | 18 ++++++-- src/assets/svgs/editorNumberSvgHover.svg | 18 ++++++-- src/assets/svgs/editorQuoteSvgActive.svg | 15 +++++-- src/assets/svgs/editorQuoteSvgActivehover.svg | 16 +++++++ src/assets/svgs/editorQuoteSvgEnable.svg | 13 ++++-- src/assets/svgs/editorQuoteSvgHover.svg | 13 ++++-- src/assets/svgs/editorStrikeSvgActive.svg | 19 +++++--- .../svgs/editorStrikeSvgActivehover.svg | 18 ++++++++ src/assets/svgs/editorStrikeSvgEnable.svg | 19 +++++--- src/assets/svgs/editorStrikeSvgHover.svg | 19 +++++--- src/assets/svgs/index.tsx | 1 - src/pages/postPage/PostPage.tsx | 2 +- src/pages/postPage/components/DropDown.tsx | 2 +- src/pages/postPage/components/ImageUpload.tsx | 43 +++++++++--------- src/pages/postPage/components/editor.css | 44 ++++++++++++++----- 47 files changed, 568 insertions(+), 158 deletions(-) create mode 100644 src/assets/svgs/editorBoldSvgActivehover.svg create mode 100644 src/assets/svgs/editorBoldSvgEnable.svg delete mode 100644 src/assets/svgs/editorBoldSvgc.svg create mode 100644 src/assets/svgs/editorBulletSvgActivehover.svg create mode 100644 src/assets/svgs/editorCenterSvgActivehover.svg delete mode 100644 src/assets/svgs/editorHorizonIcnUnactive.svg create mode 100644 src/assets/svgs/editorHorizonSvgActivehover.svg create mode 100644 src/assets/svgs/editorItalicSvgActivehover.svg create mode 100644 src/assets/svgs/editorLeftSvgActivehover.svg create mode 100644 src/assets/svgs/editorLineSvgActivehover.svg create mode 100644 src/assets/svgs/editorNumberSvgActivehover.svg create mode 100644 src/assets/svgs/editorQuoteSvgActivehover.svg create mode 100644 src/assets/svgs/editorStrikeSvgActivehover.svg diff --git a/src/assets/svgs/editorBoldSvgActive.svg b/src/assets/svgs/editorBoldSvgActive.svg index d7157ebd..8e432f5d 100644 --- a/src/assets/svgs/editorBoldSvgActive.svg +++ b/src/assets/svgs/editorBoldSvgActive.svg @@ -1,9 +1,16 @@ - - - - + + + + - + + + + + + + + diff --git a/src/assets/svgs/editorBoldSvgActivehover.svg b/src/assets/svgs/editorBoldSvgActivehover.svg new file mode 100644 index 00000000..af5686bc --- /dev/null +++ b/src/assets/svgs/editorBoldSvgActivehover.svg @@ -0,0 +1,16 @@ + + + + + + + + + + + + + + + + diff --git a/src/assets/svgs/editorBoldSvgEnable.svg b/src/assets/svgs/editorBoldSvgEnable.svg new file mode 100644 index 00000000..1c50284f --- /dev/null +++ b/src/assets/svgs/editorBoldSvgEnable.svg @@ -0,0 +1,16 @@ + + + + + + + + + + + + + + + + diff --git a/src/assets/svgs/editorBoldSvgHover.svg b/src/assets/svgs/editorBoldSvgHover.svg index 80a2478a..e15c71b0 100644 --- a/src/assets/svgs/editorBoldSvgHover.svg +++ b/src/assets/svgs/editorBoldSvgHover.svg @@ -1,9 +1,16 @@ - - - - + + + + - + + + + + + + + diff --git a/src/assets/svgs/editorBoldSvgc.svg b/src/assets/svgs/editorBoldSvgc.svg deleted file mode 100644 index e69025e4..00000000 --- a/src/assets/svgs/editorBoldSvgc.svg +++ /dev/null @@ -1,9 +0,0 @@ - - - - - - - - - diff --git a/src/assets/svgs/editorBulletSvgActive.svg b/src/assets/svgs/editorBulletSvgActive.svg index c01c89f9..1d49ef20 100644 --- a/src/assets/svgs/editorBulletSvgActive.svg +++ b/src/assets/svgs/editorBulletSvgActive.svg @@ -1,9 +1,21 @@ - - - - + + + + - + + + + + + + + + + + + + diff --git a/src/assets/svgs/editorBulletSvgActivehover.svg b/src/assets/svgs/editorBulletSvgActivehover.svg new file mode 100644 index 00000000..bf8c9fd1 --- /dev/null +++ b/src/assets/svgs/editorBulletSvgActivehover.svg @@ -0,0 +1,21 @@ + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/svgs/editorBulletSvgEnable.svg b/src/assets/svgs/editorBulletSvgEnable.svg index c643405b..5772d828 100644 --- a/src/assets/svgs/editorBulletSvgEnable.svg +++ b/src/assets/svgs/editorBulletSvgEnable.svg @@ -1,9 +1,21 @@ - - - - + + + + - + + + + + + + + + + + + + diff --git a/src/assets/svgs/editorBulletSvgHover.svg b/src/assets/svgs/editorBulletSvgHover.svg index ef3c76e5..58a68fbe 100644 --- a/src/assets/svgs/editorBulletSvgHover.svg +++ b/src/assets/svgs/editorBulletSvgHover.svg @@ -1,9 +1,21 @@ - - - - + + + + - + + + + + + + + + + + + + diff --git a/src/assets/svgs/editorCenterSvgActive.svg b/src/assets/svgs/editorCenterSvgActive.svg index 3c33b088..f4cdc10e 100644 --- a/src/assets/svgs/editorCenterSvgActive.svg +++ b/src/assets/svgs/editorCenterSvgActive.svg @@ -1,9 +1,20 @@ - + - + - + + + + + + + + + + + + diff --git a/src/assets/svgs/editorCenterSvgActivehover.svg b/src/assets/svgs/editorCenterSvgActivehover.svg new file mode 100644 index 00000000..8944565b --- /dev/null +++ b/src/assets/svgs/editorCenterSvgActivehover.svg @@ -0,0 +1,20 @@ + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/svgs/editorCenterSvgEnable.svg b/src/assets/svgs/editorCenterSvgEnable.svg index 17d5bc55..c1bf616b 100644 --- a/src/assets/svgs/editorCenterSvgEnable.svg +++ b/src/assets/svgs/editorCenterSvgEnable.svg @@ -1,9 +1,20 @@ - + - + - + + + + + + + + + + + + diff --git a/src/assets/svgs/editorCenterSvgHover.svg b/src/assets/svgs/editorCenterSvgHover.svg index cff6692d..bb80031d 100644 --- a/src/assets/svgs/editorCenterSvgHover.svg +++ b/src/assets/svgs/editorCenterSvgHover.svg @@ -1,9 +1,20 @@ - + - + - + + + + + + + + + + + + diff --git a/src/assets/svgs/editorHorizonIcnUnactive.svg b/src/assets/svgs/editorHorizonIcnUnactive.svg deleted file mode 100644 index f7f08c39..00000000 --- a/src/assets/svgs/editorHorizonIcnUnactive.svg +++ /dev/null @@ -1,8 +0,0 @@ - - - - - - - - diff --git a/src/assets/svgs/editorHorizonSvgActive.svg b/src/assets/svgs/editorHorizonSvgActive.svg index 3e2efaaa..ca79288f 100644 --- a/src/assets/svgs/editorHorizonSvgActive.svg +++ b/src/assets/svgs/editorHorizonSvgActive.svg @@ -1,9 +1,9 @@ - + - + - + diff --git a/src/assets/svgs/editorHorizonSvgActivehover.svg b/src/assets/svgs/editorHorizonSvgActivehover.svg new file mode 100644 index 00000000..9ff08890 --- /dev/null +++ b/src/assets/svgs/editorHorizonSvgActivehover.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/assets/svgs/editorHorizonSvgEnable.svg b/src/assets/svgs/editorHorizonSvgEnable.svg index 2435a47c..b4580e9d 100644 --- a/src/assets/svgs/editorHorizonSvgEnable.svg +++ b/src/assets/svgs/editorHorizonSvgEnable.svg @@ -1,9 +1,9 @@ - + - + - + diff --git a/src/assets/svgs/editorHorizonSvgHover.svg b/src/assets/svgs/editorHorizonSvgHover.svg index afcc794d..2b450b63 100644 --- a/src/assets/svgs/editorHorizonSvgHover.svg +++ b/src/assets/svgs/editorHorizonSvgHover.svg @@ -1,9 +1,9 @@ - + - + - + diff --git a/src/assets/svgs/editorItalicSvgActive.svg b/src/assets/svgs/editorItalicSvgActive.svg index 648a0e32..69f75c9e 100644 --- a/src/assets/svgs/editorItalicSvgActive.svg +++ b/src/assets/svgs/editorItalicSvgActive.svg @@ -1,9 +1,9 @@ - + - + - + diff --git a/src/assets/svgs/editorItalicSvgActivehover.svg b/src/assets/svgs/editorItalicSvgActivehover.svg new file mode 100644 index 00000000..51a351f4 --- /dev/null +++ b/src/assets/svgs/editorItalicSvgActivehover.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/assets/svgs/editorItalicSvgEnable.svg b/src/assets/svgs/editorItalicSvgEnable.svg index d3627a8f..1b703de6 100644 --- a/src/assets/svgs/editorItalicSvgEnable.svg +++ b/src/assets/svgs/editorItalicSvgEnable.svg @@ -1,9 +1,9 @@ - + - + - + diff --git a/src/assets/svgs/editorItalicSvgHover.svg b/src/assets/svgs/editorItalicSvgHover.svg index 4dbda422..90366b2f 100644 --- a/src/assets/svgs/editorItalicSvgHover.svg +++ b/src/assets/svgs/editorItalicSvgHover.svg @@ -1,9 +1,9 @@ - + - + - + diff --git a/src/assets/svgs/editorLeftSvgActive.svg b/src/assets/svgs/editorLeftSvgActive.svg index 906ea894..de438fd0 100644 --- a/src/assets/svgs/editorLeftSvgActive.svg +++ b/src/assets/svgs/editorLeftSvgActive.svg @@ -1,9 +1,20 @@ - + - + - + + + + + + + + + + + + diff --git a/src/assets/svgs/editorLeftSvgActivehover.svg b/src/assets/svgs/editorLeftSvgActivehover.svg new file mode 100644 index 00000000..78422d50 --- /dev/null +++ b/src/assets/svgs/editorLeftSvgActivehover.svg @@ -0,0 +1,20 @@ + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/svgs/editorLeftSvgEnable.svg b/src/assets/svgs/editorLeftSvgEnable.svg index 0c7a4084..449dc90f 100644 --- a/src/assets/svgs/editorLeftSvgEnable.svg +++ b/src/assets/svgs/editorLeftSvgEnable.svg @@ -1,9 +1,20 @@ - + - + - + + + + + + + + + + + + diff --git a/src/assets/svgs/editorLeftSvgHover.svg b/src/assets/svgs/editorLeftSvgHover.svg index 56c2617e..b798cd7d 100644 --- a/src/assets/svgs/editorLeftSvgHover.svg +++ b/src/assets/svgs/editorLeftSvgHover.svg @@ -1,9 +1,20 @@ - + - + - + + + + + + + + + + + + diff --git a/src/assets/svgs/editorLineSvgActive.svg b/src/assets/svgs/editorLineSvgActive.svg index b52d0f0b..8c5935c6 100644 --- a/src/assets/svgs/editorLineSvgActive.svg +++ b/src/assets/svgs/editorLineSvgActive.svg @@ -1,9 +1,17 @@ - + - + - + + + + + + + + + diff --git a/src/assets/svgs/editorLineSvgActivehover.svg b/src/assets/svgs/editorLineSvgActivehover.svg new file mode 100644 index 00000000..287f67e0 --- /dev/null +++ b/src/assets/svgs/editorLineSvgActivehover.svg @@ -0,0 +1,17 @@ + + + + + + + + + + + + + + + + + diff --git a/src/assets/svgs/editorLineSvgEnable.svg b/src/assets/svgs/editorLineSvgEnable.svg index 1e9d4147..08903b0b 100644 --- a/src/assets/svgs/editorLineSvgEnable.svg +++ b/src/assets/svgs/editorLineSvgEnable.svg @@ -1,9 +1,17 @@ - + - + - + + + + + + + + + diff --git a/src/assets/svgs/editorLineSvgHover.svg b/src/assets/svgs/editorLineSvgHover.svg index 52f15210..2bdebaaf 100644 --- a/src/assets/svgs/editorLineSvgHover.svg +++ b/src/assets/svgs/editorLineSvgHover.svg @@ -1,9 +1,17 @@ - + - + - + + + + + + + + + diff --git a/src/assets/svgs/editorNumberSvgActive.svg b/src/assets/svgs/editorNumberSvgActive.svg index 5d80f77f..5ea187bc 100644 --- a/src/assets/svgs/editorNumberSvgActive.svg +++ b/src/assets/svgs/editorNumberSvgActive.svg @@ -1,9 +1,21 @@ - - - + + + - + + + + + + + + + + + + + diff --git a/src/assets/svgs/editorNumberSvgActivehover.svg b/src/assets/svgs/editorNumberSvgActivehover.svg new file mode 100644 index 00000000..76d2f874 --- /dev/null +++ b/src/assets/svgs/editorNumberSvgActivehover.svg @@ -0,0 +1,21 @@ + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/svgs/editorNumberSvgEnable.svg b/src/assets/svgs/editorNumberSvgEnable.svg index a6cefbaa..2fff6383 100644 --- a/src/assets/svgs/editorNumberSvgEnable.svg +++ b/src/assets/svgs/editorNumberSvgEnable.svg @@ -1,9 +1,21 @@ - + - + - + + + + + + + + + + + + + diff --git a/src/assets/svgs/editorNumberSvgHover.svg b/src/assets/svgs/editorNumberSvgHover.svg index 12bb7cd7..d7ba9254 100644 --- a/src/assets/svgs/editorNumberSvgHover.svg +++ b/src/assets/svgs/editorNumberSvgHover.svg @@ -1,9 +1,21 @@ - + - + - + + + + + + + + + + + + + diff --git a/src/assets/svgs/editorQuoteSvgActive.svg b/src/assets/svgs/editorQuoteSvgActive.svg index 0bf97bc3..7d39d144 100644 --- a/src/assets/svgs/editorQuoteSvgActive.svg +++ b/src/assets/svgs/editorQuoteSvgActive.svg @@ -1,9 +1,16 @@ - - - + + + - + + + + + + + + diff --git a/src/assets/svgs/editorQuoteSvgActivehover.svg b/src/assets/svgs/editorQuoteSvgActivehover.svg new file mode 100644 index 00000000..a243e87b --- /dev/null +++ b/src/assets/svgs/editorQuoteSvgActivehover.svg @@ -0,0 +1,16 @@ + + + + + + + + + + + + + + + + diff --git a/src/assets/svgs/editorQuoteSvgEnable.svg b/src/assets/svgs/editorQuoteSvgEnable.svg index f1d37707..4dceb294 100644 --- a/src/assets/svgs/editorQuoteSvgEnable.svg +++ b/src/assets/svgs/editorQuoteSvgEnable.svg @@ -1,9 +1,16 @@ - + - + - + + + + + + + + diff --git a/src/assets/svgs/editorQuoteSvgHover.svg b/src/assets/svgs/editorQuoteSvgHover.svg index 3df17b31..6b6c6fba 100644 --- a/src/assets/svgs/editorQuoteSvgHover.svg +++ b/src/assets/svgs/editorQuoteSvgHover.svg @@ -1,9 +1,16 @@ - + - + - + + + + + + + + diff --git a/src/assets/svgs/editorStrikeSvgActive.svg b/src/assets/svgs/editorStrikeSvgActive.svg index e9540c1d..92102fa2 100644 --- a/src/assets/svgs/editorStrikeSvgActive.svg +++ b/src/assets/svgs/editorStrikeSvgActive.svg @@ -1,9 +1,18 @@ - - - - + + + + - + + + + + + + + + + diff --git a/src/assets/svgs/editorStrikeSvgActivehover.svg b/src/assets/svgs/editorStrikeSvgActivehover.svg new file mode 100644 index 00000000..66c43e1b --- /dev/null +++ b/src/assets/svgs/editorStrikeSvgActivehover.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + + + diff --git a/src/assets/svgs/editorStrikeSvgEnable.svg b/src/assets/svgs/editorStrikeSvgEnable.svg index 868f4039..aef93466 100644 --- a/src/assets/svgs/editorStrikeSvgEnable.svg +++ b/src/assets/svgs/editorStrikeSvgEnable.svg @@ -1,9 +1,18 @@ - - - - + + + + - + + + + + + + + + + diff --git a/src/assets/svgs/editorStrikeSvgHover.svg b/src/assets/svgs/editorStrikeSvgHover.svg index b96b0318..4e729267 100644 --- a/src/assets/svgs/editorStrikeSvgHover.svg +++ b/src/assets/svgs/editorStrikeSvgHover.svg @@ -1,9 +1,18 @@ - - - - + + + + - + + + + + + + + + + diff --git a/src/assets/svgs/index.tsx b/src/assets/svgs/index.tsx index 0b4444da..11fd0609 100644 --- a/src/assets/svgs/index.tsx +++ b/src/assets/svgs/index.tsx @@ -1,4 +1,3 @@ -export { default as EditorHorizonIcnUnactiveSvg } from './editorHorizonIcnUnactive.svg?react'; export { default as EditorTextColorIcnBlackSvg } from './editorTextcolorIcnBlack.svg?react'; export { default as DefaultProfileIc } from './defaultProfileIc.svg?react'; export { default as DetailCommentMeatBallIc } from './detailCommentMeatBallIc.svg?react'; diff --git a/src/pages/postPage/PostPage.tsx b/src/pages/postPage/PostPage.tsx index f1255e91..31accfdb 100644 --- a/src/pages/postPage/PostPage.tsx +++ b/src/pages/postPage/PostPage.tsx @@ -52,7 +52,7 @@ const PostPage = () => { )} - + {/* */} diff --git a/src/pages/postPage/components/DropDown.tsx b/src/pages/postPage/components/DropDown.tsx index 48b963fd..7fe7f2bd 100644 --- a/src/pages/postPage/components/DropDown.tsx +++ b/src/pages/postPage/components/DropDown.tsx @@ -1,7 +1,7 @@ /* eslint-disable no-unused-vars */ import styled from '@emotion/styled'; -import { useState, useRef } from 'react'; +import { useState } from 'react'; import TopicDropDown from './TopicDropDown'; import WriterDropDown from './WriterDropDown'; diff --git a/src/pages/postPage/components/ImageUpload.tsx b/src/pages/postPage/components/ImageUpload.tsx index c8db7cb7..c8234694 100644 --- a/src/pages/postPage/components/ImageUpload.tsx +++ b/src/pages/postPage/components/ImageUpload.tsx @@ -2,28 +2,23 @@ import styled from '@emotion/styled'; import React, { useState } from 'react'; -import { - EditorThuminputIcnUnactiveIc, - EditorThuminputIcnHoverIc, - EditorThuminputIcnActiveIc, -} from './../../../assets/svgs'; -import Spacing from '../../../components/commons/Spacing'; +import { EditorThuminputIcnUnactiveIc, EditorThuminputIcnActiveIc } from './../../../assets/svgs'; const ImageUpload = () => { const [editorThumImg, setEditorThumImg] = useState(''); - const onImageUpload = (e) => { + const onImageUpload = (e: React.ChangeEvent) => { const reader = new FileReader(); reader.onload = (e) => { - setEditorThumImg(e.target.result); + const target = e.target as FileReader; + if (target) { + setEditorThumImg(target.result as string); + } }; - reader.readAsDataURL(e.target.files[0]); + if (e.target.files && e.target.files[0]) { + reader.readAsDataURL(e.target.files[0]); + } }; - // 기본 이미지 박아넣기 (조건부 렌더링 - state하나 만들기) - // 이미지 업로드 버튼 위치 조정 - // 이미지 업로드 버튼 호버, active 조정 (위에서 만든 state로 관리 가능) - // 이미지 업로드 함수 타입 지정해서 에러 없애기 - return ( <> @@ -32,9 +27,9 @@ const ImageUpload = () => { {editorThumImg.length > 0 ? ( - - ) : ( + ) : ( + )} @@ -52,23 +47,27 @@ const ThumbNailImg = styled.img<{ $imgExist: string }>` display: inline-block; width: 100%; height: 30.7rem; - object-fit: cover; - + object-fit: cover; //픽스 background-color: #e4f4b5; ${({ $imgExist }) => $imgExist.length === 0 && 'content: "";'} `; const ImageUploadBtn = styled.label` - position: absolute; - top: 29.4rem; - right: 27.495rem; + position: relative; + top: -7.1rem; + right: 0; z-index: 3; cursor: pointer; `; -const EditorThuminputIcnActiveIcon = styled(EditorThuminputIcnUnactiveIc)` +const EditorThuminputIcnActiveIcon = styled(EditorThuminputIcnActiveIc)` + margin-left: 74%; +`; + +const EditorThuminputIcnUnactiveIcon = styled(EditorThuminputIcnUnactiveIc)` + margin-left: 74%; :hover { path { fill: ${({ theme }) => theme.colors.mainViolet}; diff --git a/src/pages/postPage/components/editor.css b/src/pages/postPage/components/editor.css index f3482d39..2b4129ab 100644 --- a/src/pages/postPage/components/editor.css +++ b/src/pages/postPage/components/editor.css @@ -61,6 +61,19 @@ color: #a5a5a5 !important; } +/* 버튼 옆 보더 */ +.ql-picker.ql-size { + border-right: 1px solid #d3d3d3; +} +.ql-color > .ql-picker-label, +.ql-background > .ql-picker-label { + width: 8.1rem; + border-right: 1px solid #d3d3d3; +} +.ql-toolbar > button { + border-right: 1px solid #d3d3d3; +} + /* 글자 크기 커스텀 */ .ql-size { width: 10.1rem; @@ -420,11 +433,12 @@ font-weight: bold; } button.ql-bold { - width: 2.4rem !important; - height: 2.4rem !important; + width: 2.6rem !important; + height: 2.5rem !important; + border-right: 1px solid #d3d3d3 !important; } .ql-bold { - background-image: url(../../../assets/svgs/editorBoldSvgc.svg) !important; + background-image: url(../../../assets/svgs/editorBoldSvgEnable.svg) !important; } .ql-bold:hover { background-image: url(../../../assets/svgs/editorBoldSvgHover.svg) !important; @@ -438,8 +452,9 @@ button.ql-bold { /* 밑줄 커스텀 */ button.ql-underline { - width: 2.5rem !important; + width: 2.6rem !important; height: 2.5rem !important; + border-right: 1px solid #d3d3d3 !important; } .ql-underline { background-image: url(../../../assets/svgs/editorLineSvgEnable.svg) !important; @@ -453,8 +468,9 @@ button.ql-underline { /* 취소선 커스텀 */ button.ql-strike { - width: 2.5rem !important; + width: 2.6rem !important; height: 2.5rem !important; + border-right: 1px solid #d3d3d3 !important; } .ql-strike { background-image: url(../../../assets/svgs/editorStrikeSvgEnable.svg) !important; @@ -471,8 +487,9 @@ button.ql-strike { font-style: italic; } button.ql-italic { - width: 2.5rem !important; + width: 2.6rem !important; height: 2.5rem !important; + border-right: 1px solid #d3d3d3 !important; } .ql-italic { background-image: url(../../../assets/svgs/editorItalicSvgEnable.svg) !important; @@ -486,8 +503,9 @@ button.ql-italic { /* 왼쪽 정렬 커스텀 */ button.ql-align { - width: 2.5rem !important; + width: 2.6rem !important; height: 2.5rem !important; + border-right: 1px solid #d3d3d3 !important; } .ql-align { background-image: url(../../../assets/svgs/editorLeftSvgEnable.svg) !important; @@ -512,8 +530,9 @@ button.ql-align { /* bullet 리스트 커스텀 */ button.ql-list { - width: 2.5rem !important; + width: 2.6rem !important; height: 2.5rem !important; + border-right: 1px solid #d3d3d3 !important; } .ql-list.ql-bullet { background-image: url(../../../assets/svgs/editorBulletSvgEnable.svg) !important; @@ -538,8 +557,9 @@ button.ql-list { /* 인용구 커스텀 */ button.ql-blockquote { - width: 2.5rem !important; + width: 2.6rem !important; height: 2.5rem !important; + border-right: 1px solid #d3d3d3 !important; } .ql-bubble .ql-editor blockquote { border-left: 4px solid #6139d1; @@ -557,8 +577,9 @@ button.ql-blockquote { /* 구분선 커스텀 */ .ql-divider { - width: 2.5rem !important; + width: 2.6rem !important; height: 2.5rem !important; + border-right: 1px solid #d3d3d3 !important; } .ql-divider { background-image: url(../../../assets/svgs/editorHorizonSvgEnable.svg) !important; @@ -572,7 +593,8 @@ button.ql-blockquote { /* 리스트 앞에 글머리 커스텀 */ li:has(.ql-size-large)::before { - font-size: 2.6rem !important; + font-size: 2.6 + rem !important; line-height: 200% !important; } li:has(.ql-size-medium)::before { From c87d04bce780d4f3fbf0f7fa9e8d633ac82bed1d Mon Sep 17 00:00:00 2001 From: se0jinYoon Date: Tue, 16 Jan 2024 16:55:57 +0900 Subject: [PATCH 5/5] =?UTF-8?q?feat:=20alert=20=EC=B0=BD=20=ED=95=A8?= =?UTF-8?q?=EC=88=98=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/postPage/PostPage.tsx | 12 +++++++++--- src/pages/postPage/components/ImageUpload.tsx | 10 +++++----- src/pages/postPage/components/editor.css | 12 +++++++++--- 3 files changed, 23 insertions(+), 11 deletions(-) diff --git a/src/pages/postPage/PostPage.tsx b/src/pages/postPage/PostPage.tsx index 31accfdb..8adf06b8 100644 --- a/src/pages/postPage/PostPage.tsx +++ b/src/pages/postPage/PostPage.tsx @@ -1,7 +1,7 @@ import styled from '@emotion/styled'; -import { useParams } from 'react-router-dom'; +import { useParams, useNavigate } from 'react-router-dom'; -import { useState, useReducer } from 'react'; +import { useState } from 'react'; import DropDown from './components/DropDown'; import Editor from './components/Editor'; @@ -15,6 +15,7 @@ import { import Spacing from '../../components/commons/Spacing'; const PostPage = () => { + const navigate = useNavigate(); // 에디터 제목, 내용 저장 함수 const [title, setTitle] = useState(''); const [content, setContent] = useState(''); @@ -36,13 +37,18 @@ const PostPage = () => { // moimID // topicId : 글감주제 드롭다운에서 가져오기 // anonymous : 필명/익명 드롭다운에서 가져오기 + navigate('./'); + + alert('제출이 완료되었습니다.'); }; // 임시 저장 글 -> 저장하기 const tempExistSaveHandler = () => {}; // 임시 저장 - const tempSaveHandler = () => {}; + const tempSaveHandler = () => { + alert('홈으로 가기'); + }; return ( diff --git a/src/pages/postPage/components/ImageUpload.tsx b/src/pages/postPage/components/ImageUpload.tsx index c8234694..3bca5a66 100644 --- a/src/pages/postPage/components/ImageUpload.tsx +++ b/src/pages/postPage/components/ImageUpload.tsx @@ -25,13 +25,13 @@ const ImageUpload = () => { - + {editorThumImg.length > 0 ? ( ) : ( )} - + ); }; @@ -53,7 +53,7 @@ const ThumbNailImg = styled.img<{ $imgExist: string }>` ${({ $imgExist }) => $imgExist.length === 0 && 'content: "";'} `; -const ImageUploadBtn = styled.label` +const ImageUploadLabel = styled.label` position: relative; top: -7.1rem; right: 0; @@ -63,11 +63,11 @@ const ImageUploadBtn = styled.label` `; const EditorThuminputIcnActiveIcon = styled(EditorThuminputIcnActiveIc)` - margin-left: 74%; + margin-left: 69%; `; const EditorThuminputIcnUnactiveIcon = styled(EditorThuminputIcnUnactiveIc)` - margin-left: 74%; + margin-left: 69%; :hover { path { fill: ${({ theme }) => theme.colors.mainViolet}; diff --git a/src/pages/postPage/components/editor.css b/src/pages/postPage/components/editor.css index 2b4129ab..1e1c540e 100644 --- a/src/pages/postPage/components/editor.css +++ b/src/pages/postPage/components/editor.css @@ -428,6 +428,14 @@ display: none; } +.btn-wrapper { + /* display: flex; + justify-content: center; + align-items: center; */ + padding: 0.6rem; + border-right: 1px solid #d3d3d3 !important; +} + /* bold 커스텀 */ .ql-editor strong { font-weight: bold; @@ -435,7 +443,6 @@ button.ql-bold { width: 2.6rem !important; height: 2.5rem !important; - border-right: 1px solid #d3d3d3 !important; } .ql-bold { background-image: url(../../../assets/svgs/editorBoldSvgEnable.svg) !important; @@ -593,8 +600,7 @@ button.ql-blockquote { /* 리스트 앞에 글머리 커스텀 */ li:has(.ql-size-large)::before { - font-size: 2.6 - rem !important; + font-size: 2.6 rem !important; line-height: 200% !important; } li:has(.ql-size-medium)::before {