[FEAT] 테이블 목록화면 구현

[eunwoo-levi]

🚩 연관 이슈

closed #25

📝 작업 내용

1. TableListPage.tsx - 전체적인 테이블 목록화면 (백엔드 API 연동 전, dummy data로 대체)

import DefaultLayout from '../../layout/defaultLayout/DefaultLayout';
import { TableProps } from '../../type/type';
import AddTable from './components/AddTable';
import Table from './components/Table';

const data = [
  { name: '테이블1', type: '의회식 토론', time: 30 },
  { name: '테이블 2', type: '의회식 토론', time: 30 },
  { name: '테이블 3', type: '의회식 토론', time: 30 },
  { name: '테이블 4', type: '의회식 토론', time: 30 },
];

export default function TableListPage() {
  return (
    <DefaultLayout>
      <DefaultLayout.Header>
        <DefaultLayout.Header.Left>테이블 목록화면</DefaultLayout.Header.Left>
      </DefaultLayout.Header>
      <div className="flex h-screen flex-col px-4 py-6">
        <main className="grid grid-cols-3 justify-items-center gap-6">
          {data.map((table: TableProps, idx: number) => (
            <Table
              key={idx}
              name={table.name}
              type={table.type}
              time={table.time}
            />
          ))}
          <AddTable />
        </main>
      </div>
    </DefaultLayout>
  );
}

2. Table.tsx - 생성된 테이블 컴포넌트 (클릭 시 찬성/반대 테이블 생성 페이지인 '/' 페이지 이동)

import { useNavigate } from 'react-router-dom';
import { TableProps } from '../../../type/type';

export default function Table({ name, type, time }: TableProps) {
  const navigate = useNavigate();

  const handleClick = () => {
    navigate('/');
  };

  return (
    <button
      onClick={handleClick}
      className="flex h-[200px] w-[500px] flex-col items-center rounded-md bg-amber-500 p-5 duration-200 hover:scale-105"
    >
      <h1 className=" text-5xl font-semibold">{name}</h1>
      <div className="flex w-full flex-grow flex-col items-start justify-center text-2xl font-semibold">
        <h1>유형 : {type}</h1>
        <h1>소요시간 : {time}분</h1>
      </div>
    </button>
  );
}

3. AddTable.tsx - 테이블 추가 컴포넌트 (클릭 시 모달 생성)

import { useState } from 'react';
import CreateTableModal from './Modal/CreateTableModal';

export default function AddTable() {
  const [isOpen, setIsOpen] = useState(false);

  const handleClick = () => {
    setIsOpen(!isOpen);
  };

  return (
    <>
      <button
        onClick={handleClick}
        className="flex h-[200px] w-[500px] items-center justify-center rounded-md bg-neutral-300 text-4xl font-bold duration-200 hover:scale-105"
      >
        +
      </button>
      <CreateTableModal isOpen={isOpen} onClose={() => setIsOpen(false)} />
    </>
  );
}

• 이후 Modal 부분

1. CreateTableModal - 테이블 생성 모달 컴포넌트

import { useEffect } from 'react';
import ToggleForDebateType from './ToggleForDebateType';
import CreateTableButton from './CreateTableButton';
import { ModalProps } from '../../../../type/type';

