🤙🏻 선약

${\textsf{\color{blue}진로 고민, 선약과 함께 해답을 찾다}}$

막막한 진로 고민을 해결해 줄 선배와의 특별한 약속
같은 계열 '선'배와의 진로 상담 '약'속, 선약

ㄴ 같은 경험을 가진 선배와의 진로 상담을 통해 더 맞춤화된 조언을 받을 수 있도록
ㄴ 같은 계열/원하는 직무의 선배를 터치 한번으로 더 쉽게 찾을 수 있도록

서비스 플로우

핵심기능

1. ONBOARDING

2. MENTOR PROFILE

3. SEARCH MENTOR

4. MAKE MY SEONYAK

5. MY SEONYAK

선약 Web Developers

팀원	윤서진	이진	이지은	이예림	조승희
팀원 소개
역할	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
|-- .stylelintrc

🌐 컨벤션

📏 컨벤션 노션 링크

1️⃣ Branch Convention

Branch Naming Rule

prefix/#이슈번호/작업내용

feat/#12/mainView

Prefix 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
• 그 외에는 camelCase ex) 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인지 아닌지 구분 가능

// 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 사용

---

## 💥 선배들의 트러블 슈팅

문제 해결
ESLint의 버전 충돌 문제
stylelint 버전 충돌 문제
emotion과 styled component의 차이
styled(svg) 왜 안되냐?
줄바꿈 어떻게 하게용 ?
내가 만든 유틸함수 불러와서 사용하기
styled component props 동적 스타일링 변경
Dispatch와 SetStateAction<인자타입>
React-Calendar 스타일 규칙과 stylelint 규칙이 충돌하는 경우
map함수 사용시 클릭에따른 스타일 변화
클릭에 따른 스타일 변화 한번 더 클릭해서 스타일 원상복구
가로 스크롤 구현, 세로 스크롤은 감추기
필터링 버튼과 칩 삭제 연결하기
사라지지 않는 바텀시트 내 선택값에 대하여..
조건부 렌더링 시 렌더링 안되는 경우 여백 없애기
스크롤바 안보이게하기, 스크롤 영역지정
선택적으로 props 받기
🪄 선배들의 아티클
-----------------
https://jini77u.notion.site/React-Query-useQueries-useInfiniteQuery-1ffff58af1b240a39a07136b74cd6ffb?pvs=25
https://yarimu.notion.site/React-Query-ba5e471314154696a72400c98483aad6
https://jnary.notion.site/2e33b9b68ff04a169d7323095a9b0560
https://trail-hound-61f.notion.site/URL-0328aabfe0c7468783c519ea8cc7abe1
https://velog.io/@lydiacho/Vercel-%EB%B0%B0%ED%8F%AC%EC%99%80-%EB%8F%84%EB%A9%94%EC%9D%B8-%EB%93%B1%EB%A1%9D%ED%95%98%EA%B8%B0#%EB%B6%80%EB%A1%9D3--%EC%BB%A4%EC%8A%A4%ED%85%80-%EB%8F%84%EB%A9%94%EC%9D%B8-%EB%93%B1%EB%A1%9D-%EC%8B%9C-%EC%9C%A0%EC%9D%98%EC%82%AC%ED%95%AD