강제 업데이트 네비게이션 생성

[Gwak-Seungju]

ISSUE #60

강제 업데이트를 어드민 페이지에서 가능하게 하고자 페이지를 구현했습니다.

• CustomTable props에 onClick이 없을 시 상세 페이지로 이동하는 것 같은데 구현하고자하는 테이블에서는 상세 페이지 이동이 불필요해서 상세 페이지 이동을 막기 위해 () => {} 을 주었는데, 맞는 방법인지 궁금합니다..!

• 추가로 목록 관리 페이지에서 date가 오름차순으로 정렬되어 있는데, api 수정 요청을 통해 내림차순으로 변경하도록 할 예정입니다!

Screenshot

• SideNav 내 네베게이션 이미지
  

• 업데이트 관리 페이지(드롭다운은 클릭한 상태)
  

• 목록 관리 페이지(드롭다운은 클릭한 상태)
  

[github-actions]

Code review by ChatGPT

[ChoiWonBeen]

레쓰고

[ChoiWonBeen]

구현하고자하는 테이블에서는 상세 페이지 이동이 불필요해서 상세 페이지 이동을 막기 위해 () => {} 을 주었는데, 맞는 방법인지 궁금합니다..!

수정 & 삭제가 불필요한게 맞는거져?

[ChoiWonBeen]

이 페이지도 하나의 Form이고, 각각의 요소가 상태이므로 다른 페이지처럼 바꿔서 쓰는게 디자인적 통일 & 시간적 이득을 볼 수 있었을 것 같아요.

<CustomForm.Input /> 으로 구조화하는건 어려웠을까요?

[Gwak-Seungju]

말씀해주신 부분을 반영해서 전체적으로 CustomForm을 사용하여 구조를 변경했습니다!
다만, 주요 변경 사항이 있습니다!

1. content의 길이가 한 줄 이상으로 길어지는 경우 CustomForm.Input을 사용하면 antd의 Input 특성 때문에? 한 줄로만 보여줘서 모든 text를 보여주지 못 하더라고요. 따라서 CustomForm.TextArea를 사용하고자 했습니다.
   기존 CustomForm에 CustomTextArea에서는 글자 수를 보여주는 showCount와 행 수에 따른 size를 자동으로 조절해주는 autoSize속성이 없어 추가했습니다. style 속성도 변경하고 싶어 아래와 같이 추가했습니다..!

// src\components\common\CustomForm\index.tsx
interface CustomTextAreaProps {
  maxLength?: number;
  showCount?: boolean;
  **style?: React.CSSProperties;**
  autoSize?: AutoSizeProps;
}

function CusctomTextArea({
  label, name, maxLength, disabled, rules, showCount, autoSize, style,
}: CustomFormItemProps & CustomTextAreaProps) {
  return (
    <S.FormItem label={label} name={name} rules={rules}>
      <Input.TextArea
        showCount={showCount}
        maxLength={maxLength}
        disabled={disabled}
        autoSize={autoSize}
        **style={style}**
      />
    </S.FormItem>
  );
}

2. UI를 변경하고 싶어서 아래처럼 style 변수를 선언하고 컴포넌트에 추가하는 식으로 했는데 공통 컴포넌트에 style을 줄 수 있는 방법이 이것밖에 생각나지 않아 이런 방식을 사용했습니다. 더 좋은 방법이 있는지 궁금합니다..!

const titleStyle = {
  fontSize: '20px',
  fontWeight: '700',
};

<Divider
  orientation="left"
  orientationMargin="0"
  style={titleStyle}
>

[ChoiWonBeen]

1. 좋네요!
2. 선택자 접근으로 하위 요소에 대한 css로 처리도 가능할거같긴한데, 위 방법도 괜찮아보여욤

[Gwak-Seungju]

구현하고자하는 테이블에서는 상세 페이지 이동이 불필요해서 상세 페이지 이동을 막기 위해 () => {} 을 주었는데, 맞는 방법인지 궁금합니다..!

수정 & 삭제가 불필요한게 맞는거져?

"그냥 목록만 보여주면서 업데이트에 대한 히스토리만 파악하면 될 것 같아서 디테일 화면은 필요없을 것 같다"는 요구사항?이 있었습니다. props로 onClick을 주지 않으면 navigate로 인해 페이지 이동이 되는데, 이것을 막고자 내용없는 함수를 전달하게 되었습니다.

// src\components\common\CustomTable\index.tsx
onRow={(record) => ({
    onClick: () => {
      if (onClick) {
        onClick(record.id);
      } else navigate(`${record.id}`);
    },
})}

[ChoiWonBeen]

좋네요~ 이해했어요

[ChoiWonBeen]

훨씬 깔끔하죰? ㅎㅎㅎ