공지사항 목록 컴포넌트 / 공지사항 상세 컴포넌트 UI 구현 / 공지사항 ROUTER 설정 #749

Gilpop8663 · 2023-10-15T15:26:49Z

🔥 연관 이슈

close: #741

📝 작업 요약

공지사항 목록 컴포넌트 구현 및 페이지 구현
공지사항 상세 컴포넌트 구현 및 페이지 구현
공지사항 router 설정

⏰ 소요 시간

3시간

🔎 작업 상세 설명

공지사항 상세 페이지를 구현

-.VoTogether.-.Brave.2023-10-16.00-12-48.mp4

-.VoTogether.-.Brave.2023-10-16.00-14-01.mp4

공지사항 목록 페이지를 구현

-.VoTogether.-.Brave.2023-10-16.00-25-29.mp4

대쉬보드에 공지사항 보러가기 추가

공지사항 router 설정

/notices : 공지사항 목록 페이지
/notices/:id 공지사항 상세 페이지

github-actions · 2023-10-15T15:28:09Z

⚡️ Lighthouse report!

Category	Score
🟠 Performance	61
🟠 Accessibilty	89
🟢 SEO	100
🟠 PWA	89

Category	Score
🟢 First Contentful Paint	0.8 s
🟠 Largest Contentful Paint	3.6 s
🔴 Total Blocking Time	2,360 ms
🟢 Cumulative Layout Shift	0
🟢 Speed Index	3.1 s

inyeong-kang

상수화랑 시맨틱 태그 관련 코멘트 남겼습니다😄

inyeong-kang · 2023-10-17T08:21:20Z

frontend/src/components/notice/NoticeList/index.tsx

+ /**
+ * yyyy-mm-dd 형식
+ */
+ createdAt: string;


StringDate 타입 재사용 어떠신가요?

제안해주신대로 적용해보았습니다

inyeong-kang · 2023-10-17T08:22:24Z

frontend/src/components/notice/NoticeDetail/index.tsx

+ theme="blank"
+ onClick={() => {
+ navigate('/notices');
+ }}


PATH.NOTICE 어떠신가요?

좋은 제안 감사합니다

inyeong-kang · 2023-10-17T08:26:38Z

frontend/src/pages/notice/NoticeListPage/style.ts

@@ -0,0 +1,25 @@
+import { styled } from 'styled-components';
+
+export const Container = styled.div`


div 대신 main 이나 section 어떠신가요?

제안해주셔서 감사해요 main으로 했습니다~

inyeong-kang · 2023-10-17T08:27:32Z

frontend/src/routes/router.tsx

+ <>
+ <NoticeDetailPage />
+ <RouteChangeTracker />
+ </>


오 공지사항 목록이랑 상세도 RouteChangeTracker 를 추가해주셨군요👍👍

inyeong-kang · 2023-10-17T08:30:11Z

fe-리뷰완

chsua

어떻게 이렇게 빠르게 만드시는 거죠???
대단해요 우스
페이지가 여러 개이고 새로운 컴포넌트도 여러 개 인데 빠르게 만드는 능력 부럽습니다!
몇 가지 제안 및 코멘트 확인해주세요!!
고생하셨습니다!!!!

chsua · 2023-10-17T08:19:46Z

frontend/src/components/notice/NoticeDetail/index.tsx

+interface NoticeDetailProps {
+ title: string;
+ content: string;
+ createdAt: string;


혹시 그 StringDate로 하지 않으신 이유가 있으신가요??

Notice 타입을 다른 PR에서 해서 타입 적용하는데 어려움이 있었어요 ㅠㅠ

제안해주신대로 StringDate로 변경했습니다

chsua · 2023-10-17T08:25:19Z

frontend/src/components/notice/NoticeDetail/style.ts

+export const Title = styled.h1`
+ margin-top: 20px;
+
+ font: var(--text-title);


이거 조금 작은거 같은데 제가 알림 PR에다가 이거보다 큰 --text-page-title인가,, 만들었는데 나중에 그걸로 바꿔도 좋을 것 같아요.

chsua · 2023-10-17T08:29:53Z

frontend/src/components/notice/NoticeDetail/style.ts

+ white-space: pre-wrap;
+`;
+
+export const ButtonContainer = styled.div`


데스크탑에서는 하단에 홈으로 가기 버튼이 없어도 괜찮을 것 같아요!!

아래와 같이 수정해보았습니다~

chsua · 2023-10-17T08:30:37Z

frontend/src/components/notice/NoticeList/NoticeItem/index.tsx

+ /**
+ * yyyy-mm-dd 형식
+ */
+ createdAt: string;


DateString처럼 이것도 타입 강화하는건 어떻게 생각하시나요?

chsua · 2023-10-17T08:31:18Z

frontend/src/components/notice/NoticeList/NoticeItem/index.tsx

