피드 메뉴 포커싱 버그 해결

realworld/src/main/webapp/WEB-INF/jsp/main.jsp

@@ -10,9 +10,8 @@
     let loadingTag = null;
     let loadingArticle = null;
     let articleList = null;
-
+    
     const filterArticleByTag = (tagName) => {
-        console.log('태그 네임 ' + tagName)
         const articles = window.document.querySelectorAll('.article-preview');
         
         articles.forEach(article => {
@@ -34,6 +33,15 @@
     };
 
     window.onload = (event) => {
+        const ssIsLogin = "${ssIsLogin}";
+        if (ssIsLogin === "true") {
+            window.document.querySelector('#your-feed').classList.add('active');
+            console.log('1111111')
+        } else {
+            window.document.querySelector('#global-feed').classList.add('active');
+            console.log('222222')
+        }
+
         loadingTag = window.document.querySelector('#tag-loading');
         loadingArticle = window.document.querySelector('#article-loading');
         articleList = window.document.querySelector('#article-list');
@@ -167,18 +175,18 @@
                         <ul class="nav">
                             <!-- 로그인 상태인 경우에만 your feed on -->
                             <c:if test="${ssIsLogin eq true}">
-                                <li class="nav-item ">
+                                <li id="your-feed" class="nav-item">
                                     <a href="#">Your Feed</a>
                                 </li>
                             </c:if>
-                            <li class="nav-item active">
+                            <li id="global-feed" class="nav-item">
                                 <a href="#">Global Feed</a>
                             </li>
-                            <!-- <li style="display: none" class="nav-item">
+                            <li style="display: none" class="nav-item">
                                 <a href="#">
                                 <i class="fas fa-hashtag"></i>
                                 tagname</a>
-                            </li> -->
+                            </li>
                         </ul>
                     </div>
 

realworld/src/main/webapp/resources/css/style.css

@@ -210,12 +210,26 @@ button {
 
 .toggle .nav .nav-item {
     float: left;
-    color: var(--green-color);
+    padding: 0.5rem 1rem;
+    margin-bottom: -1px;
+}
+
+.toggle .nav .nav-item a {
+    color: var(--light-grey-color);
+}
+
+.toggle .nav .nav-item.active {
+    float: left;
     padding: 0.5rem 1rem;
     margin-bottom: -1px;
     border-bottom: 2px solid var(--green-color);
 }
 
+.toggle .nav .nav-item.active a {
+    cursor: default;
+    color: var(--green-color);
+}
+
 .article {
     clear: both;
 }