좋은 피드백 수용

이번 주에는 내 PR about the searchbar UI 에 대해 받은 모든 피드백에 대해 이야기하고 싶습니다. 정말 좋은 리뷰가 몇 개 있었고 거의 지나갈 뻔한 몇 가지 버그를 잡았습니다. 내가 받은 피드백 중 일부는 다음과 같습니다.

고급 검색 버튼 및 입력의 반응성:

어둡고 밝은 모드의 색상 테마:

내 반응:

민감도:

정말 실망스럽기 때문에 아무 말도 하고 싶지 않습니다. 처음에 버튼을 추가하고 클릭 이벤트가 고급 트레이 항목을 여는 데 작동하는지 확인한 다음 잊어버렸습니다.

색상 테마:

색상 테마는 내가 고려할 필요가 없었던 것입니다. 놀랍게도 지금까지 수행한 모든 작업에서 아직 이 코드를 만나지 않았습니다. 아래에서 어떻게 작동하는지 설명하겠습니다! :)

내 문제 해결:

민감도:

이것은 나에게 그리 어려운 일이 아니었다. 지금 그리드/플렉스 시스템이 어떻게 작동하는지 이해할 수 있고 여기에 내 지식을 적용할 수 있어서 정말 운이 좋았습니다. 내가 잊고 있었던 또 다른 것은 float 속성이었습니다. 저는 다른 많은 소품을 가지고 놀지 않고도 요소가 앉아 있어야 하는 곳에 놓이도록 만드는 이 속성을 좋아합니다.

색상 테마:

색상 테마에 MUI를 사용합니다. 이전에 다른 프로젝트에서 테마 작업을 해본 경험이 있어 그 요지를 알게 되었습니다. 기본적으로 우리는 사용할 색상에 대한 자체 테마를 만들고 있습니다. 따라서 마음이 편안해지는 파란색을 사용하고 싶을 때마다 "HEX 코드가 또 뭔데???"라는 사실을 아는 대신 이름을 붙여서 사용할 수 있습니다.

처음 시작할 때 망원경 로고 색상에 나만의 색상 이름telescope-blue을 넣었습니다. 이것으로 많은 오류가 발생했습니다. 나는 telescope-blue의 이름을 지정할 수 없으며 이 이름을 createPalette.ts의 팔레트로 지정해야 한다는 것을 배웠습니다. 따라서 이 접근 방식을 사용하려면 꼭 하십시오. 그렇지 않으면 MUI에서 제공하는 PaletteColorOptions을 사용할 수 있습니다.

나는 정보 색상이 일반적으로 파란색이고 이 파란색을 망원경 파란색으로 정의할 수 있다고 결정했습니다. 시행착오를 통해 호버 상태에 대한 몇 가지 좋은 색상 대비를 탐색하고 새로운 테마에 합의했습니다.





내가 가진 다른 문제 중 하나는 사용자 정의 CSS를 추가하기 위해 MUI Textarea가 작동하는 방식을 이해하는 것이었습니다. 이를 설명하기 위해 먼저 내가 넣은 코드를 보여 드리겠습니다.

        <TextField
        variant="outlined"
        size="medium"
        fullWidth
        label={labelFor}
        onChange={(event) => setText(event.target.value)}
        value={text}
        InputProps={{
          classes: {
            root: classes.customInput,
            focused: classes.customInput,
            notchedOutline: classes.customInput,
          },
        }}
        InputLabelProps={{
          classes: {
            root: classes.customInputText,
            focused: classes.customInputText,
          },
        }}
      />

여기에는 InputProps 및 InputLabelProps 두 개의 소품이 있습니다. 그들은 다르다.



따라서 InputProps는 입력 자체에 대한 CSS 소품입니다. 반면 InputLabelProps는 "작가 찾기"라는 레이블의 소품입니다. 많은 시행착오 끝에 focus에 대해 다른 클래스를 설정할 수 있지만 classes.focused를 추가할 수 있다는 것을 깨달았습니다. 마지막으로 테두리 색상을 변경하기 위해 notchedOutline 를 사용합니다.

여기에서 부딪힌 또 다른 문제는 두 가지InputProps와 InputLabelProps의 fontSize를 다르게 만들면 레이블 및 둥근 테두리와 겹치는 부분이 있다는 것입니다.

내 변경 사항을 푸시 한 후 ...

변경 사항을 적용한 후 이 PR을 가져오게 되어 정말 기쁩니다. 지금은 작성자 및 게시물 검색뿐이지만 여전히 차이가 있으며 더 이상 하나만이 아니라 둘 다로 검색을 세분화할 수 있습니다.