[FE] 피드백 미작성시 받은 피드백 안보이는 기능 추가(#703) #706

github-actions · 2024-11-03T14:23:17Z

📓 스토리북 링크

바로가기

📌 관련 이슈

closed : [FE] 피드백 미작성시 받은 피드백 안보이는 기능 추가 #703

✨ PR 세부 내용

상대방 피드백 작성 안 했을 때 블러처리
🔥 블러처리만 했을 때는 뒤에 textarea가 클릭이 돼서 투명도 50%인 div 태그(Overlay)로 위를 덮어서 클릭을 막았습니다.
피드백 작성 모달에서 페이지로 변경
🔥 피드백 작성 폼으로 바로 이동하게 하기 위해 모달에서 페이지로 변경하고 그 페이지로 리다이렉트 했습니다.
feedbackLayout 컴포넌트에서 useFeedbackForm이라는 커스텀 훅이 사용되었는데 리팩토링 과정에서 가독성을 위해 제거하였습니다. 추후에 커스텀 훅으로 분리해야할 필요성을 느끼면 리팩토링하겠습니다!
UI/UX 대해서 공부를 하다가 알게된 사실이 유효한 폼을 작성하지 않았을 때 버튼을 disabled을 하는 것보다 버튼은 항상 활성화 되어있고, 제출 버튼을 눌렀을 때 유효하지 않은 필드에 대해 에러를 띄워주는 것이 더 좋다는 것이었습니다. 이에 따라 코드를 변경하였습니다.

…orea into feat/#703

…-corea into feat/#703

00kang

텐텐 작업하느라 수고하셨어요!! 👍👍😂
파일 체인지 어마무시하네요,,

몇가지 질문이랑 제안사항 남겨보았으니, 확인해주세요!

1. 피드백 작성/수정 페이지의 디자인 수정 제안

현재는 방의 정보와 피드백 관련 문항들이 잘 구분되고 있지 않은 것 같아요! 이렇게 구분하는 디자인은 어떤가요?
아래 ReviewerFeedbackLayout.tsx 와 ReviewerFeedbackLayout.style.ts 에 제안 코드를 작성해 두었으니 반영할 때 참고하시면 될 것 같아요~ (RevieweeFeedback도 같이!)

+) 현재 피드백 작성/수정 페이지에서 폼이 헤더네비게이션바 쪽으로 붙어 있던데 가운데 정렬해도 좋을 것 같아용

before	after

2. 오류 발견

모바일 반응형일 때만 나타나는 햄버거 메뉴에서 검정색으로 보이고 있는데, 버튼 속성을 수정하면서 이렇게 된 것 같아요.
확인 부탁드려요!

00kang · 2024-11-04T08:29:48Z

frontend/src/components/feedback/feedbackCard/FeedbackCard.tsx

+              rows={10}
+              maxLength={2000}
+              showCharCount={true}
+              value={feedbackCardData.feedbackText.length ? feedbackCardData.feedbackText : "없음"}


FeedbackCard에서는 없음이고, ReviewerFeedbackForm과 RevieweeFeedbackForm은 미작성으로 다르게 나타내는 이유가 있나요?

전부 미작성이라는 표현으로 통일시켜도 좋을 것 같아요!

이 부분은 그냥 놓치고 넘어간 것 같아요! 미작성으로 통일 시키겠습니다~~

00kang · 2024-11-04T08:51:59Z

frontend/src/components/common/button/Button.style.ts

+const variantStyles = (variant: ButtonVariant, outline?: boolean) => {
+  return css`
+    ${outline
+      ? css`
+          color: ${({ theme }) => getColor(theme, variant)};
+          background-color: ${({ theme }) => theme.COLOR.white};
+          border: 2px solid ${({ theme }) => getColor(theme, variant)};
+        `
+      : css`
+          color: ${({ theme }) =>
+            variant === "default" || variant === "confirm" ? theme.COLOR.black : theme.COLOR.white};
+          background-color: ${({ theme }) => getColor(theme, variant)};
+          border: 2px solid ${({ theme }) => getColor(theme, variant)};
+        `}
+  `;
+};


outline이 true일 때: 배경색은 흰색, 테두리와 텍스트는 variant 색상
outline이 false일 때: 배경색과 테두리는 variant 색상, 텍스트는 흰색/검정(배경이 검정, 초록일 때만)

