---

📚 With Me FE

위드미 (With Me) 스터디 매칭 서비스 입니다.

🗄 Links

• WithMe 디자인 시스템 npm
• WithMe 스토리북 디자인 시스템 가이드
• WithMe 백엔드 레포지토리

🪄 eslint plugin

• eslint-plugin-sort-keys-custom-order: type과 object의 키를 자동으로 정렬 해주는 플러그인
• eslint-plugin-simple-import-sort: import/export를 자동으로 정렬해주는 플러그인
• eslint-plugin-import: eslint-plugin-simple-import-sort와 함께 사용하여 기능 확장
• eslint-plugin-unused-imports: 사용하지 않는 것을 삭제하거나 누락 된 것을 자동으로 추가하는 플러그인

👨‍💻 Member

LeeBonHoon	changyuyeo	KimTeaSick

• Lee-bonhoon: 메인 페이지, 팀 리스트
• changyuyeo: 호스트 페이지, 상세 페이지
• KimTeaSick: 마이 페이지

 🗂 Branches

🗂 branches

각자 브랜치에서 작업, 작업이 완료 되었다면 master브랜치에 PR 후 merge 요청
merge가 완료되면 다른 개발자에게 pull 요청하기
master 브랜치가 업데이트 되면 항상 pull 받아줘야 충돌이 나지 않습니다!

// 새 브랜치 만들기
git checkout -b "새 브랜치 이름"

// 브랜치 이동
git checkout "브랜치 이름"

 🪝 Hooks

🪝 Hooks

useModal 사용법

import { FC } from 'react';
import useModal from '@hooks/useModal';

//* 모달창 안에 들어갈 컨텐츠
const TestModal: FC<{ onCloseModal: () => void }> = ({ onCloseModal }) => (
	<div
		style={{
			background: 'white',
			width: '568px',
			height: '400px',
			borderRadius: '10px',
			padding: '20px'
		}}
	>
		모달 내용... <br /> <button onClick={onCloseModal}>모달창 닫기</button>
	</div>
);

const HostPage = () => {
	//* useModal 사용
	//* ModalPortal: root-modal 이라는 id에 모달 랜더링 (children 으로 모달 컴포넌트 만들어서 넣어주면 됩니다.)
	//* onCloseModal: 모달창 오픈 이벤트
	//* onOpenModal: 모달창 닫는 이벤트
	const { ModalPortal, onCloseModal, onOpenModal } = useModal();

	return (
		<>
			<button onClick={onOpenModal}>모달창 열기</button>
			<ModalPortal>
				<TestModal onCloseModal={onCloseModal} />
			</ModalPortal>
		</>
	);
};

export default HostPage;

• useModal을 사용해 ModalPortal, onCloseModal, onOpenModal을 사용해서 모달창을 관리하면 됩니다.
• onOpenModal 메소드를 사용 시 모달창이 오픈되며 id가 root-modal 이라는 요소에 ModalPortal 컴포넌트를 랜더링 하게 됩니다. (react-portal 활용)
• onCloseModal 이벤트 발생 시 해당 모달창은 닫히게 됩니다.
• 중복되는 부분을 커스텀 훅으로 만들었으며 react portal 를 활용해 root의 바깥에서 랜더링 하기 때문에 훨씬 편리하게 사용이 가능합니다.

portal를 사용해서 구현한 이유

DOM Tree 상에서의 부모-자식 간의 제약에서 자유로워지기 위해 Portal 기능을 사용하게 되는 것입니다.
또한, Portal에 렌더링된 자식요소는 이벤트 버블링이 반영되기 때문에 부모요소와의 통신 측면에서도 유용합니다.

Portals 참고 문서

 🖥 Available URI

🖥 Available URI

• / : 메인 페이지
• /host : 새로운 팀 만들기 페이지
• /...

 📂 Skeleton

📂 Skeleton

|-- /src
| |-- /assets
| | |-- ...
| |-- /components
| | |-- ...
| |-- /hooks
| | |-- useInput.ts
| | |-- useModal.tsx
| |-- /lib
| | |-- /api
| | | |-- ...
| |-- /pages
| | |-- \_app.tsx
| | |-- \_document.tsx
| | |-- ...
| |-- /store
| | |-- index.ts
| | |-- rootReducer.ts
| | |-- ...
| |-- /styles
| |-- /typings
| |-- ...

 📝 Conventional Commits

📝 Conventional Commits

사용 라이브러리 참고

message	descripton
feat	새로운 기능 추가
fix	버그 수정
test	Test 관련한 코드의 추가, 수정
refactor	코드를 리펙토링
chore	(코드의 수정 없이) 설정을 변경
docs	문서의 수정
style	(코드의 수정 없이) 스타일(style)만 변경 (들여쓰기 같은 포맷이나 세미콜론을 빼먹은 경우)

commit example

git commit -m "feat: 유저 로그인 기능 추가"

Commitizen 라이브러리 사용으로 위 방법보다는 아래방법을 추천합니다.

yarn commit

yarn commit 을 해주시고 커밋의 타입, 제목, 설명 등 가이드대로 입력한 후 각각 브랜치에 push 해주시면 됩니다!

yarn commit 명령어는 제일 먼저 git add를 해주기 때문에 git add 명령어는 따로 입력안해주셔도 됩니다!

 ⚙ Settings

⚙ Settings

dev server

yarn dev

node -v

v16.14.2

.env

NEXT_PUBLIC_API_URL=...

etc...

// clone 후 git hook이 정상적으로 동작하지 않는다면 다음 명령어 실행
chmod +x .husky/pre-commit