코드잇 프론트엔드 9기 2팀 워크루트(WorkRoot) 프로젝트

배포 사이트: https://www.workroot.life

프로젝트 소개

• WorkRoot 소개: 🌳 "일"을 통해 자신의 뿌리를 내리며 "성장"하는 구인구직 사이트
• 개발 기간: 2024. 11. 21 ~ 2024. 12. 30
• 개발 인원: 4명

김원	김예지	김태준	홍예림
cccwon2	yyezzzy	imtaejunk	hongggyelim

• 역할
  • 김원: 팀장, 레포지토리 세팅, 로그인/회원가입, 마이페이지, 공고 목록 페이지, 게시판 목록 페이지, 공고 카드 컴포넌트, 모달 컴포넌트, SEO 설정, 지도 API 연동, Supabase 연동, 회의록 작성
  • 김예지: 소셜로그인/회원가입, 알바폼 상세페이지, 로고, 랜딩페이지 디자인 및 기획, 공통 버튼 컴포넌트, 스토리북 세팅, 크로매틱 배포 세팅
  • 김태준: 랜딩 페이지, 게시판 상세 페이지, 게시판 카드 컴포넌트, 전역 에러 페이지, 404 페이지
  • 홍예림: 공고 작성 페이지, 공고 수정 페이지, 공통 인풋 컴포넌트, 데이터피커 커스텀, 마우스 커서 커스텀, 깃헙 액션 CI 세팅

기술 스택

주요 의존성

상태 관리 & 데이터 페칭

폼 & 유효성 검사

UI/UX

지도 & 소셜

개발 도구

개발 환경 설정

ESLint 설정

{
  "extends": [
    "next",
    "next/core-web-vitals",
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:prettier/recommended",
    "prettier"
  ],
  "plugins": ["@typescript-eslint", "prettier"],
  "parser": "@typescript-eslint/parser",
  "rules": {
    "import/no-anonymous-default-export": "off",
    "@typescript-eslint/no-explicit-any": "off",
    "prettier/prettier": [
      "error",
      {
        "endOfLine": "lf"
      }
    ],
    "linebreak-style": ["error", "unix"],
    "no-unused-vars": "off",
    "@typescript-eslint/no-unused-vars": "warn"
  }
}

Prettier 설정

{
  "printWidth": 120, // 한 줄의 최대 길이를 120자로 제한
  "tabWidth": 2, // 들여쓰기 시 사용할 공백 문자 수
  "useTabs": false, // 탭 문자 대신 공백 문자 사용
  "semi": true, // 문장 끝에 세미콜론 추가
  "singleQuote": false, // 문자열에 작은따옴표 대신 큰따옴표 사용
  "quoteProps": "as-needed", // 객체 속성에 따옴표 사용 방식 (필요한 경우에만 사용)
  "trailingComma": "es5", // 객체, 배열 등의 마지막 항목 뒤에 쉼표 추가
  "bracketSpacing": true, // 객체 리터럴의 괄호 사이에 공백 추가
  "arrowParens": "always", // 화살표 함수의 매개변수를 항상 괄호로 감싸기
  "proseWrap": "preserve", // 마크다운 텍스트의 줄바꿈 처리 방식
  "endOfLine": "lf", // 줄 끝 문자를 LF(Line Feed)로 통일
  "plugins": [
    "prettier-plugin-tailwindcss" // Tailwind CSS 클래스 자동 정렬 플러그인
  ]
}

TailwindCSS 설정

import type { Config } from "tailwindcss";