export default function CreateTableModal({ isOpen, onClose }: ModalProps) {
  useEffect(() => {
    const handleEsc = (e: KeyboardEvent) => {
      if (e.key === 'Escape') {
        onClose();
      }
    };

    window.addEventListener('keydown', handleEsc);
    return () => window.removeEventListener('keydown', handleEsc);
  }, [onClose]);

  if (!isOpen) return null;

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
      <div className="relative flex h-[800px] w-[1200px] flex-col bg-white">
        <div className="flex h-[100px] items-center justify-center bg-neutral-300 text-5xl font-semibold">
          <h1>어떤 토론을 원하시나요?</h1>
          <button
            onClick={onClose}
            className="absolute right-2 top-2 text-4xl font-semibold hover:scale-110"
          >
            X
          </button>
        </div>
        <section className="flex flex-1 flex-col justify-center gap-14 p-6">
          <div className="flex items-center justify-center gap-4">
            <h1 className="w-[400px] text-5xl font-bold">토론 시간표 이름</h1>
            <input
              placeholder="시간표#1(디폴트 값)"
              className="w-[600px] rounded-md bg-neutral-300 p-6 text-center text-3xl font-semibold text-white placeholder-white"
            />
          </div>
          <div className="flex items-center justify-center gap-4">
            <h1 className="w-[400px] text-5xl font-bold">토론 유형</h1>
            <ToggleForDebateType />
          </div>
        </section>
        <CreateTableButton />
      </div>
    </div>
  );
}

2. ToggleForDebateType.tsx - 토론 유형 토글 컴포넌트 ( 의회식 토론, 시간 총량제 토론 선택 )

import { useNavigate } from 'react-router-dom';

export default function CreateTableButton() {
  const navigate = useNavigate();

  const handleClick = () => {
    navigate('/');
  };

  return (
    <button
      onClick={handleClick}
      className="h-[80px] w-full bg-amber-500 text-4xl font-semibold transition duration-300 hover:bg-red-300"
    >
      테이블 만들기
    </button>
  );
}

4. CreateTableButton.tsx - 토글 안, 테이블 만들기 버튼 컴포넌트 (클릭 시 찬성/반대 테이블 생성 페이지인 '/' 페이지 이동)

import { useNavigate } from 'react-router-dom';

export default function CreateTableButton() {
  const navigate = useNavigate();

  const handleClick = () => {
    navigate('/');
  };

  return (
    <button
      onClick={handleClick}
      className="h-[80px] w-full bg-amber-500 text-4xl font-semibold transition duration-300 hover:bg-red-300"
    >
      테이블 만들기
    </button>
  );
}

<리뷰 적용 후 변경 사항>

1. useModal 에 esc 닫기 기능 추가

  useEffect(() => {
    const handleEsc = (e: KeyboardEvent) => {
      if (e.key === 'Escape') {
        closeModal();
      }
    };

    window.addEventListener('keydown', handleEsc);
    return () => window.removeEventListener('keydown', handleEsc);
  }, [closeModal]);

2. useModal 훅 이용하여 기존 Modal 리팩토링

import ToggleForDebateType from './ToggleForDebateType';
import CreateTableButton from './CreateTableButton';

interface ModalProps {
  closeModal: () => void;
  ModalWrapper: ({
    children,
  }: {
    children: React.ReactNode;
  }) => JSX.Element | null;
}

export default function CreateTableModal({ ModalWrapper }: ModalProps) {
  return (
    <ModalWrapper>
      <div className="flex h-[700px] w-full flex-col">
        <div className="flex h-[100px] items-center justify-center bg-neutral-300 text-5xl font-semibold">
          <h1>어떤 토론을 원하시나요?</h1>
        </div>
        <section className="flex flex-1 flex-col justify-center gap-14 p-6">
          <div className="flex items-center justify-center gap-4">
            <h1 className="w-[400px] text-5xl font-bold">토론 시간표 이름</h1>
            <input
              placeholder="시간표#1(디폴트 값)"
              className="w-[600px] rounded-md bg-neutral-300 p-6 text-center text-3xl font-semibold text-white placeholder-white"
            />
          </div>
          <div className="flex items-center justify-center gap-4">
            <h1 className="w-[400px] text-5xl font-bold">토론 유형</h1>
            <ToggleForDebateType />
          </div>
        </section>
        <CreateTableButton />
      </div>
    </ModalWrapper>
  );
}

import CreateTableModal from './Modal/CreateTableModal';
import { useModal } from '../../../hooks/useModal';

