📖 코드 및 네이밍 컨벤션

📌 코드 컨벤션

1️⃣ export

페이지 컴포넌트는 default export 로 내보내 주세요! 추후 lazy loading 을 위함 입니다!

export default function Page() {}

페이지를 제외한 기타 컴포넌트는 해당 컴포넌트 이름으로 하위디렉토리를 만들고, index.tsx 파일을 만들어 작업해주세요!
이후, 화살표 함수를 이용해 named export 로 내보내 주세요!

// src/components/MyComponent/index.tsx
export const MyComponent = () => {
    return <></>;
};

2️⃣ types

Props 에 대한 타입은 MyComponentProps 와 같은 형식으로 interface 로 지정해 주세요

// src/components/MyComponent/index.tsx
interface MyComponentProps {
    children: React.ReactNode;
}

export const MyComponent = ({ children } : MyComponentProps) => {
    return <></>;
};

3️⃣ props

Props 는 구조분해할당을 이용하여 사용해주세요!

export const Good = ({ prop1, prop2 }) => {};

export const Bad = (props) => {};

4️⃣ Style 컴포넌트

Style 컴포넌트 (특정 컴포넌트의 스타일링에만 사용되는 컴포넌트) 는 컴포넌트 하위 디렉토리에 index.style.ts 로 파일을 분리해주세요
이후 해당 컴포넌트가 구현된 파일에서 import * as Styles from "./index.style.ts"; 와 같이 사용해주세요

// src/component/MyComponent/index.tsx
import * as Styles from "./index.style.ts";

export const MyComponent = () => {
    return (
        <Styles.Wrapper>
            <Styles.Container>
                <Styles.Item></Styles.Item>
                <Styles.Item></Styles.Item>
            </Styles.Container>
        </Styles.Wrapper>
    );
};

// MyComponent.style.tsx
export const Wrapper = styled.div``;
export const Container = styled.div``;
export const Item = styled.div``;

5️⃣ 네이밍 컨벤션

CSS Style MixIn 은 snake_case 로,
일반 함수 / 변수는 camelCase 로,
컴포넌트는 PascalCase 로 작성해주세요!

// src/style/utils.ts
import { css } from "@emotion/react";

export const place_center = css`
    display: flex;
    justify-content: center;
    align-items: center;
`;

// src/store/auth.slice.ts
export const authSlice = createSlice({
    name: "getp/auth",
    initialState,
    // ...
});

export const MyComponent = () => {};

하위 컴포넌트 명을 명명하기 어려울때 참고하시면 좋을 듯 합니다!
저는 Wrapper > Container > (Items) > Item > … 으로
세단계의 하위 Element 로 분리되는 경우 Header Body Footer 로 작명하는 편입니다