모프: 우리 모두의 프로젝트 ‘모프’

💜 데모사이트

비용 문제로 23년 10월 이후 서버가 닫힐 수 있습니다 : 💡 모프 : 모두의 프로젝트 (moppe.co.kr)

테스트 계정

• 아이디 : [email protected]
• 비밀번호 : admin123

💜 프로젝트 주제

목적

• 누구나 스터디 및 프로젝트를 함께 할 팀원을 모집하고, 참가할 수 있고, 열심히 완성한 프로젝트를 자랑할 수 있도록 플랫폼을 구축합니다.

목표

• 통일성있는 스타일과, 쉽고 간편한 상호작용을 통해 사용자에게 최선의 UX/UI를 제공합니다.
• 모바일 사용자를 위한 반응형 페이지를 제공합니다.

💜 페르소나

왕감자씨 (25세, 취준생)

소개 : 저는 혼자서 하는 것 보다 다른 사람들과 함께 할 때 더 동기부여를 받습니다. 요즘들어 혼자 취업 준비를 하다보니 너무 지치고 열정이 생기지 않아 취업 준비 스터디에 가입하고 싶은데, 어디서 스터디를 찾아야 할 지 막막합니다.

이사원씨 (34세, 직장인)

소개 : 저는 5년째 직장에 다니고 있는 직장인입니다. 최근 환경과 관련된 창업에 관심이 생겨서 함께 프로젝트를 진행 할 팀원들을 모집하고 싶은데 어디서 모집하면 좋을 지 정하지 못했습니다.

박인사씨 (29세, 직장인)

소개 : 게임 개발에 관심이 생겨서 해당 분야로 이직을 준비 중입니다. 해당 분야에 종사하시는 분들과 프로젝트 경험을 쌓고 싶은데, 어디서 찾아보고 프로젝트에 지원하면 좋을 지 고민 중입니다.

💜 서비스 소개 및 핵심 기능

홈

• 캐러셀
• 최신 모집글
• 인기 프로젝트 자랑글
• 인기 기술 스택 순위

로그인

• 이메일 로그인
• 카카오 로그인

마이페이지

• 회원 정보 조회
• 모집글 / 프로젝트 자랑글 / 북마크 / 댓글 모아보기 기능

회원정보 수정

• 기본적인 회원 정보, 프로필 이미지, 기술 스택 등 수정 가능

회원 탈퇴

• 계정 정보 및 모든 서비스 이용 기록 삭제

게시글 리스트

• 무한 스크롤, 검색, 모집 상태 필터링, 카테고라이징 기능

게시글 상세 페이지

• 모집 상태, 북마크, 공유하기, 모집글과 프로젝트 자랑글 연결 기능

게시글 작성/수정 페이지

• 임시저장 / 미리보기
• 프로젝트 참여 유저 및 모집완료 프로젝트 조회 기능

댓글

• 댓글 등록 / 수정 / 삭제 / 복사 기
• 댓글 작성자 클릭 시 유저 페이지로 이동
• 대댓글 기능

챗봇

• 자주 묻는 질문에 대한 답변 및 바로가기 기능
• 팀이메일 바로 보내기 기능

모바일 사용자를 위한 반응형 제공

라이트 모드 / 다크 모드 제공

💜 구성원 역할

