-
Notifications
You must be signed in to change notification settings - Fork 2
디렉터리 구조
Minjae Kim edited this page Sep 27, 2023
·
2 revisions
📁src
├── 📜App.tsx
├── 📁apis
│ ├── 📁Like
│ │ └── 📜index.ts
│ ├── 📁comment
│ │ └── 📜index.ts
│ ├── 📁follow
│ │ └── 📜index.ts
│ ├── 📁login
│ │ └── 📜index.ts
│ ├── 📁notice
│ │ └── 📜index.ts
│ ├── 📁password
│ │ └── 📜index.ts
│ ├── 📁posting
│ │ └── 📜index.ts
│ ├── 📁posts
│ │ └── 📜index.ts
│ ├── 📜queryClient.ts
│ ├── 📁search
│ │ └── 📜index.ts
│ ├── 📁signup
│ │ └── 📜index.ts
│ └── 📁user
│ └── 📜index.ts
├── 📁assets
│ └── 📜logo.svg
├── 📁components
│ ├── 📁Alert
│ │ ├── 📜Alert.style.ts
│ │ ├── 📜Alert.tsx
│ │ └── 📜index.ts
│ ├── 📁Avatar
│ │ ├── 📜Avatar.style.ts
│ │ ├── 📜Avatar.tsx
│ │ ├── 📜BadgeAvatar.tsx
│ │ └── 📜index.ts
│ ├── 📁Badge
│ │ ├── 📜DotBadge.style.ts
│ │ ├── 📜DotBadge.tsx
│ │ ├── 📜StackBadge.style.ts
│ │ ├── 📜StackBadge.tsx
│ │ └── 📜index.tsx
│ ├── 📁Button
│ │ ├── 📜Button.tsx
│ │ ├── 📜Buttons.style.ts
│ │ └── 📜index.ts
│ ├── 📁Confirm
│ │ ├── 📜Confirm.style.ts
│ │ ├── 📜Confirm.tsx
│ │ └── 📜index.ts
│ ├── 📁Footer
│ │ └── 📜Footer.style.ts
│ ├── 📁Icon
│ │ ├── 📜Icon.style.ts
│ │ ├── 📜Icon.tsx
│ │ └── 📜index.ts
│ ├── 📁Link
│ │ ├── 📜Link.style.ts
│ │ ├── 📜Link.tsx
│ │ └── 📜index.ts
│ ├── 📁Loader
│ │ ├── 📜Spinner.style.ts
│ │ └── 📜index.ts
│ ├── 📁PostPreview
│ │ ├── 📜PostHeader.tsx
│ │ ├── 📜PostPreview.style.ts
│ │ ├── 📜PostPreview.tsx
│ │ └── 📜index.ts
│ ├── 📁Skeleton
│ │ ├── 📜PostPreviewSkeleton.style.ts
│ │ ├── 📜PostPreviewSkeleton.tsx
│ │ ├── 📜SearchFollowSkeleton.style.ts
│ │ ├── 📜SearchFollowSkeleton.tsx
│ │ ├── 📜SearchPostPreviewSkeleton.tsx
│ │ ├── 📜Skeleton.style.ts
│ │ ├── 📜SkeletonFollowUserInfo.style.ts
│ │ ├── 📜SkeletonFollowUserInfo.tsx
│ │ └── 📜index.ts
│ ├── 📁ThemePicker
│ │ ├── 📜PickerNextButton.tsx
│ │ ├── 📜PickerPreviousButton.tsx
│ │ ├── 📜ThemePicker.style.ts
│ │ ├── 📜ThemePicker.tsx
│ │ ├── 📁hooks
│ │ │ └── 📜useButtonShow.ts
│ │ └── 📜index.ts
│ ├── 📁Toast
│ │ ├── 📜Toast.style.ts
│ │ ├── 📜Toast.tsx
│ │ └── 📜index.ts
│ ├── 📁UserInput
│ │ ├── 📜UserInput.style.ts
│ │ ├── 📜UserInput.tsx
│ │ └── 📜index.ts
│ └── 📁UserText
│ ├── 📜UserId.style.ts
│ ├── 📜UserId.tsx
│ ├── 📜UserName.style.ts
│ ├── 📜UserName.tsx
│ └── 📜index.ts
├── 📁constants
│ ├── 📜Api.ts
│ └── 📜Components.ts
├── 📁hooks
│ ├── 📜useDebounce.ts
│ ├── 📜useFileUpload.ts
│ └── 📜useSessionStorage.ts
├── 📜main.tsx
├── 📁pages
│ ├── 📁NotFound
│ │ ├── 📜NotFound.tsx
│ │ └── 📜index.ts
│ ├── 📁landing
│ │ ├── 📜Landing.style.tsx
│ │ ├── 📜Landing.tsx
│ │ └── 📜index.tsx
│ ├── 📁layout
│ │ ├── 📜Layout.style.ts
│ │ ├── 📜Layout.tsx
│ │ ├── 📁components
│ │ │ ├── 📜AlertButton.styled.ts
│ │ │ ├── 📜AlertButton.tsx
│ │ │ ├── 📜Footer.tsx
│ │ │ ├── 📜Header.style.ts
│ │ │ ├── 📜Header.tsx
│ │ │ ├── 📜IconNav.style.ts
│ │ │ ├── 📜IconNav.tsx
│ │ │ ├── 📜PathNav.style.ts
│ │ │ ├── 📜PathNav.tsx
│ │ │ ├── 📜Search.tsx
│ │ │ ├── 📜SearchBody.style.ts
│ │ │ ├── 📜SearchBody.tsx
│ │ │ ├── 📜SearchButton.style.ts
│ │ │ ├── 📜SearchButton.tsx
│ │ │ ├── 📜SearchFilter.style.ts
│ │ │ ├── 📜SearchFilter.tsx
│ │ │ ├── 📜SearchHead.style.ts
│ │ │ ├── 📜SearchHead.tsx
│ │ │ ├── 📜SearchNoResult.style.ts
│ │ │ ├── 📜SearchNoResult.tsx
│ │ │ ├── 📜SearchResultPost.tsx
│ │ │ ├── 📜SearchResultUser.tsx
│ │ │ └── 📜index.ts
│ │ ├── 📁constants
│ │ │ └── 📜index.ts
│ │ ├── 📜index.tsx
│ │ ├── 📁states
│ │ │ └── 📜openSearch.ts
│ │ ├── 📁types
│ │ │ └── 📜typeGuard.ts
│ │ └── 📁utils
│ │ ├── 📜encodeURIValue.ts
│ │ └── 📜filterPostData.ts
│ ├── 📁login
│ │ ├── 📜Login.style.tsx
│ │ ├── 📜Login.tsx
│ │ ├── 📁components
│ │ │ ├── 📜GoToSignUp.style.ts
│ │ │ ├── 📜GoToSignUp.tsx
│ │ │ └── 📜index.ts
│ │ ├── 📁constants
│ │ │ └── 📜index.ts
│ │ └── 📜index.tsx
│ ├── 📁meditation
│ │ ├── 📜Meditation.style.ts
│ │ ├── 📜Meditation.tsx
│ │ ├── 📁components
│ │ │ ├── 📜MeditationCancelConfirm.tsx
│ │ │ ├── 📜MeditationEndButton.style.ts
│ │ │ ├── 📜MeditationEndButton.tsx
│ │ │ ├── 📜MeditationLabel.style.ts
│ │ │ ├── 📜MeditationLabel.tsx
│ │ │ ├── 📜MeditationTimeSetter.style.ts
│ │ │ ├── 📜MeditationTimeSetter.tsx
│ │ │ ├── 📜MeditationTimer.style.ts
│ │ │ ├── 📜MeditationTimer.tsx
│ │ │ ├── 📜PrevPostingConfirm.tsx
│ │ │ └── 📜index.ts
│ │ ├── 📁constants
│ │ │ └── 📜index.ts
│ │ ├── 📜index.ts
│ │ ├── 📁models
│ │ │ └── 📜channelInfo.ts
│ │ └── 📁states
│ │ └── 📜index.ts
│ ├── 📁notice
│ │ ├── 📜Notice.style.ts
│ │ ├── 📜Notice.tsx
│ │ ├── 📁components
│ │ │ ├── 📁NoticeItem
│ │ │ │ ├── 📜NoticeItem.style.ts
│ │ │ │ ├── 📜NoticeItem.tsx
│ │ │ │ └── 📜index.ts
│ │ │ ├── 📁NoticeList
│ │ │ │ ├── 📜NoticeList.style.ts
│ │ │ │ ├── 📜NoticeList.tsx
│ │ │ │ └── 📜index.ts
│ │ │ └── 📜index.ts
│ │ ├── 📁constants
│ │ │ └── 📜index.ts
│ │ ├── 📜index.ts
│ │ └── 📁utils
│ │ ├── 📜noticeTypeChecker.ts
│ │ ├── 📜typeToIcon.ts
│ │ ├── 📜typeToMessage.ts
│ │ └── 📜typeToNavigate.ts
│ ├── 📁password-update
│ │ ├── 📜PasswordUpdate.style.ts
│ │ ├── 📜PasswordUpdate.tsx
│ │ ├── 📁components
│ │ │ ├── 📜PasswordHint.style.ts
│ │ │ ├── 📜PasswordHint.tsx
│ │ │ └── 📜index.ts
│ │ ├── 📁constants
│ │ │ └── 📜index.ts
│ │ ├── 📜index.ts
│ │ └── 📁utils
│ │ ├── 📜isPasswordOk.ts
│ │ └── 📁passWordUpdateValidations
│ │ └── index.ts
│ ├── 📁postDetail
│ │ ├──📜 PostDetail.style.ts
│ │ ├── 📜PostDetail.tsx
│ │ ├── 📁components
│ │ │ ├── 📜PostComment.style.ts
│ │ │ ├── 📜PostComment.tsx
│ │ │ ├── 📜PostCommentHeader.style.ts
│ │ │ ├── 📜PostCommentHeader.tsx
│ │ │ ├── 📜PostCommentInput.style.ts
│ │ │ ├── 📜PostCommentInput.tsx
│ │ │ ├── 📜PostComments.style.ts
│ │ │ ├── 📜PostComments.tsx
│ │ │ ├── 📜PostContent.style.ts
│ │ │ ├── 📜PostContent.tsx
│ │ │ └── 📜index.ts
│ │ ├── 📜index.ts
│ │ └── 📁utils
│ │ ├── 📜GetMyLike.ts
│ │ └── 📜index.ts
│ ├── 📁posting
│ │ ├── 📜Posting.style.ts
│ │ ├── 📜Posting.tsx
│ │ ├── 📁components
│ │ │ ├── 📁NewPost
│ │ │ │ ├── 📜NewPost.style.ts
│ │ │ │ ├── 📜NewPost.tsx
│ │ │ │ ├── 📜NewPostConfirm.tsx
│ │ │ │ ├── 📜PostingHelper.tsx
│ │ │ │ └── 📜index.ts
│ │ │ ├── 📁SkeletonPosting
│ │ │ │ ├── 📜SkeletonPosting.tsx
│ │ │ │ └── 📜index.ts
│ │ │ └── 📁SkipPosting
│ │ │ ├── 📜SkipPosting.style.ts
│ │ │ ├── 📜SkipPosting.tsx
│ │ │ ├── 📜SkipPostingConfirm.tsx
│ │ │ └── 📜index.ts
│ │ ├── 📁constants
│ │ │ └── 📜index.ts
│ │ ├── 📜index.ts
│ │ └── 📁utils
│ │ ├── 📜createFormData.ts
│ │ ├── 📜index.ts
│ │ └── 📜purifyContent.ts
│ ├── 📁posts
│ │ ├── 📜Posts.style.ts
│ │ ├── 📜Posts.tsx
│ │ ├── 📁hooks
│ │ │ └── 📜useObserver.ts
│ │ ├── 📜index.ts
│ │ └── 📁utils
│ │ └── editPostData.ts
│ ├── 📁profile
│ │ ├── 📜Profile.style.ts
│ │ ├── 📜Profile.tsx
│ │ ├── 📁components
│ │ │ ├── 📜FollowButton.tsx
│ │ │ ├── 📜FollowUser.style.ts
│ │ │ ├── 📜FollowUser.tsx
│ │ │ ├── 📜FollowUserInfo.style.ts
│ │ │ ├── 📜FollowUserInfo.tsx
│ │ │ ├── 📜FollowUsers.tsx
│ │ │ ├── 📜LogoutAlert.tsx
│ │ │ ├── 📜MeditationInfo.style.ts
│ │ │ ├── 📜MeditationInfo.tsx
│ │ │ ├── 📜MeditationInfoItem.style.ts
│ │ │ ├── 📜MeditationInfoItem.tsx
│ │ │ ├── 📜ProfileAvatarEdit.style.tsx
│ │ │ ├── 📜ProfileAvatarEdit.tsx
│ │ │ ├── 📜ProfileCarousel.style.ts
│ │ │ ├── 📜ProfileCarousel.tsx
│ │ │ ├── 📜ProfileCover.style.ts
│ │ │ ├── 📜ProfileCover.tsx
│ │ │ ├── 📜ProfileEdit.style.ts
│ │ │ ├── 📜ProfileEdit.tsx
│ │ │ ├── 📜ProfileHeader.style.ts
│ │ │ ├── 📜ProfileHeader.tsx
│ │ │ ├── 📜ProfileInfo.style.ts
│ │ │ ├── 📜ProfileInfo.tsx
│ │ │ ├── 📜ProfileMain.style.ts
│ │ │ ├── 📜ProfileMain.tsx
│ │ │ ├── 📜ProfileTabItem.style.ts
│ │ │ ├── 📜ProfileTabItem.tsx
│ │ │ ├── 📜ProfileTabs.style.ts
│ │ │ ├── 📜ProfileTabs.tsx
│ │ │ ├── 📜SettingSideBar.style.ts
│ │ │ ├── 📜SettingSideBar.tsx
│ │ │ └── 📜index.ts
│ │ ├── 📁constants
│ │ │ └── 📜profileTabs.ts
│ │ ├── 📁hooks
│ │ │ ├── 📜useCarousel.ts
│ │ │ └── 📜useUploadPhotoMutation.ts
│ │ ├── 📜index.ts
│ │ ├── 📁states
│ │ │ ├── 📜editLoading.ts
│ │ │ ├── 📜editMode.ts
│ │ │ └── 📜selectedTabIndex.ts
│ │ ├── 📁types
│ │ │ └── 📜index.ts
│ │ └── 📁utils
│ │ ├── 📜createTabItems.ts
│ │ └── 📜index.ts
│ └── 📁signup
│ ├── 📁components
│ │ ├── 📜Logo.tsx
│ │ └── 📜index.ts
│ ├── 📁constants
│ │ └── i📜ndex.ts
│ ├── 📜index.tsx
│ ├── 📜signup.style.ts
│ ├── 📜signup.tsx
│ └── 📁validations
│ └── 📜index.ts
├── 📁routes
│ ├── 📜PageRoutes.tsx
│ ├── 📜PrivateRoute.tsx
│ ├── 📜PublicRoute.tsx
│ └── 📁utils
│ └── 📜checkAuth.ts
├── 📁states
│ └── 📜userState.ts
├── 📁styles
│ ├── 📜colors.ts
│ ├── 📜emotion.d.ts
│ ├── 📜global.tsx
│ ├── 📜styles.ts
│ └── 📜theme.ts
├── 📁types
│ ├── 📜Channel.ts
│ ├── 📜Comment.ts
│ ├── 📜Conversation.ts
│ ├── 📜Follow.ts
│ ├── 📜Like.ts
│ ├── 📜Message.ts
│ ├── 📜Notification.ts
│ ├── 📜Post.ts
│ ├── 📜User.ts
│ └── 📜index.ts
├── 📁utils
│ ├── 📜GetMyFollowData.ts
│ ├── 📜checkMyFollow.ts
│ ├── 📜formatDate.ts
│ ├── 📜formatTime.ts
│ ├── 📜getTotalMeditationTime.ts
│ └── 📜index.ts
└── 📜vite-env.d.ts- 해당 컴포넌트에서 쓰일 공통된 로직 (constants, hooks, types, utils)은 폴더로 생성한다.
- 컴포넌트 아래에 다른 depth 를 가진 하위 컴포넌트가 생기더라도 같은 레벨에 폴더를 생성한다.
- @emotion/Styled 컴포넌트는 분리한다. (파일명:컴포넌트명.style.ts)
-
index.tsx가 아닌index.ts를 사용한다. -
index.ts는 해당 폴더의 컴포넌트를 모아서 export 해주는 용도로만 사용한다.
import DotBadge from './DotBadge'; import StackBadge from './StackBadge'; export { DotBadge, StackBadge };