이렇게 구분해 놓으니 더 유연한 컴포넌트가 된 것 같아 좋네요!

00kang · 2024-11-04T08:56:09Z

frontend/src/components/feedback/feedbackForm/RevieweeFeedbackForm.tsx

          options={getDevelopKeywordOptions(formState.evaluationPoint)}
        />
      </S.ItemContainer>

      <S.ItemContainer>
        <S.QuestionContainer>
-          <S.ModalQuestion>리뷰이의 코드를 추천하시나요? (비공개 항목)</S.ModalQuestion>
+          <S.ModalQuestion>[비공개] 리뷰이의 코드를 추천하시나요?</S.ModalQuestion>


문항 앞에 [비공개]가 추가되었는데, 다른 것들도 [공개]를 추가해서 통일성을 주는 건 어떨까요?

QA 받았던 부분인데 [비공개] 문구 어떤지 얘기 나눠 보려고 저렇게 해두었습니다!
괜찮은 것 같다면 다른 부분에도 [공개]로 변경해둘게요ㅎㅎ

❓ 리뷰어 피드백 부분은 다 공개인데 거기도 [공개]를 추가할까요??

피드백 폼의 통일성을 위해서 해도 좋을 것 같아요!

00kang · 2024-11-04T08:58:05Z

frontend/src/components/feedback/feedbackForm/RevieweeFeedbackForm.tsx

+              feedbackPageType === "view"
                ? "없음"


ReviewerFeedbackForm과 동일하게 미작성으로 나타내는 거 어떨까요?

00kang · 2024-11-04T09:08:06Z

frontend/src/components/feedback/revieweeFeedbackLayout/RevieweeFeedbackLayout.tsx

+          <S.PageType>
+            <>{reviewee?.username} </>
+            {feedbackPageType === "create" && "리뷰이 피드백 작성하기"}
+            {feedbackPageType === "edit" && "리뷰이 피드백 수정하기"}
+            {feedbackPageType === "view" && "리뷰이 피드백 확인하기"}
+          </S.PageType>


현재 ~~~ 리뷰이 피드백 작성하기 이렇게 보여지고 있는데, 리뷰이(~~~) 피드백 작성하기 이렇게 수정하는 건 어떤가요?

오 괜찮은 것 같아요! 문구 변경하겠습니다😊

00kang · 2024-11-04T09:34:38Z

frontend/src/components/feedback/feedbackForm/FeedbackForm.style.ts

+export const ModalQuestion = styled.legend<{ $isInvalid?: boolean }>`
  font: ${({ theme }) => theme.TEXT.small_bold};
-  color: ${({ theme }) => theme.COLOR.grey4};
+  color: ${({ theme, $isInvalid }) => ($isInvalid ? theme.COLOR.error : theme.COLOR.grey4)};


여기에 line-height: normal 속성 추가해도 좋을 것 같아요!

변경했습니다! 추가로 아래처럼 필수입력이 옆으로 가게 변경하였습니다😁

00kang · 2024-11-04T09:38:22Z

frontend/src/components/feedback/reviewerFeedbackLayout/ReviewerFeedbackLayout.tsx

+          <S.PageTitle>{roomInfo.title}</S.PageTitle>
+          <S.Keywords>
+            {displayedKeywords.length === 0 ? (
+              <S.NoKeywordText>지정된 키워드 없음</S.NoKeywordText>
+            ) : (
+              displayedKeywords.map((keyword) => (
+                <Label
+                  key={keyword}
+                  type="KEYWORD"
+                  text={keyword}
+                  size="semiSmall"
+                  backgroundColor={theme.COLOR.grey0}
+                />
+              ))
+            )}
+          </S.Keywords>


Suggested change

<S.PageTitle>{roomInfo.title}</S.PageTitle>

<S.Keywords>

{displayedKeywords.length === 0 ? (

<S.NoKeywordText>지정된 키워드 없음</S.NoKeywordText>

) : (

displayedKeywords.map((keyword) => (

<Label

key={keyword}

type="KEYWORD"

text={keyword}

size="semiSmall"

backgroundColor={theme.COLOR.grey0}

/>

))

)}

</S.Keywords>

<S.MissionInfoContainer>

<S.PageTitle>{roomInfo.title}</S.PageTitle>

<S.Keywords>

{displayedKeywords.length === 0 ? (

<S.NoKeywordText>지정된 키워드 없음</S.NoKeywordText>

) : (

displayedKeywords.map((keyword) => (

<Label

key={keyword}

type="KEYWORD"

text={keyword}

size="semiSmall"

backgroundColor={theme.COLOR.grey0}

/>

))

)}

</S.Keywords>

</S.MissionInfoContainer>

00kang · 2024-11-04T09:40:46Z

frontend/src/components/feedback/reviewerFeedbackLayout/ReviewerFeedbackLayout.style.ts

@@ -16,12 +17,12 @@ export const FeedbackContainerHeader = styled.div`
  gap: 1.2rem;
 `;

-export const ModalType = styled.p`
+export const PageType = styled.p`
  font: ${({ theme }) => theme.TEXT.small_bold};
  color: ${({ theme }) => theme.COLOR.grey3};
 `;



