(장준영)Vanilla JavaScript로 SPA 구현하기 [5일차] - 식당/카페 여석 확인 어플리케이션

기능 정의할때 나는 뭔가 화면이 있어야 머리에 그 기능이 좀 그려지는 편이기떄문에

피그마를 통해서 화면도 디자인해보고 동시에 기능정의를 해보려고 한다 

아니 하다보니 뭔가 이거로 만드는게 더 귀찮다.. 내가 html, css를 아얘 못하는것도 아니고...

피그마 쓰는게 어캐 더 귀찮냐.. 마우스로 하나하나 찍찍 거리는게 좀 귀찮다..

그냥 즉석으로 코드로 만드는게 더 빠르다..

나는 항상 화면을 만들면서 기능정의를 생각하는 편인데, 이제껏 화면을 만들때 항상 그냥

종이랑 팬으로 직접 그렸다, 그게 더 빠르고 편하니까.. 뭐 물론 피그마를 또 오래 계속 쓰다보면 익숙해지겠지..

나중에 디자이너랑, 팀원들이랑 협업을 할때도 필요하니까 뭐.. 그냥 참고 해야겠다.. 언젠간 피그마가 종이로 하는거보다 편해지는 날이 오겠지.. 피그마 쓰다보면 또 편한게 간격 같은걸 맞추기 정말 좋으니까.. 참고 계속 마우스로 찍찍 해보자..!

피그마 써보는건 다음에 나중에 해보도록 하자 ^^ 지금 하기엔 시간이 좀 아깝다 ㅋㅋㅋ 

그냥 종이랑 팬이 최고!! 

 

아.. 아니다!! 그래도 해보자!!! 시작한거 끝은 봐야지!

완성된 관리자 페이지의 모습

이제 페이지 하나 만들었다.. 하다보니 정말.. 음 시간이 오래걸리긴 해도

하나하나 차근차근 작은거부터 하다보면.. 항상 언젠가 끝나있다

페이지를 만들면서 기능 정의를 끝냈다

피시방같은 카페임, 그런데 카페이용시간을 돈을 주고 살 수도 있지만
카페 이용자들과 1대1 게임을 통해 시간을 뺴앗을 수 있음, 2시간 이상의 잔여시간을 가진 회원끼리는
"1대1 시간빵" 이라는 게임을 할 수 있는데 
게임은 끝말잇기로 진행됨, 끝말잇기의 제시어는 매장 점주가 미리셋팅해놓은 단어로 결정되고
처음 제시어의 끝말을 잇게 될 사람은 1대1 시간빵 요청을 수락한 사람이 먼저 잇게 되고, 
1대1 시간빵을 건 사람이 그 이후의 단어를 잇게 됩니다, 
게임 종료후 승리자는 이용시간 1시간 추가를, 패배자는 이용시간 -1시간 이 되거나 또는 점령지 내어주기를 통해 이용시간을 지키는 대신 자리의 점령권을 포기하게 됩니다.
이용 시간에 대한 로직을.. 1분마다 디비를 업데이트 해주기엔 서버와 디비의 무리가 너무 큽니다 >> 해결방법을 생각해야해요 >> 일단 관련 라이브러리를 찾아볼까합니다

<게임의 결과>는 
내가 입력할 차례가 아닌데 단어를 입력했다 - 패배
이미 입력한 단어를 입력했다 - 패배
없는 단어를 입력했다 - 패배 >> 없는 단어의 유무 판단은 api를 활용합니다 >> 참고 : https://ldevlog.tistory.com/5
주어진 시간 내에 단어를 입력하지 못했다 - 패배

<첫화면>
회원가입 기능 - 회원가입을 할 수 있는 기능
시간충전 기능 - 시간을 충전할 수 있는 기능, 사용자의 아이디 정보만으로 시간을 충전할 수 있음 
로그인 기능 - 관리자가 아닌 사용자의 경우 보유한 시간이 있을 경우 로그인 할 수 있음

