498 feature 커뮤니티 수정사항 (#504)

* ✨ Feat: 로그인 안한상태면 댓글창 비활성화 * ✨ Feat: 에디터로 작성한 부분 스타일 적용되어 나오도록 수정 * ✨ Feat: 글자수 1000자 제한 (텍스트 에디터 내부) * 💄 Style: 커뮤니티 리스트페이지 데이터 없을때 css 추가 * 💄 Style: 커뮤니티 리스트 검색결과 없ㅇ을때 스타일 수정
prgrms-web-devcourse-final-project · Jan 21, 2025 · 818ac60 · 818ac60
1 parent 64c715c
commit 818ac60
Show file tree

Hide file tree

Showing 9 changed files with 120 additions and 44 deletions.
diff --git 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
@@ -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
@@ -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
@@ -115,6 +137,16 @@ export const TinyMceContainer = ({
           //   }
           // },
 
+          // 텍스트 길이 제한 (1000자)
+          setup: (editor) => {
+            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
@@ -12,9 +12,12 @@ const CommunityDetailCommentBox = ({ content_id }: { content_id: number }) => {
   return (
     <CommunityDetailCommentBoxCss>
       <i className="title">{`댓글 (${commentCount})`}</i>
-      {isLoggedIn && (
-        <CommentInput commentText={commentText} setCommentText={setCommentText} onEventPost={onEventPost} />
-      )}
+      <CommentInput
+        commentText={commentText}
+        setCommentText={setCommentText}
+        onEventPost={onEventPost}
+        disabled={!isLoggedIn}
+      />
       <div className="commentWrap">
         {commentData?.map((v, i) => <Comment key={i} {...v} content_id={content_id} login_name={loginName} />)}
       </div>

diff --git 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 (
     <CommentInputCss>
       <InputBox
         colortype="white"
         value={commentText}
-        // getInputText={setCommentText}
         setFunc={setCommentText}
         onEnterFunc={onEventPost}
+        disabled={disabled}
       />
-      <ApplyButton label="댓글 등록" type="white" onClick={onEventPost} />
+      <ApplyButton label="댓글 등록" type="white" onClick={onEventPost} disabled={disabled} />
     </CommentInputCss>
   );
 };

diff --git 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) {
-    <CommunityDetailContentBoxCss>
-      <div className="noData">커뮤니티 데이터가 없습니다</div>
-    </CommunityDetailContentBoxCss>;
-  } else {
     return (
       <CommunityDetailContentBoxCss>
-        <i className="title">{detailData.title}</i>
-        <i className="modifiedDate">최근 수정일: {formatDate(detailData.updated_at)}</i>
-        <WriterProfileBox {...writerData} />
-        {detailData.image_url && (
-          <CommunityImageContainer>
-            <CommunityImage src={detailData.image_url} alt="detailData.image_url" />
-          </CommunityImageContainer>
-        )}
-        <div className="content">{detailData.content}</div>
-        <div className="btnWrap">
-          {isMyContent ? (
-            <EditDeleteBtnCon>
-              <Link to={`/communitycreate/${content_id}`}>
-                <ApplyButton label="수정하기" type="blue" />
-              </Link>
-              <DeleteCommunityButton label="삭제하기" type="white" onClick={handleDeleteCommunity} />
-            </EditDeleteBtnCon>
-          ) : (
-            ''
-          )}
-        </div>
+        <div className="noData">커뮤니티 데이터가 없습니다</div>
       </CommunityDetailContentBoxCss>
     );
   }
+  return (
+    <CommunityDetailContentBoxCss>
+      <i className="title">{detailData.title}</i>
+      <i className="modifiedDate">최근 수정일: {formatDate(detailData.updated_at)}</i>
+      <WriterProfileBox {...writerData} />
+      {detailData.image_url && (
+        <CommunityImageContainer>
+          <CommunityImage src={detailData.image_url} alt="detailData.image_url" />
+        </CommunityImageContainer>
+      )}
+      <EditorContent dangerouslySetInnerHTML={{ __html: detailData.content }} className="content" />; ;
+      <div className="btnWrap">
+        {isMyContent ? (
+          <EditDeleteBtnCon>
+            <Link to={`/communitycreate/${content_id}`}>
+              <ApplyButton label="수정하기" type="blue" />
+            </Link>
+            <DeleteCommunityButton label="삭제하기" type="white" onClick={handleDeleteCommunity} />
+          </EditDeleteBtnCon>
+        ) : (
+          ''
+        )}
+      </div>
+    </CommunityDetailContentBoxCss>
+  );
 };
 export default CommunityDetailContentBox;
diff --git 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
@@ -23,6 +23,7 @@ const CommuntiyList = () => {
       <div className="listWrap">
         {isLoading ? <LoadingCss>Loading...</LoadingCss> : ''}
         {error ? <ErrorCss>{error.message}</ErrorCss> : ''}
+        {listData?.length ? '' : <div className="noData">검색 결과가 없습니다</div>}
         {listData?.map((v, i) => (
           <Link key={i} to={`/community/${v.id}`}>
             <LongListItem

diff --git a/src/features/community-list/indexCss.ts b/src/features/community-list/indexCss.ts
@@ -20,6 +20,12 @@ export const CommuntiyListCss = styled.div`
   flex-direction: column;
   align-items: center;
 
+  .noData {
+    width: 100%;
+    text-align: center;
+    padding-top: 100px;
+  }
+
   position: relative;
   & * {
     /* border: 1px solid gray; */