기사의 제목(헤드라인)을 표시하는 부분 생성 #10

stopmin · 2024-07-01T18:29:09Z

작업 요약

기사 보기에 헤드라인 부분을 생성하였습니다!

작업 상세 설명

Chip은 레퍼런스 참고해서 작성했습니다!

리뷰 요구 사항

chip은 피그마에 없어서 일단 생략했습니다! 만들어두기만 하고 붙이지 않았습니다.
그리고 색상 두가지 그라데이션에 활용하는 색 추가해뒀습니다!

미리 보기

Headline 생성

…SUE-9 # Conflicts: # src/app/components/Headline.tsx

서연 리뷰 반영

…SUE-9

stopmin · 2024-07-03T16:33:10Z

@yeonddori

import Chip from '@mui/material/Chip';
import { useTheme } from '@mui/material/styles';

const TagChip = ({ label }: { label: string }) => {
  const theme = useTheme();

  return (
    <Chip
      label={label}
      sx={{
        color: '#000000',
        display: 'flex',
        alignItems: 'center',
        backgroundColor: theme.palette.primary.main,
      }}
    />
  );
};

export default TagChip;

여기 background Color도 테마로 지정한 색을 사용해도 되나요? 여기서 "primary"로 하면 안될 것 같은데 어떻게 하면 좋을지 궁금합니다!

stopmin · 2024-07-03T16:37:08Z

일단 아래와 같이 수정했습니다!!

    <Chip
      label={label}
      color="primary"
      sx={{
        color: '#000000',
        display: 'flex',
        alignItems: 'center',
      }}
    />

yeonddori

제목은 h1로 하는게 맞나욤?

맞습니다~! SEO 및 접근성 측면에서 h1 태그가 매우 중요한 역할을 하기 때문에, 제목은 h1로 명시해주는 것이 좋습니다! 나중에 오버라이드를 통해 h1의 사이즈를 사용자 지정으로 해놓으면, 따로 fontSize 없이 h1만 써도 됩니다! 이 부분은 같이 논의해서 사이즈를 정해봐요~!

네이밍이나 전체적인 구조에 대해서 리뷰 부탁드립니당!!!

모두 완벽한 것 같습니다!! 마음에 들어요😊

Chip은 따로 빼놨는데 괜찮을까욤?

너무 잘하셨습니다!! Chip도 하나의 컴포넌트이기에, 별도의 파일로 지정해두는 것이 맞습니다!

지금 Chip 안에도 목 데이터를 두고 있는데 이전 PR에서 카테고리 5개를 정의한 것으로 아는데 그 PR이 머지되면 그곳에서 가져와서 쓰도록 수정해야할까요?

Chip 컴포넌트가 쓰일 때는 해당 기사가 어떤 카테고리인지 구분하는 용도로 쓰이게 될 텐데, 그렇게 되면 API로 기사에 대한 정보가 넘어올 때 카테고리도 무엇인지 같이 넘어오겠죠? 그렇기에 Tab 부분의 카테고리 mock 데이터와는 조금 다르게 될 것 같습니다!

그리고 mock 데이터는 컴포넌트를 활용하는 페이지단에서 적용이 되기 때문에, 현재 PR 코드에서는 수정할 부분이 없습니다 ㅎㅎ 페이지단에서 데이터 적용을 하게 된다면 이런 형식으로 하게 되겠네요~!

categories={articleInfo.map((item) => item.category)}

리뷰 뭐든 다 조씁니다!! 부탁드립니다!!!

너무 잘 구현하셔서 깜짝 놀랐습니다😯
함수 정의와 코드 지워달라는 부분만 해주시면 완벽한 것 같습니다~!

yeonddori · 2024-07-03T18:11:39Z

src/components/TagChip.tsx

+    <Chip
+      label={label}
+      color="primary"
+      sx={{
+        color: '#000000',
+        display: 'flex',
+        alignItems: 'center',
+      }}
+    />


이렇게 두신 거 좋습니다~~
잘 수정하셨는데요!👍

yeonddori · 2024-07-03T18:41:46Z

src/components/Headline.tsx