+ createdAt: string;
+}
+export default function NoticeItem({ id, title, createdAt }: NoticeItemProps) {
+ const createdDate = createdAt.slice(0, 10);


들어오는 내용이 yyyy-mm-dd 형식인데 방어코드로 한번 더 잘라주는 건가요?

시간은 안보여주는 디자인으로 구현해서 잘라서 보여줬어요

yyyy-mm-dd 형식으로욤

헷갈리는 주석을 때문에 혼동이 와서 주석을 삭제했어요 🔥

chsua · 2023-10-17T08:34:07Z

frontend/src/components/notice/NoticeList/NoticeItem/style.ts

+
+ font: var(--text-body);
+
+ transition: color 0.2s ease-in-out;


옹 hover를 위한 애니메이션인가요???

&:hover { color: rgba(51, 122, 183, 1); }

여기 안에 넣지 않으신 이유가 있나요??

hover안에 transition을 두면 마우스를 치웠을 때는 transition 속성이 작동하지 않아서 hover 밖에 위치시켜주었어요

chsua · 2023-10-17T08:35:51Z

frontend/src/components/notice/NoticeList/index.tsx

+ /**
+ * yyyy-mm-dd 형식
+ */
+ createdAt: string;


모든 공지 컴포넌트에서 yyyy-mm-dd 형식으로 사용된다면 api에서 처음에 데이터를 변환해주시는건 어떻게 생각하세요?

제안해주신대로 api에서 데이터를 변환시켜 주었습니다 👍👍👍

구현하는 과정에서 StringDateOnly 타입이 추가되었어요

/** * yyyy-mm-dd HH-MM */ export type StringDate = `${number}-${number}-${number} ${number}:${number}`; /** * yyyy-mm-dd */ export type StringDateOnly = `${number}-${number}-${number}`;

chsua · 2023-10-17T08:40:14Z

frontend/src/pages/notice/NoticeListPage/index.tsx

+ <Layout isSidebarVisible isChannelTalkVisible={false}>
+ <S.Container>
+ <S.Title tabIndex={0}>보투게더 소식</S.Title>
+ <NoticeList noticeList={MOCK_NOTICE_LIST} />


페이지에서 공지사항리스트를 주입시키신다면 서스펜스와 에러바운더리 처리가 어려울 것 같은데,
혹시 api요청은 페이지에서 하실 예정이신가요?? 아님 공지 목록에서 하실 예정이신가요??🤔

공지 목록을 감싸는 NoticeListFetcher를 만들려고 했었습니다

chsua · 2023-10-17T08:46:14Z

frontend/src/routes/router.tsx

+ </>
+ ),
+ },
+ {


{ path: PATH.NOTICES, element: ( <> <NoticeListPage /> <RouteChangeTracker /> </> ), errorElement: <ErrorPage />, children: [ { path: ':noticeId', element: ( <> <NoticeDetailPage /> <RouteChangeTracker /> </> ), }, ], };

이런 코드는 어떠세요??

이렇게 해보았는데요

notices/1 로 url이 변했을 때 :noticeId로 인식을 못하네요

/notices가 먼저 동작하나봐요

그래서 원래의 코드로 다시 돌려놓았습니다

chsua · 2023-10-17T08:48:31Z

fe-리뷰완

…ether into feat/#741

Gilpop8663 · 2023-10-17T15:58:03Z

두 분이 제안해주신 내용을 코드로 반영해보았습니다

구현 과정에서 StringDateOnly 타입이 새로 생겼어요 🔥

fe-리뷰요청

같은 파일에 있어야 코드 가독성이 높아질 것으로 생각했습니다

inyeong-kang

피드백 반영된 코드 확인했습니다~ 타입명 관련 코멘트 하나 남겼어요!

fe-리뷰완

inyeong-kang · 2023-10-17T23:51:23Z

frontend/src/types/time.ts

+/**
+ * yyyy-mm-dd
+ */
+export type StringDateOnly = `${number}-${number}-${number}`;


day까지만 포함시키겠다는 의미로
StringDateUpToDay 어떠신가요? (gpt의 도움을 받았습니다)

더 명확하게 표현되는 것 같아 반영했습니다~

Gilpop8663 added 9 commits October 13, 2023 17:53

feat: (#741) 모바일 버전 공지사항 목록 구현

7a9a4a4

feat: (#741) PC 버전 공지사항 리스트 스타일 구현

7f841f3

feat: (#741) 공지사항 세부 내용 컴포넌트 구현

efc71a3

feat: 공지사항 리스트 페이지 구현

b69cf4b

feat: (#741) 공지사항 세부 페이지 구현

de57115

feat: (#741) 공지사항 목록, 상세 페이지 router 설정

962d1ae

feat: (#741) 공지사항 웹 접근성 개선

5b1f7f9

style: (#741) 공지사항 목록에서는 채널톡 안보이도록 설정 및 padding 속성 설정

6118863

style: (#741) 공지사항 목록 ...이 짧게 설정되어서 width 값 재설정

94de948

Gilpop8663 added FE 🐾 개발 labels Oct 15, 2023

Gilpop8663 requested review from inyeong-kang and chsua October 15, 2023 15:26

Gilpop8663 self-assigned this Oct 15, 2023

chore: (#741) 디자인 변경으로 인한 공지사항 보러가기 삭제

3c60fa1

inyeong-kang approved these changes Oct 17, 2023

View reviewed changes

chsua approved these changes Oct 17, 2023

View reviewed changes

Gilpop8663 added 8 commits October 17, 2023 23:57

Merge branch 'dev' of https://github.com/woowacourse-teams/2023-votog…

4795a40

…ether into feat/#741

refactor: (#741) 홈과 공지사항 목록 url을 PATH로 변경

98375d0

refactor :(#741) 공지사항 목록을 감싸는 부모를 div에서 main으로 변경

4000618

refactor: (#741) 날짜를 string에서 StringDate로 타입 변경

bb9881b

style: (#741) 데스크탑일때 홈으로 버튼 안보이도록 설정

0f730f9

chore: (#741) 읽은 사람에게 혼동을 주는 주석 제거

9ce18cd

chore: (#741) router의 :id를 :noticeId로 이름 변경

41aec0a

refactor: (#741) StringDateOnly 타입 추가 및 api에서 생성 날짜를 변환시켜 날짜만 존재하도록 수정

284b2e1

refactor: (#741) Response를 Omit하여 만든 타입의 가독성을 높이기 위해 Response 타입을 이동

60464df

같은 파일에 있어야 코드 가독성이 높아질 것으로 생각했습니다

inyeong-kang approved these changes Oct 17, 2023

View reviewed changes

Gilpop8663 added 2 commits October 18, 2023 12:10

refactor: (#741) StringDateOnly Type 이름 변경

fd69f50

chore: (#741) dev 브런치와 충돌 해결

4d83d1a

Gilpop8663 merged commit 8b1872e into dev Oct 18, 2023
1 check passed

inyeong-kang deleted the feat/#741 branch October 18, 2023 04:43

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

공지사항 목록 컴포넌트 / 공지사항 상세 컴포넌트 UI 구현 / 공지사항 ROUTER 설정 #749

공지사항 목록 컴포넌트 / 공지사항 상세 컴포넌트 UI 구현 / 공지사항 ROUTER 설정 #749

Gilpop8663 commented Oct 15, 2023

github-actions bot commented Oct 15, 2023 •

edited

Loading

inyeong-kang left a comment

inyeong-kang Oct 17, 2023

Gilpop8663 Oct 17, 2023

inyeong-kang Oct 17, 2023

Gilpop8663 Oct 17, 2023

inyeong-kang Oct 17, 2023

Gilpop8663 Oct 17, 2023

inyeong-kang Oct 17, 2023

inyeong-kang commented Oct 17, 2023

chsua left a comment

chsua Oct 17, 2023

Gilpop8663 Oct 17, 2023

chsua Oct 17, 2023

Gilpop8663 Oct 17, 2023

chsua Oct 17, 2023

Gilpop8663 Oct 17, 2023

chsua Oct 17, 2023

chsua Oct 17, 2023

Gilpop8663 Oct 17, 2023

Gilpop8663 Oct 17, 2023

chsua Oct 17, 2023

Gilpop8663 Oct 17, 2023

chsua Oct 17, 2023

Gilpop8663 Oct 17, 2023

chsua Oct 17, 2023

Gilpop8663 Oct 17, 2023

chsua Oct 17, 2023

Gilpop8663 Oct 17, 2023

chsua commented Oct 17, 2023

Gilpop8663 commented Oct 17, 2023

inyeong-kang left a comment

inyeong-kang Oct 17, 2023

Gilpop8663 Oct 18, 2023

		@@ -0,0 +1,25 @@
		import { styled } from 'styled-components';

		export const Container = styled.div`

공지사항 목록 컴포넌트 / 공지사항 상세 컴포넌트 UI 구현 / 공지사항 ROUTER 설정 #749

공지사항 목록 컴포넌트 / 공지사항 상세 컴포넌트 UI 구현 / 공지사항 ROUTER 설정 #749

Conversation

Gilpop8663 commented Oct 15, 2023

🔥 연관 이슈

📝 작업 요약

⏰ 소요 시간

🔎 작업 상세 설명

github-actions bot commented Oct 15, 2023 • edited Loading

inyeong-kang left a 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

inyeong-kang commented Oct 17, 2023

chsua left a 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

chsua commented Oct 17, 2023

Gilpop8663 commented Oct 17, 2023

inyeong-kang left a 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 Oct 15, 2023 •

edited

Loading