[React / ts] Task App 만들기 - ⑤ Logger Modal 만들기

 

 

사용자들이 Board, List, Task를 편집할 때마다 Logger를 추가하여 관리하였었는데, 이를 보여주는 화면을 구현해보자.

 

// LoggerModal.tsx

import React from "react";
import { useTypedSelector } from "../../hooks/redux";
import { FiX } from "react-icons/fi";
import {
  body,
  closeButton,
  header,
  modalWindow,
  title,
  wrapper,
} from "./LoggerModal.css";
import LogItem from "./LogItem/LogItem";

type TLoggerModalProps = {
  setIsLoggerOpen: React.Dispatch<React.SetStateAction<boolean>>;
};

const LoggerModal: React.FC<TLoggerModalProps> = ({ setIsLoggerOpen }) => {
  const logs = useTypedSelector((state) => state.logger.logArray);

  return (
    <div className={wrapper}>
      <div className={modalWindow}>
        <div className={header}>
          <div className={title}>활동 기록</div>
          <FiX className={closeButton} onClick={() => setIsLoggerOpen(false)} />
        </div>
        <div className={body}>
          {logs.map((log) => (
            <LogItem key={log.logId} logItem={log} />
          ))}
        </div>
      </div>
    </div>
  );
};

export default LoggerModal;

 

// LogItem.tsx

import React from "react";
import { ILogItem } from "../../../types";
import { BsFillPersonFill } from "react-icons/bs";
import { author, date, logItemWrap, message } from "./LogItem.css";

type TLogItemProps = {
  logItem: ILogItem;
};

const LogItem: React.FC<TLogItemProps> = ({ logItem }) => {
  const timeOffset = new Date(Date.now() - Number(logItem.logTimestamp));

  const showOffsetTime = `
    ${timeOffset.getMinutes() > 0 ? `${timeOffset.getMinutes()}m` : ""}
    ${timeOffset.getSeconds() > 0 ? `${timeOffset.getSeconds()}s ago` : ""}
    ${timeOffset.getSeconds() === 0 ? `just now` : ""}
    `;

  return (
    <div className={logItemWrap}>
      <div className={author}>
        <BsFillPersonFill />
        {logItem.logAuthor}
      </div>
      <div className={message}>{logItem.logMessage}</div>
      <div className={date}>{showOffsetTime}</div>
    </div>
  );
};

export default LogItem;

useTypedSelector를 통해 logger.logArray를 불러와 map으로 각 logItem들을 보여주었다.