export default function AddTable() {
  const { openModal, closeModal, ModalWrapper } = useModal();

  return (
    <>
      <button
        onClick={openModal}
        className="flex h-[200px] w-[500px] items-center justify-center rounded-md bg-neutral-300 text-4xl font-bold duration-200 hover:scale-105"
      >
        +
      </button>
      <CreateTableModal closeModal={closeModal} ModalWrapper={ModalWrapper} />
    </>
  );
}

🏞️ 스크린샷 (선택)

• 테이블 목록 화면
  

• 테이블 추가 버튼 클릭 시 모달
  

• 토론 유형 선택 토글
  

🗣️ 리뷰 요구사항 (선택)

• 백엔드 API 연동 하기 전 dummy data로 대체하였습니다. 이후 API 연결이 되면 추가 코드를 작성할 예정입니다.
• 이후 StoryBook UI 테스트코드를 추가할 예정입니다.
• 추가할 부분이나 수정할 부분 있으면 리뷰 부탁드립니다.

[i-meant-to-be]

확인했습니다! 디자인에 조금의 피드백이 있는데요. 테이블 추가 모달에서, 모달을 닫는 X 버튼이 헤더의 중간 높이에 있으면 좋을 거 같아요! 그 외에는 별도 피드백 없습니다.

그리고 이거는 개인적으로 궁금한 부분인데요, 치코님과 엘님 모두 페이지 간 매개변수를 넘길 때 interface SomePageProps { ... } 이런 식으로 래핑해서 넘겨주시던데, React에서는 이게 국룰인가요?

[eunwoo-levi]

@i-meant-to-be 디자인 피드백 반영해서 수정하였습니다! 수정한 내용도 PR 내용에 추가하였습니다.

[eunwoo-levi]

@i-meant-to-be React에서는 TypeScript를 사용할 때 props 타입을 정의하는 건 거의 관례처럼 쓰이고 있습니다. TypeScript를 사용한다면 매개변수에 타입을 명시하는 것이 필수인데, 팀 스타일에 따라 type을 쓰기도 하지만, interface는 주로 재사용성과 확장성을 중시할 때 더 선호됩니다. 또한, 추가적으로 코드들를 깔끔하고 명료하게 하기 위해서 매개변수 타입들은 type 디렉토리 안에 type.ts 파일에 type들을 다 작성하여 필요로 하는 위치에 import하는 방식으로 타입들을 지정해주고 있습니다!

[jaeml06]

(권장)
개인적으로 컴포넌트의 props는 따로 파일을 분리하는 것보다 같은 파일에서 관리하는 것이 유지보수에 용이했던 기억이 있습니다. 따로 두면 타입 확인도 쉽지 않고 컴포넌트 타입이여서 다른 곳에서 사용하는 일도 거의 없더라고요.

[eunwoo-levi]

ModalProps는 CreateTableModal 컴포넌트에만 쓰이기 때문에 따로 두지않고 피드백 반영해서 수정하였습니다.
TableProps같은 경우는 TableListPage 와 Table컴포넌트 모두 쓰이기 때문에 type 파일에 두었는데 어떻게 생각하시나요?

[jaeml06]

다만 이럴경우 뒤의 Pros라는 단어보다는 그냥 Table 이라는 단어나 다른 단어로 사용하는 것이 좋아보이네요. props인데

  {data.map((table: TableProps, idx: number) => (
            <Table
              key={idx}
              name={table.name}
              type={table.type}
              time={table.time}
            />
          ))}

pros로는 사용하지 않아서 어색하네요

[jaeml06]

제가 저번 프로젝트에서 useModal이라는 훅을 만들어서 모달을 띄울 수 있게 만들었는데 혹시 useModal을 사용하지 않고 자체적으로 Modal을 만드신 이유가 있을까요? 혹시 이용하는데 어려움이 있으셔서 사용하지 않으셨나요? 만약 사용에 어려움이 있었다면 피드백 반영해서 개선하도록 하겠습니다.

[jaeml06]

참고로 현재 최상단에

