사이드 프로젝트, 해커톤 등을 여러 사이트에서 크롤링하여 한 번에 보고 팀빌딩까지 할 수 있도록 해주는 웹 사이트.
프론트엔드2, 백엔드2, 디자이너1
| Git Imoji | Tag Name | Description |
|---|---|---|
| 🎉 | Tada | 프로젝트 시작 |
| ✨ | Feat | 새로운 기능 추가 |
| 🐛 | Fix | 버그수정 |
| 🎨 | Style | 코드 포맷 변경, 세미 콜론 누락, 코드 수정이 없는 경우 |
| 💄 | Design | CSS 등 사용자 UI 변경 및 설계 |
| ♻️ | Refactor | 코드 리팩토링 |
| 📝 | Docs | 문서 수정 |
| 📦 | Chore | 빌드 업무, 패키지 매니저, 패키지 관지라 구성 등 수정 |
| 🚨 | Lint | eslintrc 수정 및 린트 에러 수정 |
| 🚀 | Deploy | 빌드 및 배포 작업 |
| ✅ | Test | 테스트 코드, 리팩토링 테스트 코드 추가 |
| 🚚 | Rename | 파일 혹은 몰더명 수정하거나 옮기는 작업만 한 경우 |
| 🔥 | Remove | 파일을 삭제하는 작업만 한 경우 |
- Github flow 사용
- repository clone하기, fork (X)
- Main branch를 기준으로 sub branch만들기
- 진행상황 확인을 위해 commit내역 push 자주하기
- 1 기능, 1 PR 상대방이 review, 메인 브랜치에 merge, 해당 원격 브랜치 삭제
- branches rule: github action으로 testing 및 build가 성공적으로 수행되어야 merge 가능
- branch name pattern:
[commit prefix]/[description]
- Pages Router
- eslint, prettier
- husky & lint-staged를 사용하여 linting 자동화 및 강제성 부여
- styled-components 방식
- [componentName].styles.ts 파일로 분리
- 버전: v4
- query key 관리 방식: useQuery가 호출되는 위치에서 각자 관리
- 전역적으로 사용될 타입들:
lib/types폴더 안에 정의 - 단일 컴포넌트 내에서 사용되는 타입들은 해당 컴포넌트 폴더 내에서 관리
interface의 경우I,type의 경우T를 이름의 첫글자로 한다.
- custom hook 사용
- 렌더링 관련 에러 처리: Nextjs Error Boundary - 공식문서
- 서버사이드 에러: 500, 404 커스텀
- 그 밖에 에러: 토스트 메세지를 통해 사용자에게 알림
- 현재까지 60개의 테스트 케이스 작성
Kakao (Authorization Code Grant)
Google (Implicit Grant)
- frontend에서 KaKao와 Google Access token을 발급
- 발급 받은 KaKao or Google Access token을 백엔드 서버에 전달
- 백엔드 서버에서 KaKao or Google Access token으로 유저의 정보를 얻어 DB에 저장.
- 백엔드 서버에서 자체 access token, refresh token 생성
- 로그아웃 상태일 경우 => "로그인이 필요합니다" 토스트 메세지
- 로그인 상태일 경우 => 토스트 메세지를 사용하여 성공, 취소 알림. (
Optimistic Update적용)
- 파일 확장자가 jpg, png일 것 (정규표현식)
- 파일 크기가 200kb이하 일 것
- 조건에 맞지 않으면 토스트 메세지로 사용자에게 알림.
src
├─components
│ ├─common
│ │ ├─arrow
│ │ ├─button
│ │ │ ├─pagination
│ │ │ ├─scrab
│ │ │ └─topScroll
│ │ ├─card
│ │ │ ├─hackathons
│ │ │ ├─mainBanner
│ │ │ └─projects
│ │ ├─dblArrow
│ │ ├─error
│ │ ├─hr
│ │ ├─layout
│ │ │ ├─body
│ │ │ ├─footer
│ │ │ └─header
│ │ ├─link
│ │ ├─loading
│ │ ├─logo
│ │ ├─mainBanner
│ │ ├─modal
│ │ └─skillContainer
│ ├─hackathons
│ │ ├─detail
│ │ │ ├─comment
│ │ │ │ ├─item
│ │ │ │ └─register
│ │ │ ├─original
│ │ │ │ └─test
│ │ │ └─summary
│ │ ├─list
│ │ └─recommendation
│ ├─home
│ │ ├─hackathons
│ │ ├─projects
│ │ │ └─utils
│ │ └─recommendation
│ ├─postDetail
│ │ ├─body
│ │ ├─floatingBox
│ │ └─header
│ ├─projects
│ │ ├─Loading
│ │ ├─projectList
│ │ ├─purposeFilter
│ │ ├─searchInput
│ │ ├─skillButton
│ │ └─skillFilter
│ ├─signup
│ │ ├─done
│ │ ├─name
│ │ ├─skill
│ │ └─social
│ └─userInfo
│ ├─profile
│ ├─scrab
│ └─skills
├─lib
│ ├─apis
│ ├─constants
│ ├─hooks
│ │ ├─useAccessToken
│ │ ├─useCheckNickNameMutation
│ │ ├─useCommentMutation
│ │ ├─useCommentsQuery
│ │ ├─useComponentMount
│ │ ├─useContestQuery
│ │ ├─useContestsQuery
│ │ ├─useDebounce
│ │ ├─useGetMyInfoQuery
│ │ ├─useInputHooks
│ │ ├─useJwtToken
│ │ ├─useModal
│ │ ├─useMyInfoMutation
│ │ ├─useProjectDetailQuery
│ │ ├─useProjectsQuery
│ │ ├─useStudiesQuery
│ │ └─useStudyDetailQuery
│ ├─mocks
│ │ └─data
│ ├─test-utils
│ ├─types
│ └─utils
│ ├─caculateDDay
│ ├─converToSkillId
│ ├─converToSkillIdParams
│ ├─convertToSkillSVG
│ ├─pagination
│ └─removeCRLF
├─pages
│ ├─api
│ ├─hackathons
│ │ └─[id]
│ ├─projects
│ │ └─[id]
│ └─userInfo
└─styles