Portfolio

프롱이님! 따봉 드릴게요 - TTaBong

달리팀 프로젝트 TTaBong[따봉] : 칭찬감사 SNS 어플리케이션

깃 레포 바로가기

팀 노션 바로가기

프로젝트 소개

팀원 소개

GITHUB

GITHUB, TISTORY

GITHUB

📃 Doc

🧥

Git Convention

프로젝트 구조

각 컴포넌트 구조

Ex)

┣ 📂Avatar ┣ 📜index.jsx ┣ 📜index.stories.jsx ┗ 📜style.jsx

각 컴포넌트 이름으로 폴더 생성

이후 아래에 index.jsx, stories.jsx, style.jsx 파일을 생성함으로써 각 컴포넌트를 구성

index.jsx : Component UI및 로직

stories.jsx : storybook file

style.jsx : emotion/styled Component

디렉토리 구조

📂Apis

Api 코드

📂assets

svg, png 등 이미지 파일을 보관

📂commons

GlobalStyle , themes

constants

📂components

웹앱 전반적으로 재사용되는 base 컴포넌트

📂feature

도메인 관련 컴포넌트

📂hooks

커스텀훅들을 저장

📂pages

웹앱의 각 페이지를 담당하는 컴포넌트

📂routes

ProtectedRoute : 로그인 하지 않았을 경우 접근 불가능한 Route

AuthRoute : 로그인 상태 시 접근 불가능한 Route

📂utils

재사용되는 로직(hook이 들어가지 않은)

전체 폴더 구조


📦src
 ┣ 📂apis
 ┃ ┣ 📜ReadMe.md
 ┃ ┣ 📜api.js
 ┃ ┣ 📜auth.js
 ┃ ┣ 📜channels.js
 ┃ ┣ 📜comments.js
 ┃ ┣ 📜follow.js
 ┃ ┣ 📜index.js
 ┃ ┣ 📜like.js
 ┃ ┣ 📜messages.js
 ┃ ┣ 📜notifications.js
 ┃ ┣ 📜posts.js
 ┃ ┣ 📜search.js
 ┃ ┣ 📜settings.js
 ┃ ┗ 📜users.js
 ┣ 📂assets
 ┃ ┣ 📂icons
 ┃ ┣ 📂images
 ┣ 📂commons
 ┃ ┣ 📂constants
 ┃ ┃ ┣ 📜apis.js
 ┃ ┃ ┣ 📜error.js
 ┃ ┃ ┣ 📜index.js
 ┃ ┃ ┣ 📜routes.js
 ┃ ┃ ┗ 📜string.js
 ┃ ┗ 📂style
 ┃ ┃ ┣ 📜GlobalStyle.jsx
 ┃ ┃ ┗ 📜themes.js
 ┣ 📂components
 ┃ ┣ 📂Avatar
 ┃ ┣ 📂AvatarBorder
 ┃ ┣ 📂Badge
 ┃ ┣ 📂BaseCardContainer
 ┃ ┣ 📂Button
 ┃ ┣ 📂Divider
 ┃ ┣ 📂Icon
 ┃ ┣ 📂Image
 ┃ ┣ 📂ImageUploadContainer
 ┃ ┣ 📂InputForm
 ┃ ┣ 📂Label
 ┃ ┣ 📂Logo
 ┃ ┣ 📂Modal
 ┃ ┣ 📂Spinner
 ┃ ┣ 📂Tab
 ┃ ┣ 📂Toast
 ┃ ┗ 📂UserInfoItem
 ┣ 📂contexts
 ┃ ┣ 📜ChannelProvider.jsx
 ┃ ┗ 📜UserProvider.jsx
 ┣ 📂feature
 ┃ ┣ 📂alarm
 ┃ ┃ ┣ 📂AlarmItem
 ┃ ┃ ┗ 📂AlarmSection
 ┃ ┣ 📂auth
 ┃ ┃ ┣ 📂LoginForm
 ┃ ┃ ┗ 📂RegisterForm
 ┃ ┣ 📂cards
 ┃ ┃ ┣ 📂Card
 ┃ ┃ ┣ 📂CardDetail
 ┃ ┃ ┣ 📂Comment
 ┃ ┃ ┣ 📂CommentList
 ┃ ┃ ┣ 📂LabelList
 ┃ ┃ ┣ 📂MainCard
 ┃ ┃ ┣ 📂ProfileCard
 ┃ ┃ ┗ 📂TTaBongerAndTTaBonged
 ┃ ┣ 📂pageTemplate
 ┃ ┃ ┣ 📂Banner
 ┃ ┃ ┣ 📂BottomBar
 ┃ ┃ ┣ 📂Header
 ┃ ┃ ┗ 📂PageTemplate
 ┃ ┣ 📂profile
 ┃ ┃ ┗ 📂ProfileEditForm
 ┃ ┣ 📂rank
 ┃ ┃ ┗ 📂RankFirstInfo
 ┃ ┗ 📂ttabong
 ┃ ┃ ┣ 📂CheckIcon
 ┃ ┃ ┣ 📂LabelList
 ┃ ┃ ┣ 📂ReasonContainer
 ┃ ┃ ┣ 📂TTaBongModal
 ┃ ┃ ┗ 📜index.js
 ┣ 📂hooks
 ┃ ┣ 📜useForm.js
 ┃ ┣ 📜useRafState.js
 ┃ ┣ 📜useScroll.js
 ┃ ┣ 📜useScrollDown.js
 ┃ ┗ 📜useTimeOut.js
 ┣ 📂pages
 ┃ ┣ 📂AlarmPage
 ┃ ┣ 📂CardDetailPage
 ┃ ┣ 📂LoginPage
 ┃ ┣ 📂MainFeedPage
 ┃ ┣ 📂NotFoundPage
 ┃ ┣ 📂ProfileEditPage
 ┃ ┣ 📂RankPage
 ┃ ┣ 📂RegisterPage
 ┃ ┣ 📂SearchPage
 ┃ ┣ 📂TTaBongPage
 ┃ ┣ 📂UserProfilePage
 ┃ ┗ 📜index.js
 ┣ 📂routes
 ┃ ┣ 📜AuthRoute.jsx
 ┃ ┣ 📜ProtectedRoute.jsx
 ┃ ┗ 📜index.js
 ┣ 📂utils
 ┃ ┣ 📜cookies.js
 ┃ ┣ 📜getDayString.js
 ┃ ┣ 📜getHexToRgb.js
 ┃ ┗ 📜getPxToRem.js
 ┣ 📜App.jsx
 ┣ 📜App.test.js
 ┣ 📜index.jsx
 ┣ 📜reportWebVitals.js
 ┗ 📜setupTests.js