<로그인 이후 화면>
관리자의 경우 : 관리자페이지, 매장정보 수정 페이지
[관리자페이지]
내가 관리하는 매장 목록 뷰 기능 - 내가 관리하는 매장을 볼 수 있는 리스트 뷰가 있음
내가 관리하는 매장 추가 기능 - 내가 관리하는 매장을 추가할 수 있음
매장 디테일 뷰 기능 - 리스트 뷰 속 특정 매장을 클릭시 해당하는 매장의 자리 정보와, 게임결과 정보를 볼 수있음
[매장정보 수정 페이지]
관리하는 매장의 이름 변경 기능 - 관리하는 매장의 이름을 변경함
관리하는 매장의 태이블 수 변경 기능 - 관리하는 매장의 태이블 수를 변경함
관리하는 매장의 제시어 변경 기능 - 관리하는 매장의 끝말잇기 제시어를 변경함

사용자의 경우 : 시간충전페이지, 사용자페이지, 자리빵 페이지
[시간충전페이지]
로그인 전, 후 모두 이용 가능, 사용자의 id 만을 식별하여, 해당하는 사용자의 시간을 충전함
[사용자 페이지]
오픈중인 매장 목록 뷰 기능 - 이용 가능한 매장의 목록을 나타내는 뷰가 있음
매장 입장 기능 - 매장 목록 뷰 에서, 접속할 매장을 선택하면 해당 매장을 화면에 띄어줌
테이블 클릭틀 통한, 자리 점령 기능 - 보유중인 이용시간만큼 비어있는 자리를 점령할 수 있음, 점령한 시점부터, 1분마다 사용가능시간이 1분씩 줄어듭니다 
매장 내에서 사용자는 두가지로 나뉨 >> 대기자와 점령자로 나뉨 
매장 내부 좌석 뷰 기능 - 매장 내부의 좌석에 누가 얼마동안 그 좌석을 점령중인지 알 수 있음
점령자 목록 뷰 기능 - 매장 내의 좌석 점령자들의 목록을 볼 수 있는 뷰 기능이 있음
대기자 목록 뷰 기능 - 매장 내의 대기자들의 목록을 볼 수 있는 뷰 기능이 있음
이용자 정보 뷰 기능 - 점령자 또는 대기자 목록의 이용자를 클릭하면 이제껏 승리 및 패배의 횟수 를 볼 수 있고, 현재 자리빵 중이 아니라면, 자리빵을 신청할 수 있다  
자리빵 신청 기능 - 상대방에게 자리빵 신청이 오면 누구로부터 온 신청인지 그것을 수락할것인지에 대한 뷰어가 있고 수락과 거절을 할 수 있다, 수락하면 자리빵이 시작된다
메장에서 나가기 기능 - 매장에서 나가 처음의 매장 목록뷰 로 이동한다
[자리빵 페이지]
시작 후 5초동안 제시어를 알려주고 게임이 시작된다
게임이 시작된 후
타이머 - 7초 내에 끗말을 잇지 않으면 현재 끝말을 이어야하는 대상은 패배한다,  
입력 인풋창과 전송버튼 - 인풋창에 단어를 입력하고 전송버튼을 누르면, 있는 단어인지 검사하고, 틀렸으면 게임끝 
>> 게임끝 나면 패배자에겐 패배사유와 패배보상? 메세지가 전송됩니다, 
점령자일 경우 패배보상을 선택할 수 있습니다, 
승리자에게는 승리라는 매세지와 승리보상 메세지가 전송됩니다, 그리고 각각 보상을 수령합니다 
끗말 잇기 내용창 - 끗말잇기 내용을 카톡 채팅처럼? 볼 수 있습니다

 

기능정의를 한번 더 읽어보며 점검후 기능에 필요한 데이터들을 정리하고, 디비를 디자인 할예정이다