이름	역할
🧊 이새미 (팀장, FE)	모집 글 게시글 리스트 페이지 프로젝트 작성 페이지 헤더 컴포넌트 햄버거 메뉴 컴포넌트 모달 컴포넌트 에디터 이미지 처리 배포
🧊 김차미 (프론트 팀장, FE)	댓글 컴포넌트 메인 페이지 유저 프로필 페이지 SCSS 기반 다크모드 구현
🧊 송현수 (FE)	로그인 페이지 회원가입 페이지 비밀번호 수정 페이지
🧊 신혜지 (FE)	마이페이지 회원 정보 수정 페이지 기술 스택 컴포넌트 챗봇 컴포넌트 에디터 코드블록 처리 메인 페이지 UI 404 에러 페이지 모집완료 리스트 모달 컴포넌트
🧊 이주영 (FE)	모집 글 상세 페이지 프로젝트 리스트 페이지 공유하기 컴포넌트 Axios 기반 코드 프론트 토큰 관리
🧊 장준희 (FE)	모집 글 작성 / 수정 페이지 모집 글 미리보기 페이지 프로젝트 상세 페이지 회원탈퇴 페이지 에디터 컴포넌트 반응형 UI
🧊 박지원 (백엔드 팀장, BE)	서버 구축 AWS RDS DataBase 구축 ERD 설계 JWT 토큰 인증 및 인가 미들웨어 multer 이미지 업로드 미들웨어 class-validator 유효성 검사 미들웨어 카카오 로그인 API 실시간 인기 기술스택 API 유저 관련 API 프로젝트 모집 글 관련 API 포트폴리오 자랑(게시) 글 관련 API 댓글 관련 API 북마크 관련 API

💜 기술스택

💜 API 문서

API Docs

ERD

💜 테스트 케이스

Test Case

💜 팀 컨벤션

• 커밋 컨벤션
  • Feat: 새로운 기능 추가
  • Fix: 버그 수정
  • Design: CSS 등 사용자 UI 디자인 변경
  • !HOTFIX: 급하게 치명적인 버그를 고쳐야 하는 경우
  • Docs: 문서 변경
  • Style: 코드 포맷팅, 세미콜론 누락, 코드 변경이 없는 경우
  • Refactor: 코드 리팩토링
  • Test: 테스트 코드 추가, 리팩토링 테스트 코드 추가
  • Chore: 빌드 작업, 패키지 매니저 수정
  • Comment: 필요한 주석 추가 및 변경
  • Rename: 파일 또는 폴더 명을 수정하거나 옮기는 작업만인 경우
  • Remove: 파일을 삭제하는 작업만 수행한 경우
• 디렉토리 및 파일 컨벤션
  • 디렉토리명: Camel Case로 작성
    • src/pages
  • 컴포넌트명: Pascal Case로 작성
    • src/pages/Main
  • 컴포넌트 파일명: Pascal Case로 작성
    • src/components/Project/ProjectBody.tsx
  • 페이지 최상위 파일명: index.tsx
    • src/pages/Main/index.tsx
• 함수 및 변수 컨벤션
  • 변수명: Camel Case로 작성
    • const [isLoading, setIsLoading] = useState(false)
  • 상수: Snake Case로 작성
    • const MAX_NAME_COUNT = 50
• 코드 컨벤션

  • 인터페이스명: Pascal Case로 작성

    interface User {
      user_id: number;
      user_email: string;
      user_name: string;
      user_password: string;
      user_career_goal: string;
      user_stacks: {
        stackList: string[];
      };
      user_introduction: string;
      user_img: string;
    }
    
    export type TypeTeamProjectUser = Pick<
      User,
      'user_id' | 'user_email' | 'user_name' | 'user_career_goal' | 'user_img'
    >;

  • Props 인터페이스

    interface MemberSelectFormProps {
      selectedUserList: TypeTeamProjectUser[];
      onMemberSelect: (userData: TypeTeamProjectUser) => void;
      onMemberUnselect: (userId: number) => void;
    }

💜 Git branch 관리

master
├── develop
│___│___│___feature-main

• feature-(기능/페이지 명) 으로 개인 작업 브랜치 생성

💜 협업툴

• Notion : 팀 페이지, 스크럼 정리, API 문서 정리
• Figma : 기획 및 추가 구현 단계에서 레이아웃을 잡고, 발표 자료를 만들기 위해 사용
• Google Sheets : 기능 명세서
• Discord : 공지 및 중요 이슈 공유
• Gather : 팀원간 커뮤니케이션 및 온라인 스크럼 진행
• Gitlab
  • Code Repository
  • Gitlab Issue : Daily Todo List, QA, Trouble Shooting 내역 기제

💜 스크럼