이유는 모르겠지만 GlobalPortal이 사라져있어서 위와 같이 선언해주어여 useModal이 사용 가능합니다.

[eunwoo-levi]

useModal를 이전에 사용하려고 시도했으나 제대로 동작이 안되는 부분이 있어서 일단 Modal을 직접 구현하였는데, 알려주신 부분을 고려해서 useModal를 이용하여 구현해보겠습니다. (아마 말씀해주신대로 GlobalPortal 문제였던 것 같습니다.)

[jaeml06]

제가 제대로 확인했어야 했는데 죄송하네요. 병합과정에서 사라진 것 같습니다. 추가적으로 esc를 눌렀을 때 모달이 닫히게 하는 로직은 좋다고 생각합니다. 반영하고 싶으시다면 useModal을 수정해서 개선하셔도 됩니다.

[eunwoo-levi]

useModal 이용하여 기존에 구현한 Modal을 리팩토링 하였습니다.
기존 구현해주신 useModal 커스텀 훅에서 ESC 닫기 기능 추가하였고, p-5 CSS 부분은 제가 구현하려고 한 Modal 스타일이랑 맞지 않아서 제거하여 재사용성을 더 용이하도록 하였습니다.
대신, 치코님이 기존에 구현해두신 TimerCreationContent 컴포넌트에 최상위 div 태그에 <div className="p-10">
padding을 증가시켜 구현해놓으신 코드가 지장이 없도록 하였습니다.

추가적으로 닫기 'X' 버튼의 absolute Top 위치를 조정시키고 사이즈를 더 늘려 가독성을 늘렸습니다.

필요한 부분 있으시면 피드백 부탁드립니다.
감사합니다!

[jaeml06]

디자인적인 부분은 개인취향이 반영된 것이라 나중에 다시 한번 팀원들과 합의해보면되니 괜찮습니다. 나중에 x 글자는 이미지 파일로 변경할 필요가 있어보여서 후에 다시 개선해보독해죠. p-10으로 늘리니 제가 사용하는 곳에서 디자인이 살짝 이상해보여서 후에 개선이 필요해보이긴하네요

[eunwoo-levi]

전체적인 Table 컴포넌트와, Modal 컴포넌트 모두 Responsive 한 UI로 리팩토링 완료하였습니다.

[jaeml06]

이부분도 위치 변경이 필요해보이네요

[jaeml06]

넵 확인했습니다. UI 수정하느라 고생하셨습니다.
approve드리도록히겠습니다.

제가 하나 의견 달아둔 것만 확인하시고 merage하셔도 괜찮을 것 같습니다.

[jaeml06]

(권장)
제 의도가 잘못전달 된 것 같네요.
TableProps의 위치자체는 type에 있는 것이 좋으나 네이밍이 Props가 뒤에 붙어서 어울리지 않는다는 이야기 였습니다.

type.ts

export interface Table {
  name: string;
  type: string;
  time: number;
}

로 선언해주고

table.tsx에서

export interface TableProps extends Table {}

로 사용해주면
같은 타입이 중복되는 일도 없어지고

          {data.map((table: Table, idx: number) => (
            <Table
              key={idx}
              name={table.name}
              type={table.type}
              time={table.time}
            />
          ))}

map에서 사용된 타입되 Props가 없고 Table로 네이밍되어있는 것이 좋아보인다는 의견이 였습니다.

같은 타입이 두번 선언되었으면 나중에 타입이 추가되거나 변경되었을 때 두 곳 전부를 수정해야해서 귀찮을 수 있습니다.

[jaeml06]

결국 table도 서버에서 받아와야하니 이때 받아오는 데이터도 Table[] 타입일테니 재사용가능한 type.ts에 두는 것이 좋아보여서 의견드린거였습니다.

[eunwoo-levi]

제가 이전 리뷰를 잘못 이해했었네요. 리뷰 감사합니다. 수정 후 Merge하였습니다.