현재 4로 고정되어있음

이슈 내용

• 모달 열면 x버튼 focus 됨
• esc 누르면 url 안 바뀌어도 모달 닫힘
  => 모달을 dialog 아닌 div로 바꿔야할 것 같아요

관련 Task

• dialog에서 div로 변경
• 외부 클릭 시 모달 닫기
• 모달 열면 첫 input 요소 focus하기
• 모달 띄워졌을 때 스크롤 방지
  Esc 키 누르면 모달 닫기 -> 텍스트 필드 입력 중 esc 키를 누르면 모달이 닫힐 수 있어 구현하지 않았습니다.
• css 토큰화

모달 바깥의 배경을 눌러도 닫히게 해야함.
현재는 모달 내부의 x 버튼을 눌렀을 때만 닫힘.

클라이언트의 zustand 내부에서 발생하는 에러를 zustand middleware를 사용하여 전역적으로 처리합니다

이와 같은 notice chat이 투표 생성 시에 자동으로 생기도록 하는 부분 구현이 필요합니다.

chat.send에서 빈 스트링이 보내집니다

별도 로직 말고 z.string().min(...)으로 zod 단에서 막으면 될듯 합니다

이참에 max도 정하는것도 좋을 듯 합니다

피그마랑 다른 디자인 수정

• 종료된 투표 & 진행 중인 투표 border 두께랑 색깔이 피그마와 맞지 않는 이슈

현재의 agenda.voted, admin.agenda.voted api는 voters 오브젝트를 넘겨주는데 불필요하다는 생각을 했습니다. 이를 넘겨주기 위해 db에서 많은 정보에 접근해야하고 쿼리가 (최적화는 안했지만)복잡해지는 문제점이 있습니다.

select: {
  choice: {
    select: {
      agenda: {
        select: {
          choices: {
            select: {
              users: {
                select: {
                  user: {
                    select: {
                      id: true,
                      username: true,
                      displayName: true,
                    },
                  },
                },
              },
            },
          },
          voters: {
            select: {
              user: {
                select: {
                  id: true,
                  username: true,
                  displayName: true,
                },
              },
            },
          },
        },
      },
    },
  },
},

db 접근을 통해 전부 넘겨주는 형식이 아닌 변동사항(투표)만 넘겨주고, 로직 파트에서 업데이트 할 수 있도록 하면 어떤지 궁금합니다.
ex) agendaId, choiceId(, userId)만 넘겨주고, 프론트에서 이를 이용해 incremental 하게 업데이트 하기

컨테이너, 종료 아젠다 비활성, 종료 아젠다 활성(제목, 투표 결과, 선택지 리스트, 상세)

• 모달 컴포넌트 안에 인풋, 유저리스트 컴포넌트 배치해서
• 로직이랑 연결하기

#42, #43 에서 만드는 컴포넌트 사용해서 만들면 될 것 같습니다

admin 페이지의 대기 중인 투표 display card 만들겁니다

현재 typography는 <Text /> 컴포넌트에서 관리되고 있지만, <Input />이나 <TextArea />처럼 다른 컴포넌트에서 쓰여할 상황도 종종 있음

이에 <Text /> 컴포넌트는 유지하면서 스타일 자체만으로 쓸 수 있도록 SerializedStyles으로 theme에 분리하면 좋을 것 같습니다.

• Text theme으로 분리
• 영향 받는 컴포넌트에 적용 (<Input />, <TextArea />)

전체적으로 폰트와 UI 사이즈가 너무 작아서 키워야 할것 같아요

• 투표 대상 인원이 0일 때 admin 모달의 투표 참여 progress bar가 NaN%로 표시
• progress bar가 100%로 표시될 때 border radius가 0px로 표현되는 이슈
  

cursor: pointer 같은 것

참고) #63 (comment)

chat에서 적용한 방식으로 service 디렉토리 안의 로직들을 정리합니다.

(정리 내용 적을 예정)

처음에 피그마의 auto-layout과의 1:1 대응을 생각하고 만든 컴포넌트인데 시간이 지남에 따라 prop이 점점 많아지고 사용되는 역할이 많아짐에 따라 역할에 따른 분리를 하는게 좋을 것 같아요.

• layout용 -> Flex? Row, Column
• background용 -> Paper? border 같은 prop을 받도록 해서 기존의 BorderedBox같은 컴포넌트를 이 컴포넌트로 가져가는게 좋을듯
• 생각나는거 더 있으면 추가해주세요

