폴더 및 파일 구조

FE

FE 폴더 구조

.
├── build
├── public
└── src
     ├── index.js # 진입점
     ├── App.jsx # App
     ├── setupProxy.js # dev모드에서 cors해결을 위한 Proxy 설정
     ├── api # api 관련 함수 및 로직을 모아둔 폴더
     ├── assets # Assest resource(image, icon, font ...)
     ├── components # component들을 모아놓은 폴더
     ├── constant # 상수 파일 관리
     ├── contexts # context API를 활용한 지역 및 전역 상태관리
     ├── hoc # High orider component
     ├── hooks # custom react hooks
     ├── layouts # layout style for Entire serivce
     ├── mocks # mock api % mock data 
     ├── pages # 컴포넌트를 조합하여 만든 route에서 사용하는 페이지
     ├── router # 페이지 라우팅 관리
     ├── service # 비즈니스 로직과 관련된 자주 쓰는 함수
     ├── styles # 전역 스타일 및 styled-component 엔트리
     ├── types # js-doc를 사용하기 위한 typedef 설정 폴더
     └── utils # 비즈니스 로직과 관계없이 자주 쓰는 함수

FE Components / pages폴더 설명

Common 폴더에는 비즈니스 로직과 관계없이 범용적으로 사용하는 컴포넌트들을 모아두었습니다.

그 외 컴포넌트들은 비즈니스 로직과 관련있는 특정 페이지에서 사용하는 컴포넌트입니다.

.
├── Common # 비즈니스 로직과 관계없이 범용적으로 사용하는 컴포넌트
│   ├── BackButton
│   ├── Button
│   ├── CheckInput
│   ├── Divider
│   ├── Dropdown
│   ├── Image
│   ├── Like
│   ├── Loader
│   ├── SelectInput
│   ├── Tabs
│   ├── TextArea
│   ├── TextInput
│   ├── UpperButton
│   └── WindowModal
# 비즈니스 로직과 관련있는 특정 페이지에서 사용하는 컴포넌트 
├── CardsGrid
├── ComentContainer
├── GlobalNavigation
├── Loader
├── MarkdownEditor
├── PostInfo
├── ProfileImg
├── SocialLoginButtons
├── TeamBelongCheckInput
├── TeamCard
├── TechSkills
├── TechStackSelectInput
├── ToastNotification
└── UserCard

FE Component 디자인 패턴

.
└── Component
	   ├── index.jsx # react 컴포넌트 파일
	   ├── Component.stories.jsx # story book 파일
	   └── Component.style.js # styled-component 파일 

BE

.
├── bin
├── build
├── gradle
│   └── wrapper
├── src
│   ├── main
│   │   ├── generated
│   │   ├── java
│   │   └── resources
│   └── test
│       └── java
└── webapp # front