search

fantasy-fans-ko / lad-fe

Frontend for LAD (live auction draft) service
MIT License
3 stars 0 forks source link

프론트 화면 - 시나리오 - 기능 초안 스케치 입니다 #4

Closed parkgoon closed 2 years ago

parkgoon commented 2 years ago

2차례 진행된 프듀오 뇌폭풍 활동 시 논의된 끄적임 입니다 Note Oct 21, 2021.pdf

philipjkim commented 2 years ago

@parkgoon pdf 로 정리 잘 해주셔서 고마워요. 근데 pdf 를 다운받아서 열어서 내용을 확인해야 하니 좀 번거로우시겠지만 pdf page 별로 image 로 따서 여기에 이미지를 바로 embed 해주시면 바로 내용을 볼수 있으니 제일 좋을거같네요. 사실 그림 이외에 text 는 텍스트로 남겨주시는 것이 젤 좋아서, 일단 제가 아래에 제가 원하는 공유방식으로 정리를 해볼게요.

philipjkim commented 2 years ago

메인 화면 레이아웃

Screen Shot 2021-11-04 at 11 19 14 AM
  1. ㄱ - 드래프트 페이지 소개 (인트로), 평이한 string 으로 충분 (no event)
  2. ㄴ - 사이드바 (종목 및 하부기능 선택). 2depth (종목 > 회차)
    • ex: MLB > 전반기, MLB > 후반기, MLB >. 스페셜
    • event click 시 선수명단 refresh (draft 전: 기본선수명단, draft 후: 구단별 pick 결과 save)
  3. ㄷ - 선수 리스트, 메인 기능 영역

선수리스트 화면

Screen Shot 2021-11-04 at 11 22 42 AM

특이점:

  1. 선택한 구단명(판타지구단)을 노출할 1번 컬럼 필요 (edit 가능)
  2. stats 은 일부만 기입해도 무방할듯 (선수 식별이 기본적으로 가능한 정도만)
  3. focus 이동하면 자동저장되도록

사용자 시나리오:

  1. 선수 검색 / 보기 / 정렬 / 선택
  2. 구단명 입력 / 저장

TODO: p3~6 정리

parkgoon commented 2 years ago

p1, p2 는 v1 이었고 프론리님과 최종 논의된 내용은 p3~ 부터입니다. 내일 한 번 화면상으로 노출되게 편집해서 올려볼께요

parkgoon commented 2 years ago

1. 화면 구성안

Screen Shot 2021-11-04 at 11 22 42 AM

콤포넌트 상세

콤포넌트A. 0~30초까지의 카운터 기능과 버튼 기능을 함께 수행 (콤포넌트 오버레이(??) 가능할 것으로 보임)
콤포넌트B. 드래프트가 시작되면 on-air 점멸 되며 버튼 기능을 함께 수행 (admin only control)
콤포넌트C. 현재 Deal 중인 선수 정보 노출
콤포넌트D. 10개 구단 status(돈 현황,보유 선수 현황) 및 배팅창 제공(돈 입력)
콤포넌트E. 선수 목록 노출, 두개 테이블로 좌측은 선택 가능한 선수 / 우측은 선택한 선수(픽된 순서로) 노출

2. 사용자 시나리오

사용자 타입 정의

  1. admin : 드래프트 시작/종료 권한 있음
  2. deal user : 옥션 대상 선수를 지정하는 유저(로그인 순서대로 돌아가며 수행)
  3. call user : 배팅을 할 수 있는 유저(일반 유저)

3. 기능 정의

기능 유형

  1. 입력 이벤트 : 로그인, 드래프트 개시/종료 입력(클릭), 딜 대상 선수 지정(셀렉트), 콜 머니 입력(인풋)
  2. 자동 이벤트 : 카운터, 드래프트 상태, 선수 상태(딜 선택 가능한지 아닌지), 구단 상태(버짓/보유선수), 딜 순서(구단)

4. 데이터 정의

데이터 유형

  1. response data : player info, deal order(team name), deal money(max), deal result, update time(+5sec), team budget
  2. request data : deal-call money(if max), deal player
  3. ui data : counter, team deal-call money
toddlee1 commented 2 years ago

@parkgoon 미팅때 말씀하신대로 이거 기반으로 태스크 정리를 한번 해볼게요

이거는 제가 잠깐 생각해본건데, 훅에 대해서 많이 사용해보시면 좋을 것 같아서 처음에는 제가 퍼블리싱 작업을 주로 하고 형이 리액트 훅 다루는 작업을 많이 해보시면 어떨까요?

philipjkim commented 2 years ago

@parkgoon 미팅때 말씀하신대로 이거 기반으로 태스크 정리를 한번 해볼게요

이거는 제가 잠깐 생각해본건데, 훅에 대해서 많이 사용해보시면 좋을 것 같아서 처음에는 제가 퍼블리싱 작업을 주로 하고 형이 리액트 훅 다루는 작업을 많이 해보시면 어떨까요?

@toddlee1 끼어들어서 죄송한데, 일단 박군님이 현재 상황이 빠르게 배워가며 쳐나가긴 힘드신 상황같으니 토드님이 훅 사용하는 예제 한 페이지를 만들어주시면 박군님이 그걸 보고 따라하는 식으로 하는게 효과적일것같아요.

toddlee1 commented 2 years ago

목표

필수적으로 필요한 기능들이 정상적으로 동작

컴포넌트별 기능

0. 레이아웃

전체 페이지에 대한 레이아웃을 정의하는 컴포넌트

1. 구단 목록

개발 진행 방안

1. 화면

개발 일정 (계획)

1주차 (11/12 ~ 11/14)

parkgoon commented 2 years ago