일괄적으로 작업하기엔 시간이 너무 오래걸릴거같고 관련 이슈 작업할때마다 incrementally 작업하면 될듯합니다

현재 createdAt 등 시간을 쓰는 interface field에서 Date 객체를 쓰고 있는데, socket.io를 통해 보내지는 과정에서 string으로 바뀌게 됩니다.

관련 socket.io 이슈

• socketio/socket.io#3405

이에 클라이언트 및 서버 양단에서 type은 Date라고 뜸에도 실제 타입은 string이어서 getTime()등의 method를 호출했을 때 에러가 뜨는 현상이 발생합니다.

사실 JSON을 통해 Date object를 보낼 수 없으니 당연한 일이기도 한데, 이를 해결하기 위한 두 가지 옵션이 있어 보입니다.

• zod의 validation은 이와 같은 type coercion을 자동으로 진행해 주는 기능을 제공하기 때문에, 각 요청에서(클라이언트에서도) zod validation을 수행하도록 합니다. (일종의 미들웨어? 인터셉터? 처럼)
• 현재 API schema에 쓰이고 있는 Date 필드들을 timestamp number를 사용하도록 변경합니다.

화면이 줄어들었을때 좌측에 보여야하는 열 하나가 보이지 않습니다.
아래의 이미지는 전체 화면일 때

기존의 Button 형태가 아니더라도 clickable 한 element는 모두 transparent varient를 적용한 Button 컴포넌트로 감쌉니다.

• cursor: pointer; 효과
• hover, active시 darken 효과

를 적용하기 위함입니다.

아래 링크의 Text button 느낌을 생각하시면 될것 같습니다
https://mui.com/material-ui/react-button/#text-button

• transparent varient 적용

적용할 컴포넌트

• Chat input 전송 버튼
• 투표 가리기 숨기기 버튼

admin 페이지에서 보이는 agenda card들을 만들겁니당

• 이미 비슷한 컴포넌트 있으니 재활용해서 만들기

헤더, 컨테이너, 오버레이, 투표 내용 입력창, 투표 대상 선택 창, 드롭다운 리스트

• chat에서 버튼을 눌러 전송하는 경우 입력했던 메세지가 그대로 남아있는 이슈

TBD

현재 commitlint만 작동하고 있어 추가가 필요합니다.

ChatSection 컴포넌트 내부 및 관련 UI 컴포넌트를 개발하고, 이를 현재 구현되어 있는 로직 hook과 연결하는 작업입니다.

투표 생성, 수정 등에 사용되는 컴포넌트

admin.agenda 쪽에서 Agenda를 start 했을 때 admin 쪽 이벤트만 트리거되고 agenda 쪽은 핸들링하지 않고 있는 문제입니다.

Biseo의 인터페이스에 저장된 타입은 보통 아래와 같은 형태로 정의되었는데,

interface OngoingAgenda {
  type: "ongoing";
  ...
}

interface TerminatedAgenda {
  type: "terminated";
  ...
}

type Agenda = OngoingAgenda | TerminatedAgenda;

Agenda 타입을 가진 변수의 type 필드의 type check을 진행해 주어도 agenda에 대한 type inference가 이루어지지 않으므로 type predicate를 이용한 type guard를 정의하여 이를 통해 타입 검사를 진행해야 함

• https://www.typescriptlang.org/docs/handbook/2/narrowing.html#using-type-predicates

@kjy2844 님이 진행해준 부분에 이와 같은 식으로 정의되어 있는데, 비서 전반적으로 이와 같은 타입 체킹을 도와줄 type guard를 utils 폴더에 정리해두면 좋을 것 같아요

현재 우상단의 닉네임 버튼을 클릭한 후 새로고침을 하면 로그아웃이 되지만, 클릭한 즉시 /login 페이지로 이동하지는 않습니다.

#114 PR을 Pull 하면 버튼이 생깁니다

유저 A, B 둘다 투표 권한이 있고 투표 안한 상태에서 유저 A가 투표를 할 경우, 유저 B는 투표를 아직 하지 않았음에도 불구하고 아래와 같이 UI가 바뀐다

(유저 B가 화면을 reload를 하면 제대로 뜬다)

Admin user page 만드는 중
뚝딱뚝딱