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/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..81ef4e52 --- /dev/null +++ b/src/assets/svgs/editorThuminputIcnUnactive.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/assets/svgs/index.tsx b/src/assets/svgs/index.tsx index ee932fda..d38c8686 100644 --- a/src/assets/svgs/index.tsx +++ b/src/assets/svgs/index.tsx @@ -1,3 +1,4 @@ +export { default as EditorTextColorIcnBlackSvg } from './editorTextcolorIcnBlack.svg?react'; export { default as DefaultProfileIc } from './defaultProfileIc.svg?react'; export { default as DetailCommentMeatBallIc } from './detailCommentMeatBallIc.svg?react'; export { default as EditorHorizonIcnUnactiveSvg } from './editorHorizonIcnUnactive.svg?react'; @@ -52,4 +53,8 @@ export { default as QuestioHoverIc } from './questionHoverIc.svg?react'; export { default as EditorDropIcnActiveIc } from './editorDropIcnActive.svg?react'; export { default as EditorDropIcnActiveOpenIc } from './editorDropIcnActiveopen.svg?react'; export { default as GroupThumnailImgIc } from './groupThumnailImg.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'; export { default as GroupCardThumnailImgIc } from './groupCardThumnailImg.svg'; diff --git a/src/components/commons/Header.tsx b/src/components/commons/Header.tsx index d2323b5c..219a8f76 100644 --- a/src/components/commons/Header.tsx +++ b/src/components/commons/Header.tsx @@ -102,6 +102,7 @@ const HeaderWrapper = styled.div` padding-right: 6rem; padding-left: 6rem; + background-color: ${({ theme }) => theme.colors.white}; border-bottom: 1px solid ${({ theme }) => theme.colors.gray30}; `; diff --git a/src/pages/postPage/PostPage.tsx b/src/pages/postPage/PostPage.tsx index 5ba4216e..90c994c1 100644 --- a/src/pages/postPage/PostPage.tsx +++ b/src/pages/postPage/PostPage.tsx @@ -1,14 +1,22 @@ import styled from '@emotion/styled'; + +import { useParams, useNavigate } from 'react-router-dom'; + import { useState } from 'react'; -import { useParams } from 'react-router-dom'; import DropDown from './components/DropDown'; import Editor from './components/Editor'; +import ImageUpload from './components/ImageUpload'; -import { EditorTempExistHeader, EditorTempNotExistHeader } from '../../components/commons/Header'; +import { + EditorEditHeader, // 수정하기 -> 헤더 + EditorTempNotExistHeader, // 임시저장 글 없음 -> 헤더 + EditorTempExistHeader, // 임시저장 글 있음 -> 헤더 +} from '../../components/commons/Header'; import Spacing from '../../components/commons/Spacing'; const PostPage = () => { + const navigate = useNavigate(); // 에디터 제목, 내용 저장 함수 const [title, setTitle] = useState(''); const [content, setContent] = useState(''); @@ -30,13 +38,18 @@ const PostPage = () => { // moimID // topicId : 글감주제 드롭다운에서 가져오기 // anonymous : 필명/익명 드롭다운에서 가져오기 + navigate('./'); + + alert('제출이 완료되었습니다.'); }; // 임시 저장 글 -> 저장하기 const tempExistSaveHandler = () => {}; // 임시 저장 - const tempSaveHandler = () => {}; + const tempSaveHandler = () => { + alert('홈으로 가기'); + }; return ( @@ -45,10 +58,14 @@ const PostPage = () => { ) : ( )} - - - - + + {/* */} + + + + + + ); }; @@ -62,3 +79,11 @@ const PostPageWrapper = styled.div` justify-content: center; width: 100%; `; + +const DropDownEditorWrapper = styled.div` + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + width: 100%; +`; diff --git a/src/pages/postPage/components/DropDown.tsx b/src/pages/postPage/components/DropDown.tsx index a8614ab0..7fe7f2bd 100644 --- a/src/pages/postPage/components/DropDown.tsx +++ b/src/pages/postPage/components/DropDown.tsx @@ -1,8 +1,8 @@ /* eslint-disable no-unused-vars */ -import { useState, useRef } from 'react'; - import styled from '@emotion/styled'; +import { useState } from 'react'; + import TopicDropDown from './TopicDropDown'; import WriterDropDown from './WriterDropDown'; @@ -20,15 +20,13 @@ const DropDown = () => { writer: '작자미상', }); - const dropDownRef = useRef(null); - // 드롭다운 리스트 중 선택된 값 저장 이벤트 핸들러 const handleListItem = (key: string, value: string) => { setSelectedValues((prev) => ({ ...prev, [key]: value })); }; return ( - + diff --git a/src/pages/postPage/components/ImageUpload.tsx b/src/pages/postPage/components/ImageUpload.tsx new file mode 100644 index 00000000..3bca5a66 --- /dev/null +++ b/src/pages/postPage/components/ImageUpload.tsx @@ -0,0 +1,81 @@ +import styled from '@emotion/styled'; + +import React, { useState } from 'react'; + +import { EditorThuminputIcnUnactiveIc, EditorThuminputIcnActiveIc } from './../../../assets/svgs'; + +const ImageUpload = () => { + const [editorThumImg, setEditorThumImg] = useState(''); + const onImageUpload = (e: React.ChangeEvent) => { + const reader = new FileReader(); + reader.onload = (e) => { + const target = e.target as FileReader; + if (target) { + setEditorThumImg(target.result as string); + } + }; + if (e.target.files && e.target.files[0]) { + reader.readAsDataURL(e.target.files[0]); + } + }; + + return ( + <> + + + + + + {editorThumImg.length > 0 ? ( + + ) : ( + + )} + + + ); +}; + +export default ImageUpload; + +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 ImageUploadLabel = styled.label` + position: relative; + top: -7.1rem; + right: 0; + z-index: 3; + + cursor: pointer; +`; + +const EditorThuminputIcnActiveIcon = styled(EditorThuminputIcnActiveIc)` + margin-left: 69%; +`; + +const EditorThuminputIcnUnactiveIcon = styled(EditorThuminputIcnUnactiveIc)` + margin-left: 69%; + :hover { + path { + fill: ${({ theme }) => theme.colors.mainViolet}; + stroke: ${({ theme }) => theme.colors.mainViolet}; + } + } +`; + +const ImageInput = styled.input` + display: none; +`; diff --git a/src/pages/postPage/components/editor.css b/src/pages/postPage/components/editor.css index 628a1342..1e1c540e 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; @@ -60,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; @@ -414,16 +428,24 @@ 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; } button.ql-bold { - width: 2.4rem !important; - height: 2.4rem !important; + width: 2.6rem !important; + height: 2.5rem !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; @@ -437,8 +459,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; @@ -452,8 +475,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; @@ -470,8 +494,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; @@ -485,8 +510,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; @@ -511,8 +537,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; @@ -537,8 +564,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; @@ -556,8 +584,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; @@ -571,7 +600,7 @@ 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 {