[refactor] 커뮤니티 css 리팩토링

front-end/package.json

@@ -24,6 +24,7 @@
     "react-image-crop": "^11.0.5",
     "react-intersection-observer": "^9.5.3",
     "react-modal": "^3.16.1",
+    "react-quill": "^2.0.0",
     "react-redux": "^8.1.3",
     "react-router-dom": "^6.21.3",
     "react-scripts": "5.0.1",

front-end/src/components/community/CommentListItem.jsx

@@ -8,100 +8,121 @@ import swal from 'sweetalert';
 
 export default function CommentListItem(props) {
   // 코드에 아무것도 없는 null은 객체라서 오류나니깐 ..
-  const [code,setCode] = useState(props.commentItem.code || '')
+  const [code, setCode] = useState(props.commentItem.code || '')
   const userId = useSelector(state => state.auth.userId)
   const commentId = props.commentItem.writerId // 댓글작성자와 로그인한유저 검사하려고
   const commentNo = props.commentItem.commentId // 댓글삭제하기위해 댓글commentId가져옴
-  const [comment,setComment] = useState(props.commentItem.comment)
+  const [comment, setComment] = useState(props.commentItem.comment)
   const articleNo = props.commentItem.articleNo
   const navigate = useNavigate()
+  const [bgcolor, setBgcolor] = useState('#F4ECE4');
+  const [showCodeMirror, setShowCodeMirror] = useState(false)
 
-  const commentDelete = () =>{
+
+  const colorChange = () => {
+    if (bgcolor === '#F4ECE4') {
+      setBgcolor('#ffffff')
+      setShowCodeMirror(true)
+    } else {
+      setBgcolor('#F4ECE4')
+      setShowCodeMirror(false)
+    }
+  }
+
+  const commentDelete = () => {
     axios({
-      url : `https://codearena.shop/api/comment/delete?commentId=${commentNo}`,
-      method : 'delete'
-    })
-    .then((res)=>{
-      console.log(res)
-      props.onDelete(commentNo)
-      swal("댓글삭제완료","","success")
-    })
-    .catch((err)=>{
-      console.log(err)
+      url: `https://codearena.shop/api/comment/delete?commentId=${commentNo}`,
+      method: 'delete'
     })
+      .then((res) => {
+        console.log(res)
+        props.onDelete(commentNo)
+        swal("댓글삭제완료", "", "success")
+      })
+      .catch((err) => {
+        console.log(err)
+      })
   }
 
   const onChangeCode = useCallback((code, viewUpdate) => {
     setCode(code);
   }, []);
-  
-  const updateComment = () =>{
+
+  const updateComment = () => {
     axios({
-      url : 'https://codearena.shop/api/comment/update',
-      method : 'put',
-      data : {
-        commentId : commentNo,
-        comment : comment,
-        code : code,
+      url: 'https://codearena.shop/api/comment/update',
+      method: 'put',
+      data: {
+        commentId: commentNo,
+        comment: comment,
+        code: code,
       }
     })
-    .then((res)=>{
-      console.log(res)
-      swal("댓글수정완료","","success")
-      navigate(`/community/${articleNo}/detail`)
-    })
-    .catch((err)=>{
-      console.log(err)
-    })
+      .then((res) => {
+        console.log(res)
+        swal("댓글수정완료", "", "success")
+        navigate(`/community/${articleNo}/detail`)
+      })
+      .catch((err) => {
+        console.log(err)
+      })
   }
 
-
-  return(
+  return (
     <div>
-    <div className="p-7 rounded-3xl drop-shadow" style={{backgroundColor: "#F5F5EC"}}>
-      <div className='flex justify-start'>
-        <div className='w-1/12'></div>
-        <div className="mb-2">작성자 : {props.commentItem.writerNickname}</div>
-      </div>
-      <div className='flex mb-2 px-3'>
-        <div className='w-1/12'></div>
-        <textarea className="textarea textarea-bordered resize-none w-full" rows="4"
-        value={userId === commentId ? comment : props.commentItem.comment }
-        onChange={(e)=>setComment(e.target.value)}>
-        </textarea>
-        <div className='w-1/12'></div>
-      </div>
-      {code && (
-      <div className='grid grid-cols-12 mb-10'>
-        <div className='col-span-1'></div>
-        <div className='col-span-10'>
-          <Editor height="200px" id="in0putEx"
-          value={userId === commentId? code : props.commentItem.code}
-          onChange = {onChangeCode}
-          options={{'scrollBeyondLastLine':false, 'readOnly':userId !== commentId,'minimap':{enabled:false}}}
-          />
+      <div className="p-5 rounded-2xl shadow-md" style={{ backgroundColor: "#F4ECE4" }}>
+        <div className='w-[90%] flex justify-start p-1'>
+          <div className="pb-2">{props.commentItem.writerNickname}</div>
         </div>
-        <div className='col-span-1'></div>
-      </div>
-      )}
-      { userId === commentId && (
-        <div className='flex justify-end mb-4'>
-          <div className="btn btn-sm btn-active drop-shadow text-md mr-2"
-          style={{backgroundColor:'#E4E4DA'}}
-          onClick={updateComment}
-          >수정</div>
-          <button className="btn btn-sm btn-active drop-shadow text-md"
-          style={{backgroundColor:'#E4E4DA'}}
-          onClick={commentDelete}
-          >삭제</button>
-          <div className='w-1/12'></div>
-
+        <div className='flex justify-center mb-2 px-auto'>
+          <textarea
+            className="w-full textarea resize-none w-full focus:outline-none"
+            value={userId === commentId ? comment : props.commentItem.comment}
+            onChange={(e) => setComment(e.target.value)}>
+          </textarea>
         </div>
-      )}
-    </div>
-    <br />
+        {code && (
+          <div className='flex justify-end p-1'>
+            <div className="flex">
+              <button className="btn btn-sm btn-active drop-shadow text-md"
+                style={{ backgroundColor: bgcolor }}
+                onClick={colorChange}>코드보기
+              </button>
+            </div>
+          </div>
+        )}
+        {showCodeMirror && (
+          <div className='w-full p-2 mb-10'>
+            <div>
+              <Editor height="200px" id="in0putEx"
+                value={userId === commentId ? code : props.commentItem.code}
+                onChange={onChangeCode}
+                options={{ 'scrollBeyondLastLine': false, 'readOnly': userId !== commentId, 'minimap': { enabled: false } }}
+              />
+            </div>
+          </div>
+        )}
+        {userId === commentId && (
+          <div className='flex justify-end p-1'>
+            <div className="btn btn-sm btn-active drop-shadow text-md mr-2"
+              style={{ backgroundColor: '#E4E4DA' }}
+              onClick={updateComment}
+            >
+              수정
+            </div>
+            <button
+              className="btn btn-sm btn-active drop-shadow text-md"
+              style={{ backgroundColor: '#E4E4DA' }}
+              onClick={commentDelete}
+            >
+              삭제
+            </button>
+          </div>
+        )}
+      </div>
+      <br />
     </div>
-    
+
   )
 }