0. Getting Started (시작하기)

$ npm install
$ npm run dev

배포된 서비스 링크

1. Project Overview (프로젝트 개요)

프로젝트 이름: TheJulge | 더줄게

프로젝트 한줄요약: 알바생과 사장님을 연결해주는 일자리 매칭 플랫폼
서비스 소개
- 사장님은 가게 정보와 구인 공고를 등록
- 알바생은 원하는 조건에 맞는 공고를 검색해 쉽게 지원
- 공고에 제시된 시급이 기본시급보다 얼마나 높은지 표시되어, 알바생은 더 나은 조건의 일자리 합리적으로 선택 가능
- 매칭 결과는 알림으로 빠르게 받아볼 수 있어, 구직과 채용 과정 모두 간편하게 진행

2. Technology Stack (기술 스택)

2.1 프론트엔드

2.2 API 및 상태 관리

2.3 협업

3. Project Structure (프로젝트 구조)

project/
├── .github/                     # 이슈·PR 템플릿·워크플로
│   ├── ISSUE_TEMPLATE/
│   ├── scripts/
│   └── workflows/
├── .husky/                      # Git 훅 스크립트
├── public/                      # 정적 리소스 루트
│   ├── _redirects               # Netlify 리다이렉트 규칙
│   ├── default-image.png        # 가게 기본 이미지
│   └── tjg_favicon.png          # 파비콘
├── scripts/                     # 배포·빌드 자동화 스크립트
├── src/                         # 애플리케이션 소스
│   ├── apis/                    # API 래퍼
│   ├── assets/                  # 이미지·폰트 등
│   ├── components/              # 재사용 UI 컴포넌트
│   ├── constants/               # 상수 정의
│   ├── hooks/                   # 커스텀 훅
│   ├── layouts/                 # 공통 레이아웃
│   ├── pages/                   # 페이지 컴포넌트
│   ├── store/                   # Zustand 등 전역 상태
│   ├── styles/                  # 전역·공통 스타일
│   ├── types/                   # TypeScript 타입
│   ├── utils/                   # 유틸리티 함수
│   ├── App.tsx                  # 루트 컴포넌트
│   ├── main.tsx                 # 엔트리 포인트
│   └── Router.tsx               # 라우터 설정
├── package.json                 # 의존성·스크립트 정의
├── .gitignore                   # Git 무시 목록
├── .prettierrc                  # Prettier 코드 스타일
├── eslint.config.js             # ESLint 설정
├── index.html                   # SPA 루트 HTML
├── netlify.toml                 # Netlify 배포 설정
├── tailwind.config.js           # TailwindCSS 설정
├── tsconfig.json                # TypeScript 기본 설정
├── vite.config.ts               # Vite 번들러 설정
└── README.md                    # 프로젝트 개요

4. Pages and Key Features (페이지 및 주요 기능)

1. 회원가입

회원가입 시 DB에 유저정보가 등록됩니다.
사장님 또는 알바생 계정을 선택해 회원가입을 진행합니다.

2. 로그인

사용자 인증 정보를 통해 로그인합니다.

3. 공고 리스트

작성된 공고 리스트를 띄웁니다.
프로필이 등록된 알바생 계정으로 로그인하면 맞춤 공고가 지역 기준으로 뜹니다.
마감임박순, 시급많은순, 시간적은순, 가나다순 정렬이 가능합니다.
지역, 시급, 일자의 상세필터를 사용할 수 있습니다.
페이지네이션을 이용해 공고 리스트를 넘길 수 있습니다.

4. 공고 검색

헤더 검색창에 검색어를 입력하면 해당 검색어를 포함한 공고가 보입니다.
마감임박순, 시급많은순, 시간적은순, 가나다순 정렬이 가능합니다.
지역, 시급, 일자의 상세필터를 사용할 수 있습니다.
페이지네이션을 이용해 공고 리스트를 넘길 수 있습니다.

5. 가게 정보 등록 및 편집

사장님 계정으로 로그인하면 내 가게 정보를 등록 및 편집할 수 있습니다.
필수 영역이 알맞게 채워졌다면 가게 정보가 등록 및 편집됩니다.

6. 내 가게

