Skip to content

폴더 구조

Jump to bottom
Yongjun Park edited this page Aug 18, 2023 · 4 revisions

들어가며

Folder-By-Feature 방식을 따르고 있어요. 이 폴더 구조는 새 기능 확장에 유연해요.

src 외부

중요한 부분만 소개할게요.

42Stat-Frontend
├── .github : ex) workflows
├── app
│   ├── .storybook
│   ├── env : submodule
│   ├── public : ex) fonts, favicon.ico, og-image.png
│   ├── src
│   │   └── ...
│   ├── index.html
│   ├── package.json
│   └── 기타 config 파일들
├── docker-compose.yml
├── Dockerfile
└── entry.sh
  • docker-compose.prod.yml, Dockerfile.prod, entry.prod.sh는 production 모드(pnpm build)일 때 실행돼요.

src 내부

@core

상위 컴포넌트에서만 사용하는 기능들

@core
├── atoms : ex) isSpotlightOpenAtom, reLoginDialogInfoAtom
├── components : ex) Header, NavBar, Footer, Spotlight
├── contexts : ex) SpotlightFocusContext
├── guards : ex) AuthGuard, UnAuthGuard
├── layouts : ex) LandingLayout, MainLayout
├── providers
├── services : ex) getNewAccessToken
├── styles : ex) defaultTheme, global
├── AppProvider.tsx
└── AppRoutes.tsx
  • providers, AppProvider.tsx, AppRoutes.tsx이 궁금하다면, 라우팅 구조를 참고하세요.

@shared

하위 feature 들에서 공통으로 사용하는 기능들

@shared
├── __generated__
├── assets : ex) default avatar, md icons, github logo
├── atoms : ex) userAtom
├── components
│   ├── ApolloError : Apollo Error 시 보여줄 뷰 ex) ApolloErrorView, FullPageApolloErrorView
│   ├── Chart : ex) AreaChart, Barchart, DonutChart, LineChart, PieChart, RadarChart
│   ├── Dashboard, DashboardContentView
│   ├── EvalLogList
│   ├── LoginButton
│   ├── Pagination
│   ├── CoalitionMark.tsx
│   ├── ProgressionBar.tsx
│   └── Seo.tsx
├── constants : ex) aria-label, breakpoint, ft-oauth endpoint, routes, storage key
├── hooks : 기본 hook ex) useDisclosure, useIntersection, useRoveFocus
├── types
│   ├── fragments : GraphQL fragment ex) userPreviewFields
│   └── PropsWithChildren.d.ts
├── ui-kit
│   ├── Avatar
│   ├── Clickable, Button
│   ├── Center, Stack, Spacer
│   ├── Modal, Portal, Overlay, Dialog, Drawer
│   ├── Writable, Input
│   ├── Label
│   ├── Tab, Switch, SegmentedControl
│   └── Tooltip
├── ui-kit-styled : ex) CustomBox, SkeletonAnimation (이후 정리할 예정)
└── utils : ex) facepaint, formatters, shortcut keydown event

Feature 폴더들

src
├── @core
│   └── ...
├── @shared
│   └── ...
├── Error : ex) 404
├── EvalLogSearch * 해당 파트의 구조를 바탕으로 리팩토링을 진행할 예정이에요. 
│   ├── api : gql queries
│   ├── atoms
│   ├── components : ex) EvalLogSearchHeader, EvalLogSearchURLReader, EvalLogSearchContent, EvalLogSearchArgsDialogTrigger
│   ├── hooks : ex) useInfiniteScrollIndex, useSearchTotalCount
│   └── index.tsx : /evallog
├── FtOAuthRedirect : ft-oauth callback url
├── FtOAuthRequest : 최초 1회 42 인증이 필요합니다 페이지
├── Home
├── Landing : 비로그인 시 나오는 랜딩 페이지
├── Leaderboard
├── Profile
├── Project
├── Setting
│   ├── sections : LinkGoogle(계정 연동), Feedback(피드백 보내기), Account(계정 관리)
│   └── index.tsx : /settings
├── Team
│   ├── components : ex) MoulinetteEvalLogListItem
│   └── index.tsx : /team/:id
├── App.tsx
└── main.tsx

Home, Profile, Project (Dashboard 템플릿)

Home
├── components
│   └── MyInfo
├── constants : ex) Programming Quotes
├── dashboard-contents : Coalition, Eval, Team, User
├── dashboard-frames : ex) homeStatus~(여행 현황), homeCircle~(이너서클 및 멤버), homeRecord~(역대 기록), homeCoalition~(코알리숑)
└── index.tsx : /home

Profile
├── components
│   └── UserProfile
├── contexts : ex) MyUserProfileContext(내 프로필), UserProfileContext(검색한 유저 프로필)
├── dashboard-contents : General, Eval, Versus 카드
├── dashboard-contents-queries
├── dashboard-frames
├── pages : General, Eval, Versus 페이지
└── index.tsx : ProfileLayout

Project
├── components
│   └── ProjectIntroduction : 프로젝트 상세 페이지 상단부
├── contexts : ex) ProjectNameContext
├── dashboard-contents
├── dashboard-contents-queries
├── dashboard-frames
├── ProjectDetailPage.tsx
└── index.tsx : (예정) 프로젝트 리스트 페이지

Leaderboard (Leaderboard 템플릿)

Leaderboard
├── components
│   └── Leaderboard : ex) Leaderboard, LeaderboardList, LeaderboardListItem
├── pages : Level, ExpIncrement, CoalitionScore, EvalCount 페이지
└── index.tsx : LeaderboardLayout (Tabs)
  • Leaderboard 템플릿은 Leaderboard 내부에서만 사용되므로 @shared가 아니에요.

주의할 점

  • src 내부에서 사용하는 에셋은 public이 아닌 assets 폴더에 넣어야 해요. public 폴더에 있는 파일은 빌드 과정에서 압축되지 않고 그대로 남아 성능에 좋지 않아요.
Clone this wiki locally