Eslint & Prettier 설정 컨벤션

☑️ 폴더 / 파일 컨벤션

<aside> 🐫 폴더명은 파스칼케이스로 작성합니다. (pages, components, assets, 등의 폴더는 제외)

	─── src
    ├── assets
    ├── components
    │   ├── **Album**
    │   ├── **Alert**
    │   ├── **Buttons**
    │   ├── **Comment**
    │   ├── **Content**
    │   └── **User**
    ├── pages
    │   ├── **ChatFeed**
    │   ├── **ChatRoom**
    │   ├── **Splash**
    │   └── **YourProfile**
    └── 

</aside>

<aside> 👴🏻 컴포넌트 파일(.jsx)은 파스칼케이스로 작성합니다. (컴포넌트 파일 외의 다른 파일들은 카멜케이스로 작성합니다. ex 커스텀 훅)

  ├── components
  │   └──  ProductPrice 
	│				 └──  **ProductPrice.jsx**
  └──  						

</aside>

<aside> 🍭 스타일 컴포넌트 파일은 스타일을 적용할 컴포넌트의 이름앞에 Styled를 붙여줍니다.

├── components
│   └──  ProductPrice 
│				 ├──  ProductPrice.jsx
└──  		 └──  **StyledProductPrice.jsx**

</aside>

☑️ 네이밍 컨벤션

<aside> 🐫 함수명, 변수명은 카멜케이스로 작성합니다.

let soldOutMenu;
const changeCategory = () => {};

</aside>

<aside> 🐍 상수는 영문 대문자 스네이크 표기법(Snake case)를 사용합니다.

const UPPER_SNAKE_CASE;

</aside>

<aside> 💡 Boolean 값 (true, false)이 저장되는 변수는 is를 접두사로 붙입니다.

const isPending = true;
const isChecked = false;

</aside>

<aside> 🏃🏻‍♀️ 함수명은 동사형으로 시작하여 해당 함수의 역할을 정확히 표현합니다.

const getValue = () => {};

</aside>

<aside> 🚗 이벤트핸들러에는 handle을 접두사로 붙입니다.

export default function Login() {
    const handleSubmit = () => {}

    return (
        <form onSubmit={handleSubmit}></form>
    )
}

</aside>

☑️ import 및 CSS 작성 순서

• 깃허브 CSS common component 작성 방법

<aside> 🔧 파일 내 import 순서는 패키지(모듈), 컴포넌트, 스타일 컴포넌트 순으로 합니다.

import React from 'react'
import { useEffect, useState } from 'react'
import styled from "styled-components";

import Cart from '../../components/Cart/Cart'
import Card from '../../components/Card/Card'
import FailLoadData from '../../components/Shared/FailLoadData/FailLoadData';

import { Wrapper, Span, StyledButton } from "./NotFoundPage.style";

</aside>

<aside> 🎨 CSS 작성 순서는 다음과 같이 작성합니다. (상위 정도의 순서만 지켜도 무방)

**display
position
width/height
margin/padding/border**
text 관련
color 관련
tranform, transition, animation
기타

//예시
.fill-button {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 140px;
    height: 48px;
    border: none;
    border-radius: 2px;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.6;
    letter-spacing: -0.05em;
    color: #fff;
    background-color: #3040c4;
    transition: opacity 300ms ease-in-out;
}

</aside>