[Feat] Trim input

[yoopark]

Summary

• Spotlight의 input trim
• EvalLogSearchForm의 input trim

Describe your changes

• 구글 검색도 동일 로직으로 작동합니다. (공백 포함 입력 시 trim 되어 쿼리 진행)

Issue number and link

• close 평가로그 검색 시 공백 자르기 #252

[42sungwook]

고생하셨습니다. 기능도 잘되고 코드도 깔끔하네요👍

[42sungwook]

제가 로직을 잘 몰라서 그런데 여기서 undefined가 나는경우 문제가 될 때는 없나요??

[yoopark]

정상적으로 동작하긴 합니다만, 제대로 백엔드 스키마를 찾아보니 말씀해주신대로 Optional 또는 null을 받도록 되어있더라구요..?

// 프론트엔드 인자 전달 시 사용하는 타입
export type EvalLogSearchArgs = Partial<{
  projectName: string;
  outstandingOnly: boolean;
  corrector: string;
  corrected: string;
  sortOrder: EvalLogSortOrder;
  first: number;
  after: string;
}>;


export type EvalLogSearchForm = Omit<
  EvalLogSearchArgs,
  'after' | 'first' | 'outstandingOnly'
> & {
  flag: string;
};

// 백엔드 스키마 autogen
export type GetEvalLogsQueryVariables = Exact<{
  after?: InputMaybe<Scalars['String']>;
  first?: InputMaybe<Scalars['Int']>;
  corrector?: InputMaybe<Scalars['String']>;
  corrected?: InputMaybe<Scalars['String']>;
  projectName?: InputMaybe<Scalars['String']>;
  outstandingOnly?: InputMaybe<Scalars['Boolean']>;
  sortOrder?: InputMaybe<EvalLogSortOrder>;
}>;

export type InputMaybe<T> = Maybe<T>;
export type Maybe<T> = T | null;

Optional(인자를 전달하지 않는 것)과 undefined 인자를 전달하는 것에는 분명 차이가 있습니다.

tsconfig.json에서 exactOptionalPropertyTypes 옵션을 켜면 Optional 타입에 undefined를 전달하는 행위를 막을 수 있습니다. (Ref. https://www.typescriptlang.org/tsconfig#exactOptionalPropertyTypes)

저희 코드는 해당 옵션을 켜지 않아서 돌아가긴 합니다만, 옵션을 켜면 (autogen에서 만들어낸 Optional 타입까지 해당 옵션이 적용되기 때문에) 에러가 날 것으로 예상되며, 미리 저런 지점을 조심해서 짜는 것도 괜찮겠다는 생각을 했습니다 😄

후속 커밋으로 해당 내용을 수정하겠습니다.

[yoopark]

백엔드로 요청을 보낼 때 아래 인자였던 것을 위 인자로 수정하였습니다.
undefined를 보내도 문제가 없긴 한데, 애초에 저희는 ''이 인자로 가고 있더라구요 😅
react-hook-form으로 상태를 저장하고 있으니까, 아무것도 입력하지 않아도 빈 문자열이 form의 value로 전달되고 있었습니다.

1. 원래 undefined 이거나, 2) trim 했을 때 빈 문자열이 나오는 경우에는 요청 시 인자에서 제외하도록 변경하였습니다.

변경된 graphql 요청

[yoopark]

오잉 undefined 를 인자로 전달하면, 요청을 보낼 때 인자를 전달하지 않은 것으로 취급을 해주네요.