내 가게가 등록되어 있지 않다면 등록하기 버튼을 통해 가게 정보 등록 페이지로 이동할 수 있습니다.
내 가게의 정보와 공고 리스트를 볼 수 있습니다.
가게 정보를 편집하거나 공고를 등록하는 페이지로 버튼을 통해 이동할 수 있습니다.
공고 리스트는 무한스크롤됩니다.

7. 공고 등록 및 편집

내 가게의 공고를 등록 및 편집할 수 있습니다.
필수 영역이 알맞게 채워졌다면 공고가 등록 및 편집됩니다.

8. 공고 상세 - 사장님

등록한 공고의 정보와 지원자를 확인할 수 있습니다.
지원자의 거절/승인 상태를 결정할 수 있습니다.
공고 편집 페이지로 버튼을 통해 이동할 수 있으나, 내 가게가 아니거나 지난 공고이거나 지원자가 있다면 버튼이 비활성화됩니다.

9. 프로필 등록 및 편집

알바생 계정으로 로그인하면 내 프로필을 등록 및 편집할 수 있습니다.
필수 영역이 알맞게 채워졌다면 프로필이 등록 및 편집됩니다.

10. 내 프로필

내 프로필이 등록되어 있지 않다면 등록하기 버튼을 통해 프로필 등록 페이지로 이동할 수 있습니다.
내 프로필 정보와 지원 리스트를 확인할 수 있습니다.
프로필 편집 페이지로 버튼을 통해 이동할 수 있습니다.
지원 리스트는 페이지네이션으로 넘길 수 있습니다.

11. 공고 상세 - 알바생

지원하기 버튼을 통해 공고에 지원할 수 있습니다.
지원을 한 공고에 대해서는 취소하기 버튼을 통해 지원 취소가 가능합니다.
최근에 본 공고가 최대 6개 띄워집니다.

5. Team Members (팀원 및 팀 소개)

오수빈	지정환	진성진	홍수민
TL, FE	FE	FE	FE
GitHub	GitHub	GitHub	GitHub

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 프로세스

구현 전에 이슈를 생성합니다.
작업 전 dev 브랜치에서 새로운 브랜치를 파생, 생성합니다.
이슈에 대한 작업을 합니다.
PR 생성 전 dev 브랜치에서 가져올 코드가 있는 지 확인합니다.
있다면, 가져와서 충돌 발생 시 해결 후 PR을 생성합니다. (git push)
PR 템플릿을 이용해서 PR 내용을 작성합니다.
코드 리뷰를 받고 요청 받는 내용을 해결한 뒤 다시 push 합니다.
- PR을 하기위한 승인 개수
  - 2개
- 코드리뷰 담당자
  - [수빈님, 정환님, 성진님, 수민님]
    - 수빈님: [정환님, 성진님]
    - 정환님: [성진님, 수민님]
    - 성진님: [수민님, 수빈님]
    - 수민님: [수빈님, 정환님]
  - 주말에도 코드 리뷰
- 중요도가 낮은 건, PR 등록 당일에 코드 리뷰 진행
- 중요도가 높은 것은 팀 회의 시간에 얘기를 해서 특정 시간 내에 리뷰 후 병합 완료
- 리뷰 반영 후 병합 관련
  - 리뷰 후 수정 사항 반영을 완료하면, 디스코드 메시지로 리뷰를 다시 한번 요청하기
모든 comment가 해결 된 경우, Approve (승인) 합니다.
최종적으로 PR 병합하기 전, dev 브랜치로부터 코드를 한번 가져와 봅니다.
dev 브랜치로 PR 병합을 합니다. (이슈 Close)
- PR 병합 방식
  - merge commit

8. Coding Convention

네이밍 컨벤션

변수 & 함수: camelCase 사용

let userName = "Jay";
const getUserProfile = () => {};

상수(Constant): UPPER_SNAKE_CASE

const API_BASE_URL = "https://api.example.com";

클래스/컴포넌트: PascalCase

class UserProfile {}
function UserCard() {}

파일명
- 컴포넌트 및 스타일 파일명은 PascalCase
- 그 외는 camelCase
비동기 요청 로직 함수명
- HTTP 메서드 접두사 사용
- ex) getPost, postPost, deletePost
이벤트 핸들러 함수명
- 이벤트 핸들러 함수 - handle 접두사 사용
  - ex) handleClick, handleChange-
- props로 전달되는 이벤트 핸들러 이름은 on{이벤트 유형}{동작명}
  - ex) onClick, onChange-

