[fix] #68 로그인 유도 화면 css수정 및 댓글 수정 버그 수정

kdt-8-4 · Dec 7, 2023 · e0cd2b3 · e0cd2b3
2 parents 1a26e54 + 19ecb22
commit e0cd2b3
Show file tree

Hide file tree

Showing 10 changed files with 224 additions and 178 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -14,6 +14,7 @@
     "@mui/icons-material": "^5.14.19",
     "@mui/material": "^5.14.20",
     "@types/jsonwebtoken": "^9.0.5",
+    "animate.css": "^4.1.1",
     "axios": "^1.6.2",
     "bcryptjs": "^2.4.3",
     "cookie": "^0.6.0",

diff --git a/src/app/mypage/page.tsx b/src/app/mypage/page.tsx
@@ -143,8 +143,6 @@ export default function Mypage() {
     handleRefreshProfile();
   };
 
-  console.log("mypage의 게시물 data: ", postData);
-
   return (
     <>
       {isLoading ? ( // 로딩 중인 경우
@@ -201,16 +199,31 @@ export default function Mypage() {
               <br />
               <br />
               <br />
-              <div id="login_msg"> 로그인을 해주세요. </div>
               <br />
               <br />
-              <Link className="goto" href={"/login"}>
-                로그인 페이지로 이동
-              </Link>
               <br />
-              <Link className="goto" href={"/"}>
-                홈 페이지로 이동
-              </Link>
+              <div
+                className="login_goto_box"
+                style={{
+                  height: "40%",
+                  display: "flex",
+                  flexDirection: "column",
+                  alignItems: "center",
+                  justifyContent: "space-evenly",
+                }}
+              >
+                <div id="login_msg" style={{ fontSize: "20px" }}>
+                  {" "}
+                  로그인 후에 업로드할 수 있습니다.{" "}
+                </div>
+                <Link className="goto" href={"/login"}>
+                  로그인 페이지로 이동
+                </Link>
+                <Link className="goto" href={"/"}>
+                  홈 페이지로 이동
+                </Link>
+              </div>
+              <br />
             </>
           )}
 

diff --git a/src/app/upload/page.tsx b/src/app/upload/page.tsx
@@ -47,7 +47,7 @@ export default function Upload(): JSX.Element {
     setLoginToken(accessToken);
   };
 
-  useEffect(()=> {
+  useEffect(() => {
     cookie();
   }, []);
 
@@ -246,16 +246,31 @@ export default function Upload(): JSX.Element {
               <br />
               <br />
               <br />
-              <div id="login_msg"> 로그인 후에 업로드할 수 있습니다. </div>
               <br />
               <br />
-              <Link className="goto" href={"/login"}>
-                로그인 페이지로 이동
-              </Link>
               <br />
-              <Link className="goto" href={"/"}>
-                홈 페이지로 이동
-              </Link>
+              <div
+                className="login_goto_box"
+                style={{
+                  height: "40%",
+                  display: "flex",
+                  flexDirection: "column",
+                  alignItems: "center",
+                  justifyContent: "space-evenly",
+                }}
+              >
+                <div id="login_msg" style={{ fontSize: "20px" }}>
+                  {" "}
+                  로그인 후에 업로드할 수 있습니다.{" "}
+                </div>
+                <Link className="goto" href={"/login"}>
+                  로그인 페이지로 이동
+                </Link>
+                <Link className="goto" href={"/"}>
+                  홈 페이지로 이동
+                </Link>
+              </div>
+              <br />
             </>
           )}
         </>

diff --git a/src/component/CommentIcon.tsx b/src/component/CommentIcon.tsx
@@ -65,12 +65,3 @@ export default function CommentIcon(props: CommentIconProps) {
     </>
   );
 }
-
-{
-  /* <CommentModal
-handleModalToggle={handleCommentClick}
-accessToken={accessToken}
-boardComment={boardComment}
-decoded_nickName={decoded_nickName}
-/> */
-}
diff --git a/src/component/CommentTest.tsx b/src/component/CommentTest.tsx
@@ -1,7 +1,7 @@
 import "../style/modal_comment.scss";
 import React, { useEffect, useState } from "react";
 import axios from "axios";
-import CommentsTest from "./CommentsTest";
+import "animate.css";
 
 interface CommentModalProps {
   handleModalToggle: () => void;
@@ -42,6 +42,19 @@ export default function CommentTest(props: CommentModalProps) {
     localBoardId,
   } = props;
 
+  // 로그인 확인
+  const [logincheck, setCheck] = useState<boolean>(true);
+
+  useEffect(() => {
+    if (accessToken === undefined) {
+      setCheck(false);
+    } else {
+      setCheck(true);
+    }
+  }, []);
+
+  // -------------------------------------------------------------
+
   const [boardCommentList, setBoardCommentList] = useState(
     boardComment
       .filter(
@@ -67,6 +80,8 @@ export default function CommentTest(props: CommentModalProps) {
 
   console.log("새로운 댓글 목록: ", boardCommentList);
 
+  // -------------------------------------------------------------
+
   const [comment, setComment] = useState<string>(""); // 댓글 input
   const [reply, setReply] = useState<replyListType[]>([]); // 답글 input
 
@@ -129,7 +144,13 @@ export default function CommentTest(props: CommentModalProps) {
     setBoardCommentList((prevList) =>
       prevList.map((item, idx) =>
         idx === index
-          ? { ...item, isEditing: true, editedContent: item.content }
+          ? {
+              ...item,
+              isEditing: true,
+              editedContent: item.content,
+              isReplying: false,
+              isReplyMode: false,
+            }
           : item
       )
     );
@@ -182,6 +203,7 @@ export default function CommentTest(props: CommentModalProps) {
                 ...item,
                 content: editedComment.editedContent,
                 isEditing: false,
+                editedContent: "",
               }
             : item
         )
@@ -468,7 +490,7 @@ export default function CommentTest(props: CommentModalProps) {
   return (
     <>
       <div className="modal_back">
-        <div className="modal_body">
+        <div className="modal_body animate__animated animate__slideInUp animate__delay-0.5s">
           <button onClick={handleModalToggle}>닫기</button>
           <hr />
           <div className="commentList">
@@ -486,8 +508,16 @@ export default function CommentTest(props: CommentModalProps) {
                       />
                     ) : (
                       comment.content
-                    )}{" "}
-                    ({comment.createdDate})
+                    )}
+                  </p>
+                  <p
+                    style={{
+                      color: "lightgray",
+                      fontSize: "10px",
+                      paddingLeft: "5px",
+                    }}
+                  >
+                    {comment.createdDate} {comment.createdTime}
                   </p>
                   <div className="btn_box">
                     {comment.nickname === decoded_nickName && (
@@ -529,7 +559,7 @@ export default function CommentTest(props: CommentModalProps) {
                         className="reply_box"
                       >
                         <p key={`reply-${replyIndex}`}>
-                          ㄴ{reply.nickname}:
+                          ㄴ{reply.nickname}:{" "}
                           {reply.isEditing ? (
                             <input
                               type="text"
@@ -544,8 +574,16 @@ export default function CommentTest(props: CommentModalProps) {
                             />
                           ) : (
                             reply.content
-                          )}{" "}
-                          ({reply.createdDate})
+                          )}
+                        </p>
+                        <p
+                          style={{
+                            color: "lightgray",
+                            fontSize: "10px",
+                            paddingLeft: "5px",
+                          }}
+                        >
+                          {reply.createdDate} {reply.createdTime}
                         </p>
                         <div className="btn_box">
                           {reply.nickname === decoded_nickName && (
@@ -590,34 +628,44 @@ export default function CommentTest(props: CommentModalProps) {
                       </div>
                     ))}
                     <br />
-                    <form
-                      className="reply_form form"
-                      onSubmit={(e) => handleReplySubmit(e, commentIndex)}
-                    >
-                      <p>{decoded_nickName}:</p>
-                      <input
-                        type="text"
-                        placeholder="답글을 입력하세요."
-                        value={comment.editedContent}
-                        onChange={(e) => handleEditChange(e, commentIndex)}
-                      />
-                      <button type="submit">게시</button>
-                    </form>
+                    {logincheck ? (
+                      <form
+                        className="reply_form form"
+                        onSubmit={(e) => handleReplySubmit(e, commentIndex)}
+                      >
+                        <p>{decoded_nickName}:</p>
+                        <input
+                          type="text"
+                          placeholder="답글을 입력하세요."
+                          value={comment.editedContent}
+                          onChange={(e) => handleEditChange(e, commentIndex)}
+                        />
+                        <button type="submit">게시</button>
+                      </form>
+                    ) : (
+                      <p>로그인 후 답글 작성이 가능합니다!</p>
+                    )}
                   </div>
                 )}
               </div>
             ))}
           </div>
-          <form className="comment_form form" onSubmit={handleFormSubmit}>
-            <p>{decoded_nickName}:</p>
-            <input
-              type="text"
-              placeholder="댓글을 입력하세요."
-              value={comment}
-              onChange={handleInputChange}
-            />
-            <button type="submit">게시</button>
-          </form>
+          {logincheck ? (
+            <form className="comment_form form" onSubmit={handleFormSubmit}>
+              <p>{decoded_nickName}:</p>
+              <input
+                type="text"
+                placeholder="댓글을 입력하세요."
+                value={comment}
+                onChange={handleInputChange}
+              />
+              <button type="submit">게시</button>
+            </form>
+          ) : (
+            <p style={{ textAlign: "center", fontSize: "20px" }}>
+              로그인 후 댓글 작성이 가능합니다!
+            </p>
+          )}
         </div>
       </div>
     </>

diff --git a/src/component/CommentsTest.tsx b/src/component/CommentsTest.tsx
diff --git a/src/style/GotoLogin.scss b/src/style/GotoLogin.scss
@@ -1,17 +1,18 @@
-.goto{
-    background-color: #a8bbff;
-    color: white;
+.goto {
+  background-color: #a8bbff;
+  color: white;
 
-    border-radius: 4px;
-
-    height: 30px;
-    width: 200px;
+  border-radius: 4px;
 
-    text-align: center;
+  width: 200px;
 
-    font-weight: bold;
+  text-align: center;
+
+  font-weight: bold;
+
+  padding: 10px 5px;
 }
 
-#login_msg{
-    font-weight: bold;
-}
+#login_msg {
+  font-weight: bold;
+}