Albaform: "당신의 삶에 가치를 더하는 기술"

🌐 바로가기 | 📚 API 문서

🔍 About

Why 우리는 왜 이 프로젝트를 시작했는가?
What 어떤 문제를 해결하고 싶은가?
Who 누구를 위한 서비스인가?

이 프로젝트는 채용 시스템 개발에 관심을 가진 4명의 주니어 프론트엔드 개발자가 모여 함께 개발한 Albaform 입니다.
아르바이트 공고를 올리고 채용하는 긱워커 매칭 플랫폼 구축을 목표로, 실무 능력과 협업 효율성 향상을 위하여 해당 프로젝트가 진행되었습니다.

💡 핵심 기능 하이라이트

✨ 지원자/채용자의 서비스 분리     📱 깔끔한 UI/UX
🔐 채용자의 편리한 공고 및 게시글 관리     🎯 다양한 필터와 정렬 기능 제공

📸 Demo Preview

아래는 주요 화면 데모입니다.

• 회원가입 및 로그인
  
  
  
• [사장님 권한] 알바폼 만들기
  
  
• [지원자 권한] 알바폼 목록 및 상세 조회
  
  
• [사장님 권한] 지원자 상세 확인 및 관리
  
  
• [지원자 권한] 알바폼 지원하기 흐름
  
  
• 마이페이지 및 알바토크
  
  

👨‍👩‍👧‍👦 팀원 & 역할

협업의 조화는 이 팀 덕분입니다!

이름	역할 요약	GitHub
윤혜림	프로젝트 리딩 / 핵심 로직 구현 / UI 개발 전담	y5037
정혜연	로그인 및 폼 생성 개발 / 공통 컴포넌트 제작	yeon0036
이승환	UIUX 일부 구현 / 기획 및 피드백 참여	mynameishwan
장보배	초기 UI 구성 / 공통 컴포넌트 기획 참여	katej0320

🛠️ 기여 상세

🔸 윤혜림

• 전체 구조 설계 및 프로젝트 리딩
• 무한스크롤, 페이지네이션, 카카오맵 등 주요 로직 개발
• 알바폼 목록, 상세 / 지원자 상세 / 지원하기 / 마이페이지 / 알바토크 / 내 알바폼 UIUX 및 개발 전담

🔸 정혜연

• 초기 기획 및 회의 참여
• Toast, Tooltip 등 공통 컴포넌트 제작
• 로그인, 간편 로그인 / 회원가입, 간편 회원가입 / 회원 정보 입력 / 알바폼 만들기 UIUX 및 개발 전담

🔸 이승환

• 초기 기획 및 회의 참여
• 랜딩페이지 UIUX 설계 및 구현
• 알바폼 만들기 UI 일부 구현

🔸 장보배

• 초기 기획 및 회의 참여
• 네비게이션 초기 UIUX 설계
• 알바폼 목록 및 상세 UI 일부 구현

📚 Library & Framework

기술명	로고	버전
React		19.0.0
Next.js		15.3.4
Tailwind		3.4.17
Styled Component		6.1.17
React Query		5.81.2
Vercel		44.4.1

⚙️ 설치 방법

# 1. 레포지토리 클론
git clone https://github.com/Albaform/main_repo.git

# 2. 디렉토리 이동
cd main_repo  # 또는 cd Albaform (실제 폴더명에 따라 수정)

# 3. 패키지 설치
npm install

🚀 실행 방법

npm run dev

🔐 환경 변수 설정 (.env)

카카오 로그인 기능 및 지도 출력을 위해 `.env.local` 파일에 환경 변수를 설정해야 합니다.

```bash
# 아래 명령어로 예시 파일을 복사한 후, 실제 키를 입력하세요
cp .env.example .env.local

.env.example 파일을 참고하여 실제 값을 입력해주세요.

변수명	설명
NEXT_PUBLIC_KAKAO_APP_KEY	클라이언트(브라우저)에서 사용하는 JavaScript 키
NEXT_PUBLIC_KAKAO_REST_API_KEY	서버에서 카카오 REST API 호출 시 사용하는 키
NEXT_PUBLIC_KAKAO_CLIENT_SECRET	REST API 토큰 교환 시 사용하는 Client Secret
NEXT_PUBLIC_KAKAO_REDIRECT_SIGNUP_BASE_URI	카카오 회원가입 리다이렉트 URI
NEXT_PUBLIC_KAKAO_REDIRECT_SIGNIN_BASE_URI	카카오 로그인 리다이렉트 URI

⚠️ .env.local 파일은 git에 커밋되지 않으며, 실제 키는 배포 환경에 맞게 별도로 관리해야 합니다.

📁 프로젝트 구조

/src
├── 📂 app
│   └── 📂 albaform                   # 알바폼 관련 페이지 루트
│       ├── 📄 page.tsx               # 공통 페이지 (예: 목록)
│       ├── 📂 components             # 공통 컴포넌트
│       ├── 📂 [id]                   # 공통 상세 페이지 (Owner/Applicant 공용)
│       ├── 📂 owner                  # 채용자 전용 페이지
│       │   ├── 📄 page.tsx
│       │   └── 📂 components
│       └── 📂 applicant              # 지원자 전용 페이지
│           ├── 📄 page.tsx
│           └── 📂 components
│
├── 📂 components                     # 전역 공통 컴포넌트
├── 📂 hooks                          # 커스텀 훅 모음
├── 📂 lib                            # 외부 API, axios 등 클라이언트 설정
├── 📂 styles                         # 전역 스타일 (Tailwind, GlobalStyle 등)
├── 📂 types                          # 타입 정의 (interface, enum 등)
├── 📂 utils                          # 공통 유틸 함수
├── 📂 schemas                        # Zod 스키마, 폼 유효성 로직
└── 📄 page.tsx                       # 앱 진입점

🧰 사용한 툴

• Figma – UI/UX 디자인
• GitHub – 버전 관리 및 코드 협업
• Discord – 실시간 커뮤니케이션 및 회의
• Prettier – 코드 스타일 포맷팅

---

✨ 마무리하며

이 프로젝트는 단순한 클론이 아닌,
실제 채용 플랫폼 구축을 목표로 핵심 기능을 직접 설계하고 협업하여 만든 결과물입니다.
비록 팀원 간 기여도의 차이가 있었지만, 마지막까지 완성도를 위해 달려온 구성원들의 협업 과정이 담겨 있습니다.

🙌 사용자 중심 UI/UX와 실제 서비스 구현 경험을 통해
한 단계 성장한 프론트엔드 개발자로 도약할 수 있었습니다.