Parcourir la source

사용자 상세 페이지 구현

Gayeon Park il y a 3 ans
Parent
commit
f6fb87ab08

+ 8 - 4
realworld/src/main/webapp/WEB-INF/jsp/article/articleDetails.jsp

@@ -134,13 +134,17 @@
             }
         };
 
-        if (commentInputArea.value !== '') { // 공백이 아닌경우에만 댓글 생성
-            fetch('/article/${articleDetail.id}/comment', postOptions)
-                .then(response => {
+        if ("${ssIsLogin}" === "true") { // 로그인한 상태에만 댓글 생성 가능
+            if(commentInputArea.value !== '') { // 공백이 아닌경우에만 댓글 생성
+                fetch('/article/${articleDetail.id}/comment', postOptions)
+                    .then(response => {
                     if (response.status === 201) {
                         return displayComments();
                     }
-                })
+                    })
+            } 
+        } else {
+            location.href = "/user/signin"
         }
         commentInputArea.value = '';
     }

+ 0 - 1
realworld/src/main/webapp/WEB-INF/jsp/include/head.jsp

@@ -14,7 +14,6 @@
 
         <title><c:out value="realworld"/></title>
         <!-- 파비콘 -->
-        <!-- <link rel="icon" href="/resources/images/favicon.ico"> -->
         <link rel="icon" href="/resources/images/favicon.ico">
 
         <!-- css -->

+ 0 - 2
realworld/src/main/webapp/WEB-INF/jsp/main.jsp

@@ -154,7 +154,6 @@
 
                 loadArticle(articles);
                 nextPageLoad(articles, paging);
-                console.log(tagArray);
             });
 
         filterArticle({
@@ -459,7 +458,6 @@
 
                 loadArticle(articles);
                 nextPageLoad(articles, paging);
-                console.log(articles)
 
                 // hide loadings
                 setTimeout(() => {

+ 2 - 0
realworld/src/main/webapp/WEB-INF/jsp/user/settings.jsp

@@ -52,6 +52,8 @@
             .then(response => {
                 if (response.status === 200) {
                     location.href = '/user/${user.id}'
+                } else { // 이메일 중복체크 alert 창 띄우기 (status === 409)
+                    alert("이미 존재하는 이메일입니다.")
                 }
             })
     }

+ 29 - 28
realworld/src/main/webapp/WEB-INF/jsp/user/userDetail.jsp

@@ -206,6 +206,7 @@
     // 게시글 목록 조회
     const displayArticles = (articles) => {
         articles.forEach(article =>  {
+            console.log(JSON.stringify(article))
             const domParser = new DOMParser();
 
             // 게시글 정보
@@ -230,7 +231,7 @@
                 </div>
                 `;
             const divArticleMeta = domParser.parseFromString(domStrArticleMeta, 'text/html').body.firstChild;
-            divArticleMeta.querySelector('.date').textContent = new Date(article.create).toLocaleString();
+            divArticleMeta.querySelector('.date').textContent = new Date(article.created).toLocaleString();
 
             // 게시글 좋아요한 경우 active
             if (article.favorite) {
@@ -320,7 +321,13 @@
         targetFeed = document.querySelector('.nav-item.active');
         loadingArticles = window.document.querySelector('#article-loading');
         articleList = document.querySelector('#article-list');
-       
+
+        const followString = document.querySelector('.follow-btn');
+        if("${isFollow}" === "true"){
+            followString.classList.add('active');
+            followString.querySelector('.follow').textContent = unfollow;
+        }
+        
         setLoading('on');
         // fetch api call
         fetch(url, options)
@@ -338,12 +345,6 @@
                     noContent();
                 }, 1000);
             });
-
-        const followString = document.querySelector('.follow-btn');
-        if(followString.classList.contains('active')) {
-            followString.querySelector('.follow').textContent = unfollow;
-        }
-
     }
 
 </script>
@@ -351,11 +352,8 @@
 
 <body>
     <jsp:include page="/WEB-INF/jsp/include/header.jsp"></jsp:include>
-    <!-- user-page content -->
-
-    ${user}
-    
 
+    <!-- user-page content -->
     <div class="user-page">
         <!-- User Info -->
         <section class="user-info">
@@ -364,20 +362,24 @@
                     <div class="col-10">
                         <img src="/resources/images/avatar.png" alt="" class="user-img">
                         <h4 class="user-name"><c:out value="${user.username}"></c:out></h4>
-                        <p class="profile-bio"><c:out value="${user.shortBio}"></c:out></p>
-                            <c:choose>
-                                <c:when test="${user.id eq ssId}">
-                                    <a href="/user/settings/${user.id}" class="action-btn btn-sm">
-                                        <i class="fas fa-cog"></i>&nbsp;Edit Profile Settings
-                                    </a>
-                                </c:when>
-                                <c:otherwise>
-                                    <button class="action-btn btn-sm follow-btn" onclick="userFollow()">
-                                        <i class="fas fa-plus"></i>
-                                        <span class="follow">&nbsp;Follow <c:out value="${user.username}"/></span>
-                                    </button>
-                                </c:otherwise>
-                            </c:choose>
+                        <p class="profile-bio">
+                            <pre>
+                                <c:out value="${user.shortBio}"></c:out>
+                            </pre>
+                        </p>
+                        <c:choose>
+                            <c:when test="${user.id eq ssId}">
+                                <a href="/user/settings/${user.id}" class="action-btn btn-sm">
+                                    <i class="fas fa-cog"></i>&nbsp;Edit Profile Settings
+                                </a>
+                            </c:when>
+                            <c:otherwise>
+                                <button class="action-btn btn-sm follow-btn" onclick="userFollow()">
+                                    <i class="fas fa-plus"></i>
+                                    <span class="follow">&nbsp;Follow <c:out value="${user.username}"/></span>
+                                </button>
+                            </c:otherwise>
+                        </c:choose>
                     </div>
                 </div>
             </div>
@@ -406,8 +408,7 @@
                         </article>
 
                         <!-- Article List -->
-                        <div id="article-list" style="display: block;">
-                        </div>
+                        <div id="article-list" style="display: block;"></div>
                     </div>
                 </div>
             </div>

+ 17 - 2
realworld/src/main/webapp/resources/css/style.css

@@ -392,7 +392,7 @@ img {
     text-decoration: underline;
 }
 
-.home-page #article-list .more-button {
+.more-button {
     float: right;
     margin-top: 0.6rem;
     margin-bottom: 1.2rem;
@@ -627,7 +627,7 @@ textarea {
     background-color: var(--red-color);
 }
 
-.article-page .article-content pre{
+.article-page pre{
     font-family: 'Source Serif Pro', serif;
     font-size: 1.25rem;
     line-height: 1.8rem;
@@ -816,6 +816,15 @@ hr {
     margin-bottom: 0.5rem;
 }
 
+.user-page pre {
+    font-family: 'Source Sans Pro', serif;
+    white-space: pre-line;
+    margin: 0 auto 0.5rem auto;
+    color: #aaaaaa;
+    max-width: 450px;
+    font-weight: 300;
+}
+
 .user-page .user-info .action-btn {
     float: right;
     color: var(--grey-color);
@@ -823,6 +832,12 @@ hr {
     font-weight: normal;
 }
 
+.user-page .user-info .action-btn.active,
+.user-page .user-info .action-btn:hover {
+    color: #999999;
+    background-color: var(--white-color);
+}
+
 .user-page .article-preview {
     text-align: start;
 }