Giter Site home page Giter Site logo

yapp-github / 20th-web-team-2-fe Goto Github PK

View Code? Open in Web Editor NEW
4.0 0.0 1.0 2.05 MB

외딴썸: 외딴섬에 있는 당신을 위한 썸 intro.lonessum.com

Home Page: https://intro.lonessum.com/

License: Apache License 2.0

JavaScript 0.33% HTML 0.33% TypeScript 99.20% CSS 0.14%

20th-web-team-2-fe's Introduction

유학생을 위한 미팅/소개팅 서비스 외딴썸


🧐 기획의도

  • 해외 대학 유학생 20만 명은 타지에서 외로운 시간을 보낸다. 하지만 그들을 위한 미팅/소개팅 서비스가 없는 점에서 착안하였다.
  • 기존 미팅/소개팅 앱의 단점이었던 "신뢰도" 부분을 해외 대학교 이메일 인증으로 보완하였고, 해외 거주 중인 유학생 또는 곧 출국해야 하는 국내 거주 유학생으로 타깃을 집중하여 맞춤형 서비스를 제공하고자 하였다

🍽️ 핵심기능

간단한 설문을 통한 조건 설정

  • 나이, 학과, 성격, mbit등 여러 가지 조건을 입력하고, 원하는 이상형을 설정하여 매칭 대기까지 연결하는 기능

매칭 알고리즘

  • 사용자가 입력한 조건의 중요도에 따라 다르게 점수를 부여하고 점수를 합산하여 최적의 상대를 매칭하는 기능
  • 매칭은 매일 한국시간 22시에 이루어진다.

매칭 완료

  • 매칭 알고리즘에 의해 매칭이 이루어진 후 남자 측, 여자 측에 매칭에 동의하는지 여부를 물어본다.
  • 양측이 모두 동의하고, 결제가 이루어지면 남녀의 카카오톡 아이디가 공유된다.

⚙️ 개발스택

Front-End

  • React
  • React-Router
  • Recoil
  • Styled-components
  • vite
  • Typescript

Back-End



🍴 필수 구성 요소

Node.js 가 설치되어 있어야 합니다.


📁 프로젝트 실행 방법

Front-End

프로젝트 클론

$ git clone https://github.com/YAPP-Github/20th-Web-Team-2-FE.git

패키지 설치

$ npm install or yarn install

서버 실행

$ npm run start or yarn run start

20th-web-team-2-fe's People

Contributors

choisohyun avatar jeong-jeong avatar leejiho9898 avatar mslee300 avatar toastmeister1 avatar

Stargazers

avatar avatar avatar avatar

Forkers

eunjin4475

20th-web-team-2-fe's Issues

Feat: 단순 RangeInput 구현

🤷 이슈 내용

✨ 기대 결과

  • 미팅 설문 (성별&평균나이) 에 적용할 단순 RangeInput 구현예정입니다.

📸 스크린샷

image

Atomic한 컴포넌트 미리 생성

  • 버튼
  • input(인증, 밸리데이션)
  • dropdown(평균나이)
  • range input(항목 범위 설정)
  • 모달
  • 체크박스
  • 스위치(토글버튼)
  • 검색 input
  • 프로그래스 바

소개팅 설문 페이지 #29~30

🤷 이슈 내용

소개팅 설문 페이지 #29~30

✨ 기대 결과

  • 백엔드 데이터 보내고 받아오기 용이하게 제작 기대

📸 스크린샷

image

MatchingTemplate

🤷 이슈 내용

  • 매칭 컴포넌트가 동일한 구조로 되어있어 템플릿으로 관리

✨ 기대 결과

📸 스크린샷

image

Feat: Button 컴포넌트 구현

🤷 이슈 내용

✨ 기대 결과

📸 스크린샷

image

- boxShadow 있거나 없음

image

- height는 38과 48이므로 size는 일단 'medium' 이랑 'large'로 설정

image

- color가 검정일 때도 있음

Feat: 설문관련 상태값 저장

🤷 이슈 내용

설문관련 상태값 저장

✨ 기대 결과

  • 페이지 이동 시마다 상태값 저장이 필요함
  • (논의필요)세션스토리지를 사용해 해당 탭이 열려있을 때에만 설문내용을 저장해둔다

📸 스크린샷

[FEATURE] 임시 콘텐츠 연결

🤷 이슈 내용

임시 콘텐츠 연결

✨ 기대 결과

카카오로그인 연결 없이 바로 설문 시작하도록 임시처리

📸 스크린샷

Feat: 카카오 로그인

🤷 이슈 내용

카카오 로그인

  • client id, secret id를 가지고 카카오 로그인을 러프하게 구성해 본다.

✨ 기대 결과

카카오 로그인 하고 결과물 받기

📸 스크린샷

Feat: API 연동

🤷 이슈 내용

API 연동

✨ 기대 결과

  • abroad-area
  • dating/matching, meeting/matching
  • dating/survey, matching/survey
    • GET, POST
    • PATCH
    • rematch
  • email
  • oAuth
    • 기본 kakao 로그인
    • 카카오 age 정보
  • �payment
    • getPartnerAuth
    • result
    • meeting, dating
  • university
  • user
    • id
    • join, login
  • random matching (api 없음)
  • 탈퇴하기 (api 없음)

📸 스크린샷

Feat: Router

🤷 이슈 내용

react-router-dom을 설치하여 router를 처리합니다.

✨ 기대 결과

페이지 이동 기능

Matching Page 햄버거 매뉴

🤷 이슈 내용

  • header 우측 햄버거 매뉴로 유저 정보 관리, 매칭상태 관리 가능한 기능 추가

✨ 기대 결과

📸 스크린샷

제목 없음
이부분

image

조건 클릭시 변경가능
image

Rename: 라우팅 정리

🤷 이슈 내용

이전까지 제각각 이였던 라우팅을 정리합니다.

✨ 기대 결과

규칙대로 정해진 라우팅, url 주소, page name

📸 스크린샷

ProgressBar width 버그

🤷 이슈 내용

프로그래스바가 position : absolute로 되어있어 부모 width값을 무시하고 계속해서 커지는 이슈
image

✨ 기대 결과

📸 스크린샷

image

Feat: 결제

🤷 이슈 내용

✨ 기대 결과

📸 스크린샷

Design: page 퍼블리싱

🤷 이슈 내용

  • 페이지 퍼블리싱
  • 현재 (2022-05-26) 디자인 나온 페이지 기준으로
  • 메인(로그인)
  • 학교 인증(회원가입)
  • 미팅 설문
  • 소개팅 설문

✨ 기대 결과

📸 스크린샷

image

Feat: Checkbox 컴포넌트 생성

🤷 이슈 내용

Checkbox 컴포넌트 생성

✨ 기대 결과

  • 일반 체크박스
  • 전체선택, 약관이동이 있는 체크박스

📸 스크린샷

Screen Shot 2022-06-01 at 18 46 17

Feat: 미팅 설문 페이지 #4~#19

🤷 이슈 내용

  • 설문 페이지 제작
  • 미리 개인마다 담당할 페이지를 정해서 진행 하는게 좋을거 같음

✨ 기대 결과

사용자의 설문조사 데이터를 백엔드에 전달하기 용이하게 받아오기

📸 스크린샷

image

Feat: 모달 구현

🤷 이슈 내용

  • #3
  • sweetalert2 패키지 커스텀해서 사용 예정

✨ 기대 결과

📸 스크린샷

image

image

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.