+  categories: string[];
+}
+
+const Headline: React.FC<HeadlineProps> = ({ title, uploadDate, viewCount, source, categories }) => {


React.FC는 children을 암시적으로 가지고 있으며 타입스크립트의 제네릭 문법을 지원하지 않는 등의 단점으로 인해 사용을 지양하고 있습니다!
따라서 저희가 쓰기로 한 함수 정의 방법 그대로 써주시면 좋을 것 같습니다~!

const Headline = ({ title, uploadDate, viewCount, source, categories }: HeadlineProps) => {

헛 넵넵~!! 수정하고 알려드리겠심다!

yeonddori · 2024-07-03T18:58:16Z

src/components/Headline.tsx

+const Headline: React.FC<HeadlineProps> = ({ title, uploadDate, viewCount, source, categories }) => {
+  return (
+    <Box>
+      <Typography variant="h1" sx={{ fontSize: '2rem', fontWeight: 'bold', marginBottom: '1rem' }}>


나중에 폰트 사이즈도 따로 지정해야겠네요~
일단은 이렇게 둡시다! 굿이에용!

조씁니다!

yeonddori · 2024-07-03T19:09:52Z

src/components/TagChip.tsx

+import Chip from '@mui/material/Chip';
+import { useTheme } from '@mui/material/styles';
+
+const TagChip = ({ label }: { label: string }) => {


Prop이 하나일 때는 따로 interface를 정의하지 말고 지금 작성하신 코드처럼 이렇게 쓰는 걸로 하죠!
interface를 쓰면 괜히 코드만 더 길어지는 기분..

오케이이이

yeonddori · 2024-07-03T19:11:48Z

src/components/TagChip.tsx

@@ -0,0 +1,20 @@
+import Chip from '@mui/material/Chip';
+import { useTheme } from '@mui/material/styles';


이 코드는 질문해주신 부분을 올바르게 수정하시면서 실질적 쓰임이 없어졌기에 지워주시면 될 것 같아요~!

yeonddori · 2024-07-03T19:12:01Z

src/components/TagChip.tsx

+import { useTheme } from '@mui/material/styles';
+
+const TagChip = ({ label }: { label: string }) => {
+  const theme = useTheme();


마찬가지로 이 코드도 지워주시면 됩니다!

- 그라데이션 다크 블루 - 그라데이션 라이트 블루

vercel · 2024-07-15T15:38:25Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
gyeongdan-frontend	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jul 15, 2024 6:13pm

yeonddori · 2024-07-15T17:35:39Z

src/components/Headline.tsx

+const Headline = ({ title, uploadDate, viewCount, source }: HeadlineProps) => {
+  return (
+    <Box>
+      <Typography sx={{ fontSize: '2rem', fontWeight: 'bold', marginBottom: '1rem' }} variant="h1">


저희 일단은 반응형 없이 고정된 값으로 구현하고 있어서 rem으로 안 쓰셔도 될 것 같습니다!! 그리고 variant="h1"을 하면 이미 fontSize와 fontWeight가 피그마값대로 고정되어 있으니 아래와 같이 모두 없애도 될 것 같습니다!

<Typography mb={1} variant="h1">

yeonddori · 2024-07-15T17:43:16Z

src/components/Headline.tsx

+      <Box sx={{ display: 'flex', alignItems: 'center', marginBottom: '1rem' }}>
+        <Typography sx={{ marginRight: '0.5rem' }} variant="body1">
+          {uploadDate} | 조회 {viewCount}회 | {source}
+        </Typography>
+      </Box>


사실 Box로 flex를 써도 무방하지만, MUI에 FlexBox인 Stack이란 컴포넌트가 있더라구요! 그래서 flex를 사용하실 땐 Stack으로 사용하면 더 편하게 구현하실 수 있을 것 같아요!!
또한 Typography에서 marginRight를 주어서 뒤에 쓰이는 게 없기 때문에 빼주셔도 될 것 같습니다! 나중에 TagChip을 연결할 때 고려하는 게 좋을 것 같아요!
피그마에서 폰트 사이즈를 볼 때 variant도 h4를 써주시면 좋을 것 같아요!

<Stack alignItems="center" direction="row"> <Typography variant="h4"> {uploadDate} | 조회 {viewCount}회 | {source} </Typography> </Stack>

와우... 대박!!! 거의 뜯어고쳐주셨네요 ㄷㄷ... 앞으로는 Flex 쓸 때는 Stack!!

yeonddori · 2024-07-15T17:45:53Z

src/components/TagChip.tsx

+        display: 'flex',
+        alignItems: 'center',


이미 Chip 컴포넌트 자체적으로 구현이 다 되어있기에 display와 alignItems 속성은 없애주셔도 될 것 같습니다!

아!! 맞네 오키욐!!

yeonddori · 2024-07-15T17:46:55Z

src/constants/color.ts

저도 색상 하나를 추가했어서 아마 이 파일에서 충돌이 일어날텐데, 풀 받아서 잘 해결해주세용!!

오키오키!!

yeonddori

굿이에용

stopmin added 2 commits July 2, 2024 03:06

TagChip

5ee5169

Headline 생성

d4772c8

stopmin added the Feature label Jul 1, 2024

stopmin requested a review from yeonddori July 1, 2024 18:29

stopmin self-assigned this Jul 1, 2024

stopmin added 5 commits July 2, 2024 03:31

Headline 생성

8930f96

Headline 생성

Merge remote-tracking branch 'origin/feature/ISSUE-9' into feature/IS…

0b9d5f6

…SUE-9 # Conflicts: # src/app/components/Headline.tsx

서연 리뷰 반영

e90a13d

서연 리뷰 반영

2e053b1

서연 리뷰 반영

Merge remote-tracking branch 'origin/feature/ISSUE-9' into feature/IS…

295db0b

…SUE-9

color = "primary"로 수정

038bb38

yeonddori reviewed Jul 3, 2024

View reviewed changes

stopmin added 4 commits July 16, 2024 00:22

Merge branch 'main' into feature/ISSUE-9

8034e14

feat: 색상 두가지 추가

88e8b81

- 그라데이션 다크 블루 - 그라데이션 라이트 블루

refactor: 함수 선언방식 수정

b1dd7ef

feat: Chip 색상 수정

8b9dbbf

vercel bot had a problem deploying to Preview July 15, 2024 15:38 Failure

refactor: lint 적용

7f114f0

vercel bot had a problem deploying to Preview July 15, 2024 17:03 Failure

refactor: lint 적용

dd89aad

vercel bot deployed to Preview July 15, 2024 17:05 View deployment

yeonddori reviewed Jul 15, 2024

View reviewed changes

refactor: 리뷰 반영

a354f45

vercel bot deployed to Preview July 15, 2024 18:01 View deployment

refactor: flex 제거

8f997b6

vercel bot had a problem deploying to Preview July 15, 2024 18:07 Failure

yeonddori approved these changes Jul 15, 2024

View reviewed changes

stopmin added 2 commits July 16, 2024 03:10

refactor: lint 적용

82bbed1

Merge branch 'main' into feature/ISSUE-9

72a3afb

vercel bot deployed to Preview July 15, 2024 18:11 View deployment

refactor: 주석 제거

1c3ad9b

vercel bot deployed to Preview July 15, 2024 18:13 View deployment

stopmin merged commit f19a259 into main Jul 15, 2024
3 checks passed

stopmin deleted the feature/ISSUE-9 branch July 15, 2024 18:14

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

기사의 제목(헤드라인)을 표시하는 부분 생성 #10

기사의 제목(헤드라인)을 표시하는 부분 생성 #10

stopmin commented Jul 1, 2024 •

edited

Loading

stopmin commented Jul 3, 2024 •

edited

Loading

stopmin commented Jul 3, 2024

yeonddori left a comment

yeonddori Jul 3, 2024

stopmin Jul 9, 2024

yeonddori Jul 3, 2024

stopmin Jul 9, 2024

yeonddori Jul 3, 2024

stopmin Jul 9, 2024

yeonddori Jul 3, 2024

stopmin Jul 9, 2024

yeonddori Jul 3, 2024

yeonddori Jul 3, 2024

stopmin Jul 9, 2024

vercel bot commented Jul 15, 2024 •

edited

Loading

yeonddori Jul 15, 2024

stopmin Jul 15, 2024

yeonddori Jul 15, 2024

stopmin Jul 15, 2024

yeonddori Jul 15, 2024

stopmin Jul 15, 2024

yeonddori Jul 15, 2024

stopmin Jul 15, 2024

yeonddori left a comment

		@@ -0,0 +1,20 @@
		import Chip from '@mui/material/Chip';
		import { useTheme } from '@mui/material/styles';

기사의 제목(헤드라인)을 표시하는 부분 생성 #10

기사의 제목(헤드라인)을 표시하는 부분 생성 #10

Conversation

stopmin commented Jul 1, 2024 • edited Loading

관련 이슈

작업 요약

작업 상세 설명

리뷰 요구 사항

미리 보기

stopmin commented Jul 3, 2024 • edited Loading

stopmin commented Jul 3, 2024

yeonddori 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

vercel bot commented Jul 15, 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

yeonddori left a comment

Choose a reason for hiding this comment

stopmin commented Jul 1, 2024 •

edited

Loading

stopmin commented Jul 3, 2024 •

edited

Loading

vercel bot commented Jul 15, 2024 •

edited

Loading