Suggested change

export const MissionInfoContainer = styled.div`

display: flex;

flex-direction: column;

gap: 1rem;

padding: 1rem;

border: 1px solid ${({ theme }) => theme.COLOR.grey1};

border-radius: 8px;

`;

코드 포함해서 제안 주셔서 감사합니다😭
이렇게 하면 방에 관한 정보는 box 안에 묶여 있어 사용자가 더 파악하기 쉽겠네요!

pp449

파일체인지를 보니 엄청난 작업량이 느껴지네요,,

크게 남길만한 코멘트는 없지만

https://github.com/user-attachments/assets/b1af761a-b0e0-4e85-a43d-e915ebd33eee
여기서 선택하지 않으면 문항 색깔이 바뀌는데 색깔 바뀌는게 아닌 해당 문항을 필수로 체크해야해요 같은 문구를 띄어주는건 어떨까요

pp449 · 2024-11-04T13:37:45Z

frontend/src/components/feedback/feedbackLayout/ReviewerFeedbackLayout.tsx

+  useEffect(() => {
+    if (feedbackData) {
+      setFormState(getInitialFormState(reviewer, feedbackData));
+    }
+  }, [reviewer, feedbackData]);


해당 페이지는 연속적으로 렌더링이 아닌
언마운트 후 다시 마운트가 되는것으로 예상이 되는데 해당 useEffect 코드가 없으면 에러가 발생하나요??

방 생성 입력 폼에서는 useEffect가 없어도 데이터를 잘 불러와서 여기도 없애 보았는데요.. 빈 값으로 보입니다.. api로 값은 잘 받아와져요 그냥 화면에 안 뜹니다.

이 컴포넌트에서 뎁쓰가 깊게는 2번을 더 들어가게 되는데요. 이 부분에 값이 안 들어가는 것으로 생각하고 있어요! 다음 PR에서 자세히 확인해본 후 useEffect 코드를 제거할 수 있는 방안을 생각해보겠습니다😁

00kang · 2024-11-04T13:59:51Z

작업 확인 완료~

chlwlstlf · 2024-11-04T14:20:49Z

여기서 선택하지 않으면 문항 색깔이 바뀌는데 색깔 바뀌는게 아닌 해당 문항을 필수로 체크해야해요 같은 문구를 띄어주는건 어떨까요

저도 좋다고 생각합니다!! 입력 페이지에서 통일성 있는 UI를 아직 팀 내부에서 생각해보지 않았는데 같이 이야기 해보면 좋을 것 같아요ㅎㅎ

chlwlstlf added 6 commits November 1, 2024 16:11

feat: feedback 타입에 isWrited 추가

a4d840a

refactor: hostname 함수 밖으로 분리

2ee37c9

feat: 피드백 안 썼을 때 블러 처리

5de1957

refactor: feedbackModalType을 feedbackType으로 변경

927f3e4

feat: 리뷰이 피드백 작성, 수정 페이지 생성

88074bd

feat: 리뷰어 피드백 작성, 수정 페이지 생성

668c06b

github-actions bot added FE 프론트 개발 관련 작업 기능 기능 구현 작업 labels Nov 3, 2024

chlwlstlf added 10 commits November 3, 2024 23:31

delete: 피드백 레이아웃 스토리북 제거

cb3a641

feat: button 아웃라인 스타일 추가

5563385

feat: 유효하지 않을 때 form 필드 색상 변경

