WebRTC 기반 1:1 화상 컨설팅 플랫폼 : 커리업

6인 팀 프로젝트

배포 주소

• 커리업
  • 실제 서비스를 볼 수 있는 주소
• storybook
  • 프론트엔드 컴포넌트 개발 현황 및 사용법에 대한 storybook 배포 주소

프로젝트 기간

11.10~12.08 (약 4주)

1. 서비스 소개

1. 서비스 설명

개요

• 한 줄 소개 : 악화된 취업난으로 채용시장에서 불안감을 호소하는 주니어 개발자들에게 시니어 개발자와의 1:1 화상 컨설팅 서비스를 제공하는 플랫폼
• 서비스 명 : 커리업(Career Up)

페르소나 ( 주 타겟 고객 )

• 주니어 개발자
  • 새로 취업을 준비하고 있는 주니어 개발자들

2. 기획 배경

배경

• 2019 년 말 코로나 19의 확산과 함께 많은 기업들이 비대면 서비스를 지향함에 따라 개발자들의 수요가 폭발적으로 증가했다.
• 2022년 미국의 금리 인상은 전 세계의 경제를 긴축시켰고 글로벌 양적완화와 러시아 & 우크라이나 사태등 불안정한 요소가 지속적으로 발생하여 투자 심리가 위축되었다.
• 경기는 침체되는데 사회로 나와 취업을 도전하는 주니어 개발자들의 수는 점점더 증가하고 있다.
• 2022년 상반기 IT 채용 공고수가 4.5만이었던 데 비해 2023년 상반기 IT 채용 공고수는 3만으로 감소했다.
• 2022년 상반기 IT 채용 지원 건수가 73만이었던 데 비해 2023년 상반기 IT 채용 지원 건수는 108만으로 증가했다.
• 이런 불경기 속에서 우리들 신입 개발자들은 어떻게 살아남을 수 있을까? 취업을 수월하게 하기 위해 시니어 개발자와의 컨설팅을 통해 받은 피드백으로 올바른 취준의 방향성을 잡고자 한다.

목적

• 언제 어디서든 쉽고 편리하게 화상 컨설팅을 받을 수 있는 환경을 제공하자.
• 화면 공유 및 채팅 기능을 통해 컨설팅을 더욱 수월하게 진행할 수 있도록 하자.

의의

• 비대면으로 주니어 개발자가 쉽게 컨설팅을 요청할 수 있는 플랫폼
• 원하는 시니어 개발자의 신청 가능한 예약 시간을 확인하고 신청 가능한 시간대에 컨설팅을 예약할 수 있도록 한다.

3. 서비스 화면

핵심 기능

서비스 화면

메인페이지

• 반응형 - 모바일

​

• 반응형 - 웹

멘토 탐색 페이지

현직자 상세 페이지

상담 신청 페이지

나의 채팅 페이지

마이 페이지

로그인 및 회원가입 페이지

헤더 및 메뉴바

화상회의 ⭐️

설치 라이브러리

npm i react-hook-form recoil
npm i react-router-dom
npm install eslint-import-resolver-node --save-dev
npm i -D chromatic
npm i @mui/x-date-pickers
npm i dayjs
npm install @mui/styled-engine-sc styled-components
npm install react-slick slick-carousel
npm i --save-dev @types/react-slick
npm install @emotion/styled
npm install jwt-decode
npm i swr
npm i recoil
npm i -D aos@next
npm i @types/aos
npm i openvidu-browser
npm i openvidu-react
npm i sweetalert2

2. 아키텍쳐

3. 기술스택

4. 파일 구조

프론트엔드 프로젝트 구조

