[Next.js 탐험기] 3. Next.js + 티스토리 API 블로그 만들기 - SideBar 구현

서론

이번 포스팅을 포함한 앞으로의 Next.js 탐험기 시리즈에서 Tistory OpenAPI와 PHP를 이용해 생성한 JSON 형식 데이터를 다룰 예정이다. 이 데이터는 Next.js 탐험기 프로젝트에 중요한 부분이므로, 관심 있는 사람들은 아래 연관 포스팅을 참조해 자신의 프로젝트에 적용해 볼 수 있다. 구체적으로, 자신의 티스토리 데이터를 src/app/data/ 디렉토리에 JSON 형식으로 변환하여 저장하는 방법을 설명할 것이다.

티스토리 OPEN API 사용해서 블로그 데이터 추출하기

 

SideBar 구현 - Category 

자신의 티스토리 블로그 데이터를 기반으로 만들어진 src/app/data/ 디렉토리에 존재하는 categories.json 데이터를 불러온다.

import categoriesData from '../../data/categories.json'; // JSON 데이터를 import.

 

categories.json 파일은 티스토리 블로그의 카테고리 정보 및 서브 카테고리 정보들을 포함하고 있다. 우선 모든 카테고리 정보를 불러와서 반복하여 출력한다. next.js는 react문법을 기반으로 하기 때문에 반복 및 조건문은 react 문법에 기반하여 작성한다. 나는 react에서 반복문은 map을 자주 사용하고, 조건문은 삼항 연산자를 자주 사용한다.

const SideBar = () => {
    return (
        <nav className={styles.sideBar}>
            <ul className={styles.navList}>
                {categoriesData.categories.map((category) => (
                    <li key={category.id} className={styles.navItem}>
                        <Link href={`/${category.name}`}>
                            {category.label}
                        </Link>
                    </li>
                ))}
            </ul>
        </nav>
    );
};

티스토리 블로그의 카테고리를 그대로 가져온 것을 아래와 같이 확인할 수 있다.

좌 : next.js project / 우 : 티스토리 블로그

SideBar 구현 - Sub Category 

SubCategory를 미리 PHP Laravel 프로젝트에서 정렬하여 Json 데이터로 만들어 주었기 때문에, 아래와 같이 코드를 추가한다. category.subCategories가 존재할 경우 SubCategories를 표현한다.

{/* subCategories가 있을 경우, 중첩된 리스트를 렌더링. */}
{category.subCategories && (
    <ul className={styles.subNavList}>
        {category.subCategories.map((subCategory) => (
            <li key={subCategory.id} className={styles.subNavItem}>
                <Link href={`/${category.name}/${subCategory.name}`}>
                    {subCategory.label}
                </Link>
            </li>
        ))}
    </ul>
)}

SubCategory 관련 css 파일을 수정한다.

/* components/SideBar/SideBar.module.css */

/* 기존 코드 생략 /*

/* 추가된 하위 네비게이션 리스트 스타일 */
.subNavList {
    list-style: none;
    padding: 0;
    margin: 0;
    margin-left: 20px; /* 메인 항목에서 약간 들여쓰기 */
}

.subNavItem {
    padding: 5px 10px; /* 하위 항목은 조금 더 작은 패딩 */
    border-bottom: 1px solid #555; /* 하위 항목을 구분하기 위한 테두리 */
    font-size: 0.9em; /* 폰트 크기를 조금 더 작게 */
}

.subNavItem:hover {
    background-color: #555; /* 하위 항목에 대한 호버 스타일 */
}

좌 : next.js project / 우 : 티스토리 블로그

 

나는 "#"이 붙은 카테고리 명은 티스토리 블로그를 예쁘게 구분짓기 위한 더미 카테고리로 사용하고 있다. 때문에 "#"이 들어간 카테고리명을 갖고 있다면 Link 태그로 감싸지 않게끔 아래와 같이 코드를 추가했다. 이처럼 본인에 맞게 커스텀 하면서 css를 조정하면, 자신만의 개성있는 SideBar를 만들 수 있다. 

{category.label.includes('#') ? (
    <span>{category.label}</span>
) : (
    <Link href={`/${category.name}`}>
        {category.label}
    </Link>
)}