• 매일 오후 12시 스크럼 진행 (게더타운을 활용한 온라인 스크럼)
• 프론트, 백의 개발 진행상황 및 이슈 공유

💜 팀 페이지

Notion 🧊 7팀 [ ICE ]

Figma

Google Sheets

💜 배포

Front-End

• pm2를 이용한 서버 오픈 및 nginx를 활용한 배포

💜 서버 실행 방법

Front-End

npm i
npm start

Back-End

npm i
npm run dev

💜 .env 설정

Front-End

REACT_APP_DOMAIN={IMG_DOMAIN}
REACT_APP_API_KEY={API_KEY}
REACT_APP_KAKAO_SHARE_KEY={KAKAO_SHARE_KEY}
REACT_APP_KAKAO_API_KEY={KAKAO_KEY}
REACT_APP_KAKAO_REDIRECT_URI={KAKAO_REDIRECT_URI}

Back-End

BCRYPT_SALT_ROUNDS=10

HOST=http://localhost:3000
PORT=5500

DB_HOST={DB_HOST}
DB_PORT={DB_PORT}
DB_NAME={DB_NAME}
DB_USERNAME={DB_USERNAME}
DB_PASSWORD={DB_PASSWORD}

JWT_SECRET_KEY_LENGTH=32

ACCESS_TOKEN_SECRET={ACCESS_TOKEN_SECRET}
ACCESS_TOKEN_EXPIRES_IN=1h

REFRESH_TOKEN_SECRET={REFRESH_TOKEN_SECRET}
REFRESH_TOKEN_EXPIRES_IN=7d

UPLOAD_IMAGE_FILE_ROOT={IMAGE_FILE_DOMAIN}

KAKAO_LOGIN_API_CLIENT_ID={KAKAO_LOGIN_API}
KAKAO_LOGIN_API_REDIRECT_URI={KAKAO_LOGIN_API_REDIRECT}

💜 File directory

Front-End

📦src
 ┣ 📂apis
 ┣ 📂assets
 ┃ ┣ 📂Banner
 ┃ ┣ 📂fonts
 ┣ 📂components
 ┣ 📂constants
 ┣ 📂hooks
 ┣ 📂interfaces
 ┣ 📂pages
 ┃ ┣ 📂ChangePassword
 ┃ ┣ 📂DeleteAccount
 ┃ ┣ 📂Login
 ┃ ┣ 📂Main
 ┃ ┣ 📂MyPage
 ┃ ┣ 📂PortfolioDetail
 ┃ ┣ 📂PortfolioList
 ┃ ┣ 📂PortfolioModify
 ┃ ┣ 📂PortfolioWriting
 ┃ ┣ 📂Project
 ┃ ┣ 📂ProjectList
 ┃ ┣ 📂ProjectModify
 ┃ ┣ 📂ProjectPreview
 ┃ ┣ 📂ProjectWriting
 ┃ ┣ 📂Register
 ┃ ┣ 📂UpdateUser
 ┃ ┗ 📂UserPage
 ┣ 📂recoil
 ┣ 📂utils
 ┣ 📂__test__
 ┣ 📜App.tsx
 ┣ 📜color.scss
 ┣ 📜index.module.scss
 ┣ 📜index.tsx
 ┣ 📜react-app-env.d.ts
 ┣ 📜reportWebVitals.ts
 ┣ 📜reset.css
 ┣ 📜setupTests.ts
 ┣ 📜theme.scss
 ┗ 📜variables.scss

Back-End

📦src
 ┣ 📂config
 ┣ 📂controllers
 ┣ 📂database
 ┃ ┣ 📂dtos
 ┃ ┗ 📂repository
 ┣ 📂middlewares
 ┃ ┣ 📂validationHandler
 ┣ 📂routes
 ┣ 📂services
 ┣ 📂types
 ┣ 📂utils
 ┗ 📜app.ts

💜 프로젝트 팀원

Frontend	Frontend	Frontend	Frontend	Frontend	Frontend	Backend
이새미	김차미	송현수	신혜지	이주영	장준희	박지원