@@ -45,6 +49,7 @@ $ npm run dev
## 2.2 API 및 상태 관리 +
@@ -53,6 +58,7 @@ $ npm run dev
## 2.3 협업 +
@@ -64,6 +70,7 @@ $ npm run dev
# 3. Project Structure (프로젝트 구조) + ```plaintext project/ ├── .github/ # 이슈·PR 템플릿·워크플로 @@ -106,375 +113,165 @@ project/
-# 4. Pages and Key Features (페이지 및 주요 기능) - -### 1. 회원가입 - - 회원가입 시 DB에 유저정보가 등록됩니다. - - 사장님 또는 알바생 계정을 선택해 회원가입을 진행합니다. - - +# 4. Team Members (팀원 및 팀 소개) -### 2. 로그인 - - 사용자 인증 정보를 통해 로그인합니다. - - +| 오수빈 | 지정환 | 진성진 | 홍수민 | +| :----------------------------------------: | :---------------------------------------: | :-----------------------------------: | :-----------------------------------: | +| TL, FE | FE | FE | FE | +| [GitHub](https://github.com/almighty55555) | [GitHub](https://github.com/jeonghwanJay) | [GitHub](https://github.com/cozy-ito) | [GitHub](https://github.com/ghdtnals) | -### 3. 공고 리스트 - - 작성된 공고 리스트를 띄웁니다. - - 프로필이 등록된 알바생 계정으로 로그인하면 맞춤 공고가 지역 기준으로 뜹니다. - - 마감임박순, 시급많은순, 시간적은순, 가나다순 정렬이 가능합니다. - - 지역, 시급, 일자의 상세필터를 사용할 수 있습니다. - - 페이지네이션을 이용해 공고 리스트를 넘길 수 있습니다. - - +
+
+# 5. Tasks & Responsibilities (작업 및 역할 분담) -### 4. 공고 검색 - - 헤더 검색창에 검색어를 입력하면 해당 검색어를 포함한 공고가 보입니다. - - 마감임박순, 시급많은순, 시간적은순, 가나다순 정렬이 가능합니다. - - 지역, 시급, 일자의 상세필터를 사용할 수 있습니다. - - 페이지네이션을 이용해 공고 리스트를 넘길 수 있습니다. +| 이름 | 작업 | +| :----: | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| 오수빈 |
- 디자인 Assets 다운로드
- GitHub 레포지토리 설정
- 배포 (Netlify)
- README.md 작성
- 공통 로직 (API 요청 로직)
- 공통 컴포넌트 (Button, Select)
- 페이지 작업 (가게 정보 등록/수정, 공고 등록/수정, 프로필 등록/수정, 404 페이지)
- 페이지 레이아웃 (헤더, 푸터 포함)
- 공통 컴포넌트 (Modal, Dropdown, Alert)
- 페이지 작업 (메인 공고 목록, 공고 검색)
- 프로젝트 초기 설정(패키지 설치, 정적 검사 설정 등)
- 페이지 라우팅 설정
- 디스코드 커스텀 메시지 웹훅 연동
- 공통 컴포넌트 (Table, Pagination, TextField)
- 페이지 작업 (내 프로필, 공고 상세 사장님/알바생)
- 글로벌 스타일 초기화
- 폰트 및 컬러 시스템 설정
- 공통 로직 (날짜 커스텀 로직)
- 공통 컴포넌트 (Post, PostList, PostCard, Toast)
- 페이지 작업 (로그인, 회원가입, 내 가게)
+
-### 5. 가게 정보 등록 및 편집 - - 사장님 계정으로 로그인하면 내 가게 정보를 등록 및 편집할 수 있습니다. - - 필수 영역이 알맞게 채워졌다면 가게 정보가 등록 및 편집됩니다. +# 6. Pages and Key Features (담당 페이지 및 주요 구현 기능) - +[Origin 레포지토리 링크(모든 페이지를 확인하시려면 클릭해주세요 😆)](https://github.com/cozy-ito/thejulge?tab=readme-ov-file#4-pages-and-key-features-%ED%8E%98%EC%9D%B4%EC%A7%80-%EB%B0%8F-%EC%A3%BC%EC%9A%94-%EA%B8%B0%EB%8A%A5) +## 담당 페이지 -### 6. 내 가게 - - 내 가게가 등록되어 있지 않다면 등록하기 버튼을 통해 가게 정보 등록 페이지로 이동할 수 있습니다. - - 내 가게의 정보와 공고 리스트를 볼 수 있습니다. - - 가게 정보를 편집하거나 공고를 등록하는 페이지로 버튼을 통해 이동할 수 있습니다. - - 공고 리스트는 무한스크롤됩니다. +### 내 프로필 - +- 내 프로필이 등록되어 있지 않다면 등록하기 버튼을 통해 프로필 등록 페이지로 이동할 수 있습니다. +- 내 프로필 정보와 지원 리스트를 확인할 수 있습니다. +- 프로필 편집 페이지로 버튼을 통해 이동할 수 있습니다. +- 지원 리스트는 페이지네이션으로 넘길 수 있습니다. -### 7. 공고 등록 및 편집 - - 내 가게의 공고를 등록 및 편집할 수 있습니다. - - 필수 영역이 알맞게 채워졌다면 공고가 등록 및 편집됩니다. + - +### 공고 상세 - 사장님 -### 8. 공고 상세 - 사장님 - - 등록한 공고의 정보와 지원자를 확인할 수 있습니다. - - 지원자의 거절/승인 상태를 결정할 수 있습니다. - - 공고 편집 페이지로 버튼을 통해 이동할 수 있으나, 내 가게가 아니거나 지난 공고이거나 지원자가 있다면 버튼이 비활성화됩니다. +- 등록한 공고의 정보와 지원자를 확인할 수 있습니다. +- 지원자의 거절/승인 상태를 결정할 수 있습니다. +- 공고 편집 페이지로 버튼을 통해 이동할 수 있으나, 내 가게가 아니거나 지난 공고이거나 지원자가 있다면 버튼이 비활성화됩니다.  -### 9. 프로필 등록 및 편집 - - 알바생 계정으로 로그인하면 내 프로필을 등록 및 편집할 수 있습니다. - - 필수 영역이 알맞게 채워졌다면 프로필이 등록 및 편집됩니다. +### 공고 상세 - 알바생 - +- 지원하기 버튼을 통해 공고에 지원할 수 있습니다. +- 지원을 한 공고에 대해서는 취소하기 버튼을 통해 지원 취소가 가능합니다. +- 최근에 본 공고가 최대 6개 띄워집니다. -### 10. 내 프로필 - - 내 프로필이 등록되어 있지 않다면 등록하기 버튼을 통해 프로필 등록 페이지로 이동할 수 있습니다. - - 내 프로필 정보와 지원 리스트를 확인할 수 있습니다. - - 프로필 편집 페이지로 버튼을 통해 이동할 수 있습니다. - - 지원 리스트는 페이지네이션으로 넘길 수 있습니다. + - +## 구현 기능 -### 11. 공고 상세 - 알바생 - - 지원하기 버튼을 통해 공고에 지원할 수 있습니다. - - 지원을 한 공고에 대해서는 취소하기 버튼을 통해 지원 취소가 가능합니다. - - 최근에 본 공고가 최대 6개 띄워집니다. +### TextField [(Origin Repo Wiki)](https://github.com/CodeitPart3/thejulge/wiki/TextField) - +- TextField.Input +  -
-
+- TextField.Table +  -# 5. Team Members (팀원 및 팀 소개) -| 오수빈 | 지정환 | 진성진 | 홍수민 | -|:------:|:------:|:------:|:------:| -| TL, FE | FE | FE | FE | -| [GitHub](https://github.com/almighty55555) | [GitHub](https://github.com/jeonghwanJay) | [GitHub](https://github.com/cozy-ito) | [GitHub](https://github.com/ghdtnals) | +### Table [(Origin Repo Wiki)](https://github.com/CodeitPart3/thejulge/wiki/Table) -
-
+ -# 6. Tasks & Responsibilities (작업 및 역할 분담) -| 이름 | 작업 | -|:------:|--------| -| 오수빈 |
- 디자인 Assets 다운로드
- GitHub 레포지토리 설정
- 배포 (Netlify)
- README.md 작성
- 공통 로직 (API 요청 로직)
- 공통 컴포넌트 (Button, Select)
- 페이지 작업 (가게 정보 등록/수정, 공고 등록/수정, 프로필 등록/수정, 404 페이지)
- 페이지 레이아웃 (헤더, 푸터 포함)
- 공통 컴포넌트 (Modal, Dropdown, Alert)
- 페이지 작업 (메인 공고 목록, 공고 검색)
- 프로젝트 초기 설정(패키지 설치, 정적 검사 설정 등)
- 페이지 라우팅 설정
- 디스코드 커스텀 메시지 웹훅 연동
- 공통 컴포넌트 (Table, Pagination, TextField)
- 페이지 작업 (내 프로필, 공고 상세 사장님/알바생)
- 글로벌 스타일 초기화
- 폰트 및 컬러 시스템 설정
- 공통 로직 (날짜 커스텀 로직)
- 공통 컴포넌트 (Post, PostList, PostCard, Toast)
- 페이지 작업 (로그인, 회원가입, 내 가게)
-
+ -# 7. Development Workflow (개발 워크플로우) -## 브랜치 전략 (Branch Strategy) -우리의 브랜치 전략은 Git Flow를 기반으로 하며, 다음과 같은 브랜치를 사용합니다. - -- Dev Branch - - 배포 가능한 상태의 코드를 유지합니다. - - 모든 배포는 이 브랜치에서 이루어집니다. - -- {domain}-{issueNum}-{name} Branch - - Ex. `SHOP-1-OH` - - GitHub 이슈당 하나의 브랜치를 생성합니다. - - 모든 기능 개발은 이 브랜치에서 이루어집니다. - - Domain - - 세부 태스크 관련 도메인 - - BASIC - 프로젝트 구현 전 해야할 활동 들 - - LAYOUT - 레이아웃 - - LOGIC - 공통 로직 - - COMPONENT - 공통 컴포넌트 - - DOCS - 문서 관련 - - 페이지 구현 도메인 - - AUTH - 로그인 / 회원가입 - - SHOP - 내 가게 / 가게 정보 등록 / 가게 정보 편집 - - NOTICE - 공고 등록 / 공고 편집 / 공고 리스트 / 공고 검색 / 공고 상세 - 사장님 / 공고 상세 - 알바생 - - PROFILE - 내 프로필 (미등록 상태/등록 상태) / 내 프로필 등록 / 내 프로필 편집 - - 버그 픽스 관련 - - FIX + 페이지 구현 도메인 - - Ex. `FIX-SHOP-2-OH` - -## GitHub Label -이슈, PR의 항목이 많아졌을 때, 필요한 내용만 필터링할 수 있게 하기 위해 라벨 사용 -- 라벨 리스트 - - - -## GitHub Wiki -공통 컴포넌트에 대한 사용법 기재 - - - -- 팀원이 쉽게 접근하고, 수정하기 용이 -- 팀원 간의 컴포넌트 사용 방식 통일 -- 처음 본 컴포넌트도 빠르게 이해 가능 - -## PR Rule -- 콘솔 - - PR 생성 전 `console.log`을 모두 삭제하기 -- 주석 - - 다른 팀원이 꼭 알아야 하는 주석을 제외하고 제거하기 -- 컨플릭트 해결하기 - -## PR 프로세스 - -1. 구현 전에 이슈를 생성합니다. -2. 작업 전 dev 브랜치에서 새로운 브랜치를 파생, 생성합니다. -3. 이슈에 대한 작업을 합니다. -4. PR 생성 전 dev 브랜치에서 가져올 코드가 있는 지 확인합니다. -5. 있다면, 가져와서 충돌 발생 시 해결 후 PR을 생성합니다. (git push) -6. PR 템플릿을 이용해서 PR 내용을 작성합니다. -7. 코드 리뷰를 받고 요청 받는 내용을 해결한 뒤 다시 push 합니다. - - PR을 하기위한 승인 개수 - - 2개 - - 코드리뷰 담당자 - - [수빈님, 정환님, 성진님, 수민님] - - 수빈님: [정환님, 성진님] - - 정환님: [성진님, 수민님] - - 성진님: [수민님, 수빈님] - - 수민님: [수빈님, 정환님] - - 주말에도 코드 리뷰 - - 중요도가 낮은 건, PR 등록 당일에 코드 리뷰 진행 - - 중요도가 높은 것은 팀 회의 시간에 얘기를 해서 특정 시간 내에 리뷰 후 병합 완료 - - 리뷰 반영 후 병합 관련 - - 리뷰 후 수정 사항 반영을 완료하면, 디스코드 메시지로 리뷰를 다시 한번 요청하기 -8. 모든 comment가 해결 된 경우, Approve (승인) 합니다. -9. 최종적으로 PR 병합하기 전, dev 브랜치로부터 코드를 한번 가져와 봅니다. -10. dev 브랜치로 PR 병합을 합니다. (이슈 Close) - - PR 병합 방식 - - merge commit +### ProtectedRoute -
-
+- 권한 별 페이지 접근 제어를 위해 구현하게 되었음 +- 기존 문제점: 기존 다른 팀원이 각각의 페이지마다 접근 권한을 위한 로직을 추가 +- 해결하고자 한 문제: Router 파일 하나에서 제어할 수 있도록 일원화 -# 8. Coding Convention -## 네이밍 컨벤션 +## 커스텀 훅 -1. 변수 & 함수: camelCase 사용 +### useBreakPoint -```jsx -let userName = "Jay"; -const getUserProfile = () => {}; -``` +- 현재 뷰포트 기준으로 협의된 디바이스를 반환 +- 리사이즈 이벤트를 감지, 브라우저 창의 크기를 조절해도 그에 맞는 디바이스를 문자열로 반환 +- `useRemoveTopPageScroll` 커스텀 훅에서 활용 -2. 상수(Constant): UPPER_SNAKE_CASE + ```ts + function useRemoveTopPageScroll(props: PropsType) { + const device = useBreakpoint(); // 활용 -```jsx -const API_BASE_URL = "https://api.example.com"; -``` + useEffect(() => { + const deviceCondition = observeDevices.includes(device); + // ... + }, [...]); + } + ``` -3. 클래스/컴포넌트: PascalCase +### useRemoveTopPageScroll -```jsx -class UserProfile {} -function UserCard() {} -``` +- 특정 디바이스 뷰포트 일 때, 가장 최상단의 페이지 스크롤을 제거 +- 모바일 뷰포트에서 화면 전체를 덮는 알림창이 있는 경우, 최상단의 페이지 스크롤을 제거할 필요가 있었음 +- 사용 예시 + ```ts + useRemoveTopPageScroll({ + observeDevices: ["mobile"], // 모바일 디바이스 크기에서 + condition: showFilter, // showFilter가 true인 경우에 최상단 스크롤을 제거 + }); + ``` -4. 파일명 - - 컴포넌트 및 스타일 파일명은 PascalCase - - 그 외는 camelCase - -5. 비동기 요청 로직 함수명 - - HTTP 메서드 접두사 사용 - - ex) `getPost`, `postPost`, `deletePost` - -6. 이벤트 핸들러 함수명 - - 이벤트 핸들러 함수 - `handle` 접두사 사용 - - ex) `handleClick`, `handleChange-` - - props로 전달되는 이벤트 핸들러 이름은 `on{이벤트 유형}{동작명}` - - ex) `onClick`, `onChange-` - -## 코드 컨벤션 - -### ESLint - -- **함수 정의** - - 화살표 함수: `() => { ... }` -- **함수형 컴포넌트 정의** - - function 키워드 사용 함수: `function () { ... }` -- 컴포넌트 코드 아래로 컴포넌트 외의 다른 코드를 배치하지 않기 - -```tsx -import '' from '...'; - -const data = { name: "이름" }; // ✅ 컴포넌트 위에 위치시키기 - -function ExampleComponent () { - return ( -
{data.name}
- );
-}
-
-const data = { name: "이름" }; // ❌ 컴포넌트 아래에 베치하지 않기
-```
+### useIntersection
-### Prettier
-
-- 행 바꿈 브라켓 적용
-
- ```jsx
- // 브라켓 내리기
- ```
-
-- JSX 태그 속성, 문자열 따옴표
- - 쌍따옴표
-- 들여쓰기
- - 2칸
-- 객체 마지막 속성 콤마
-
- ```jsx
- const obj = {
- foo: "bar",
- baz: "baz",
- };
- ```
-
-
-### 그 외
-
-- 약어
- - 이벤트 파라미터명
- - **`e`**
- - previous State
- - **`setCount((prev) => { ... })`**
-- props는 반드시 구조분해할당을 사용
+- IntersectionObserver API를 커스텀 훅으로 재사용 가능토록 구현
+- 특정 ref를 전달한 요소가 뷰포트 내로 진입되었을 때, 콜백 함수 실행
+- 사용 예시
--
+ ```tsx + const targetRef = useIntersection
- -## type 종류 -``` -feat : 새로운 기능 추가 -fix : 버그 수정 -docs : 문서 수정 -style : 코드 포맷팅, 세미콜론 누락, 코드 변경이 없는 경우 -refactor : 코드 리펙토링 -test : 테스트 코드, 리펙토링 테스트 코드 추가 -chore : 빌드 업무 수정, 패키지 매니저 수정 -rename : 파일명/폴드명 수정정 -``` -
-# 10. PR 템플릿 -## 기본 구조 -``` -[type] title -``` -- type은 커밋 타입과 동일합니다. - -## PR 템플릿 -``` -## #️⃣연관된 이슈 - -> ex) #이슈번호, #이슈번호 - -## 📝 PR 유형 - -> 해당하는 유형에 'x'로 체크해주세요. - -- [ ] 기능 추가 (Feature) -- [ ] 버그 수정 (Bug Fix) -- [ ] 코드 개선 (Refactoring) -- [ ] 스타일 변경 (UI/UX) -- [ ] 문서 작업 (Documentation) -- [ ] 환경 설정 (Configuration) -- [ ] 기타 (Other) - -## 📝작업 내용 - -> 이번 PR에서 작업한 내용을 간략히 설명해주세요(이미지 첨부 가능) +# 7. 트러블 슈팅 -### 스크린샷 (선택) +## 컴포넌트 -## 💬리뷰 요구사항(선택) +### [TextField](https://github.com/cozy-ito/thejulge/wiki/TextField) -> 리뷰어가 특별히 봐주었으면 하는 부분이 있다면 작성해주세요 -> -> ex) 메서드 XXX의 이름을 더 잘 짓고 싶은데 혹시 좋은 명칭이 있을까요? -``` - -## 이슈 템플릿 -``` -## 📝 이슈 유형 +- as props 기반 통합 컴포넌트에서 복잡한 타입 정의와 타입 단언으로 인해 가독성과 타입 안정성이 저하됨 +- TextField.Input / TextField.TextArea로 분리하고 공통 UI는 Field 컴포넌트로 추출하여 역할 명확화 +- 타입 추론이 명확해지고 컴포넌트 재사용성과 유지보수성이 크게 향상됨 -> 해당하는 유형에 'x'로 체크해주세요. +### [ProtectedRoute](https://github.com/cozy-ito/thejulge/wiki/ProtectedRoute) -- [ ] API 연동 (feat) -- [ ] 컴포넌트 개발 (feat) -- [ ] Hook 개발 (feat) -- [ ] 페이지 구현 (feat) -- [ ] 문서 작업 (doc) -- [ ] 환경 설정 (chore) -- [ ] 버그 픽스 (fix) -- [ ] 기타 (etc.) +- 반복되는 권한 조건 로직을 ProtectedRoute 컴포넌트로 추상화하여, 조건 선언을 라우터 파일에서 일관되게 관리 +- 조건별 모달 및 리다이렉트 처리까지 포함해 페이지 내부 로직을 단순화하고 재사용성 향상 +- 향후 라우터 파일 확장을 고려해 도메인 단위 분리 전략도 사전에 구상하여 구조적 확장성에 대비 -## 어떤 기능인가요? +## 커스텀 훅 -> 추가하려는 기능에 대해 간결하게 설명해주세요 +### [useRemoveTopPageScroll](https://github.com/cozy-ito/thejulge/wiki/useRemoveTopPageScroll) -## 작업 상세 내용 +- 모바일 환경에서 모달 사용 시 스크롤이 남는 문제를 해결하기 위해 디바이스 타입과 조건 기반의 useRemoveTopPageScroll 훅을 구현 +- resize 이벤트를 debounce 처리한 useBreakpoint 훅과 조합해 다양한 디바이스 상황에서도 스크롤 상태를 안정적으로 제어 +- 스크롤 제어 로직을 재사용 가능한 훅으로 분리하여 페이지/모달/바텀시트 등 다양한 컴포넌트에서 일관된 UX 유지 가능 -- [ ] TODO -- [ ] TODO -- [ ] TODO +### [useIntersection](https://github.com/cozy-ito/thejulge/wiki/useIntersection) -## 참고할만한 자료(선택) -``` - -
-
+- 반복되는 IntersectionObserver 로직을 추상화하여 useIntersection 커스텀 훅으로 분리 +- callback과 deps만 넘기면 자동 관찰 및 해제가 가능해져 재사용성과 코드 일관성 확보 +- 타입 제네릭 및 의존성 처리까지 고려해 다양한 요소에 범용적으로 대응 가능하게 설계