친해지길 바라!

🖥 For Client

🏠 HOME PAGE

정기적으로 20명이 넘는 동아리원(사서)님들을 무작위 매칭 후, 친해질 수 있는 활동을 함께 하도록 돕는 페이지입니다. 매칭에 대한 후기를 SNS처럼 남길 수도 있습니다. 현재 React 에 대한 경험이 없는 팀원들을 직접 가르쳐드리며, 프로젝트 참여를 독려 중입니다.

📌 서비스 소개

🙋 원하는 이벤트에 참여

• 이벤트 목록에서 자신이 원하는 이벤트에 자유롭게 참가할 수 있습니다.
• 많은 이벤트에 참여할 수 있으며, 참석 취소도 가능합니다.

🤝 직접 이벤트 생성

• 자신이 원하는 모임을 자유롭게 만들어 신청을 유도할 수 있습니다.
• 저녁을 같이 먹을 사람을 구하는 사적인 모임 모집!
• 프로젝트원을 구하는 공적인 모임까지 생성할 수 있습니다.

🔖 게시글 작성

• 자신이 참여한 모임의 사진 및 동영상을 업로드 할 수 있습니다.
• 태그가 된 사람에게는 Slack 메시지가 갑니다.
• 게시글에 대한 댓글을 달 수 있습니다.

👾 개성 있는 프로필 사진

• 자신이 원하는 프로필 사진을 골라 사용합니다.
• 무려 28가지의, 다양한 성별과 나이대의 프로필을 제공합니다.

📌 시연 영상

📌 페이지 스크린샷 및 해설

⚙️ 프로젝트 구동 방법

프론트 코드와 백엔드 코드 모두 클론합니다.

1. DB 및 백엔드

• DB 및 백엔드 실행 방법

2. 프론트엔드

• 프론트엔드 환경 변수 설정
  • 폴더에 .env 파일 생성
  • .env 예시

    # 프론트엔드 실행 포트, 디폴트는 3050
    FRONT_PORT=http://localhost:{백엔드 실행 포트}
    
    # 개발 시 사용하는 백엔드 주소. 프론트를 로컬 환경에서 실행 시 백엔드도 로컬 환경 실행 추천
    DEV_ADR=...
    
    # 이미지 서버 주소
    IMAGE_SERVER_ADR=https://together-fileserver.s3.ap-northeast-2.amazonaws.com
    
    # 배포된 서버 주소, NODE_ENV가 'production' 일 때만 필요
    DEPLOY_ADR=...
    

  • 실행

    npm install
    npm run dev