Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[FE] 3주차 운영 피드백 반영 - 1(#717) #721

Merged
merged 23 commits into from
Nov 8, 2024
Merged

[FE] 3주차 운영 피드백 반영 - 1(#717) #721

merged 23 commits into from
Nov 8, 2024

Conversation

github-actions[bot]
Copy link
Contributor

@github-actions github-actions bot commented Nov 5, 2024

📓 스토리북 링크

바로가기

📌 관련 이슈

✨ PR 세부 내용

🎯 1. 기능

  • 피드백 모아보기 페이지 받은 피드백, 쓴 피드백선택한 방을 세션 스토리지로 관리
  • 피드백 작성, 수정 페이지에 PR 링크, Comment 링크 추가
    image
    image


📝 2. 수정

  • 프로필 페이지 이름 아래 잘리는 오류 해결
    image

  • 피드백 모아보기에서 textarea 클릭 막기 (readonly -> disabled)



🤔 3. 리팩토링

  • type > reviewer.ts 의 reviewrInfo가 있는데 reviewee한테도 동일하게 쓰이는 타입이어서 reviewInfo로 변경

  • Button 컴포넌트 outline 속성이 추가됨에 따라 모달 버튼 리팩토링
    image

  • 상세 페이지 각 섹션별 디자인 통일(gap, 폰트 크기 등)

  • roomInfo에서 ContentLineBreak 모두 넣기, styled-components 안에 span, div 태그 제거



🎨 4. 디자인

  • 모바일 환경에서 마이페이지 프로필 디자인
    image


✅ 5. 피드백 반영

  • 로그인 완료 됐을 때 바로 메인 페이지로 리다이렉트

  • 피드백 모아보기 페이지에서 피드백 수정 바로 할 수 있게 변경
    image

@github-actions github-actions bot added 수정 오류 수정 관련 작업 FE 프론트 개발 관련 작업 기능 기능 구현 작업 labels Nov 5, 2024
@chlwlstlf chlwlstlf added 리팩터링 리팩터링 작업 디자인 디자인 관련 작업 labels Nov 7, 2024
Copy link
Contributor

@pp449 pp449 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

전체적인 UI와 UX 개선이 된 것을 확인할 수 있었네요!
중간중간에 점점 주석이 많아지는데 크게 필요하지 않은 주석은 최대한 안쓰는게 좋은거 같아요 😄

@@ -57,7 +57,7 @@ const MyReviewee = ({ roomInfo }: MyRevieweeProps) => {
return <p>코드리뷰를 하지 않았어요</p>;
}

// TODO: 방 끝나도 계속 작성 가능
// TODO: 방이 끝났을 때 피드백 렌더링 정하기
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

해당 TODO도 이번에 반영될 예정인가요?

Copy link
Contributor

@chlwlstlf chlwlstlf Nov 7, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

내일 QA 해보고 정해질 것 같아요! 그래서 지금 PR에서는 머지가 되고 내일 QA 이후에는 사라지지 않을까 생각합니다~!~!

추가적으로 주석 개수는 3개로 이전과 동일합니다😁

Comment on lines +14 to +17
const [selectedFeedback, setSelectedFeedback] = useState<number | undefined>(() => {
const savedFeedback = sessionStorage.getItem("selectedFeedback");
return savedFeedback ? parseInt(savedFeedback, 10) : undefined;
});
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

컴포넌트가 아닌 훅으로 포함시키는게 가독성 측면에서 더 좋은거 같네요 👍

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

원래 쓰던 훅이 있어서 바로 가져다 리팩토링 했습니다ㅎㅎ 굳굳

@@ -13,14 +13,8 @@ const CallbackPage = () => {
const code = params.get("code");

if (code) {
postLoginMutation.mutate(code);
postLoginMutation.mutate(code, { onSuccess: () => navigate("/", { replace: true }) });
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

저번에 언급한 로그인 문제를 해결했네요!
확인해보니 로딩 게이지가 채워지지 않아도 로그인이 되는거 확인했어요~

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

setTimeout 2초로 두었을 때 3G 환경에서 로그인이 성공하지 않았는데 메인 페이지로 넘어가 로그인이 안 된 것처럼 화면이 보여지는 오류가 있었습니다!

No throttling 환경에서는 2초 전에 성공해서 UX가 향상되고, 3G 환경에서는 오류를 해결할 수 있어서 이 코드가 정답인 것 같습니다😂

Copy link
Member

@00kang 00kang left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

이번에도 파일 체인지가 정말 많군요. 작업하느라 수고했어요~~~ 🥲
크게 코멘트할 부분은 없고, 제안사항 하나 남겼으니 확인해주세요!

<dd>{profileData.receivedReviewCount}개</dd>
</dl>
<dl>
<dt>피드백 받은 개수</dt>
<dt>받은 피드백</dt>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

리뷰는 작성한 것 받은 것 2가지 보여주는데, 피드백은 받은 것에 대해서만 보여주니까 어색한 것 같아요. 작성한 피드백을 보여주는 건 어떤 것 같나요~?

만약 이걸 추가한다면 평점평균은 키워드의 상단에 나타나도록 해서 현재 디자인을 유지하면 좋을 것 같아용 :)

Copy link
Contributor

@chlwlstlf chlwlstlf Nov 7, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

흐음.. 작성한 피드백 개수를 서버에서 넘겨주지 않고 있어요🤔
image

저도 작성한 피드백도 같이 보여주면 좋을 것 같다고 생각해서 백엔드한테 한 번 말씀드려 보겠습니다~!!

Comment on lines +24 to +27
<Button size="small" onClick={rest.onCancel} outline={true}>
{cancelButtonText}
</Button>
<Button size="small" onClick={rest.onConfirm} className="confirm-button">
<Button size="small" onClick={rest.onConfirm}>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

저번에 버튼 컴포넌트를 재사용성있게 수정한 덕분에 더 간결해지고 좋은 것 같아요 👍

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

원래 쓰고 있던 곳이 없는 줄 알았는데 className 까지 만들어가며 썼더라구요ㅋㅅㅅㅋㅅㅋ 바로 리팩토링 했습니다😁

@github-actions github-actions bot requested review from 00kang and pp449 November 7, 2024 16:51
@chlwlstlf chlwlstlf merged commit 298b903 into develop Nov 8, 2024
3 checks passed
@chlwlstlf chlwlstlf deleted the fix/#717 branch November 8, 2024 03:01
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
FE 프론트 개발 관련 작업 기능 기능 구현 작업 디자인 디자인 관련 작업 리팩터링 리팩터링 작업 수정 오류 수정 관련 작업
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[FE] 3주차 운영 피드백 반영 - 1
3 participants