Vote Web

Description

• 투표기반 SNS 웹프로젝트
• 개발 인원 6명 : FE 3명 + BE 3명
• 프로젝트 기간 : 2022.02.10 ~ 2022.05.30
• React + TypeScript

영감을 준 레퍼런스

• Youtube의 투표 기능
• Youtube나 Twitter의 투표 시스템에 영감을 받아 개발함

로그인

회원가입

메인

게시글 조회

게시글 쓰기

Feature

User

• 로그인 & 로그아웃
• 회원가입 & 회원탈퇴

Main

• 무한스크롤 실시간 게시글 조회
• 카테고리별 게시글 작성 & 조회
• 게시글 작성 시 사진 첨부, 투표항목 최대 4개
• 팝업을 통해 게시글 자세히 보기
• 팝업에서 댓글 작성 & 조회
• 게시글 검색
• 투표수기반 Trend 제공

Sub

• 내가 쓴 게시글 목록 조회
• 최근 투표한 게시글 조회
• PC/태블릿/모바일 반응형웹 지원

project Structure

|   index.tsx
|   react-app-env.d.ts
|   reportWebVitals.ts
|   setupTests.ts
|   
+---assets
|       images.ts
|       
+---components
|   |   App.tsx
|   |   
|   +---common
|   |   \---PopUp
|   |       |   PopUp.tsx
|   |       |   
|   |       \---css
|   |               popUp.css
|   |               popUp.css.map
|   |               popUp.scss
|   |               
|   +---Header
|   |   |   Header.tsx
|   |   |   logo.jpg
|   |   |   logo.svg
|   |   |   
|   |   +---components
|   |   |       UserBoard.tsx
|   |   |       UserInfo.tsx
|   |   |       
|   |   +---containers
|   |   |       HeaderContainer.tsx
|   |   |       UserBoardContainer.tsx
|   |   |       UserInfoContainer.tsx
|   |   |       
|   |   \---css
|   |           header.css
|   |           header.css.map
|   |           header.scss
|   |           userBoard.css
|   |           userBoard.css.map
|   |           userBoard.scss
|   |           userInfo.css
|   |           userInfo.css.map
|   |           userInfo.scss
|   |           
|   +---Loader
|   |   |   Loader.tsx
|   |   |   
|   |   \---css
|   |           loader.css
|   |           loader.css.map
|   |           loader.scss
|   |           
|   +---Login
|   |   |   Login.tsx
|   |   |   
|   |   +---containers
|   |   |       LoginContainer.tsx
|   |   |       
|   |   \---css
|   |           login.css
|   |           login.css.map
|   |           login.scss
|   |           
|   +---ScrollView
|   |   |   ScrollView.tsx
|   |   |   
|   |   +---components
|   |   |   |   Block.tsx
|   |   |   |   BlockPopUp.tsx
|   |   |   |   CommentScrollView.tsx
|   |   |   |   ImagePopUp.tsx
|   |   |   |   ProgressBar.tsx
|   |   |   |   VoteView.tsx
|   |   |   |   WritePopUp.tsx
|   |   |   |   
|   |   |   \---css
|   |   |           Block.css
|   |   |           Block.css.map
|   |   |           Block.scss
|   |   |           BlockPopUp.css
|   |   |           BlockPopUp.css.map
|   |   |           BlockPopUp.scss
|   |   |           CommentScrollView.css
|   |   |           CommentScrollView.css.map
|   |   |           CommentScrollView.scss
|   |   |           imagePopUp.css
|   |   |           imagePopUp.css.map
|   |   |           imagePopUp.scss
|   |   |           VoteView.css
|   |   |           VoteView.css.map
|   |   |           VoteView.scss
|   |   |           WritePopUp.css
|   |   |           WritePopUp.css.map
|   |   |           WritePopUp.scss
|   |   |           
|   |   +---containers
|   |   |       BlockContainer.tsx
|   |   |       BlockPopUpContainer.tsx
|   |   |       CommentScrollViewContainer.tsx
|   |   |       ImagePopUpContainer.tsx
|   |   |       PopUpVoteViewContainer.tsx
|   |   |       ScrollViewContainer.tsx
|   |   |       VoteViewContainer.tsx
|   |   |       WritePopUpContainer.tsx
|   |   |       
|   |   \---css
|   |           scrollView.css
|   |           scrollView.css.map
|   |           scrollView.scss
|   |           
|   +---SideBoard
|   |   |   SideBoard.tsx
|   |   |   
|   |   +---components
|   |   |       LastBoard.tsx
|   |   |       TopBoard.tsx
|   |   |       
|   |   +---containers
|   |   |       LastBoardContainer.tsx
|   |   |       SideBoardContainer.tsx
|   |   |       TopBoardContainer.tsx
|   |   |       
|   |   \---css
|   |           sideBoard.css
|   |           sideBoard.css.map
|   |           sideBoard.scss
|   |           
|   +---SideNavigation
|   |   |   SideNavigation.tsx
|   |   |   
|   |   +---containers
|   |   |       SideNavigationContainer.tsx
|   |   |       
|   |   \---css
|   |           sideNavigation.css
|   |           sideNavigation.css.map
|   |           sideNavigation.scss
|   |           
|   +---SignUp
|   |   |   SignUp.tsx
|   |   |   
|   |   +---containers
|   |   |       SignUpContainer.tsx
|   |   |       
|   |   \---css
|   |           signUp.css
|   |           signUp.css.map
|   |           signUp.scss
|   |           
|   \---Test
|       |   Test.tsx
|       |   
|       \---containers
|               TestContainer.tsx
|               
+---hooks
|   |   usePopUp.ts
|   |   useRootRoute.ts
|   |   
|   \---Auth
|           useAuth.ts
|           
+---lib
|   \---api
|           api.ts
|           
+---routes
|   |   RootNavigation.tsx
|   |   
|   +---components
|   |       LoginNavigation.tsx
|   |       MainNavigation.tsx
|   |       
|   \---containers
|           LoginNavigationContainer.tsx
|           MainNavigationContainer.tsx
|           RootNavigationContainer.tsx
|           
+---store
|   |   rootReducer.ts
|   |   
|   +---popUp
|   |   |   actions.ts
|   |   |   reducers.ts
|   |   |   
|   |   \---modules
|   |           actionsTypes.ts
|   |           
|   \---routes
|       \---rootRoute
|           |   actions.ts
|           |   reducers.ts
|           |   
|           \---modules
|                   actionTypes.ts
|                   
+---styles
|   \---css
|           core.css
|           core.css.map
|           core.scss
|           
\---typedef
    \---common
            common.types.ts

Requirments

Library

"@testing-library/jest-dom": "^5.16.2",
"@testing-library/react": "^12.1.3",
"@testing-library/user-event": "^13.5.0",
"@types/jest": "^27.4.1",
"@types/node": "^16.11.26",
"@types/react": "^17.0.39",
"@types/react-dom": "^17.0.11",
"@types/react-redux": "^7.1.22",
"@types/react-router-dom": "^5.3.3",
"axios": "^0.26.1",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-redux": "^7.2.6",
"react-router-dom": "^6.2.1",
"react-scripts": "5.0.0",
"redux": "^4.1.2",
"redux-devtools-extension": "^2.13.9",
"redux-persist": "^6.0.0",
"typescript": "^4.5.5",
"web-vitals": "^2.1.4"

Contributors

박희연 (https://github.com/abrightkite)

이장훈 (https://github.com/bh2980)

엄지영 (https://github.com/thumbzzero)

Backend Repository

https://github.com/GDSC-KNU/Project2

기술스택

This project was bootstrapped with Create React App.