안녕하세요
블로그 프로젝트 게시물 레이아웃 (+라우팅) 본문
목차
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보다 작을 경우 부모 박스만큼 채울 수 있다.
+ 페이지네이션 컴포넌트도 미리 만들어 뒀다. (현재는 스타일만)
추후에 이하의 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 컴포넌트를 보여주고, 그렇지 않다면 존재하지 않는 게시물이라는 알림을 띄워준다.
이제 게시물에 쓰일 데이터를 미리 설계하고,
설계한 데이터를 바탕으로 레이아웃을 그려주면 게시물 레이아웃+라우팅 구현이 완료된다.
'Next13 블로그 프로젝트' 카테고리의 다른 글
게시물 수정 기능 구현, 권한 없는 이용자 접근 제한 방법 (0) | 2023.09.19 |
---|---|
React-Quill로 게시물 편집, DB에 저장하기 (0) | 2023.09.18 |
Middleware로 권한이 없는 유저 "/"로 redirect 시키기 (0) | 2023.09.15 |
MongoDB 타입 설정 + DB에서 게시물 요청 (필드 제한하기) (0) | 2023.09.12 |
나만의 Next.js Blog 프로젝트 구상 (0) | 2023.09.09 |