Giter VIP home page Giter VIP logo

everywak's Introduction

everywak-frontend

ReactJS로 구현된 에브리왁굳 프론트엔드

에브리왁굳이란?

에브리왁굳은 스트리머 우왁굳과 관련된 컨텐츠를 제공하는 팬사이트입니다.

메인 스크린샷


주요 컨텐츠

왁물원1 인기글 목록 및 검색 - 바로가기

오래되었거나 상대적으로 인기도가 떨어져 목록에서 사라져버린 인기글을 한 눈에 확인할 수 있습니다.
또한 다시 보고 싶은 글을 찾아보기 쉽도록 제목/게시판/작성자 닉네임을 통한 검색 기능도 제공합니다.

생방송(유튜브, 트위치) 시청 - 바로가기

유튜브 풀업로드 채널에서 진행되는 생방송도 트위치 채팅창과 함께 시청할 수 있습니다.
자유로운 채팅창 크기 조절, 이모티콘 빠른 입력(개발 중), 투명한 채팅창 오버레이(개발 중) 등 트위치보다 앞선 기능으로 편안한 시청 경험을 제공합니다.

이세돌/왁타버스 멤버 멀티트위치 - 바로가기

이세계 아이돌 멤버 그리고 왁타버스 합방 멤버들의 방송을 동시에 시청할 수 있습니다.

왁타버스 웹툰 플랫폼 - 바로가기

왁물원에 올라오는 인기 팬웹툰들을 모아 정리해서 감상하기 쉽게 만들었습니다.
연재되는 작품들을 에피소드별로 찾아보거나 하루동안 좋아요를 많이 받은 작품들을 순위표로 보여줍니다.

우왁굳, 이세돌 클립 저장소 - 개발중

대한민국 트위치에서 사라져버린 클립들을 전부 모았습니다.
그 때 그 순간 지나간 추억들을 다시금 즐길 수 있습니다.

이세돌 뱅온정보 - 바로가기

이세계 아이돌 멤버들의 생방송 정보를 일기예보 형식으로 보여줍니다.

왁타버스 뮤직 - 개발 예정


빌드 관련 명령어

프로젝트 디렉토리로 들어간 뒤, 다음과 같은 명령어를 사용할 수 있습니다:

npm start

앱을 개발 모드로 실행합니다.
http://localhost:3000로 접속하면 결과물을 바로 확인할 수 있으며 변경 사항이 실시간으로 반영됩니다.

npm run build

앱을 최적화된 형태로 빌드하여 build 폴더로 출력합니다.

라이센스

본 프로젝트는 다음과 같은 경우를 제외하고 누구나 사용, 수정 및 재배포할 수 있습니다.

  • 원작자의 동의 없이 에브리왁굳(everywak.kr)과 혼동을 줄 수 있는 웹사이트를 운영할 목적으로 본 프로젝트의 소스를 활용하는 경우
  • 상업적인 목적으로 사용하는 경우

오픈소스 라이센스

  • React: The MIT License Copyright © Facebook, Inc.
  • axios: The MIT License Copyright © 2014-present Matt Zabriskie
  • Material UI: The MIT License Copyright © 2014 Call-Em-All
  • Node-SASS: The MIT License Copyright © 2013-2016 Andrew Nesbitt

주석

1: 우왁굳 공식 팬카페

everywak's People

Contributors

wei756 avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar

everywak's Issues

TwitchChatClient 구현

  • 이모티콘 입력 UI
  • 자기 채팅 표시
  • 자기 채팅 이모티콘 표시
  • 뱃지
  • 최근 사용 이모티콘 구현
  • 이모티콘 입력 UI 다듬기
  • 까마득한 미래
  • 글자 크기 조절 UI
  • 채팅 필터링
  • 매니저 채팅 구분
  • 방송화면 위에 투명 오버레이 표시 기능

모달 컴포넌트 구현

적용범위

  • Dropdown 컴포넌트
  • Bestwakki 모바일 검색창
  • Bestwakki 설정 버튼
  • WakPlayer 설정 버튼
  • TwitchChatClient 이모티콘 선택창
  • TwitchChatClient 설정 버튼

생방송 페이지 디자인 설계

  • PC 가로 모드
  • PC 세로 모드
  • 모바일 가로 모드
  • 모바일 세로 모드
  • 모바일 채팅창 크기 조절
  • 유튜브 기본 플레이어와의 전환 UI

에브리 왁굳 사용 후기

안녕하세요 개발실력이 아직 미숙한 팬치입니다
에브리 왁굳 사용 후에 불편한 점이나 개선됬으면 하는 점들 전해드리려 합니다

(주관적인 생각이며 그냥 의견으로만 받아들여 주세요)

  1. 스크롤에 관해서
  • 트위치 같이 보는 창에서 트위치 화면에 마우스 호버되고 스크롤안됨 => 의도된것인지 모르겠지만 트위치와 달라 살짝 불편했던 점이 있었습니다
  • div resize 가 불안정함 => 컴에 따라 다른건지 모르겠지만 저는 스크롤 할때 마다 검은 색 틈이 생기고 채팅창 등이 살짝씩 흔들리는 현상을 목격했습니다
  • pixel이 정확하지 않아서 전체화면 스크롤이 나타남 => 트위치 채팅창, 이세돌 화면들을 fixed로 놓는 것을 추천드립니다
  • 전체적으로 사이트가 무거워 보이는 악영향을 끼침
  1. 자잘한거
  • 아래 투네와 "우리왁굳끼리...?" 버튼 인식이 글자에 한정되어 있음
  • 이모티콘 바깥 영역 선택 시, 이모티콘 선택 창 해제
  • 방송이 아닐 때 최신 방송 시청 등의 버튼 선택이 안됨 => 만드실 때 일부러 그러지 않았나...? 킹리적갓심
  • 혹시...힘드시겠지만.. 다크모드 존버합니다

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.