'세상을 널리 이롭게 만들자라는 정신'으로 살자는 의미로 만들어진 팀명으로
우연히 우리 팀 멤버들의 성과 일치했기에 더욱 의미있는 팀 이름이 되었습니다🤗

• Role : Team Member
• Position : Front-End
• Stack : TypeScript Socket.io React Redux Redux Toolkit Styled Components Axios
• Works :
  💻 Contribution

  Common

  • Common 컴포넌트 제작 (Input, Button, Select)
  • 로딩시 로딩 애니메이션 구현

  Login(로그인)

  • 서버에서 받은 access token을 local storage에 저장
  • login을 비동기 요청을 하고 login을 검증하는 코드 추가
  • 비로그인 유저가 특정 페이지 접속 시 막는 기능 구현

  Profile(프로필)

  • 유저 정보 입력시 유효성 검사 기능 구현

  Recruit(팀원모집)

  • Recruit List
    • 팀원모집 게시글 리스트 페이지 스타일링 + 데이터 요청 구현
    • Search 태그 검색 추가 기능 구현
    • Recruit 리스트 필터 기능 구현
    • infinite scroll 구현
    • Skeleton Loading 구현
  • Recruit Create
    • 팀원모집 게시글 등록 페이지 스타일링
    • 게시글 이미지 업로드 기능 구현
  • Recruit Detail
    • 팀원모집 게시글 상세 내용 조회 페이지 스타일링 + 데이터 요청 구현
    • 데이터피커 라이브러리를 이용해 날짜 선택 기능 구현
    • 댓글 등록 기능 구현
    • 상세 소개 글을 작성하는 부분 HTML로 변환
  • Recruit Delete
    • 게시글 삭제 기능 구현
    • 댓글 삭제 기능 구현

  Project(프로젝트)

  • Project List
    • 프로젝트 리스트 조회 페이지 스타일링 + 데이터 요청 구현
  • Project Create
    • 프로젝트 생성 페이지 스타일링 + 데이터 요청 구현
    • project url 중복 체크, 유효성 검사 기능 구현
    • 프로젝트에 팀원 초대 기능 구현
  • Project Edit
    • 프로젝트 수정 페이지 스타일링 + 데이터 요청 구현

  Workspace(협업 툴)

  • WorkSpace 페이지에 공통으로 사용되는 컴포넌트 제작
  • Kanban(칸반보드)
    • Kanban 페이지 스타일링
    • task 페이지 스타일링 + 상세 정보 저장 기능 구현
    • Drag and Drop 기능 구현
    • Socket.io를 사용하여 칸반 데이터 실시간 소통 구현
    • 다른 유저가 task, taskbox 작업시 해당 아이템을 드래그 하지 못하게 막는 기능 구현
    • 파트 생성 / 수정 / 삭제 기능 구현
  • Calendar(달력)
    • Calendar 페이지 스타일링
    • Day.js 라이브러리를 이용한 달력 데이터 구현
    • task bar로 달력에 task 표시 구현

• Role : Team Member
• Position : Front-End
• Stack : TypeScript Socket.io React Redux Redux Toolkit Styled Components Axios
• Works :
  💻 Contribution

  Common

  • React 를 사용하여 초기 세팅
  • Common 컴포넌트 제작 (Header, Select Box)
  • axios 요청을 util로 구현
  • 로고 제작

  Landing(서비스 소개)

  • Landing 페이지 디자인 + 스타일링
  • 스크롤 위치에 따른 헤더 백그라운드 이벤트 구현
  • scroll에 따른 애니메이션 구현
  • 리뷰 상세 보기 modal 구현
  • 맨 위로 가기 기능 구현

  Login(로그인)

  • Login modal 스타일링
  • 로그인할 때 안내 메시지, 유효성 검사 구현
  • 로그아웃 기능 구현

  Profile(프로필)

  • Profile Show
    • 프로필 정보 조회 페이지 스타일링
    • 프로필 렌더링시 유저 데이터 조회 구현
  • Profile Edit
    • 프로필 수정 페이지 스타일링
    • 프로필 수정버튼 누른 후 유저 데이터 갱신 기능 구현
    • 프로필 이미지 업로드 기능 구현

  Workspace(협업 툴)

  • Chat(채팅)
    • Chat 페이지 스타일링
    • Socket.io를 사용하여 채팅 실시간 소통 구현
    • 채팅 메시지를 유저별, 날짜별로 묶어서 표시 구현
    • 채팅창의 프로필 이미지 클릭시 해당 유저의 프로필 조회 기능 구현
    • 채팅 메시지 등록 / 수정 / 삭제 기능 구현
    • infinite scroll 구현
    • 채팅창에 이미지 업로드 기능 구현 (버튼, drag and drop)
    • 채팅방 생성 / 수정 / 삭제 기능 구현

