feat: 충전소 상세 정보 조회기능을 개선하고, 누적 고장 신고 확인 기능을 구현한다 #245

gabrielyoon7 · 2023-07-30T09:52:23Z

📄 Summary

누적 신고 횟수가 뜨는 기능 구현했습니다.
구현하면서 디자인 전면 개편했고, 일부 타입도 손봤습니다.

🕰️ Actual Time of Completion

5시간

🙋🏻 More

close #238

- reportCount 프로퍼티 추가

- 간격 조절

github-actions · 2023-07-30T09:56:44Z

🚀storybook: https://storybook.carffe.in/

github-actions · 2023-07-30T10:05:08Z

🚀storybook: https://storybook.carffe.in/

github-actions · 2023-07-30T10:08:57Z

🚀storybook: https://storybook.carffe.in/

kyw0716

뷰티풀샷

github-actions · 2023-07-30T10:30:14Z

🚀storybook: https://storybook.carffe.in/

github-actions · 2023-07-30T11:05:41Z

🚀storybook: https://storybook.carffe.in/

github-actions · 2023-07-30T11:06:22Z

🚀storybook: https://storybook.carffe.in/

[#238]

feb-dain

리뷰 확인해주세요~

feb-dain · 2023-07-30T11:06:04Z

frontend/src/components/ui/ClientStationFilters.tsx

@@ -91,7 +91,7 @@ const Container = styled.div`
  position: fixed;
  top: 10px;
  left: 180px;
-  z-index: 999;
+  z-index: 998;


우리 z index도 좀 얘기해봐야겠다ㅋㅋㅋ 그냥 뒀는데 쓰는 곳이 많아지네

기준을 어디로 잡아야 할지 모르겠음

이건 날 잡고 한번 정하자

frontend/src/components/ui/DetailedStationInfo/ChargerCard.tsx

feb-dain · 2023-07-30T11:11:01Z

frontend/src/components/ui/DetailedStationInfo/DetailedStation.stories.tsx

+import DetailedStation from '@ui/DetailedStationInfo/DetailedStation';
+
+const meta = {
+  title: 'UI/DetailedStation',


리팩터링할 때 이름 바꾸기

feb-dain · 2023-07-30T11:16:15Z

frontend/src/components/ui/DetailedStationInfo/DetailedStation.tsx

+  } = station;
+
+  return (
+    <Box px={2} pt={10} css={containerCss}>


여기는 어차피 수정 예정이라고 했으니 넘어갑니다~~

feb-dain · 2023-07-30T11:19:12Z

frontend/src/components/ui/DetailedStationInfo/DetailedStationInfo.tsx

+/**
+ * 이 컴포넌트는 컨테이너의 역할을 하게 될 것입니다.
+ */


꼭 필요한 주석일까요?

센트가 이어서 작업할 때 이어 붙이라고 힌트 남김

feb-dain · 2023-07-30T11:19:43Z

frontend/src/components/ui/DetailedStationInfo/DetailedStationInfo.tsx

+      css={{
+        position: 'fixed',
+        left: '41rem',
+        width: '34rem',
+        zIndex: '999',
+      }}


나중에 분리할 것

feb-dain · 2023-07-30T11:39:56Z

frontend/src/components/ui/DetailedStationInfo/DetailedStationInfo.tsx

+  /**
+   * TODO: 혼잡도도 외부(지금 이 컴포넌트)에서 자식에게 데이터를 주입 해서 렌더링 하는 방식으로 구현이 필요할듯 함. / 1. 데이터 페칭 관련 관심사 분리 가능, 2. 스토리북 테스트 쉬워짐
+   */


나중에 지울 주석이라면 jsdocs로 안 써도 되지 않을까요?? 우리 주석 컨벤션을 그냥 jsdocs로 바꿀까요? ㅋㅋㅋㅋ

우리 주석 컨벤션이 있었나?

넹.. wiki 확인~

feb-dain · 2023-07-30T11:40:53Z

frontend/src/components/ui/DetailedStationInfo/DetailedStationInfo.tsx

+   */
+
+  return (
+    // 여기에서 쓰이는 Box 컴포넌트는 아코디언이 오기 전 까지 임시로 존재합니다. 자식과의 관심사 분리를 위해 분리 조치함.


요긴 jsdocs 형태가 아닌 주석인데 위의 주석들과 차이는 뭘까요?

jsdocs는 전체에 대한 설명으로 달아둔거고 이건 컴포넌트에 대한 설명으로 달아뒀음

아 중간에 jsdocs가 또 나오는구나
그냥 주석 제거하겠음

feb-dain · 2023-07-30T11:47:57Z

frontend/src/components/ui/DetailedStationInfo/ChargerCard.tsx

+        <Text>{CHARGER_STATES[state as keyof typeof CHARGER_STATES]}</Text>
+      </FlexBox>
+      <article>
+        <Text>{CHARGER_TYPES[type as keyof typeof CHARGER_TYPES]}</Text>


Suggested change

<Text>{CHARGER_STATES[state as keyof typeof CHARGER_STATES]}</Text>

</FlexBox>

<article>

<Text>{CHARGER_TYPES[type as keyof typeof CHARGER_TYPES]}</Text>

<Text>{CHARGER_STATES[state]}</Text>

</FlexBox>

<article>

<Text>{CHARGER_TYPES[type]}</Text>

띠용 이게 되네

안되는데?

예? 왜 안 되죠? 저것만 빼면 당연히 오류나는데

bf9fb1b 내가 타입 수정 다 해놔서 오류 안 남!

github-actions · 2023-07-30T12:38:33Z

🚀storybook: https://storybook.carffe.in/

Co-authored-by: Dain Lee <[email protected]>

github-actions · 2023-07-30T13:47:03Z

🚀storybook: https://storybook.carffe.in/

github-actions · 2023-07-30T13:48:33Z

🚀storybook: https://storybook.carffe.in/

github-actions · 2023-07-30T13:50:00Z

🚀storybook: https://storybook.carffe.in/

feb-dain

주석을 다 없애버렸네ㅋㅋㅋ

일단 굿굿 approve

gabrielyoon7 added 20 commits July 29, 2023 20:33

feat: 충전소 상세정보 조회 시 누적 신고 횟수가 보이는 기능 구현

385111a

- reportCount 프로퍼티 추가

refactor: 충전소 상세 정보 위치 개선

8a63d74

refactor: 폴더 구조 개선

20b2692

fix: 오탈자 수정

deff661

fix: 오탈자 수정

8df9c21

refactor: 파일 구조 개선

12b6f82

design: 충전소 기본 정보 디자인 수정

eafa070

Merge remote-tracking branch 'origin' into feat/238

61599c9

design: Alert 적용

e09edbc

feat: 충전소 디자인 컴포넌트 및 업데이트 시간 차이 계산 기능 구현

9a4b71f

test: ChargerCard 추가

44c6ef7

feat: 충전기 상태 코드 설명 객체 추가

767b4e7

refactor: 충전소 상태 객체 정의 및 타입 설정

288abe5

design: 충전기 상태 카드가 2열로 표시되도록 개선

55911da

refactor: latestUpdateTime 타입 수정

6ac895e

design: 충전기 카드 디자인 개선

196608e

test: 날짜 버그 수정

b3ddc96

fix: 타입 에러 수정

17d3fc3

refactor: mock데이터에서 고장 신고가 좀 더 많이 나오도록 개선

37a7196

design: 디자인 일부 개선

3179bea

- 간격 조절

gabrielyoon7 added 🌱 기능추가 새로운 기능 요청입니다 FE 프론트엔드 관련 이슈입니다 🦜 UI UI 디자인을 수정합니다 labels Jul 30, 2023

gabrielyoon7 self-assigned this Jul 30, 2023

gabrielyoon7 requested review from feb-dain and kyw0716 as code owners July 30, 2023 09:52

refactor: 불필요한 코드 제거

756fc45

refactor: 디자인 개선

cc297fa

kyw0716 approved these changes Jul 30, 2023

View reviewed changes

Merge remote-tracking branch 'origin' into feat/238

49a0efc

gabrielyoon7 added 2 commits July 30, 2023 20:00

test: ChargerCard에 auto docs 추가

0e7a8d6

test: ChargerCard, DetailedStation에 auto docs 추가

15817f4

gabrielyoon7 changed the title ~~feat: 충전소 상세 정보 조회기능을 개선하고, 누적 고장 신고 확인 기능을 구현한다.~~ feat: 충전소 상세 정보 조회기능을 개선하고, 누적 고장 신고 확인 기능을 구현한다 Jul 30, 2023

refactor: 필요없는 as 제거

bf9fb1b

[#238]

feb-dain reviewed Jul 30, 2023

View reviewed changes

gabrielyoon7 and others added 3 commits July 30, 2023 22:43

Update frontend/src/components/ui/DetailedStationInfo/ChargerCard.tsx

180e1e0

Co-authored-by: Dain Lee <[email protected]>

refactor: prop 사용 코드 개선

b1b99ef

refactor: 주석 제거

6b07778

gabrielyoon7 requested a review from feb-dain July 30, 2023 13:47

feb-dain approved these changes Jul 30, 2023

View reviewed changes

gabrielyoon7 merged commit 22d49f8 into develop Jul 30, 2023
2 checks passed

gabrielyoon7 deleted the feat/238 branch July 30, 2023 14:32

feat: 충전소 상세 정보 조회기능을 개선하고, 누적 고장 신고 확인 기능을 구현한다 #245

feat: 충전소 상세 정보 조회기능을 개선하고, 누적 고장 신고 확인 기능을 구현한다 #245

Conversation

gabrielyoon7 commented Jul 30, 2023 • edited by github-actions bot Loading

📄 Summary

🕰️ Actual Time of Completion

🙋🏻 More

github-actions bot commented Jul 30, 2023

github-actions bot commented Jul 30, 2023

github-actions bot commented Jul 30, 2023

kyw0716 left a comment

Choose a reason for hiding this comment

github-actions bot commented Jul 30, 2023

github-actions bot commented Jul 30, 2023

github-actions bot commented Jul 30, 2023

feb-dain left a comment

Choose a reason for hiding this comment

feb-dain Jul 30, 2023 • 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

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

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

github-actions bot commented Jul 30, 2023

github-actions bot commented Jul 30, 2023

github-actions bot commented Jul 30, 2023

github-actions bot commented Jul 30, 2023

feb-dain left a comment

Choose a reason for hiding this comment

gabrielyoon7 commented Jul 30, 2023 •

edited by github-actions bot

Loading

feb-dain Jul 30, 2023 •

edited

Loading