diff --git a/src/components/inputBox/index.tsx b/src/components/inputBox/index.tsx index ac3a8470..9c458c87 100644 --- a/src/components/inputBox/index.tsx +++ b/src/components/inputBox/index.tsx @@ -20,7 +20,7 @@ const InputBox = ({ textType = 'text', disabled = false, initialVal = '', - placeholder = '작성하세요.', + placeholder = disabled ? '로그인이 필요합니다' : '작성하세요.', value, setFunc, onEnterFunc, diff --git a/src/components/inputBox/indexCss.ts b/src/components/inputBox/indexCss.ts index 4279a468..a332602f 100644 --- a/src/components/inputBox/indexCss.ts +++ b/src/components/inputBox/indexCss.ts @@ -40,5 +40,9 @@ const InputBoxCss = styled.input<{ colortype: 'white' | 'gray' }>` padding: 15px; ${({ colortype }) => InputTypes[colortype]} + + &:disabled { + background-color: ${inputGray.variants.focused.backgroundColor}; + } `; export default InputBoxCss; diff --git a/src/components/tinyMCE-editor/index.tsx b/src/components/tinyMCE-editor/index.tsx index 082c7952..e9883309 100644 --- a/src/components/tinyMCE-editor/index.tsx +++ b/src/components/tinyMCE-editor/index.tsx @@ -18,6 +18,28 @@ export const TinyMceContainer = ({ // } // }; + // *** 이 부분은 로그인 가능할 떄 테스트 후 추가 예정 *** + // useEffect(() => { + // // 마우스 클릭 시 에디터 외부를 클릭한 경우만 처리 + // const handleClickOutside = (e: MouseEvent) => { + // // 에디터 컨테이너 외부를 클릭한 경우 처리 + // if (editorRef.current && !editorRef.current.getContainer().contains(e.target as Node)) { + // console.log('Clicked outside of editor'); + // if (editorRef.current) { + // setHtmlContent(editorRef.current.getContent()); + // } + // } + // }; + + // // 클릭 이벤트 리스너 추가 + // document.addEventListener('click', handleClickOutside); + + // // 컴포넌트 언마운트 시 이벤트 리스너 제거 + // return () => { + // document.removeEventListener('click', handleClickOutside); + // }; + // }, [setHtmlContent]); + return ( <> { + editor.on('input', () => { + const content = editor.getContent({ format: 'text' }); // 텍스트만 가져옴 + if (content.length > 1000) { + const trimmedContent = content.slice(0, 1000); // 1000자로 제한 + editor.setContent(trimmedContent); // 내용을 잘라서 설정 + } + }); + }, content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }' }} plugins={[ @@ -142,7 +174,7 @@ export const TinyMceContainer = ({ toolbar={ 'undo redo | blocks | ' + 'bold italic forecolor | alignleft aligncenter ' + - 'alignright alignjustify | bullist numlist outdent indent | link | image editimage |' + + 'alignright alignjustify | bullist numlist outdent indent | link | image |' + 'code | removeformat | help' } /> diff --git a/src/features/communitiy-detail-comment-box/index.tsx b/src/features/communitiy-detail-comment-box/index.tsx index ad1f1ea4..4637d69e 100644 --- a/src/features/communitiy-detail-comment-box/index.tsx +++ b/src/features/communitiy-detail-comment-box/index.tsx @@ -12,9 +12,12 @@ const CommunityDetailCommentBox = ({ content_id }: { content_id: number }) => { return ( {`댓글 (${commentCount})`} - {isLoggedIn && ( - - )} +
{commentData?.map((v, i) => )}
diff --git a/src/features/communitiy-detail-comment-box/ui/CommentInput.tsx b/src/features/communitiy-detail-comment-box/ui/CommentInput.tsx index e1a5f713..50488595 100644 --- a/src/features/communitiy-detail-comment-box/ui/CommentInput.tsx +++ b/src/features/communitiy-detail-comment-box/ui/CommentInput.tsx @@ -4,22 +4,24 @@ import InputBox from '@/components/inputBox'; const CommentInput = ({ commentText, setCommentText, - onEventPost + onEventPost, + disabled = false }: { commentText: string; setCommentText: (text: string) => void; onEventPost: () => void; + disabled?: boolean; }) => { return ( - + ); }; diff --git a/src/features/communitiy-detail-content-box/index.tsx b/src/features/communitiy-detail-content-box/index.tsx index 516a5cf6..2cfba6c4 100644 --- a/src/features/communitiy-detail-content-box/index.tsx +++ b/src/features/communitiy-detail-content-box/index.tsx @@ -5,7 +5,8 @@ import { CommunityImage, CommunityImageContainer, DeleteCommunityButton, - EditDeleteBtnCon + EditDeleteBtnCon, + EditorContent } from './indexCss'; import { useCommunityDetailContent } from './logic/useCommunityDetailContent'; import WriterProfileBox from './ui/WriterProfileBox'; @@ -42,35 +43,36 @@ const CommunityDetailContentBox = ({ content_id }: { content_id: number }) => { }; if (!detailData) { - -
커뮤니티 데이터가 없습니다
-
; - } else { return ( - {detailData.title} - 최근 수정일: {formatDate(detailData.updated_at)} - - {detailData.image_url && ( - - - - )} -
{detailData.content}
-
- {isMyContent ? ( - - - - - - - ) : ( - '' - )} -
+
커뮤니티 데이터가 없습니다
); } + return ( + + {detailData.title} + 최근 수정일: {formatDate(detailData.updated_at)} + + {detailData.image_url && ( + + + + )} + ; ; +
+ {isMyContent ? ( + + + + + + + ) : ( + '' + )} +
+
+ ); }; export default CommunityDetailContentBox; diff --git a/src/features/communitiy-detail-content-box/indexCss.ts b/src/features/communitiy-detail-content-box/indexCss.ts index 814e207a..04c5550c 100644 --- a/src/features/communitiy-detail-content-box/indexCss.ts +++ b/src/features/communitiy-detail-content-box/indexCss.ts @@ -44,16 +44,6 @@ export const CommunityDetailContentBoxCss = styled.div` } } - .content { - background-color: ${theme.box.section.backgroundColor}; - border: ${theme.box.section.border}; - border-radius: ${theme.box.section.borderRadius}; - padding: 50px 40px; - margin: 10px 0; - - font-size: ${theme.fontSize.seventhSize}; - line-height: ${theme.fontSize.thirdSize}; - } .btnWrap { width: 100%; text-align: center; @@ -101,3 +91,39 @@ export const EditDeleteBtnCon = styled.div` } } `; + +export const EditorContent = styled.div` + background-color: ${theme.box.section.backgroundColor}; + border: ${theme.box.section.border}; + border-radius: ${theme.box.section.borderRadius}; + padding: 50px 40px; + margin: 10px 0; + + font-size: ${theme.fontSize.seventhSize}; + line-height: ${theme.fontSize.thirdSize}; + + h1 { + font-size: 2rem; + font-weight: bold; + } + + ol { + list-style-type: decimal; + } + + ul { + list-style-type: disc; + } + + li { + margin-bottom: 5px; + } + + em { + font-style: italic; + } + + strong { + font-weight: bold; + } +`; diff --git a/src/features/community-list/index.tsx b/src/features/community-list/index.tsx index 9860ac4c..294f8bc6 100644 --- a/src/features/community-list/index.tsx +++ b/src/features/community-list/index.tsx @@ -23,6 +23,7 @@ const CommuntiyList = () => {
{isLoading ? Loading... : ''} {error ? {error.message} : ''} + {listData?.length ? '' :
검색 결과가 없습니다
} {listData?.map((v, i) => (