Featuring : 초기 세팅

[guesung]

💡 왜 PR을 올렸나요?

• 신규 피처

💁 무엇이 어떻게 바뀌나요?

1. tailwind 설치하였습니다.

1. tailwind.config를 설정하였습니다.

const { colors, pxToRemTailwind, animations } = require('./styles/theme');

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ['./src/**/*.{js,jsx,ts,tsx}'],
  theme: {
    extend: {
      ...pxToRemTailwind,
      colors,
      keyframes: animations,
      animation: {
        slideUp: 'slideUp 0.5s ease-in-out',
      },
    },
// ...
  },
  plugins: [require('prettier-plugin-tailwindcss')],
};

1. pxToRemTailwind를 적용하였습니다.

pxToRem[i.toString()] = `${(i * 0.0625).toFixed(4)}rem`;
- 이에 따라�taillwind단위를 작성하실 때 px을 안붙히셔도 됩니다. e.g. `w-500` -> `width:500rem; 자동 적용
2. `colors.ts`를 적용하였습니다. `color.ts`에서 디자인 시스템 바탕으로 `color`를 정의하면 됩니다
```js
export const colors = {
  white: '#FFFFFF',
  gray: {
    '030': '#F9F9FB',
    '050': '#F7F7FA',
  },
} as const;

3. 기본적인 animations.ts를 적용하였습니다.

• slideIn,fadeIn 등이 있습니다.

2. eslint를 설정하였습니다.

• 이전 프로젝트에서 사용하던 eslint를 적용하였는데, 추가 혹은 수정할 부분 있으시면 말씀해주세용
• 혹은 진행하면서 불편하거나, 필요한 부분 추가해도 괜찮을 것 같아용

3. prettier를 설정하였습니다.

module.exports = {
  trailingComma: 'es5',
  tabWidth: 2,
  semi: true,
  printWidth: 100,
  singleQuote: true,
  "plugins": [
    "prettier-plugin-tailwindcss"
  ],
};

4. github action을 추가하였습니다.

1. auto label : Component, Fix 등 .github>labeler.yml에 있는 라벨을 Pull Request의 제목 혹은 내용에 입력하면 자동으로 label이 생성됩니다.
2. auto-assign : 자동으로 assignee가 PR 올린이에게 부여됩니다.

5. husky를 설정하였습니다.

1. push를 할 때, master혹은 develop branch라면 push가 되지 않습니다.

📆 작업 예정인 것이 있나요 ?

• Header 공통 컴포넌트 제작

💬 리뷰어분들께

자유롭게 리뷰해주세용

이해안가는 부분 있으시면 질문도 좋아요

토론도 환영입니다 ~

[seondal]

으아아 .next가 같이 커밋되었어요 8ㅁ8