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

최종제출 자료