웹 개발 1도 모르는 사람이 웹페이지 만들기 프로젝트 8일차

썸네일 - 뤼튼 생성 AI 이미지

 

 

8일차에는 우측 상단에 멤버 탭을 추가해보겠습니다.

 

오늘의 목표 미리보기

👥 멤버 id로 그룹화하기

 

원래 코드는 활동 기록의 타이틀에서 멤버 이름을 잘라왔습니다.

 allPages = [
        ...allPages,
        ...response.results.map((page) => {
          const iconUrl = page.icon?.external?.url || null;
          const title = page.properties["활동 회차"].title[0]?.text?.content || "Untitled";
          const memberName = title.split(" ")[1] || "Unknown";

하지만 노션에서 멤버 DB로 관리하고 있기 때문에 멤버 각자 고유의 id가 존재합니다.

그래서 활동 DB를 가져오기 전에 멤버 DB를 가져오도록 하겠습니다.

const memberDatabaseId = "MEMBER_DATABASE_ID";

const memberDataMap = new Map();

try {
    const memberResponse = await notion.databases.query({
      database_id: memberDatabaseId,
    });

    memberResponse.results.forEach((page) => {
      const memberId = page.id;
      const memberName = page.properties["이름"]?.title[0]?.text?.content || "Unknown";
      const goal = page.properties["목표"]?.select?.name || "Unknown";
      const iconUrl = page.icon?.external?.url || null;

      memberDataMap.set(memberId, { memberId, memberName, goal, iconUrl });
    });
} catch (error) {
	console.error("Failed to fetch member data:", error);
}

이제는 활동 기록에서 이름대신 id를 저장합니다.

 allPages = [
        ...allPages,
        ...response.results.map((page) => {
          const memberId = page.properties["멤버 DB"]?.relation[0]?.id || null;

다른 코드들도 이름을 쓰던 부분을 id로 수정합니다.

  const memberActivitySummary = new Map();

  allActivityPages.forEach((activity) => {
    const { memberId, time, state, year, month } = activity;

    if (!memberActivitySummary[memberId]) {
      memberActivitySummary[memberId] = {
        activityByMonth: {},
      };
    }

    const member = memberDataMap.get(memberId);

    if (!member) return;
    
    // 생략
});

헤더에 멤버 탭을 만들기 위해서는 멤버 정보를 필요로 함으로 Layout의 매개 변수로 데이터를 넣습니다.

return (
  <Layout memberData={memberData}>
    <MainClient memberData={memberData} />
  </Layout>
);

 

👥 멤버 페이지 만들기

 

멤버 탭을 누르면 새로운 페이지로 넘어가도록 멤버 페이지를 만들겠습니다.

Next.js 13 이상이라면 src/app 디렉토리 기반으로 라우팅이 됩니다.

 

• src/app/page.js 👉 /
• src/app/member/page.js 👉 /members
• src/app/member/[id]/page.js 👉 /members/:id  

 

마지막 동적 라우팅 방식으로 페이지를 만들겠습니다.

파라미터로 가져오는 멤버의 id를 보여주도록 코드를 작성합니다.

export default function MemberPage({ params }) {
    const { id } = params;

    return (
        <div>
            <h1>멤버 상세 페이지</h1>
            <p>멤버 ID: {id}</p>
        </div>
    );
}

멤버 페이지를 만들었으니 멤버 탭을 만들어 연결하기만 하면 됩니다!

 

👥 멤버 탭 만들기

 

우측 상단에 탭을 추가하고자 하니 헤더 코드를 수정해야겠죠?

그러면 헤더에도 멤버 정보가 필요하니 Layout에서 헤더에도 데이터를 매개변수로 넣어줍니다.

export default function Layout({ children, memberData }) {
  return (
    <div className="bg-primary">
      <Header memberData={memberData} />
      <div className="main-content">
        {children}
      </div>
      <Footer />
    </div>
  );
}

헤더의 기존 <nav> 부분의 코드를 가져온 멤버 정보를 활용하도록 수정합니다.

탭에는 아이콘과 이름이 노출되고 멤버 id를 통해 새로운 페이지로 연결했습니다.

import Link from "next/link"; // 추가

export default function Header({ memberData }) {
    return (
        //생략
                <nav className="md:ml-auto flex flex-wrap items-center text-base justify-center">
                    {memberData.map(({ memberId, memberName, iconUrl }) => (
                        <Link
                            key={memberId}
                            href={`/members/${memberId}`}
                            className="flex items-center mr-5 hover:underline"
                        >
                            {iconUrl && (
                                <img
                                    src={iconUrl}
                                    alt={`${memberName}의 아이콘`}
                                    className="w-6 h-6 rounded-full mr-2"
                                />
                            )}
                            {memberName}
                        </Link>
                    ))}
                </nav>
                <ThemeButton />
            </div>
        </header>
    );
 }

각 멤버 페이지마다 고유의 id 값이 나오는 것을 확인할 수 있습니다!

 

 

해당 깃허브 PR을 추가하며 글을 마치겠습니다.

https://github.com/JoHyeonJi0408/Study-Introduction-Website/pull/2/commits/1993b013e13b357f921a26b95367fe4ec6b8ea00

우측 상단 멤버 탭 추가 by JoHyeonJi0408 · Pull Request #2 · JoHyeonJi0408/Study-Introduction-Website