chore: 기초 환경 구축

[ccconac]

💡 작업 내용

• PR template 추가
• 기초 환경 구축 및 라이브러리 설치
• 코드 포맷팅 설정

💡 자세한 설명

clsx 도입 이유

논의 사항에 예시로만 추가해 두었던 clsx 설치를 진행했습니다. tailwindCSS의 단점은 조건부 스타일 로직을 작성할 시 템플릿 리터럴로 인해 가독성이 좋지 않아진다는 것이라 추가했습니다. 사용 유무에 대한 차이는 아래 간략한 코드를 첨부해 두었습니다. 이에 대한 추가적인 의견이나 질문이 있으시면 코멘트 부탁드립니다.

// clsx 사용 전
className={`btn ${isActive ? 'active' : ''} ${isDisabled ? 'disabled' : ''}`}

// clsx 사용 후
className={clsx('btn', isActive && 'active', isDisabled && 'disabled')}

코드 포맷팅

코드 포맷팅 적용이 완료되었습니다. 논의되었던 prettier 설정을 그대로 적용했으나, default 값을 가지고 있던 속성들은 제거하고 notion 문서에 업데이트해 두었습니다. 이 점 참고 부탁드립니다. 또한, eslint 설정은 논의된 바가 없어 필요하다 생각되는 것들만 rules에 추가해 두었습니다. 관련해서 추가되어야 하거나 수정되어야 하는 부분이 있다면 코멘트 부탁드립니다.

const config = {
  semi: true,
  singleQuote: true,
  tabWidth: 2,
  printWidth: 100,
  plugins: ['@ianvs/prettier-plugin-sort-imports', 'prettier-plugin-tailwindcss'],

  // Import 정렬 규칙 (react -> next -> third party -> local)
  importOrder: [
    '^(react/(.*)$)|^(react$)',
    '^(next/(.*)$)|^(next$)',
    '<THIRD_PARTY_MODULES>',
    '',
    '^types$',
    '^@/types/(.*)$',
    '^@/config/(.*)$',
    '^@/utils/(.*)$',
    '^@/hooks/(.*)$',
    '^@/components/(.*)$',
    '^@/styles/(.*)$',
    '^@/shared/(.*)$',
    '^@/app/(.*)$',
    '',
    '^[./]',
  ],
  importOrderParserPlugins: ['typescript', 'jsx', 'decorators-legacy'],
  importOrderTypeScriptVersion: '5.0.0',
};

export default config;

📗 참고 자료 (선택)

[React] clsx()
[Next.js ESLint] TypeError: Converting circular structure to JSON --> starting at object with constructor 'Object' | property 'configs' -> object with constructor 'Object' | property 'flat' -> object with constructor 'Object'... 에러

📢 리뷰 요구 사항 (선택)

설정이 잘못되거나 누락된 부분이 있는지 확인 부탁드립니다.

✅ 셀프 체크리스트

• 머지할 브랜치 확인했나요?
• 이슈는 close 했나요?
• Reviewers, Labels, Projects를 등록했나요?
• 기능이 잘 동작하나요?
• 불필요한 코드는 제거했나요?

closes #1