파일 컨벤션

import 순서

1. 라이브러리
2. 컴포넌트
   • 공통 컴포넌트를 import 할 경우 위 순서대로
     1. Atoms
     2. Molecules
     3. Organisms
3. api 함수
4. custom hooks
5. store
6. utils 함수
7. 그외

• 같은 레벨에 있는 파일인 경우, 알파벳 순서대로 배치
• ex) React, Redux, Atoms/Input, Atoms/Button, Molecules/Hashtags, Organisms/Modal, 게시글 GET api, custom hooks, store 파일을 import 할 경우

import React from "react";
import Redux from "redux";
import Button from "Components/Atoms/Button";
import Input from "Components/Atoms/Input";
import HashTags from "Components/Molecules/HashTags";
import Modal from "Components/Organisms/Modal";
import getArticles from "Components/Apis/getArticles";
import useDecouned from "Hooks/useDebounced";
import markDownStore from "Store/MarkDown";

컴포넌트 Props 적용

• React.FC를 사용하지 않음

export interface Props {
  className?: string;
  index: string;
  status: "success" | "error";
  text: string;
}

const Alert = ({ className, index, status, text }: Props) => {
   ......
}

컴포넌트 return

return (
     <>
        ......
     </>
  )

css style 순서

1. position
2. display
3. width, height
4. top, right, bottom, left
5. padding, margin
6. border
7. 그외