Git Product home page Git Product logo

everywak-frontend's Introduction

everywak-frontend

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

에브리왁굳이란?

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

메인 스크린샷


주요 컨텐츠

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

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

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

유튜브 풀업로드 채널에서 진행되는 생방송도 아프리카 채팅창과 함께 시청할 수 있습니다.
채팅 콜렉터, 멀티 채팅창, 채팅창 팝업 등 아프리카TV보다 앞선 기능으로 편안한 시청 경험을 제공합니다.

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

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

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

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

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

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


빌드 관련 명령어

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

yarn install

package.json 의 패키지들을 설치합니다.

yarn dev

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

yarn build

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

라이센스

다음의 행위는 허용됩니다.

  • 허용되지 않는 행위를 제외하고, 누구나 본 프로젝트의 소스 코드 중 일부 또는 전체를 사용, 수정 및 재배포할 수 있습니다. 단, 누구나 접근 가능한 곳에 원작자(@wei756) 크레딧을 명시해야 합니다.

다음의 행위는 허용하지 않습니다.

  • 원작자의 동의 없이 본 프로젝트의 소스 코드 중 일부 또는 전체를 사용하여 에브리왁굳(everywak.kr)과 혼동의 여지가 있는 프로그램 또는 웹사이트를 제작 및 운영하는 경우.

  • 원작자의 동의 없이 본 프로젝트에서 제공하는 컨텐츠와 유사한 기능을 제공하는 웹사이트를 운영할 목적으로 본 프로젝트의 소스 코드 중 일부 또는 전체를 활용하는 경우. 본 프로젝트에서 제공하는 컨텐츠는 다음과 같습니다.

    • 한 화면에서 다수의 생방송 스트림과 실시간 채팅을 동시에 시청할 수 있는 서비스
    • 커뮤니티의 게시글 목록을 크롤링하고 목록화한 결과를 재가공하여 보여주는 서비스
  • 본 프로젝트의 소스 코드 중 일부 또는 전체를 사용한 모든 경우의 상업적 행위. 본 프로젝트에는 상업적 사용이 금지된 리소스 또는 스크립트가 포함되어 있으며, 이를 무단으로 이용함으로써 발생할 수 있는 법적 책임은 모두 사용한 자에게 있습니다.

오픈소스 라이센스

  • react axios mui sass emotion classnames crypto-js framer-motion lodash react-query react-cookie react-ga react-microsoft-clarity react-responsive vite

주석

1: 우왁굳 공식 팬카페

everywak-frontend's People

Contributors

wei756 avatar

Stargazers

Bono avatar Jinyeong Seol avatar kangmingi avatar oko_jin avatar Hyeonseok Shin avatar Jihun avatar pinion avatar cham_why avatar Kim TaeHyeong avatar steve avatar  avatar TaeHyun Kim avatar  avatar  avatar Pulto avatar Sungjoong Kim avatar  avatar Yoonki Hong avatar Sung Jeon avatar NeuroWhAI avatar  avatar Minibox avatar YoungRok Kim avatar freevue avatar Jinlee avatar  avatar hmmhmmhm avatar Mu hun avatar Chanhee Lee avatar junmin avatar 황세웅 avatar  avatar 다다미 avatar ORIGINAP avatar Jisu Sim avatar SIWON PARK avatar

Watchers

James Cloos avatar  avatar

everywak-frontend's Issues

생방송 페이지 디자인 설계

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

에브리 왁굳 사용 후기

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

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

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

TwitchChatClient 구현

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

모달 컴포넌트 구현

적용범위

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

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.