next js 설치
yarn create next-app .를 통해 설치한다.
success Installed "create-next-app@14.0.4" with binaries:
- create-next-app
√ Would you like to use TypeScript? ... Yes
√ Would you like to use ESLint? ... Yes
√ Would you like to use Tailwind CSS? ... Yes
√ Would you like to use `src/` directory? ... No
√ Would you like to use App Router? (recommended) ... Yes
√ Would you like to customize the default import alias (@/*)? ... Yes
√ What import alias would you like configured? ... @/*
폰트 적용
https://nextjs.org/docs/pages/api-reference/components/font
"next/font/google" 모듈에 인기 폰트들이 담겨있다.
// app\layout.tsx
import type { Metadata } from "next";
import { Noto_Sans_KR } from "next/font/google";
import "./globals.css";
const notoSansKr = Noto_Sans_KR({
// 사용할 font weight만 불러온다.
weight: ["400", "500", "700", "900"],
});
export const metadata: Metadata = {
title: "개쩌는 메모앱",
description: "Generated by create next app",
};
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang="ko">
{/* 모듈.className을 통해 기본 폰트로 지정한다. */}
<body className={notoSansKr.className}>{children}</body>
</html>
);
}
tailwind 테마 추가
https://tailwindcss.com/docs/theme
https://stackoverflow.com/questions/37990812/css-background-stripes-on-div
DAYGRAM을 클론코딩하기 위해서는 사선 줄무늬가 그어진 배경이 필요하다.
아래와 같이 tailwind.config.ts 파일에 추가할 수 있다.
import type { Config } from "tailwindcss";
const config: Config = {
content: [
"./pages/**/*.{js,ts,jsx,tsx,mdx}",
"./components/**/*.{js,ts,jsx,tsx,mdx}",
"./app/**/*.{js,ts,jsx,tsx,mdx}",
],
theme: {
extend: {
backgroundImage: {
"gradient-diagonal":
"repeating-linear-gradient(-45deg, rgba(31, 41, 55, 0.3), rgba(31, 41, 55, 0.3) 2px, transparent 2px, transparent 10px)",
},
},
},
plugins: [],
};
export default config;
이렇게 등록한 backgroundImage 테마는 bg-gradient-diagonal와 같이 불러와 사용할 수 있다.
<div className="bg-gradient-diagonal" />
Atoms 요소 추가
Tailwind의 장점은 유지하면서, 스타일을 추상화하는 방법에 대해 고민하다가 Atomic Design을 적용하는 것이 가장 무난하겠다는 생각이 든다.
components\atoms\Box.tsx 컴포넌트를 만들고 아래와 같이 작성하였다.
const Box = ({
background = "",
justifyContent = "",
children = null,
padding = "",
className = "",
}: {
background?: "" | "bg-gradient-diagonal";
justifyContent?: "" | "justify-center";
padding?: "" | "p-4";
children?: React.ReactNode;
className?: string;
}) => {
return (
<div
className={`border-solid border border-gray-800 ${background} w-full h-full flex align-middle ${justifyContent} ${padding} ${className}`}
>
{children}
</div>
);
};
export default Box;
해당 컴포넌트는 아래와 같이 div태그로 감싸 크기를 지정한 다음 사용하면 된다.
import Box from "@/components/atoms/Box";
export default function Home() {
return (
<main className="flex min-h-screen flex-col items-center justify-between p-24">
<div>
<Box background="bg-gradient-diagonal" padding="p-4">
놀랍군
</Box>
</div>
</main>
);
}
스토리북 설정
아토믹 디자인에는 역시 스토리북이 최고다.
npx storybook@latest init
해당 명령어를 실행하면 현재 프로젝트의 패키지 매니저와 프로젝트 종류, 설정 등에 따라 자동으로 설정을 해준다.
yarn 3 (yarn berry 설정하기)
한편 var stringWidth = require('string-width')와 관련된 에러가 발생할 수 있다.
https://github.com/storybookjs/storybook/issues/22431
위 링크를 통해 yarn을 버전3로 업그레이드 하면 된다는 정보를 얻었고, 아래의 링크를 통해 yarn berry를 적용하였다.
https://duck-blog.vercel.app/blog/web/what-is-yarn-berry
yarn set version berry
커밋내역에 gitignore 추가 설정하기
gitignore를 추가 설정해야 하는 경우 아래의 링크를 참고하여 커밋 내역에도 gitignore를 적용하자
https://cjh5414.github.io/gitignore-update/
tailwind css 적용하기
.storybook\preview.ts 파일에 import "../app/globals.css";를 추가하여 tailwind css의 스타일을 적용시킨다.
story 만들기
stories\Box.stories.ts
import Box from "../components/atoms/Box";
import type { Meta, StoryObj } from "@storybook/react";
const meta = {
title: "Example/Box",
component: Box,
} satisfies Meta<typeof Box>;
export default meta;
type Story = StoryObj<typeof meta>;
export const Default: Story = {
args: {
children: "박스 Box 0123",
},
};
위와 같이 BOX 컴포넌트를 import한 후, yarn story로 실행시키면 원하는 화면이 나온다.
