팀원소개서 이슈 카드 리스트 #51

100Gyeon · 2022-01-12T21:49:24Z

⛓ Related Issues

close 팀원소개서 이슈 카드 리스트 #29

📋 작업 내용

피드백 남긴 인원의 프로필 이미지를 최대 3개 포함하고 있는 IssueMemberList 컴포넌트 구조화 및 스타일링
팀 프로필과 사용자 이름을 포함하고 있는 IssueTeamInfo 컴포넌트 구조화 및 스타일링
IssueCard, IssueCardList 컴포넌트 구조화 및 스타일링
이슈 카드 누르면 상세(피드백) 페이지로 이동하도록 구현

📌 PR Point

[궁금한 점]

리액트 최적화를 위해서 index를 사용하지 않는 것이 좋다고 배웠는데,
unique key를 만들기 위해서 아래와 같이 작성하게 되었습니다. 더 좋은 방법이 없을까요😥
```
<div>
  {issueMembers.slice(0, MAX_IMAGE_NUM).map((member, index) => (
    <img key={`Team ${id}-Issue ${issueNumber}-Index ${index}`} src={member} />
  ))}
</div>
```

[기타]

로고 클릭했을 때 "/home/neoga"로 이동할 수 있도록 you -> neoga 수정

font-size: ${size};에 px이 없어서 font-size: ${size}px;로 변경

export const FONT = ({ size, weight, position }: Font) => css`
  font-size: ${size}px;
  font-weight: ${getFontWeight(weight)};
  letter-spacing: ${getLetterSpacing(position)};
`;

👀 스크린샷 / GIF / 링크

https://naegasogaeseo-dev.kro.kr/home/team

…eo/Naega-Web into feat/#29

… feat/#29

SeojinSeojin · 2022-01-12T21:49:54Z

울 웹쁜이 고생많았어 ! 여기서 미리보기로 보면서 쉬어~

SeojinSeojin

새벽 6시라니.. 넘 수고했어ㅜㅜㅜㅜ
컴포넌트 안에 데이터 있는 부분들만 분리하면 될듯!!👍✨

SeojinSeojin · 2022-01-13T02:52:41Z