.
├── public
│   └── assets
│       ├── icon
│       ├── image
│       └── lottie
└── src
    ├── app
    │   ├── chat
    │   ├── login
    │   ├── meeting
    │   ├── search
    │   ├── seekerChat
    │   ├── seekers
    │   │   └── edit
    │   ├── signup
    │   ├── workerChat
    │   └── workers
    │       ├── edit
    │       └── info
    ├── chat
    │   └── src
    │       ├── assets
    │       │   └── images
    │       ├── components
    │       │   ├── chat
    │       │   ├── dialog-extension
    │       │   ├── stream
    │       │   └── toolbar
    │       ├── layout
    │       └── models
    ├── components
    │   ├── atoms
    │   │   ├── Avatar
    │   │   ├── Icon
    │   │   ├── Logo
    │   │   ├── Picture
    │   │   └── Text
    │   ├── layout
    │   │   ├── Box
    │   │   ├── Flex
    │   │   └── Grid
    │   ├── molecules
    │   │   ├── Button
    │   │   ├── Calendar
    │   │   ├── DropdownButton
    │   │   ├── Dropzone
    │   │   ├── Header
    │   │   ├── ImagePreview
    │   │   ├── Input
    │   │   ├── InputImages
    │   │   ├── Label
    │   │   ├── SearchInput
    │   │   ├── SideMenu
    │   │   └── TextArea
    │   ├── organisms
    │   │   ├── AlertContainer
    │   │   ├── BasicInfo
    │   │   ├── ChatInfoCard
    │   │   ├── FilterModal
    │   │   ├── Login
    │   │   ├── Main
    │   │   │   ├── ChatInfoContainer
    │   │   │   ├── IntroTextContainer
    │   │   │   ├── ProcessInfoContainer
    │   │   │   ├── PromoteTextContainer
    │   │   │   └── WorkerInfoContainer
    │   │   ├── MentoSearch
    │   │   ├── Signup
    │   │   ├── TodayChatInfo
    │   │   ├── WorkerInfoCard
    │   │   └── WorkerInfoCardSlider
    │   └── templates
    │       ├── Layout
    │       ├── LoginSignupLayout
    │       ├── MainLayout
    │       │   ├── MainBlackBackgroundLayout
    │       │   └── MainBlueBackgroundLayout
    │       ├── MeetingLayout
    │       ├── MyPageLayout
    │       └── WorkerInfoListLayout
    ├── containers
    │   ├── AosContainer
    │   └── FloatingContainer
    ├── lib
    ├── stories
    │   └── assets
    ├── themes
    ├── types
    └── utils

백엔드 프로젝트 구조

.
├── build
│   ├── classes
│   │   └── java
│   │       ├── main
│   │       │   └── com
│   │       │       └── careerup
│   │       │           └── careerupspring
│   │       │               ├── config
│   │       │               ├── controller
│   │       │               ├── dto
│   │       │               ├── entity
│   │       │               ├── repository
│   │       │               │   ├── custom
│   │       │               │   └── impl
│   │       │               ├── service
│   │       │               └── util
│   │       └── test
│   │           └── com
│   │               └── careerup
│   │                   └── careerupspring
│   ├── generated
│   │   ├── querydsl
│   │   │   └── com
│   │   │       └── careerup
│   │   │           └── careerupspring
│   │   │               └── entity
│   │   └── sources
│   │       ├── annotationProcessor
│   │       │   └── java
│   │       │       └── main
│   │       └── headers
│   │           └── java
│   │               ├── main
│   │               └── test
│   ├── resources
│   │   └── main
│   │       └── ssl
│   └── tmp
│       ├── compileJava
│       │   └── compileTransaction
│       │       ├── backup-dir
│       │       └── stash-dir
│       └── compileTestJava
│           └── compileTransaction
│               ├── backup-dir
│               └── stash-dir
├── gradle
│   └── wrapper
└── src
    ├── main
    │   ├── java
    │   │   └── com
    │   │       └── careerup
    │   │           └── careerupspring
    │   │               ├── config
    │   │               ├── controller
    │   │               ├── dto
    │   │               ├── entity
    │   │               ├── repository
    │   │               │   ├── custom
    │   │               │   └── impl
    │   │               ├── service
    │   │               └── util
    │   └── resources
    │       └── ssl
    └── test
        └── java
            └── com
                └── careerup
                    └── careerupspring

5. 설계 문서

ERD

ERD

API

API 명세서

구조 설계

초안

FIGMA

FIGMA

• figma 링크

6. 결과물

구글 docs

• 구글 docs

수상

7. 팀 소개

팀명

🔍 안녕하세요! 포스코 x 코딩온 풀스택 웹 개발자 8기 교육생으로 조직된 프로젝트 팀 커리업 입니다. 취업에 도움이 되도록 하는 서비스라는 의미를 담아 커리어 + 업 으로 커리업 이라는 팀명을 정했습니다.

멤버

dawncoding	suhyunes22	Stendhalsynd	best0611	syxxne	ddomiunnie