TIL - JS와 Firestore 이용해서 블로그 만들기 - 탭 전환 (1)

오늘 배운 내용

오늘은 팀 프로젝트에서 만든 웹페이지를 발표하고 튜터님이 피드백을 하는 시간을 가졌고 다른 조의 웹사이트를 보면서 괜찮아 보이는 기능을 만들어 봐야겠다고 생각했고 그동안 firestore와 JS를 통해 방명록 만들기와 Todo List를 만들면서 블로그를 만들 수 있겠다고 생각해서 피드백과 다른 조에서 좋아 보였던 기능을 배워서 간단한 블로그를 만들기로 했다.

 

 

피드백에서 나온 내용

• 다크 모드 백그라운드 어태치먼트 기능 칭찬
• 모달 닫기 버튼 이외에도 밖에 버튼을 클릭할 때 모달방이 닫히게 하면 좋았을 것
• 트랜지션을 이용해 효과를 부드럽게 애니메이션 기능을 넣어주면 좋았을 것 

 

와이어프레임

---

메인페이지

우선 블로그를 처음 들어갔을 때의 모습이고 다른 조에서 탭 전환하는 기능이 괜찮게 보여서 header의 내비게이션 부분을 클릭하면 탭 전환이 가능하도록 만들어야겠다고 계획을 했고 팀 프로젝트에서 다른 팀원이 만든 모달창 기능을 한번 구현해 보고 피드백에서 나온 다른 창을 클릭했을 때 닫히는 것까지 계획했다. 

 

 

모달창

 

글쓰기 화면

 

글쓰기 화면은 firestore에 데이터를 전송해서 firestore가 데이터를 읽고 홈에 표시하도록 계획했다.

 

 

방명록 화면

방명록은 이전에 만들었던 것에 더 보완해서 날짜까지 만들고 최근에 등록된 것이 가장 나중에 오게 만들 계획이다.

 

 

탭 전환 기능

---

HTML

        <nav class="header-nav">
            <ul class="header-list">
                <div onclick="switchTab('home')">
                    <li id="home">홈</li>
                </div>
                <div onclick="switchTab('write')">
                    <li id="write">글 쓰기</li>
                </div>
                <div onclick="switchTab('guestbook')">
                    <li id="guestbook">방명록</li>
                </div>
            </ul>
        </nav>
        
 
        <section class="container">
            <div class="content-wrap">
                <div class="content-list">
                    <article class="post-section" id="homeContent">
                        <div class="post-header">
                            <h2>
                                전체 글                                
                                <!-- 전체 글 갯수 조회 -->
                                <em></em>
                            </h2>
                        </div>

                        <!-- 가장 최근에 등록한 글목록 -->
                        <div recent-post-list>
                            <!-- 클릭 시 모달창으로 화면 표시 -->
                        </div>
                    </article>
                    <article class="post-section" id="writeContent" style="display:none;">
                        <!-- 글 목록 컨텐츠 -->    
                        
                        <!-- 글 쓰기 폼 -->
                        <form id="writeForm">
                            <div id="name-password">
                                <input type="text" id="name" name="name" placeholder="이름" required>
                                <input type="password" id="password" name="password" placeholder="비밀번호" required>
                            </div>                            
                            <div id="title-content">
                                <input type="text" id="title" name="title" placeholder="제목" required>
                                <textarea id="content" name="content" placeholder="내용" required></textarea>
                            </div>            
                            <div id="submit-btn">
                                <button type="submit" class="write-btn">글쓰기</button>
                            </div>                
                            
                        </form>
                        <!-- 글 쓰기 제출 버튼 -->
                        
                        
                    </article>

                    <article class="post-section" id="guestbookContent" style="display:none;">
                        <!-- 방명록 컨텐츠 -->
                        방명록 예시
                    </article>
                </div>
            </div>
        </section>

CSS

.header-list > div {
    padding: 0 26px;
    cursor: pointer;
}

.header-list > div > li {
    cursor: pointer;
    position: relative;
    display: block;
    padding: 1.375rem 0.25rem 1.5rem; /* 위쪽, 좌우, 아래쪽 */
    font-size: 1.125rem; 
    line-height: 1.25; 
    color: #8492a6;
}

.header-list > div > li::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 0.25rem; 
    background-color: transparent;
    transition: width 0.3s ease, background-color 0.3s ease;
}

.header-list > div > li.clicked::after {
    width: 100%;
    background-color: black;
}

.header-list > div > li.clicked {
    color: black;
}

JS

document.addEventListener("DOMContentLoaded", function() {
    // 페이지가 로드될 때 '홈' 페이지 표시
    switchTab('home');
});

// .header-list 클릭된 상태 스타일 처리
function switchTab(menuId) {
    // 모든 메뉴 항목에 'clicked' 클래스를 제거
    const menuItems = document.querySelectorAll('.header-list li');
    menuItems.forEach(function(item) {
        item.classList.remove('clicked');
    });

    // 클릭된 메뉴 항목에 'clicked' 클래스를 추가
    const clickedItem = document.getElementById(menuId);
    clickedItem.classList.add('clicked');

    // 선택된 섹션을 표시하고, 나머지 섹션은 숨기기
    const sections = document.querySelectorAll('.post-section');
    sections.forEach(function(section) {
        section.style.display = 'none';
    });
    const selectedSection = document.getElementById(menuId + 'Content');
    selectedSection.style.display = 'block';
}

 

홈 글쓰기 방명록 중 클릭이 되었을 때 클린된 메뉴에 클래스로 "clicked"를 주고 forEach로 post-section를 순회한 다음 display를 숨기고 클릭된 섹션은 display를 block으로 화면에 표시하게 해 줬다. 또한 피드백에서 나온 transition을 통해 검은선을 부드럽게 표시하고 선택되었다는 것을 알려줬다.

 

결과

---