src/presentation/pages/Team/Main/index.tsx


 function TeamMain() {
  const { teamID } = useParams();
-  return <div>팀원소개서 메인, 팀 번호는 {teamID}</div>;
+  const issueListData = [


여기서 데이터를 받기보다는 목데이터로 받아오는 방식을 써봐야 할 것 같아!!
이렇게 하면 여기서 쓴거랑 서버에서 준거랑 변수명 등이 다를 때 다시 처리하는 것도 번거롭고 바꿀 내용들이 많아질 것 같아!

#43
#23

이 두 개 참고해서 함 해볼래?

infrastructure 폴더의 api의 team.ts에 getTeamIssue(teamID: string) : Promise 이런 식으로 멤버 함수를 만들어주고

types의 team.ts에 요청 응답 값으로 받을 값들을 정의해주고 (밑에 있는 프롭들을 그대로 인터페이스로 따면 될듯!)

여기 있는 목데이터를 싹다 mock의 team.data.ts에 TEAM_ISSUE_INFO를 만들어서 옮겨주고

mock의 team.ts에 getTeamIssueInfo 함수를 만들어서 리턴한 다음에

이 컴포넌트 안에서는 async 요청으로 받아오기만 하면 될듯해!!

좋아좋아 목데이터 사용해볼게 !!

SeojinSeojin · 2022-01-13T02:53:10Z

src/presentation/pages/Team/Main/index.tsx

+      id: 1,
+      issueNumber: 1,


id랑 issueNumber이 둘 다 있어야 할 이유가 있을까?
하나만 있어도 괜찮을 것 같아!!

나는 id를 teamID로 생각하고 줬는데 수정해 볼게 !!

SeojinSeojin · 2022-01-13T02:54:40Z

src/presentation/pages/Team/Main/index.tsx

+
+  const navigate = useNavigate();
+  const handleIssueClick = (id: number, issueNumber: number) => {
+    navigate(`/team/${id}/${issueNumber}`);


id 말고 teamID를 넘겨줘야 할 것 같아!! 여기서 id는 이슈의 아이디니까...

팀아이디/이슈아이디 이렇게 되어야 하는데 이슈아이디/이슈아이디로 넘어가는 것 같아!

SeojinSeojin · 2022-01-13T02:55:50Z

src/presentation/style/common/font-style.ts

@@ -30,7 +30,7 @@ const getLetterSpacing = (position: Font['position']) => {
 };

 export const FONT = ({ size, weight, position }: Font) => css`
-  font-size: ${size};
+  font-size: ${size}px;


와아앙 고쳐주어서 고마우이~!!!!

SeojinSeojin · 2022-01-13T02:57:10Z

src/presentation/pages/Home/Team/index.tsx

@@ -32,6 +33,41 @@ function HomeTeam() {
    },
  ];

+  const issueListData = [


이거도 마찬가지로 여기서 선언하지 말고 api에서 받아와서 비동기로 처리하는 방식을 써봐야 할 것 같아!!

… feat/#29

SeojinSeojin · 2022-01-13T05:25:31Z

울 웹쁜이 고생많았어 ! 여기서 미리보기로 보면서 쉬어~

Hyoin-Kim

달리느라 고생많았어ㅜ~~!!!

Hyoin-Kim · 2022-01-13T05:35:12Z

src/presentation/components/common/IssueTeamInfo/style.ts

+  & > * + * {
+    margin-left: 6px;
+  }


요거는 어디에 사용되는 스타일이야,? * + * 요게 몬지 궁금해

나는 이 컴포넌트 안에 들어있는 모든 태그들의 간격을 6px로 설정하려고 썼어!
인접 형제 결합자(+) 쓰면 한꺼번에 간격 조정할 때 유용해 👍🏻

와 신기하다 고마워 알려줘서!!!

… feat/#29

SeojinSeojin · 2022-01-13T06:25:11Z

울 웹쁜이 고생많았어 ! 여기서 미리보기로 보면서 쉬어~

NamJwong · 2022-01-13T06:32:42Z

src/presentation/components/common/IssueCardList/index.tsx

+        <IssueCard
+          key={issue.teamId}
+          onIssueClick={() => onIssueClick(issue.teamId, issue.issueNumber)}
+          {...issue}


omg 이렇게 할 수 있구나

… feat/#29

SeojinSeojin · 2022-01-13T06:38:09Z

울 웹쁜이 고생많았어 ! 여기서 미리보기로 보면서 쉬어~ 다른 웹쁜이들한테도 자랑해줘~

… feat/#29

SeojinSeojin · 2022-01-13T06:50:55Z

울 웹쁜이 고생많았어 ! 여기서 미리보기로 보면서 쉬어~ 다른 웹쁜이들한테도 자랑해줘~

SeojinSeojin · 2022-01-13T08:03:00Z

울 웹쁜이 고생많았어 ! 여기서 미리보기로 보면서 쉬어~ 다른 웹쁜이들한테도 자랑해줘~

… feat/#29

SeojinSeojin · 2022-01-13T08:10:57Z

울 웹쁜이 고생많았어 ! 여기서 미리보기로 보면서 쉬어~ 다른 웹쁜이들한테도 자랑해줘~

SeojinSeojin · 2022-01-13T08:48:57Z

울 웹쁜이 고생많았어 ! 여기서 미리보기로 보면서 쉬어~ 다른 웹쁜이들한테도 자랑해줘~

SeojinSeojin

데이터 넘 잘 달았다..!! 수고 많았우!!!!1
대신 실제로 서버 통신을 할 때는 teamID가 필요할 것 같아서 그걸 미리 넘겨주어야 할 것 같아!!

SeojinSeojin · 2022-01-13T08:52:01Z

src/infrastructure/api/team.ts

+  getTeamProfile(): Promise<TeamProfileData>;
+  getTeamIssue(): Promise<TeamIssueData>;


팀 프로필이랑 이슈를 받으려면 팀 번호가 있어야 할 것 같아!!
파라미터로 teamID:string을 줘야 할듯해!

팀 상세 페이지 만들 때 참고할게 고마워 ㅎㅎ

미안혀... 고마워....

SeojinSeojin · 2022-01-13T08:54:26Z

src/presentation/components/common/IssueCard/index.tsx

+  teamImage?: string;
+  teamName: string;
+  memberName: string;
+  onIssueClick: (id: number, issueNumber: number) => void;


teamID면 나중에 알아보기 편할 것 가타유~

헉 다 바꾼 줄 알았는데 여기도 남아있었구나 고마워 !!!! 꼼꼼해 😘

SeojinSeojin · 2022-01-13T08:55:15Z

src/presentation/components/common/IssueMemberList/index.tsx

+function IssueMemberList(props: IssueMemberListProps) {
+  const { teamID, issueNumber, issueMembers } = props;
+  const length = issueMembers.length;
+  const MAX_IMAGE_NUM = 3;


상수로 뺀거 진짜 잘했닷!!!

… feat/#29

SeojinSeojin · 2022-01-13T09:02:12Z

울 웹쁜이 고생많았어 ! 여기서 미리보기로 보면서 쉬어~ 다른 웹쁜이들한테도 자랑해줘~

SeojinSeojin · 2022-01-13T09:04:13Z

울 웹쁜이 고생많았어 ! 여기서 미리보기로 보면서 쉬어~ 다른 웹쁜이들한테도 자랑해줘~

SeojinSeojin · 2022-01-13T09:07:44Z

울 웹쁜이 고생많았어 ! 여기서 미리보기로 보면서 쉬어~ 다른 웹쁜이들한테도 자랑해줘~

SeojinSeojin · 2022-01-13T09:23:01Z

울 웹쁜이 고생많았어 ! 여기서 미리보기로 보면서 쉬어~ 다른 웹쁜이들한테도 자랑해줘~

SeojinSeojin · 2022-01-13T09:24:50Z

src/infrastructure/api/team.ts

+  getTeamProfile(): Promise<TeamProfileData>;
+  getTeamIssue(): Promise<TeamIssueData>;


미안혀... 고마워....

SeojinSeojin · 2022-01-13T09:25:31Z

SeojinSeojin · 2022-01-13T09:26:36Z

100Gyeon added 18 commits January 12, 2022 01:32

✨feat: 이슈 카드 리스트 구조화

792162a

🎨design: 이슈 카드 리스트 스타일링

62f2d1f

✨feat: 이슈 카드 하단 구조화 및 스타일링

42cc76f

🔨refactor: props 전달 시 spread 연산자 사용

8f9adde

📝chore: 이슈 카드 필요한 부분에 추가

ee88dd1

Merge branches 'dev' and 'feat/#29' of https://github.com/Neogasogaes…

0402a94

…eo/Naega-Web into feat/#29

🎨design: 겹쳐진 프로필 이미지 스타일링

0844401

Merge branch 'dev' of https://github.com/Neogasogaeseo/Naega-Web into…

340592b

… feat/#29

🎨design: 겹쳐진 프로필 이미지 스타일링

229399f

📝chore: issueMembers 추가

da30fda

✨feat: 이미지 배열 렌더링

5959b82

🎨design: 이슈 카드 상단 이미지 추가

e7ed2d7

🔨refactor: 이슈 카드 구조 수정, css 수정

c9385ea

📝chore: 데이터 텍스트 수정

864355e

📝chore: you -> neoga 텍스트 수정

9c96e1e

✨feat: 이슈 카드 누르면 상세(피드백) 페이지로 이동하도록 구현

e96cf82

🐛fix: px 단위 빠진 것 수정

6b7c58f

📝chore: 텍스트 css 디테일 수정

61998ac

100Gyeon added feature 🎄 기능 개발 layout 🍃 레이아웃 개발 labels Jan 12, 2022

100Gyeon requested review from Hyoin-Kim, SeojinSeojin and NamJwong January 12, 2022 21:49

100Gyeon added this to In progress in 팀원소개서 via automation Jan 12, 2022

100Gyeon self-assigned this Jan 12, 2022

SeojinSeojin requested changes Jan 13, 2022

View reviewed changes

Merge branch 'dev' of https://github.com/Neogasogaeseo/Naega-Web into…

a2b89ce

… feat/#29

Hyoin-Kim approved these changes Jan 13, 2022

View reviewed changes

Merge branch 'dev' of https://github.com/Neogasogaeseo/Naega-Web into…

a5a06af

… feat/#29

NamJwong approved these changes Jan 13, 2022

View reviewed changes

Merge branch 'dev' of https://github.com/Neogasogaeseo/Naega-Web into…

2f13299

… feat/#29

Merge branch 'dev' of https://github.com/Neogasogaeseo/Naega-Web into…

b524c29

… feat/#29

🔨refactor: mock data 받아오는 방식으로 수정

5e625e6

Merge branch 'dev' of https://github.com/Neogasogaeseo/Naega-Web into…

b5515cb

… feat/#29

🔨refactor: mock data 받아오는 방식으로 수정

3d4b34c

SeojinSeojin requested changes Jan 13, 2022

View reviewed changes

Merge branch 'dev' of https://github.com/Neogasogaeseo/Naega-Web into…

4c186a7

… feat/#29

🔨refactor: useRecoilState -> useState 변경

1fb5ee0

📝chore: id -> teamID로 수정

6acbd83

📝chore: teamID의 type을 number에서 string으로 변경

94906de

SeojinSeojin approved these changes Jan 13, 2022

View reviewed changes

100Gyeon merged commit dd81002 into dev Jan 13, 2022

팀원소개서 automation moved this from In progress to Done Jan 13, 2022

100Gyeon deleted the feat/#29 branch January 13, 2022 09:28

100Gyeon added this to Done in 웹 칸반 보드 Jan 13, 2022

100Gyeon mentioned this pull request Jan 15, 2022

팀원소개서 메인, 상세 페이지 수정사항 반영 #85

Merged

4 tasks

		getTeamProfile(): Promise<TeamProfileData>;
		getTeamIssue(): Promise<TeamIssueData>;

팀원소개서 이슈 카드 리스트 #51

팀원소개서 이슈 카드 리스트 #51

Conversation

100Gyeon commented Jan 12, 2022 • edited

⛓ Related Issues

📋 작업 내용

📌 PR Point

[궁금한 점]

[기타]

👀 스크린샷 / GIF / 링크

SeojinSeojin commented Jan 12, 2022

SeojinSeojin 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

SeojinSeojin commented Jan 13, 2022

Hyoin-Kim 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

SeojinSeojin commented Jan 13, 2022

Choose a reason for hiding this comment

SeojinSeojin commented Jan 13, 2022

SeojinSeojin commented Jan 13, 2022

SeojinSeojin commented Jan 13, 2022

SeojinSeojin commented Jan 13, 2022

SeojinSeojin commented Jan 13, 2022

SeojinSeojin 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

SeojinSeojin commented Jan 13, 2022

SeojinSeojin commented Jan 13, 2022

SeojinSeojin commented Jan 13, 2022

SeojinSeojin commented Jan 13, 2022

Choose a reason for hiding this comment

SeojinSeojin commented Jan 13, 2022

SeojinSeojin commented Jan 13, 2022

100Gyeon commented Jan 12, 2022 •

edited