2022/01/12

오늘 한 일

• 뉴스 페이지 디자인
• dayjs 라이브러리로 한국 시간 전역 설정

/* _app.tsx */
...
import dayjs from 'dayjs';
 import 'dayjs/locale/ko';
 dayjs.locale('ko');

function MyApp({Component, pageProps }) {
  ...

• 모달 컴포넌트 재사용(닉네임/이메일 변경)

/* /Modal/Primary.tsx */
interface Props {
  iconURL?: string;
  details: any;
  buttons: any;
}
const ModalPrimary = (props: Props) => {
  // props 로 자식 엘리먼트를 전달받는다.
  const { iconURL, details, buttons } = props;
  return (
    <div className="modal-background">
      <div className="modal container">
        {iconURL ? (
          <div className="icon">
            <Image src={`/svg/${iconURL}.svg`} width={50} height={50} alt="" />
          </div>
        ) : null}
        <div className="detail">{details}</div>
        <div className="btn box">{buttons}</div>
      </div>
    </div>
  );
};

export default ModalPrimary;

/* my/index.tsx */
const MyPage = () => {
  return <>
    ...
    <ModalPrimary
          iconURL={undefined}
          details={
            <div className="nick-change-modal">
              <div className="title">사용할 닉네임을 입력해주세요</div>
              <div className="detail">
                코알라 서비스 내 이용자 식별을
                <br />
                위해 사용됩니다.
              </div>
              <div className="input">
                <input type="text" />
                <button>중복확인</button>
              </div>
              <div className="warn">
                이미 사용중인 닉네임입니다. 다른 닉네임을 입력해주세요.
              </div>
            </div>
          }
          buttons={
            <div className="btn-group">
              <button className="cancel" onClick={handleNickModal}>
                취소
              </button>
              <button className="primary">변경하기</button>
            </div>
          }
        />
    </>
 
}
export default MyPage

• 404 페이지 접속 시 3초 후 메인 페이지로 리다이렉트
• 개인정보 이용수집 약관 더보기 컴포넌트 팝업으로 처리

• tsconfig-paths 수정

yarn add -D tsconfig-paths

/* tsconfig.json */
...
  "paths": {
       "@mobile/*": ["src/pages/m/*"]
     }
...

/* pacakge.json */
...
"exec": "ts-node --project tsconfig.server.json server/index.ts",
     "exec": "ts-node -r tsconfig-paths/register  --project tsconfig.server.json server/index.ts",
...