• Role : Team Leader
• Position : Back-End
• Stack : TypeScript Socket.io Axios Node.js Express.js mySQL typeORM Nodemailer AWS
• Works :
  💻 Contribution

  Bare Minimum

  • express, typescript를 사용하여 서버 구축
  • router, controller 분류 및 폴더 정리
  • typeORM을 사용하여 mySQL 데이터베이스 구축
  • 프로젝트 문서화 작업
  • README, WIKI, NOTION
  • API 문서, 스키마 디자인

  Deploy(배포)

  • AWS 배포
  • RDS 세팅

  Login(로그인)

  • OAuth 인증 로그인 기능 구현(google, github)
  • nodemailer로 보내는 이메일 디자인(HTML)
  • access token으로 유저 정보를 확인하는 middleware 구현
  • refresh token 사용하여 새로운 access token 발급 기능 구현

  Profile(프로필)

  • 프로필 정보 조회 기능 구현
  • profile 관련 기능(2개) 에러 수정 및 코드 보완

  Recruit(팀원모집)

  • 팀원모집 게시글 상세내용 조회 기능 구현
  • 팀원모집 게시글 삭제 기능 구현
  • 댓글 삭제 기능 구현
  • 특정 stack을 기준으로 팀원모집 게시글 검색 기능 구현
  • recruit 관련 기능(8개) 에러 수정 및 코드 보완

  Project(프로젝트)

  • 프로젝트 정보, 멤버 정보를 확인하는 middleware 구현
  • 프로젝트 리스트 조회 기능 구현
  • 프로젝트 생성 기능 구현
  • 프로젝트 상세 정보 조회 기능 구현
  • 프로젝트 수정 기능 구현
  • 프로젝트 삭제 기능 구현
  • 팀원 초대 기능 구현
  • 팀원 초대 응답(프로젝트 참가) 기능 구현
  • project 관련 기능(7개) 에러 수정 및 코드 보완

  Workspace(협업 툴)

  • Chat(채팅)
    • socket.io를 사용하여 채팅 기능 구현
    • 채팅 메시지 보내기
    • 채팅 메시지 수정하기
    • 채팅 메시지 삭제하기
    • 채팅 메시지 내역 조회
    • multer를 사용하여 채팅에서 이미지 업로드하기
    • 채팅방 리스트 조회 기능 구현
    • 새로운 채팅방 생성 기능 구현
    • 채팅방 이름 수정 기능 구현
    • 채팅방 삭제 기능 구현
    • chat 관련 기능(4개) 에러 수정 및 코드 보완
  • Kanban(칸반보드)
    • 파트 관련 API(route, controller) 세팅
    • kanban 관련 기능(4개) 에러 수정 및 코드 보완
    • socket.io를 사용하여 구현한 칸반보드 기능 에러 수정 및 코드 보완

• Role : Team Member
• Position : Back-End
• Stack : TypeScript Socket.io Node.js Express.js mySQL typeORM JWT Nodemailer Redis AWS
• Works :
  💻 Contribution

  Bare Minimum

  • express, typescript를 사용하여 서버 구축
  • typeORM을 사용하여 mySQL 데이터베이스 구축
  • redis의 pub/sub에 대한 이해와 구현

  Deploy(배포)

  • AWS https 배포 및 AWS 아키텍쳐 전반의 이해 ( CloudFront Cookie 이슈 해결 )
  • EC2, RDS, ELB, ACM, Route53, CloudFront, S3 세팅
  • domain(reciper.me) 관리
  • 배포 단계를 전체적으로 관리

  Login(로그인)

  • 이메일 인증 로그인 구현 (nodeEmailer)
  • access token으로 유저 정보를 확인하는 middleware 구현

  Profile(프로필)

  • 프로필 정보 수정 기능 구현
  • multer를 사용하여 프로필 이미지 업로드 기능 구현

  Recruit(팀원모집)

  • 팀원모집 게시글 리스트 조회 기능 구현
  • 팀원모집 게시글 등록 기능 구현
  • 팀원모집 게시글 수정 기능 구현
  • 댓글 등록 기능 구현
  • multer를 사용하여 게시글 이미지 업로드 기능 구현
  • stack 정보를 가져오는 기능 구현
  • 팀원모집 게시글에 대한 dummy data generator 제작(크롤링 포함)

  Project(프로젝트)

  • 프로젝트 삭제 기능에서 해당 프로젝트와 연결된 모든 데이터 지우는 작업 구현

  Workspace(협업 툴)

  • Chat(채팅)
    • socket.io를 사용하여 채팅 기능 세팅
  • Kanban(칸반보드)
    • socket.io를 사용하여 칸반보드 기능 구현
    • 칸반보드의 전체 데이터 조회
    • task, taskbox 생성하기
    • task, taskbox 수정하기
    • task, taskbox 삭제하기
    • task, taskbox 작업시 block 처리하기
    • task, taskbox drag and drop 작업시 화면에 바로 반영하기
    • 파트 리스트 조회 기능 구현
    • 새로운 파트 생성 기능 구현
    • 파트 이름 수정 기능 구현
    • 파트 삭제 기능 구현
  • Webcam(화상회의)
    • webRTC를 사용하여 화상회의 기능 구현