0222075

refactor: 초기화 값 제거, enabled 추가

4811915

feat: 블러처리 된 피드백에서 작성 페이지로 리다이렉트

0934ae2

feat: 블러처리 위에 overlay 추가

71a515f

fix: isFormValid가 false일 때 서버 요청 안 하기

d603b54

refactor: feedbackType을 feedbackPageType으로 변경

dcfd7d9

refactor: handleNavigateFeedbackPage 인자 제거

8d2d77a

refactor: isReviewed 기본값 true로 변경

481ab65

github-actions bot requested review from 00kang and pp449 November 4, 2024 02:57

github-actions bot assigned chlwlstlf Nov 4, 2024

chlwlstlf added 3 commits November 4, 2024 15:01

Merge branch 'develop' into feat/#703

d7bb729

Merge branch 'develop' of https://github.com/woowacourse-teams/2024-c…

88ffda1

…orea into feat/#703

Merge branch 'feat/#703' of https://github.com/woowacourse-teams/2024…

b83a36a

…-corea into feat/#703

00kang requested changes Nov 4, 2024

View reviewed changes

chlwlstlf added 5 commits November 4, 2024 21:38

refactor: 피드백 추가 작성 없을 때 "미작성"으로 문구 변경

77c1fd0

feat: '리뷰어 {이름} 피드백 작성하기' 로 문구 변경

4a43669

design: line-height 추가, 필수입력 옆에 띄우기

8e59c87

feat: 방 정보 다르게 변경, 폴더 구조 변경

1180e20

feat: 공개, 비공개 문구 추가

052332a

pp449 approved these changes Nov 4, 2024

View reviewed changes

chlwlstlf added 2 commits November 4, 2024 22:54

fix: 메뉴 버튼 배경색 변경

feb64bf

feat: 리뷰이 피드백도 폼 유효성 통과 못 해도 버튼 눌리게 하기

de4ee69

00kang approved these changes Nov 4, 2024

View reviewed changes

pp449 merged commit a27546a into develop Nov 4, 2024
3 checks passed

pp449 deleted the feat/#703 branch November 4, 2024 14:01

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[FE] 피드백 미작성시 받은 피드백 안보이는 기능 추가(#703) #706

[FE] 피드백 미작성시 받은 피드백 안보이는 기능 추가(#703) #706

github-actions bot commented Nov 3, 2024 •

edited by chlwlstlf

Loading

00kang left a comment •

edited

Loading

00kang Nov 4, 2024

chlwlstlf Nov 4, 2024

00kang Nov 4, 2024

00kang Nov 4, 2024

chlwlstlf Nov 4, 2024 •

edited

Loading

00kang Nov 4, 2024

00kang Nov 4, 2024

00kang Nov 4, 2024

chlwlstlf Nov 4, 2024

00kang Nov 4, 2024

chlwlstlf Nov 4, 2024

00kang Nov 4, 2024

00kang Nov 4, 2024

chlwlstlf Nov 4, 2024

pp449 left a comment

pp449 Nov 4, 2024

chlwlstlf Nov 4, 2024

00kang commented Nov 4, 2024

chlwlstlf commented Nov 4, 2024

+export const MissionInfoContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  padding: 1rem;
+  border: 1px solid ${({ theme }) => theme.COLOR.grey1};
+  border-radius: 8px;
+`;

[FE] 피드백 미작성시 받은 피드백 안보이는 기능 추가(#703) #706

[FE] 피드백 미작성시 받은 피드백 안보이는 기능 추가(#703) #706

Conversation

github-actions bot commented Nov 3, 2024 • edited by chlwlstlf Loading

📓 스토리북 링크

📌 관련 이슈

✨ PR 세부 내용

00kang left a comment • edited Loading

Choose a reason for hiding this comment

1. 피드백 작성/수정 페이지의 디자인 수정 제안

2. 오류 발견

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

chlwlstlf Nov 4, 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

Choose a reason for hiding this comment

Choose a reason for hiding this comment

pp449 left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

00kang commented Nov 4, 2024

chlwlstlf commented Nov 4, 2024

github-actions bot commented Nov 3, 2024 •

edited by chlwlstlf

Loading

00kang left a comment •

edited

Loading

chlwlstlf Nov 4, 2024 •

edited

Loading