들어가기전에..

• tawilwind를 사용하니 편리하긴하지만, 반응형을 만들때 미디어쿼리를 사용하는데 breakpoints가 되는 스크린 사이즈가 약간 애매했다.
• 구글링을 해보니 tailwind.config.js에서 breakpoints를 커스텀할수 있어서..프로젝트에 맞게 커스텀을 했다.
• tawilwind는 편리하긴하지만, 정형화? 되어있는게 약간은 제약이 있는거 같아서..더 공부해야겠다는 생각이 들었다...🥸

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    extend: {},
    screens: {
      lg: { max: "1100px" },
       // => @media (max-width: 1100px)
      md: { max: "640px" },
      //=> @media (max-width: 640px)
    },
  },
  plugins: [],
};

PostsGrid.tsx

• 스크린 사이즈가 1100px 이상이면 카드가 3개, 640px과 1100px사이면 카드가 2개, 640px이하면 카드가 하나만 보이게 커스텀하였다..

import { Post } from "@/service/contents";
import React from "react";
import Card from "./Card";

type Props = { contents: Post[] };
export default function PostsGrid({ contents }: Props) {
  return (
    <ul className="grid gap-2 md:grid-cols-1 lg:grid-cols-2 grid-cols-3 ">
      {contents.map((content) => (
        <li key={content.path}>
          <Card content={content} />
        </li>
      ))}
    </ul>
  );
}

Header.tsx

• 스크린 사이즈가 640px이하면 헤더에 있는 꽃이 사라지게 구현

import Link from "next/link";
import { LuFlower2 } from "react-icons/lu";

export default function Header() {
  return (
    <header className="flex justify-between items-center">
      <Link href="/">
        <div className="flex items-center pl-3 pt-3">
          <h1 className="text-2xl font-bold text-pink-500 ml-4">
            {"SungEun's Portfolio"}
          </h1>
          <LuFlower2 className="text-3xl mx-1 text-pink-500 md:hidden" />
        </div>
      </Link>
      <nav className="flex gap-4 mt-5 font-bold text-pink-500 text-lg p-3 mr-4">
        <Link href="/">Home</Link>
        <Link href="/about">About</Link>
        <Link href="/assets/resume.pdf" target="_blank">
          Resume
        </Link>
        <Link href="/contact">Contact</Link>
      </nav>
    </header>
  );
}