코드 컨벤션

ESLint

함수 정의
- 화살표 함수: () => { ... }
함수형 컴포넌트 정의
- function 키워드 사용 함수: function () { ... }
컴포넌트 코드 아래로 컴포넌트 외의 다른 코드를 배치하지 않기

import '' from '...';

const data = { name: "이름" }; // ✅ 컴포넌트 위에 위치시키기 

function ExampleComponent () { 
	return (
		<div>{data.name}</div>
	);
}

const data = { name: "이름" }; // ❌ 컴포넌트 아래에 베치하지 않기

Prettier

행 바꿈 브라켓 적용

<input
	type="text"
	name="email"
/> // 브라켓 내리기

JSX 태그 속성, 문자열 따옴표
- 쌍따옴표
들여쓰기
- 2칸

객체 마지막 속성 콤마

const obj = {
	foo: "bar",
	baz: "baz",
};

그 외

약어
- 이벤트 파라미터명
  - e
- previous State
  - setCount((prev) => { ... })
props는 반드시 구조분해할당을 사용

9. 커밋 컨벤션

기본 구조

type : subject

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에서 작업한 내용을 간략히 설명해주세요(이미지 첨부 가능)

### 스크린샷 (선택)

## 💬리뷰 요구사항(선택)

> 리뷰어가 특별히 봐주었으면 하는 부분이 있다면 작성해주세요
>
> ex) 메서드 XXX의 이름을 더 잘 짓고 싶은데 혹시 좋은 명칭이 있을까요?

이슈 템플릿

## 📝 이슈 유형

> 해당하는 유형에 'x'로 체크해주세요.

- [ ] API 연동 (feat)
- [ ] 컴포넌트 개발 (feat)
- [ ] Hook 개발 (feat)
- [ ] 페이지 구현 (feat)
- [ ] 문서 작업 (doc)
- [ ] 환경 설정 (chore)
- [ ] 버그 픽스 (fix)
- [ ] 기타 (etc.)

## 어떤 기능인가요?

> 추가하려는 기능에 대해 간결하게 설명해주세요

## 작업 상세 내용

- [ ] TODO
- [ ] TODO
- [ ] TODO

## 참고할만한 자료(선택)

Name		Name	Last commit message	Last commit date
Latest commit History 353 Commits
.github		.github
.husky		.husky
public		public
scripts		scripts
src		src
.gitignore		.gitignore
.prettierrc		.prettierrc
README.md		README.md
eslint.config.js		eslint.config.js
index.html		index.html
netlify.toml		netlify.toml
package-lock.json		package-lock.json
package.json		package.json
postcss.config.mjs		postcss.config.mjs
tailwind.config.js		tailwind.config.js
tsconfig.app.json		tsconfig.app.json
tsconfig.json		tsconfig.json
tsconfig.node.json		tsconfig.node.json
tsconfig.paths.json		tsconfig.paths.json
vite.config.ts		vite.config.ts

CodeitPart3/thejulge

Folders and files

Latest commit

History

Repository files navigation

0. Getting Started (시작하기)

1. Project Overview (프로젝트 개요)

프로젝트 이름: TheJulge | 더줄게

2. Technology Stack (기술 스택)

2.1 프론트엔드

2.2 API 및 상태 관리

2.3 협업

3. Project Structure (프로젝트 구조)

4. Pages and Key Features (페이지 및 주요 기능)

1. 회원가입

2. 로그인

3. 공고 리스트

4. 공고 검색

5. 가게 정보 등록 및 편집

6. 내 가게

7. 공고 등록 및 편집

8. 공고 상세 - 사장님

9. 프로필 등록 및 편집

10. 내 프로필

11. 공고 상세 - 알바생

5. Team Members (팀원 및 팀 소개)

6. Tasks & Responsibilities (작업 및 역할 분담)

7. Development Workflow (개발 워크플로우)

브랜치 전략 (Branch Strategy)

GitHub Label

GitHub Wiki

PR Rule

PR 프로세스

8. Coding Convention

네이밍 컨벤션

코드 컨벤션

ESLint

Prettier

그 외

9. 커밋 컨벤션

기본 구조

type 종류

10. PR 템플릿

기본 구조

PR 템플릿

이슈 템플릿

About

Resources

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Uh oh!

Contributors 4

Uh oh!

Languages

Packages