2025년 5월 개발 회고

• 유저의 타입을 통해 유저가 접근해도 되는 페이지인지 아닌지를 판별해, 유저가 접근해서는 안되는 페이지라면 접근 불가 페이지를 보여주기. Layout 컴포넌트에서 공통적으로 처리하도록 했다. 

• 다이나믹 링크 기능을 구현했다. (로그인 페이지에서 리다이렉트하기 직전에, 리다이렉트되려는 페이지가 유저에게 접근 권한이 있는지를 판별해서, 권한이 있다면 그대로 리다이렉트하고, 권한이 없다면 기본 랜딩페이지로 이동시키도록 코드 수정)

• 이미지 리사이즈 로직 개선
• 엔터가 쳐져 있는 글 개행 처리 whiteSpace:"pre-line" 사용. 이거 안 쓰면 엔터처리가 적용이 제대로 안됨.
• useRef를 사용해 아이디를 입력하고 엔터를 누르면 비밀번호로 포커스 이동, 비밀번호를 입력하고 엔터를 누르면 로그인이 가능함

import { useRef } from 'react';

const passwordRef = useRef(null)

<TextField 
    onKeyDown={(e) => {
        if (e.key === 'Enter') {
            passwordRef.current?.focus()
        }
    }}

<TextField 
    onKeyDown={(e) => {
        if (e.key === 'Enter') {
            login(ProviderType.email)
        }
    }}
    inputRef={passwordRef}

 

• 초대 코드 만드는 로직 짰다. 공개할수는없다..
• MUI DataGrid 내 onClick이 첫 클릭에 무시되는 문제 해결 (onClick -> onMouseDown으로 변경해 해결)
  - DataGrid 셀 내부 컴포넌트에서 onClick을 사용하면 포커스 이벤트에 의해 무시되어 첫 클릭이 작동하지 않던 것이 원인 -> DataGrid 안에 쓰이는 모든 셀 인터랙션 버튼을 onMouseDown으로 변경하여 첫 클릭에도 즉시 반응하도록 개선
• 디자인시스템을 적용하기 위해 foundation.scss를 만들어 컬러, 패딩 등 자주 쓰이는 SCSS 변수를 선언
• 어디에서나 불러와서 변수를 넣어주기만 하면 작동하는 우리 회사만의 텍스트필드, 체크박스, 라디오버튼, 토글, 드롭다운, 모달, 버튼, 알러트 개발

전

디자이너의 UI 개선 + 나의 개발 후