블로그 프로젝트 게시물 레이아웃 (+라우팅)

---

목차

1. 네비게이션, 푸터 레이아웃 + 사이드메뉴 대략적인 스타일

• page, layout, component는 각각 하나의 역할만

2. 게시물 카드(목록) 스타일 구현

 

3. 게시물 상세 스타일 + 라우팅

---

1. 네비게이션, 사이드메뉴, 푸터 레이아웃

사이드 메뉴

• fixed로 왼쪽에 고정을 해준다.
• side menu의 width를 기준으로 레이아웃이 배치될 수 있도록 네브헤드, 메인, 푸터는 왼쪽을 --w-nav-side만큼 비워주도록 한다.

• 호버 효과를 mixin으로 만들어 준다. (*앞으로는 모든 hover 효과는 hover mixin에서 관리하도록 합니다.)

@mixin hover($bg: #369) {
  transition: background 0.3s;
  cursor: pointer;
  &:hover {
    background: $bg;
  }
}

.subject {
  // ...;
  @include hover;
}

네브 헤드

• 특이사항 없음

푸터

• 푸터는 메인 페이지의 크기만큼 아래로 밀려나도록 한다.

---

*page, layout, component 각각이 자신의 역할만을 가지도록 합니다.

• page: 라우팅과 api 역할만을 맡도록 한다.
• layout: 정적인 컴포넌트의 위치와 순서를 결정하는 역할만을 맡도록 한다.
• component: 컴포넌트의 기능 또는 fetch한 데이터의 결과 (데이터)를 가지고 동적인 기능을 구현하는 역할만을 맡도록 한다.

---

2. 페이지에 들어갈 게시물 카드

게시물 카드

- Next.js의 <Image/> 컴포넌트는 유용한 기능이 많은데,

로컬의 이미지가 아닌 외부 url image를 넣어주기 위해서는 간단한 세팅을 해야한다.

 

next.config.js

/** @type {import('next').NextConfig} */
const nextConfig = {
  images: {
    remotePatterns: [
      {
        protocol: "http",
        hostname: "localhost",
      },
      {
        protocol: "https",
        hostname: "cdn.pixabay.com",
      },
    ],
  },
};

module.exports = nextConfig;

• 위와 같이 images.remotePatterns 속성의 배열 안에 외부에서 가져올 url 주소를 입력해주어야한다.
• protocol에는 프로토콜 방식, 그리고 hostname에는 도메인인 cdn.pixabay.com을 넣어주면 된다.
  ex) https://cdn.pixabay.com/photo/2023/08/29/19/09/starling-8221990_640.jpg

• 그리고 width와 height를 정해주어야 한다.
  <Image className={styles.image} src={src} alt={"post cover"} width={300} height={300} />

• style로 Image 컴포넌트에 width: 100%를 적용시키면 이미지가 width보다 작을 경우 부모 박스만큼 채울 수 있다.

width: 100%; 적용 전 박스가 채워지지 않은 이미지

---

+ 페이지네이션 컴포넌트도 미리 만들어 뒀다. (현재는 스타일만)

추후에 이하의 props를 전달하면 페이지네이션을 자동으로 생성해주는 기능을 구현한다면 어디서든 재사용 할 수 있을 것이다.

• totalItemCount: 아이템의 총 갯수
• displayItemCount: 페이지당 출력할 아이템 수
• fetchLink: 페이지 쿼리를 제외하고 GET 요청을 보내기 위한 API 주소 

---

3. 게시물 레이아웃 (+게시물 라우팅)

게시물 카드를 클릭하면 post/[postId]로 라우팅이 되도록 하자.

카드를 클릭하면 해당 포스트로 이동할 수 있도록 link를 만들어 준다.

(임시로 만든 데이터입니다. 실제로는 link를 저장하는 것이 아닌, postId로 DB에 요청을 할 것입니다.)

 

Next.js에서는 폴더구조로 라우팅을 한다.

[postId]와 같이 폴더이름에 대괄호를 씌워주면 대괄호 안의 문자가 params의 값이 된다.

 

게시물 카드를 클릭하면 아래와 같이 이동하게 되고,

 

/post/[postId]/page.js 파일에서 아래와 같이 Post 컴포넌트를 만들고 props로는 postId를 전달하도록 한다.

const PostRouter = (props: any) => {
  return <div>{props.params.postId && <Post postId={props.params.postId} />}</div>;
};

export default PostRouter;

 

게시물 id를 포함하여 get 요청을 보내 데이터를 받아와야하지만,

아직 DB에 연결을 하지 않았기 때문에 임시 데이터로 대신했다.

  const cardData: post[] = [
    {
      id: 1,
      link: "/post/1",
      src: "https://cdn.pixabay.com/photo/2023/08/29/19/09/starling-8221990_640.jpg",
      title: "제목제목제목제목제목제목제목제목제목제목제목제목",
      subtitles: ["#페이지네이션", "#레이지로딩", "#예약", "#페이지네이션", "#레이지로딩", "#예약"],
      languages: ["#JavaScript", "#Rust", "#Go", "#JavaScript", "#Rust", "#Go"],
      content: "ㅇㅇㅇㅇㅇㅇㅇ\nㅇㅇㅇㅇㅇㅇㅇ\nㅇㅇㅇㅇㅇㅇㅇ",
      commentCount: 10,
      author: "young",
      date: new Date(),
      likes: 7,
    },
]

  const fetchedData = cardData.find((item) => item.id.toString() === postId);

 

존재하는 게시물 id라면 Post 컴포넌트를 보여주고, 그렇지 않다면 존재하지 않는 게시물이라는 알림을 띄워준다.

 

이제 게시물에 쓰일 데이터를 미리 설계하고,

설계한 데이터를 바탕으로 레이아웃을 그려주면 게시물 레이아웃+라우팅 구현이 완료된다.