const config: Config = {
  content: [
    "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
    "./stories/**/*.{js,ts,jsx,tsx}",
    "./src/app/globals.css",
    "./src/stories/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    extend: {
      colors: {
        foreground: "var(--foreground)",
        black: {
          100: "#6B6B6B",
          200: "#525252",
          300: "#373737",
          400: "#1F1F1F",
          500: "#040404",
        },
        grayscale: {
          50: "#FFFFFF",
          100: "#DEDEDE",
          200: "#C4C4C4",
          300: "#ABABAB",
          400: "#999999",
          500: "#808080",
        },
        primary: {
          orange: {
            50: "#fbfffd",
            100: "#8ab08c",
            200: "#64a466",
            300: "#388e3c",
            400: "#156719",
          },
          blue: {
            100: "#535779",
            200: "#3E415B",
            300: "#2A2C3D",
          },
        },
        background: {
          100: "#FCFCFC",
          200: "#F7F7F7",
          300: "#EFEFEF",
        },
        line: {
          100: "#F2F2F2",
          200: "#E6E6E6",
        },
        state: {
          error: "#FC4100",
        },
      },
      fontFamily: {
        nexon: ["var(--font-nexon)", "sans-serif"],
        hakgyo: ["var(--font-hakgyo)", "sans-serif"],
        sans: ["Pretendard", "sans-serif"],
      },
    },
  },
};

export default config;

시작하기

1. 저장소 클론:

git clone [repository-url]

2. 환경 변수 설정: 프로젝트 루트에 .env 파일을 생성하고 다음 내용을 추가합니다:

# 클라이언트 사이드
NEXT_PUBLIC_API_URL=your-api-url
NEXT_PUBLIC_TEAM_ID=your-team-id

# 서버 사이드
CHROMATIC_PROJECT_TOKEN=your-chromatic-project-token

# 도메인
NEXT_PUBLIC_DOMAIN_URL=your-domain-url

# 테스트 계정(지원자)
NEXT_PUBLIC_TEST_APPLICANT_ID=your-test-applicant-id
NEXT_PUBLIC_TEST_APPLICANT_PASSWORD=your-test-applicant-password

# 테스트 계정(사장님)
NEXT_PUBLIC_TEST_OWNER_ID=your-test-owner-id
NEXT_PUBLIC_TEST_OWNER_PASSWORD=your-test-owner-password

# 페이스북
NEXT_PUBLIC_FB_APP_ID=your-facebook-app-id

# 카카오맵
NEXT_PUBLIC_KAKAO_APP_KEY=your-kakao-app-key

# 수파베이스
NEXT_PUBLIC_SUPABASE_URL=your-supabase-url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your-supabase-anon-key

# 카카오 클라이언트 아이디
NEXT_PUBLIC_KAKAO_CLIENT_ID=your-kakao-client-id

# 구글 클라이언트 아이디
NEXT_PUBLIC_GOOGLE_CLIENT_ID=your-google-client-id

# 채널톡 플러그인 키
NEXT_PUBLIC_CHANNEL_IO_PLUGIN_KEY=your-channel-io-plugin-key

# 구글 애널리틱스
NEXT_PUBLIC_GA_ID=your-google-analytics-id

3. 의존성 설치:

npm install

4. 개발 서버 실행:

npm run dev

프로젝트 구조

src/
├── app/                    # Next.js 14+ App Router
│   ├── (auth)/            # 인증 관련 라우트 (로그인, 회원가입)
│   ├── (home)/            # 홈 페이지 관련 라우트
│   ├── (pages)/           # 주요 페이지 라우트
│   │   ├── (workform)/    # 워크폼 관련 페이지
│   │   ├── my-workform/   # 마이 워크폼 페이지
│   │   └── work-talk/     # 워크톡 게시판 페이지
│   └── components/        # 공통 컴포넌트
│       ├── animation/     # 애니메이션 컴포넌트
│       ├── button/        # 버튼 컴포넌트
│       ├── card/          # 카드 컴포넌트
│       ├── chip/          # 칩 컴포넌트
│       ├── input/         # 입력 컴포넌트
│       ├── layout/        # 레이아웃 컴포넌트
│       ├── loading-spinner/ # 로딩 스피너 컴포넌트
│       └── pagination/    # 페이지네이션 컴포넌트
├── constants/             # 상수 정의
├── hooks/                 # 커스텀 훅
│   └── queries/          # React Query 관련 훅
├── lib/                   # 유틸리티 함수
├── schemas/              # Zod 스키마 정의
├── store/                # 상태 관리 (Zustand)
├── types/                # TypeScript 타입 정의
└── utils/                # 유틸리티 함수

라이선스

이 프로젝트는 MIT 라이선스를 따릅니다.