너가소개서, 팀원소개서 픽 하기 도움 요청 #311

100Gyeon · 2022-05-09T12:23:18Z

⛓ Related Issues

너가소개서, 팀원소개서 픽하기 #271

📋 작업 내용

너가소개서, 팀원소개서 픽 하기 API 연결

📌 PR Point

너가소개서
설문 종류별로 답변 불러와야 하는데, 설문 하나만 선택해도 답변 여러 개가 섞여있어요 ㅠㅠ
➡️ 진짜 멋진 우리 리드 개발자 서진이의 도움으로 해결🤩! 같은 문제 생기던 팀원소개서도 마찬가지
페이지 아래로 스크롤 좀 했다가 다시 위로 올라오면 중복된 설문이 여러 개 생깁니다
➡️ 서버에서 API 수정해 주기로 했습니다!
팀원소개서 : 팀별로 피드백 불러와야 하는데 이것도 마찬가지로 잘못 불러오는 것 같습니다 ..
공통적인 부분 : 아직 ALL 버튼은 구현 안 된 상태입니다
설문, 팀 선택할 때 ProfileListSelectable 쓰면 좋을 것 같아서 써봤는데, 은근 다른 구석이 있어서 코드가 많이 더럽혀진 것 같습니다.. 컴포넌트 차라리 새로 만드는 게 나을지 조언 부탁드려용

pick.mp4

SeojinSeojin · 2022-05-09T12:23:35Z

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

100Gyeon · 2022-05-09T12:26:19Z

src/presentation/components/NeososeoAnswerCard/Item/index.tsx

+        {(targetUserID === userPK || targetUserID === undefined) && (
          <img src={isBookmarked ? icPicked : icUnpicked} alt="pick" onClick={bookmarkAnswer} />
        )}


이 부분 조건이 이상한데 targetUserID === undefined 처리를 안 하면 아래 화면처럼 픽하기 버튼이 안 보입니다,,
일단 너가소개서 픽 하기 API에서는 targetUserID를 안 받아오고 있는 상태입니다
좋은 방법이 있다면 알려주세요 😭

NeososeoAnswerCard에 오는 친구들은 모두 targetuser이 본인인 것이잖아요!?
따라서 저 조건이 없어도 괜찮을 거라고 생각합니다 :)

AnswerDetail에 있는 targetUserID도 없어도 괜찮을 것 같아요~! 서버에서 리스폰스로 주지도 않고요

<img src={isBookmarked ? icPicked : icUnpicked} alt="pick" onClick={bookmarkAnswer} />

조건문 없이 이거 바로 쓰시면 될 것 같아요!!

제가 잘못 생각했네요.. 마이페이지에서 보이는군요

저 조건문 괜찮은 것 같아요~! targetUserID가 undefined라는 건 마이페이지 안쪽 (내가 아닌 유저는 접근할 수 없음)에서 보고 있다는 것이고, 그럼 무조건 저 Answer의 주인이 본인인 거니까 조건문 괜찮은 것 같습니다!

ㅜㅜ 걱정했는데 다행이네요 확인 감사합니다 !!

100Gyeon · 2022-05-09T12:30:48Z

