Skip to content

개발 환경 세팅#3

Merged
lolWK merged 3 commits into
mainfrom
chore/#2-개발-환경-세팅
Dec 25, 2023

Hidden character warning

The head ref may contain hidden characters: "chore/#2-\uac1c\ubc1c-\ud658\uacbd-\uc138\ud305"
Merged

개발 환경 세팅#3
lolWK merged 3 commits into
mainfrom
chore/#2-개발-환경-세팅

Conversation

@lolWK

@lolWK lolWK commented Dec 25, 2023

Copy link
Copy Markdown
Owner

전체 세팅

  • next.js
  • tailwind, shadcn
  • supabase
  • tictap: 에디터
  • font: Pretendard, Hahmlet 폰트
  • svg

next.js, tailwind 설치

npx create-next-app@latest

shadcn 설치

npx shadcn-ui@latest init

tailwind에서 font 커스텀 하기

// globals.css
@layer base {
  @font-face {
    font-family: 'Pretendard';
    src: url('/assets/fonts/Pretendard-Light.subset.woff2') format('woff2');
    font-weight: 300;
    font-display: swap;
  }

  @font-face {
    font-family: 'Hahmlet';
    src: url('/assets/fonts/Hahmlet-Medium.ttf') format('truetype');
    font-weight: 500;
    font-display: swap;
  }
}
// tailwind.config.ts
const config = {
  theme: {
    extend: {
      fontFamily: {
        p: ['Pretendard', ...defaultTheme.fontFamily.sans],
        h: ['Hahmlet', ...defaultTheme.fontFamily.serif],
      },
    }
   }
}

svg Icon 컴포넌트로 사용하기

npm install @svgr/webpack --save-dev

// next.config.js

/** @type {import('next').NextConfig} */
const nextConfig = {
  webpack: (config) => {
    config.module.rules.push({
      test: /\.svg$/,
      use: ['@svgr/webpack'],
    });

    return config;
  },
};

module.exports = nextConfig;

@lolWK lolWK added the feature label Dec 25, 2023
@lolWK lolWK self-assigned this Dec 25, 2023
@lolWK lolWK linked an issue Dec 25, 2023 that may be closed by this pull request
6 tasks
@vercel

vercel Bot commented Dec 25, 2023

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Updated (UTC)
myblog ✅ Ready (Inspect) Visit Preview Dec 25, 2023 3:53pm

@lolWK lolWK merged commit ed9ff7d into main Dec 25, 2023
@lolWK lolWK changed the title chore: 개발 환경 세팅 개발 환경 세팅 Dec 31, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

개발 환경 세팅

1 participant