feat: 칸반 보드 페이지에서 지원자의 지원 상태를 카드에 보여준다. #197

smb0123 · 2024-09-13T06:02:02Z

주요 변경사항

리뷰어에게...

슬랙에서 이야기 나왔듯이 지원 상태가 하나 더 추가될 예정이어서 백엔드 측에서 지원자의 상태가 추가되면 Type을 추가하고 KanbanCardApplicantStatusLabel 컴포넌트에 case 문이 하나 더 추가될 예정입니다.

체크리스트

reviewers 설정
label 설정

geongyu09

엄청 빠르게 작업하셨네요..! 수고하셨습니다!

geongyu09 · 2024-09-13T06:21:52Z

frontend/src/stores/kanban/Kanban.atoms.ts

@@ -17,6 +17,7 @@ export type KanbanCardData = {
  heart: number;
  isHearted: boolean;
  applicantId: string;
+  passState: "non-passed" | "first-passed" | "final-passed";


passState의 타입이 계속 반복될 수 있을 것 같은데,
이를 따로 타입으로 정의하는 것이 좋을 수도 있을 것 같습니다!

geongyu09 · 2024-09-13T06:33:32Z

frontend/components/kanban/card/CardApplicantStatusLabel.compoenent.tsx

+const KanbanCardApplicantStatusLabel = ({
+  passState,
+}: KanbanCardApplicantStatusLabelProps) => {
+  switch (passState) {


div와 여러 class값들이 반복되는 것 같습니다!
위와 같은 경우 변경되는 부분을 상수로 정의해두고 가져오는 방법을 사용해도 좋을 것 같습니다!

예를 들면 아래처럼 사용할 수 있을 것 같습니다.

const labelConfig = { 'non-passed': { backgroundColor: 'bg-gray-300', label: '처리중' }, 'first-passed': { backgroundColor: 'bg-lime-300', label: '1차 합격' }, 'final-passed': { backgroundColor: 'bg-blue-300', label: '최종 합격' }, }; // 컴포넌트 내부 const { backgroundColor, label } = statusConfig[passState]; return ( <div className={`${backgroundColor} text-xs px-[10px] py-[5px] rounded-[10px]`}> {label} </div> );

추가적으로 이와 유사한 내용을 담은 아티클이 있어서 공유합니다!

https://velog.io/@eunbinn/dry-the-common-source-of-bad-abstractions

코드 변경

2yunseong

좋네요! 고생하셨습니다.

loopy-lim

어.... 사실 같이 코딩하지 않는 사람으로서 죄송합니다...
그래도 이 프로젝트를 만들었던 사람으로서 먼가 제 생각을 추가적으로 덧 붙여 적습니다..
그냥 공감해주셔도 좋고, 이렇게도 할 수 있구나로 넘기셔도 좋습니다.(꼭 적용 안하셔도 좋고, 오히려 반박을 하면 더욱 좋습니다.)

loopy-lim · 2024-09-13T14:33:11Z

frontend/components/kanban/card/Card.component.tsx

@@ -48,12 +50,15 @@ function KanbanCardComponent({
  return (
    <div
      className={cn(
-        "border-[1px] w-[14.9rem] p-3 rounded-lg drop-shadow-md bg-white hover:border-primary-400",
+        "border-[1px] w-[14.9rem] p-3 rounded-lg drop-shadow-md bg-white hover:border-primary-400 relative",


relative는 어떤 작업을 하나요?

아 이걸 안지웠네요. 감사합니다 !
지원자의 상태를 나타내는 라벨을 position: absolute로 해서 처음에 작업하였는데 지원자의 이름이 길어지면 라벨이 이름을 덮는 경우가 생겨서 이 방법으로 하지 않고 전공과 라벨을 형제로 만들어서 부모에 flex를 적용하는 방법으로 변경하였습니다.

좋습니다!! 만약에 이름이 길어진다고 하면, tailwind에서 text-ellipsis의 옵션을 사용하셔도 좋을 것 같습니다.

오 좋네요 !
제가 tailwind를 처음 써봐서 아직 아는게 별로 없네요 ..

쓰면서 차차 늘어가실 거에요... 사실 css에 있는 기능이라 그것을 공부하고 tailwind를 찾는 것을 추천 들려요

loopy-lim · 2024-09-13T14:33:51Z

frontend/components/kanban/card/Card.component.tsx

+      <div className="text-xs text-secondary-200 flex justify-between items-center">
+        {major}
+        <KanbanCardApplicantStatusLabel passState={passState} />
+      </div>


오... 이거 고치기 힘들 었을 것 같은데 잘 하셨군요 ㅠㅠ

감사합니다 !

loopy-lim · 2024-09-13T14:36:30Z

frontend/components/kanban/card/CardApplicantStatusLabel.compoenent.tsx

제 흔적이 이렇게 흘러가는 군요...
저번 학기에 V3로 가는 문서에서 보면 (권한이 없다면 요청해주세요!!) component라는 postfix는 빼는 것이 좋아보입니다.
사실 이번 프로젝트에서는 어떻게 이루어지는지 잘 몰라서 그냥 첨언하고 갑니다 ㅠㅠ

V3로 가는 문서가 어떤것인가요?
component는 제거하겠습니다 !

저번 학기에 갈무리를 하는 작업에서 사용했던 문서였습니다!! 슬랙으로 따로 노션 아이디 주시면 제가 넣어두겠습니다!!
감사합니다

loopy-lim · 2024-09-13T14:37:29Z

frontend/components/kanban/card/CardApplicantStatusLabel.compoenent.tsx

+  const { backgroundColor, label } = labelConfig[passState];
+  return (
+    <div
+      className={`${backgroundColor} text-xs px-[10px] py-[5px] rounded-[10px]`}


recruit에코노 홈페이지에서 css는 px를 잘 쓰지 않습니다.
px말고 다른 고정된 값이 있는지 살펴보시고 tailwind에서 주어지는 것을 적극적으로 활용하면 좋을 것 같습니다.

추가적으로 tailwind에서는 classname을 이어 붙일 때 위와 같이 template literal로 처리하는 것도 좋지만, 더 안정성 있게 사용하기 위해서 classnames, clsx등을 사용하여 class결합을 도와주는 라이브러리를 적극적으로 사용하는 것이 tailwind를 사용하는데 있어 더 안전성 있게 사용할 수 있습니다.

저도 제 프로젝트에서 classnames를 사용해왔었는데 안전성이 있게 사용할 수 있어서 사용한다기 보다는 복잡한 클래스를 간단하게 사용할 수 있어서 사용했었는데 혹시 안전성이 높아진다는게 어떤 의미인지 자세히 알려주실 수 있을까요?

예를 들어 사용하지 않는 class나, 중복되는 class일시, 제거 또는 최 후방의 class들을 선택하도록 덮어씌우는 역활을 합니다.
그러기 때문에 만약의 상태에서도 css가 깨지지 않거나, 이상한 값이 들어가는 것을 방지해줍니다!

아하 그런 기능이 있었군요 !!
앞으로 잘 활용하도록 하겠습니다 !

loopy-lim · 2024-09-13T14:38:30Z

frontend/components/kanban/card/CardApplicantStatusLabel.compoenent.tsx

+const labelConfig = {
+  "non-passed": {
+    backgroundColor: "bg-gray-300",
+    label: "처리중",
+  },
+  "first-passed": {
+    backgroundColor: "bg-lime-300",
+    label: "1차 합격",
+  },
+  "final-passed": {
+    backgroundColor: "bg-blue-300",
+    label: "최종 합격",
+  },
+};


매우 좋은 접근인 것 같습니다. for가 아닌 object로 접근하는 것은 일관된 성능을 보장하여 더욱 사용자에게 잘 보여줄 수 있을 것입니다.

그 뿐 아니라 의존성 자체도 매우 느슨하게 끊어져 리펙토링도 적용하기 좋을 것 같아 좋은 것 같습니다.
한가지만 더 하면 좋을 만한 것으로 type을 강력하게 적용하는 것입니다. 예를 들어 다음과 같습니다.

interface labelConfigType { "backgroundColor": string, "label": string }

밑에 읽고나서 전체적으로 보았을 때 이 곳에 이 label에 대한 object가 있는 것이 적절하지 않다고 생각합니다.
제 생각으로는 constant에서 타입을 생성하고, 이 object를 관리하는 것이 좋다고 생각합니다.
과도한 분리라고 생각할 수 있느나, 오히려 ts를 사용하기 위해서 export를 중구난방으로 사용하고, 이를 활용하는 곳이 3군데 이상일 뿐 아니라 다른 도메인인 이자 layer인 store의 수준까지 가야하기 때문에 이 component에 있는 것이 오히려 store를 해쳐 추후 확장성 또는 관리하는데 있어 힘들 수 있다고 생각합니다.

혹시 첫번째 comment에서 for가 아닌 object로 접근하는 것이 좋다는 것에서 for가 어떤것인지 알 수 있을까요?
반복문의 for를 말하는건가요?

네네 array를 통해 for를 접근하는 것을 말했어요! 이렇게 되면 선형적이지만, object라면 각 키라서 일정한 성능을 기대할 수 있거든요!!

저같은 경우에는 constant부분에 새롭게 파일명을 생성하여 다음과 같이 진행할 것 같습니다.

const labelConfig: Record<ApplicantPassState, labelConfigType> = { "non-processed": { backgroundColor: "bg-gray-300", label: "처리중", }, "first-passed": { backgroundColor: "bg-lime-300", label: "1차 합격", }, "final-passed": { backgroundColor: "bg-blue-300", label: "최종 합격", }, "non-passed": { backgroundColor: "bg-red-300", label: "탈락", }, }; interface labelConfigType { backgroundColor: string; label: string; } export type ApplicantPassState = "non-processed" | "non-passed" | "first-passed" | "final-passed";

확실히 Record<string, labelConfigType> 보다는 Record<ApplicantPassState, labelConfigType> 이 방식이 더 좋아보이네요 !

그러면 한가지 궁금한 점이 있는데 ApplicantPassState를 이렇게 변경하는게 더 좋은 방식인 것 같나요??

export interface ApplicantPassState { passState: keyof typeof labelConfig; }

제 생각에는 큰 상관은 없으나, 주요 메인이 누구인지, key들을 많이 사용하는지 데이터들을 주요해서 쓰는지 본다면, key들이 고정값들로 쓰일 것 같아 오히려 위와 같은 방식이 더 좋아보입니다.

누가 메인인지를 생각해보면 알 수 있는 문제이네요. 답변 감사합니다 !

loopy-lim · 2024-09-13T14:45:33Z

frontend/src/apis/kanban/index.ts

+export interface ApplicantPassState {
+  passState: "non-passed" | "first-passed" | "final-passed";
+}


여기에 타입이 있기에는 실질적으로 CardApplicantStatusLabel.component.tsx에 연결되어 있습니다.
즉 여기에 이 함수가 있는 것이 적절하지 않다고 생각합니다. 하지만 밑에 사용하고 있으므로 이를 적절하게 사용하고 있는 곳에서 가지고 오는 것을 추천드립니다. 예를 들어 다음과 같이 할 수 있습니다.

export type ApplicantPassState ={ passState: keyof labelConfig }

smb0123 added 2 commits September 13, 2024 14:46

feat: 지원자의 지원 상태를 의미하는 타입 추가

c46eed5

feat: 지원자의 지원 상태를 보여주는 컴포넌트 구현 및 적용

72c778b

smb0123 added the feature 기능개발 label Sep 13, 2024

smb0123 requested review from 2yunseong and geongyu09 September 13, 2024 06:02

smb0123 self-assigned this Sep 13, 2024

smb0123 requested review from BlackBean99 and loopy-lim as code owners September 13, 2024 06:02

geongyu09 approved these changes Sep 13, 2024

View reviewed changes

smb0123 added 2 commits September 13, 2024 15:58

refactor: 반복되는 부분 상수화하는 방법으로 변경

93fba74

refactor: 지원자 상태에 대한 타입을 별로도 선언하고 이 타입을 사용하는

019084a

코드 변경

2yunseong approved these changes Sep 13, 2024

View reviewed changes

loopy-lim reviewed Sep 13, 2024

View reviewed changes

smb0123 added 7 commits September 14, 2024 18:47

feat: 지원자에 대한 지원 상태 추가

5e32758

refactor: component라는 postfix 제거

22fddca

refactor: 사용하지 않는 css 제거

d6b1bfb

refactor: px 대신 tailwind에서 제공하는 css 사용

9b8d8ad

refactor: ApplicantPassState 타입을 labelConfig 변수에서 추출하도록 변경

22f923d

refactor: ApplicantPassState 타입 변경 interface -> type

39e2c68

refactor: 상수 데이터 타입 지정, cn으로 클래스 변경

4bca63f

smb0123 merged commit 0669533 into main Sep 14, 2024
1 check failed

smb0123 deleted the feat/196-kanban-user-status branch September 14, 2024 12:15

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: 칸반 보드 페이지에서 지원자의 지원 상태를 카드에 보여준다. #197

feat: 칸반 보드 페이지에서 지원자의 지원 상태를 카드에 보여준다. #197

smb0123 commented Sep 13, 2024

geongyu09 left a comment

geongyu09 Sep 13, 2024 •

edited

Loading

geongyu09 Sep 13, 2024

2yunseong left a comment

loopy-lim left a comment

loopy-lim Sep 13, 2024

smb0123 Sep 14, 2024 •

edited

Loading

loopy-lim Sep 14, 2024

smb0123 Sep 14, 2024

loopy-lim Sep 14, 2024

loopy-lim Sep 13, 2024

smb0123 Sep 14, 2024

loopy-lim Sep 13, 2024

smb0123 Sep 14, 2024 •

edited

Loading

loopy-lim Sep 14, 2024

loopy-lim Sep 13, 2024

loopy-lim Sep 13, 2024

smb0123 Sep 14, 2024 •

edited

Loading

loopy-lim Sep 14, 2024

smb0123 Sep 14, 2024

loopy-lim Sep 13, 2024

loopy-lim Sep 13, 2024

loopy-lim Sep 13, 2024 •

edited

Loading

smb0123 Sep 14, 2024 •

edited

Loading

loopy-lim Sep 14, 2024

loopy-lim Sep 14, 2024

smb0123 Sep 14, 2024

smb0123 Sep 14, 2024

loopy-lim Sep 14, 2024

smb0123 Sep 14, 2024

loopy-lim Sep 13, 2024

feat: 칸반 보드 페이지에서 지원자의 지원 상태를 카드에 보여준다. #197

feat: 칸반 보드 페이지에서 지원자의 지원 상태를 카드에 보여준다. #197

Conversation

smb0123 commented Sep 13, 2024

주요 변경사항

리뷰어에게...

관련 이슈

체크리스트

geongyu09 left a comment

Choose a reason for hiding this comment

geongyu09 Sep 13, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

2yunseong left a comment

Choose a reason for hiding this comment

loopy-lim left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

smb0123 Sep 14, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

smb0123 Sep 14, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

smb0123 Sep 14, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

loopy-lim Sep 13, 2024 • edited Loading

Choose a reason for hiding this comment

smb0123 Sep 14, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

geongyu09 Sep 13, 2024 •

edited

Loading

smb0123 Sep 14, 2024 •

edited

Loading

smb0123 Sep 14, 2024 •

edited

Loading

smb0123 Sep 14, 2024 •

edited

Loading

loopy-lim Sep 13, 2024 •

edited

Loading

smb0123 Sep 14, 2024 •

edited

Loading