src/presentation/pages/Team/Issue/Feedback/index.tsx

 function TeamIssueFeedback() {
-  const [selectedUser, setSelectedUser] = useState<TeamMemberNoneId | null>(null);
+  const [selectedUser, setSelectedUser] = useState<MyDetail | null>(null);


원래 쓰이던 TeamMemberNoneId가 맞는 것 같은데 자꾸 타입스크립트 오류가 떠서 MyDetail 타입으로 바꿨습니다
이 부분 이렇게 해도 될지 한 번 봐주시면 감사하겠습니다 ㅜㅜ

그것은 바로바로..
profileName의 타입이 string에서 string | undefined로 바뀌었기 때문입니다!

profileName이 undefined이면 ""로 넘겨주고,
""인 경우 띄우지 않는 식으로 바꾸면 좋을 것 같아요!

아니면 진짜 다른 컴포넌트로 만들어버려도 좋을 것 같습니다~!

일단 지금 할 수 있는 방법은

ProfileListSelectable.tsx의 7줄에 있는 profileName을 undefindable하지 않게 바꾸고,

마이페이지에서는 profileName값이 없으니까 빈 문자열을 넘긴 다음에

빈 문자열을 받은 경우 아무것도 렌더링하지 않게 바꾸면

TeamMemberNoneId형식을 쓰면서도 에러가 나지 않을 수 있어요₩!

리뷰 넘넘 감사합니다~!

TeamMemberNoneId 형식으로 바꾸고, ProfileListSelectable이랑 비슷하게 생긴 컴포넌트 틀만 만들어뒀습니다!
다음 PR에서 그 컴포넌트 보충하고 수정된 API 연결할 예정입니다 ㅎㅎ

100Gyeon · 2022-05-09T12:35:28Z

src/infrastructure/remote/user.ts

+    const response = await privateAPI.get({
+      url: teamID
+        ? `/team/feedback/pick?teamId=${teamID}&offset=${page}&limit=${PICK_PAGE}`
+        : `/team/feedback/pick?offset=${page}&limit=${PICK_PAGE}`,
+    });


필터링 할 팀 아이디 없으면 필터 처리 없이 전부 조회된다고 해서 이렇게 짰는데 맞는 방법인지 궁금합니다..

아주 훌륭합니다!!

Suggested change

const response = await privateAPI.get({

url: teamID

? `/team/feedback/pick?teamId=${teamID}&offset=${page}&limit=${PICK_PAGE}`

: `/team/feedback/pick?offset=${page}&limit=${PICK_PAGE}`,

});

const queryParamTeamID = teamID ? `teamId=${teamID}&` : "";

const response = await privateAPI.get({

url: `/team/feedback/pick?${queryParamTeamID}offset=${page}&limit=${PICK_PAGE}`

});

정말 줄이고 싶다면 이런 식으로 줄일 수 있을 것 같아요~!

이걸로 반영해 보겠습니다 ㅎㅎ

… feat/#271

SeojinSeojin · 2022-05-09T13:02:12Z

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

SeojinSeojin · 2022-05-09T13:17:21Z

src/presentation/pages/Home/MyPage/NeogaPick/index.tsx

+  const fetchAnswersByPage = useCallback(
+    async ({ pageParam = 0 }) => {
+      const response = selectedForm
+        ? await api.userService.getMyAnswerInfo(selectedForm.id, pageParam)


page를 먼저 주어야 해요~!

그리고 selectedForm?.id하면 undefined면 undefined, 아니면 숫자가 나오므로 분기처리를 안 해줘도 좋을 것 같아요!

const response = await api.userService.getMyAnswerInfo(pageParam, selectedForm?.id);

이렇게 함 해보시겠어요!? 중복으로 나오던 문제가 해결되는 것 같습니다!

이럴수가... 이런 바보같은 실수를 하다니.. 반성합니다..
그리고 이걸 또 찾아준 우리 리드 개발자에게 무한 감사드립니다..🙇‍♀️

다시 보니까 또 같은 문제가 발생하네요😭 서버에서 API 수정되면 PR 다시 올리겠습니다 !!

저는 폼을 선택해도 필터된 게 변하지 않는 문제를 해결한 거였는데 폼이 주루룩 생기는건 해결을 못했네요 😭 처음부터 api를 별도로 짰어야 했군요..

SeojinSeojin · 2022-05-09T13:22:48Z

src/presentation/pages/Home/MyPage/TeamPick/index.tsx

+      const response = selectedTeam
+        ? await api.userService.getMyFeedbackInfo(selectedTeam.id, pageParam)
+        : await api.userService.getMyFeedbackInfo(pageParam);


Suggested change

const response = selectedTeam

? await api.userService.getMyFeedbackInfo(selectedTeam.id, pageParam)

: await api.userService.getMyFeedbackInfo(pageParam);

const response = await api.userService.getMyFeedbackInfo(pageParam, selectedTeam?.id);

이 친구도 이렇게 하시면 해결됩니다!

정말 너무너무 속이 시원하고 그렇네요 ㅜ 오늘 하루 중에 제일 행복해요 감사합니다 💟

SeojinSeojin · 2022-05-09T13:25:20Z

src/presentation/pages/Home/MyPage/NeogaPick/index.tsx

+        )}
+        {answerInfo?.pages && (
+          <StMyNeogaPickList>
+            {answerInfo.pages.length > 0 ? (


infiniteQuery는 2차원 배열이고 한번이라도 요청했으면 무조건 length가 0보다 큰가 보아요
진짜 length를 알기 위해서는 answerInfo.pages.map((page) => page.answerList).flat()의 length를 구해야 합니다!

리뷰 덕분에 알았네요 👀 감사합니다 !!!

Co-authored-by: SeojinSeojin <001106ksj@gmail.com>

SeojinSeojin · 2022-05-09T13:37:44Z

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

Co-authored-by: SeojinSeojin <001106ksj@gmail.com>

SeojinSeojin · 2022-05-09T13:53:01Z

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

Co-authored-by: SeojinSeojin <001106ksj@gmail.com>

SeojinSeojin · 2022-05-09T13:55:19Z

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

SeojinSeojin

서버 변경 전에 해결할 수 있는 방법 생각해보았습니다!

SeojinSeojin · 2022-05-09T14:50:18Z

src/presentation/pages/Home/MyPage/NeogaPick/index.tsx

+        {answerInfo?.pages && (
+          <StMyNeogaFormList>
+            <ProfileListSelectable
+              profiles={answerInfo.pages.map((page) => page.formList).flat()}


Suggested change

profiles={answerInfo.pages.map((page) => page.formList).flat()}

profiles={answerInfo.pages[0]?.formList ?? []}

이렇게 하면 임시방편으로 해결될 것이에요

Co-authored-by: SeojinSeojin <001106ksj@gmail.com>

SeojinSeojin · 2022-05-09T15:04:55Z

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

SeojinSeojin · 2022-05-09T15:59:49Z

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

100Gyeon added 10 commits May 9, 2022 01:16

✨feat: 너가소개서 픽 하기 API 추가

96eab67

✨feat: 설문 종류별로 답변 불러오기

7f3fee3

📝chore: 오타 수정

0153949

✨feat: 팀원소개서 픽 하기 API 추가

d6b754c

✨feat: 팀별로 피드백 불러오기

c8b1b92

📝chore: 사소한 수정사항

d77b31c

🐛fix: targetUserID 없을 때 처리

6420685

✨feat: SelectionList 구현 중

9fdeb34

✨feat: ProfileListSelectable 활용

26c095b

📝chore: 일단 작업한 부분까지만 커밋

f3a0092

100Gyeon added the question 🐲 Further information is requested label May 9, 2022

100Gyeon requested review from SeojinSeojin and NamJwong May 9, 2022 12:23

100Gyeon self-assigned this May 9, 2022

100Gyeon commented May 9, 2022

View reviewed changes

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

58549d2

… feat/#271

SeojinSeojin approved these changes May 9, 2022

View reviewed changes

🐛fix: 데이터 이상하게 불러오던 부분 수정

26f8f94

Co-authored-by: SeojinSeojin <001106ksj@gmail.com>

100Gyeon and others added 2 commits May 9, 2022 22:43

🔨refactor: 코드 리뷰 반영 (진짜 length 알아내기)

2251e53

Co-authored-by: SeojinSeojin <001106ksj@gmail.com>

🔨refactor: 코드 리뷰 반영 (상황별 url 좀 더 깔끔하게 작성하기)

db8d31b

Co-authored-by: SeojinSeojin <001106ksj@gmail.com>

🔨refactor: 코드 리뷰 반영 (진짜 length 알아내서 엠티뷰 띄우기)

a57cd2c

Co-authored-by: SeojinSeojin <001106ksj@gmail.com>

SeojinSeojin approved these changes May 9, 2022

View reviewed changes

🔨refactor: 코드 리뷰 반영 (서버 api 수정 전 임시로 해결)

b978bfb

Co-authored-by: SeojinSeojin <001106ksj@gmail.com>

✨feat: ProfileListSelectable 대신 사용할 MyListSelectable 만들기

b5ff632

100Gyeon merged commit 03bf956 into dev May 9, 2022

100Gyeon changed the title ~~너가소개서, 팀원소개서 픽 하기~~ 너가소개서, 팀원소개서 픽 하기 도움 요청 May 9, 2022

100Gyeon added this to Done in 웹 칸반 보드 May 9, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

너가소개서, 팀원소개서 픽 하기 도움 요청 #311

너가소개서, 팀원소개서 픽 하기 도움 요청 #311

100Gyeon commented May 9, 2022 •

edited

SeojinSeojin commented May 9, 2022

100Gyeon May 9, 2022

SeojinSeojin May 9, 2022

SeojinSeojin May 9, 2022

SeojinSeojin May 9, 2022

SeojinSeojin May 9, 2022

100Gyeon May 9, 2022

100Gyeon May 9, 2022

SeojinSeojin May 9, 2022

SeojinSeojin May 9, 2022

SeojinSeojin May 9, 2022 •

edited

100Gyeon May 9, 2022

100Gyeon May 9, 2022

SeojinSeojin May 9, 2022

100Gyeon May 9, 2022

SeojinSeojin commented May 9, 2022

SeojinSeojin May 9, 2022

SeojinSeojin May 9, 2022

SeojinSeojin May 9, 2022

100Gyeon May 9, 2022 •

edited

100Gyeon May 9, 2022

SeojinSeojin May 9, 2022

SeojinSeojin May 9, 2022

100Gyeon May 9, 2022

SeojinSeojin May 9, 2022

100Gyeon May 9, 2022

SeojinSeojin commented May 9, 2022

SeojinSeojin commented May 9, 2022

SeojinSeojin commented May 9, 2022

SeojinSeojin left a comment

SeojinSeojin May 9, 2022

SeojinSeojin commented May 9, 2022

SeojinSeojin commented May 9, 2022

	profiles={answerInfo.pages.map((page) => page.formList).flat()}
	profiles={answerInfo.pages[0]?.formList ?? []}

너가소개서, 팀원소개서 픽 하기 도움 요청 #311

너가소개서, 팀원소개서 픽 하기 도움 요청 #311

Conversation

100Gyeon commented May 9, 2022 • edited

⛓ Related Issues

📋 작업 내용

📌 PR Point

SeojinSeojin commented May 9, 2022

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

SeojinSeojin May 9, 2022 • edited

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 May 9, 2022

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

100Gyeon May 9, 2022 • edited

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 May 9, 2022

SeojinSeojin commented May 9, 2022

SeojinSeojin commented May 9, 2022

SeojinSeojin left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

SeojinSeojin commented May 9, 2022

SeojinSeojin commented May 9, 2022

100Gyeon commented May 9, 2022 •

edited

SeojinSeojin May 9, 2022 •

edited

100Gyeon May 9, 2022 •

edited