막막한 진로 고민을 해결해 줄 선배와의 특별한 약속
같은 계열 '선'배와의 진로 상담 '약'속, 선약
ㄴ 같은 경험을 가진 선배와의 진로 상담을 통해 더 맞춤화된 조언을 받을 수 있도록
ㄴ 같은 계열/원하는 직무의 선배를 터치 한번으로 더 쉽게 찾을 수 있도록
-
ONBOARDING
-
MENTOR PROFILE
-
SEARCH MENTOR
-
MAKE MY SEONYAK
-
MY SEONYAK
| 팀원 | 윤서진  |
이진 |
이지은 |
이예림 |
조승희 |
|---|---|---|---|---|---|
| 팀원 소개 |  |
 |
 |
 |
 |
| 역할 |
WEB FRONTEND |
WEB FRONTEND |
WEB FRONTEND |
WEB FRONTEND |
WEB FRONTEND |
| 역할 | 종류 |
|---|---|
| Library |   |
| Programming Language |  |
| Styling |  |
| Data Fetching |   |
| Formatting |    |
| Package Manager |  |
| Version Control |   |
"@emotion/react": "^11.11.4""@tanstack/react-query": "^5.48.0""react-calendar": "^5.0.0
|-- 📁 node_modules
|-- 📁 public
|-- 📁 src
|-- 📁 assets
| |--📁images
| |--📁svgs
| | - index.tsx
|-- 📁 components
| |--📁commons
- Header.tsx
- Footer.tsx
|-- 📁 hooks
| - useClickOutside.tsx
|-- 📁 pages
| |--📁APage
| | |--📁apis
| | |--📁components
| | | - LikeBtn.tsx
| | | - APageItems.tsx
| | | - Comment.tsx
| | |--📁constants
| | |--📁utils
| | | - modalPreventScroll.ts
| | |--📁types
| | | - APageItemType.ts
| | |
| | |-APage.tsx
| |--📁BPage
| |--📁CPage
|-- 📁 styles
| - GlobalStyle.tsx
| - theme.ts
| - style.d.ts
|-- 📁 utils
| |--📁apis
| -client.ts
|-- App.tsx
|-- main.tsx
|-- Router.tsx
|-- .eslintrc.json
|-- .prettierrc
|-- .stylelintrc1️⃣ Branch Convention
Branch Naming Rule
prefix/#이슈번호/작업내용
feat/#12/mainViewPrefix convention
| prefix types | 의미 |
|---|---|
| ⚙️ init | 프로젝트 초기 세팅 |
| ✨ feat | 새로운 기능 추가 |
| 🛠️ fix | 버그, 오류 등을 수정 |
| 💄 design | 스타일 수정 |
| 🧩 chore | 파일 삭제, 파일명 수정, 주석 제거, 자동저장 적용해서 개행 바뀐 부분, 빌드테스트 업데이트, 패키지매니저 변경 등등 주 플로우와 관련 없는 경우 |
| 📝 docs | README나 WIKI 등의 문서 수정 |
| ♻️ refactor | 코드 리팩토링 |
| 💡 test | 테스트 코드, 리팩토링 테스트 코드 작성 |
| 🔥 !hotfix | 치명적인 버그가 발생하여 급하게 수정 |
2️⃣ Commit Convention
`prefix: 커밋 내용` → `type`과 콜론 후 한칸 띄고 `커밋내용` 작성
- ex) feat: 메인 헤더 뷰 구현
- design: 마진 간격 조정
prefix종류는 위에 참고!- 최대한 작은 단위의 commit 지향
3️⃣ Coding Convention
📍 컴포넌트
rafce- 리액트 컴포넌트만
PascalCase사용 :PostPage.tsx - 그 외에는
camelCaseex) type, d.ts파일, ts파일 :useClickOutside.ts - prop 타입 Interface 선언시
컴포넌트명~PropTypes
// PostPage.tsx
interface PostPagePropTypes {
title: string | undefined;
setTitle: (e: React.ChangeEvent<HTMLTextAreaElement>) => void;
tempContent: string;
editContent: string;
setEditorContent: (content: string) => void;
setContentWithoutTag: (content: string) => void;
}
const PostPage = (props: PostPagePropTypes) => {
const { title, setTitle, tempContent, editContent, setEditorContent, setContentWithoutTag } = props;
...
}📍 폴더명
- 무조건 소문자로 시작하기!
- 카멜케이스!
📍 변수
-
var금지 - 변수를 조합하여 문자열 생성시
“” + “”금지 →탬플릿 리터럴사용(백틱${}) - 만약 변수에 할당되는 값이
boolean인 경우 접두사is붙이기 :isActive -
map사용시 변동되는 리스트라면key값을 고유하게 잘 설정해주기index사용금지
📍 함수
- 중복되는 함수는
utils폴더에 모아서 재사용한다. (단위 변환 함수, 날짜 변환 함수 등) - 중복되는 커스텀훅은
hooks폴더에 모아서 재사용한다. (모달 바깥부분 클릭시 모달 닫히는 함수 등) - 되도록 화살표 함수를 사용한다.
📍 style
- style 파일 분리하지 않음, 해당 컴포넌트 하단에 만들어서 사용하기
- s dot 네이밍 사용하지 않기
- 컴포넌트 네이밍 규칙 :
Wrapper→Layout→Container→Box순서로 내리기 - 시멘틱 태그 생각하면서 개발하기
- svg 파일 사용시
-
svg 네이밍은
피그마에 지정된 네이밍 + **Ic**로 해서 사용 - 만약 svg에 다른 스타일을 추가로 입혀야 할 경우, Ic를
Icon으로 바꿔서 네이밍 해주기- svg 파일 네이밍으로 style이 적용된 svg인지 아닌지 구분 가능
-
svg 네이밍은
// src > assets > svgs > index.tsx
export { default as DefaultProfileIc } from './defaultProfileIc.svg?react';
// src > pages > PageName.tsx
import { DefaultProfileIc } from './../../assets/svgs';
const PageName = () => {
return (
<>
<DefaultProfileIcon />
</>
)
}
const DefaultProfileIcon = styled(DefaultProfileIc)`
cursor: pointer;
`- 스타일드 컴포넌트에서 prop를 이용할 때는
transient prop사용 :$로 시작하는props로 내려줌. - 단위는 rem 사용, 변경이 필요없는 (border 관련) 속성만 px 사용
## 💥 선배들의 트러블 슈팅