[BUG] formData 훅 리팩토링하며 이름 미적용된 부분이 있어 오류발생 #844

chsua · 2023-11-19T17:32:36Z

🔥 연관 이슈

close: #843: [BUG] formData 훅 리팩토링하며 이름 미적용된 부분이 있어 오류발생
close: #836: [BUG] 글쓰기 화면 폴드에서 사이드가 잘리지 않게 조치

📝 작업 요약

깃에서 파일명 대소문자 변경이 인식되지 않아 발생하는 문제 해결
글쓰기 페이지가 폭좁은 디스플레이에서는 잘리는 오류 해결
댓글을 작성하면 댓글 textArea의 placeHolder가 잘리는 오류 해결
일반 에러바운더리에도 404 인 경우 다른 메세지가 나오도록 처리
공지사항, 신고처리 상세정보에도 404인 경우 재요청 하지 않도록 처리
사이드바에 위치한 현 게시물 목록 정보가 정확하지 않은 문제점 해결
댓글 작성 시 2개 입력되는 오류 해결
메뉴가 헤더보다 위에 위치한 오류 해결
게시물이 404인 경우 다른 게시물로 들어가도 refetch를 하지 않는 오류 해결
메인 게시물 목록 페이지 좌우 마진 없애기 및 배너 중앙 정렬

⏰ 소요 시간

1일

🔎 작업 상세 설명

깃에서 파일명 대소문자 변경이 인식되지 않아 발생하는 문제 해결
- 임시로 파일명 수정 후 커밋 > 제대로 수정 후 커밋
글쓰기 페이지가 폭좁은 디스플레이에서는 잘리는 오류 해결
- 라이브러리의 레이아웃 마진? 패딩으로 인해서 발생하는 문제가 있어 임시로 해결

// 레이아웃 좌우 각 10px margin 로 인해 가로 화면에 맞지 않아 이를 폼에서 계산해서 가로길이 재설정
export const Form = styled.form`
  width: calc(100% - 20px);
`;

댓글을 작성하면 댓글 textArea의 placeHolder가 잘리는 오류 해결
- 사파리에서만 발생하는 에러인걸로 추정됨
- padding으로 인해 잘리는 것으로 추정..
- 해당 오류를 검색했지만 일치하는 사례를 찾을 수 없어서 실제 서비스를 참고해서 해결
- 네이버의 경우 placeholder를 안하고 p태그를 placeholder처럼 사용하고 textArea에 focus되면 해당 태그를 삭제함
- 구글 의견보내기 경우 겉태그를 만들어서 겉태그에 border와 padding을 주는 방식으로 처리
- 이 중 구글이 좀더 간단하다고 생각들어 구글 방식 채택

일반 에러바운더리에도 404 인 경우 다른 메세지가 나오도록 처리
- 좁은 헤더를 가진 에러바운더리에만 처리를 해서 기본 에러바운더리에도 처리
- 근데 해당 부분이 겹치는게 많아서 분리가 될 것 같은데 나중에 해보겠습니다
공지사항, 신고처리 상세정보에도 404인 경우 재요청 하지 않도록 처리
- 기존 게시물 세부정보 get과 동일하게 처리
사이드바에 위치한 현 게시물 목록 정보가 정확하지 않은 문제점 해결
- url로 판단하기 때문에 게시물 세부페이지로 접근하면 무조건 "전체"가 되는 문제
- 더불어 검색을 하는 경우에도 잘못된 정보가 표시
- url로 판단하는 것으로는 해결할 수 없어 가장 최근 접속한 목록의 정보를 기존 정렬 정보 context에 함께 저장
- homePage에 접근할 때만 목록임으로 해당 페이지에 접속할 때마다 url을 확인해서 context정보 업데이트
댓글 작성 시 2개 입력되는 오류 해결
- 한글이 조합글자라서 발생하는 문제
- 작성 중인 것인지, 완료된 것인지 알 수 없어서 두 경우 모두 이벤트로 발생되는 것 같음..
- event.nativeEvent.isComposing를 통해 이벤트가 작성중이지 않을때로 조건을 걸면 1회만 호출됨
- 참고자료
메뉴가 헤더보다 위에 위치한 오류 해결
- menu가 모달 z-index를 가져서 발생하는 문제
- z-index를 새로 정의

/**
 * 1 ~ 99: 본문 내 레어이
 * 100 ~ 199 : 본문을 제외한 페이지 내 레이어
 * 200 ~  : 페이지보다 상위 레이어
 */

게시물이 404인 경우 다른 게시물로 들어가도 refetch를 하지 않는 오류 해결
- 예로 알림에서 게시물에 들어가 404 페이지가 뜨고, 다른 알림을 눌러 존재하는 게시물로 접근해도 fetch가 일어나지 않으며 404가 뜨는 오류
- 라우팅이 일어나지만 동일한 페이지 컴포넌트이기 때문에 에러바운더리가 reset되지 않아서 발생하는 문제
- 에러바운더리에 key를 줘서 reset을 시킴
- 리액트쿼리 훅 등을 이용해서 해결할 수 있는데, key를 주니 다른 설정 안해도 reset이 잘 되어서 일단 진행
- 해당 에러바운더리 리셋 부분은 추후 더 찾아볼 예정
메인 게시물 목록 페이지 좌우 마진 없애기 및 배너 중앙 정렬
- 예전 디자인이 더 좋은 것 같아서 되돌렸습니다..
- 배너 디자인 수정했습니다.

- git 이 대소문자 변화를 인지하지 못해 오류 발생

- 레이아웃을 수정해야 하는데 라이브러리로 배포된 부분이라 임시로 폼 태그 스타일을 수정 - 레이아웃 좌우 마진(10px) + 내용물(100%) 라 좌우드래그 발생 - 상위 폼태그에서 width: 100% - 20px 설정

- 한글의 경우 조합문자라서 발생하는 문제라고 함. - event.nativeEvent.isComposing를 통해 조합이 끝났는지 확인하여 이벤트 발생

- textAra padding때문에 잘리는 문제라고 판단 - google 의견보내기 참고하여 래퍼로 감싸 마진을 설정 태그를 생성 - 이로 인한 focus시 border가 어긋나보여 reset에 outline: 0 포함시킴

- z-index 재정의

- 검색해서 들어간 경우 "검색"으로 표시 - 상세페이지에서도 목록상태를 유지하기 위해 context에 정보 추가 - 홈페이지에 들어갈때 url을 확인해서 전역 목록 상태를 업데이트

- 신고처리 당한 내역 get - 세부공지 get

- 에러바운더리에서 에러가 reset되지 않아 문제 발생 - key를 주어 에러바운더리 reset시키기

github-actions · 2023-11-19T17:34:19Z

⚡️ Lighthouse report!

Category	Score
🟠 Performance	58
🟢 Accessibilty	96
🟢 SEO	100
🟠 PWA	89

Category	Score
🟢 First Contentful Paint	0.6 s
🔴 Largest Contentful Paint	6.7 s
🔴 Total Blocking Time	660 ms
🟢 Cumulative Layout Shift	0
🟠 Speed Index	4.4 s

Gilpop8663

저는 상세 페이지에서 옆에 어떤 종류의 게시글을 보고 있는지에 대해서 발견하지 못했는데요 수아 대단해요!

점점 더 고도화되는 것을 느끼고 있어요 👍👍👍

궁금한 점
댓글이 2번 작성되는 경우의 경우에는 어떻게 해야 재현할 수 있나요?

Gilpop8663 · 2023-11-20T04:05:09Z

frontend/src/components/comment/CommentList/CommentTextForm/index.tsx

+        <S.TextArea
+          aria-label={isEdit ? '댓글 수정' : '댓글 작성'}
+          value={content}
+          aria-placeholder="댓글을 입력해주세요. &#13;&#10;타인의 권리를 침해하거나 도배성/광고성/음란성 내용을 포함하는 경우, 댓글의 운영 원칙 및 관련 법률에 의하여 제재를 받을 수 있습니다."


aria-placeholder는 placeholder가 있으면 없어도 되지 않나요?

Gilpop8663 · 2023-11-20T04:05:41Z

frontend/src/hooks/query/notice/useNoticeDetail.tsx

+      retry: (failCount, error) => {
+        const fetchError = error as Error;
+        const status = JSON.parse(fetchError.message).status;
+        if (status === 404) {
+          return false;
+        }
+        return failCount <= 3;
+      },


👍👍👍

Gilpop8663 · 2023-11-20T04:19:23Z

fe-리뷰완

tjdtls690

ㅡ 수 ㅡ

chsua added 12 commits November 17, 2023 13:50

fix: (#843) 에러 해결을 위한 예비 파일명으로 수정

b604681

fix: (#843) 에러 해결을 위해 최종 파일명으로 수정

a0ca87f

- git 이 대소문자 변화를 인지하지 못해 오류 발생

design: 메인화면 좌우 마진 및 배너 스타일 수정

17fb948

fix: 댓글 작성 시 두번 이벤트가 발생하는 오류 수정

eb4d12f

- 한글의 경우 조합문자라서 발생하는 문제라고 함. - event.nativeEvent.isComposing를 통해 조합이 끝났는지 확인하여 이벤트 발생

fix: 메뉴가 헤더보다 위 레이어에 배치되는 오류 해결

b4aaa54

- z-index 재정의

feat: 404 에러가 발생할 수 있는 훅에 404인 경우 retry 하지 않도록 설정

95f4118

- 신고처리 당한 내역 get - 세부공지 get

feat: 일반 에러바운더리에도 404인 경우 해당 정보가 없다는 에러아이템 렌더링 적용

c5b32c3

fix: 에러발생 후 같은 종류 페이지 접속 시 에러바운더리가 유지되는 오류 해결

60c8810

- 에러바운더리에서 에러가 reset되지 않아 문제 발생 - key를 주어 에러바운더리 reset시키기

design: 공지배너 가로 중앙 정렬

735bd81

chsua added FE 🐛 버그 labels Nov 19, 2023

chsua requested review from Gilpop8663 and inyeong-kang November 19, 2023 17:32

chsua self-assigned this Nov 19, 2023

Gilpop8663 approved these changes Nov 20, 2023

View reviewed changes

tjdtls690 approved these changes Nov 23, 2023

View reviewed changes

Merge branch 'dev' into feat/#843

d1e3554

chsua merged commit 8794681 into dev Nov 23, 2023
1 check passed

woo-chang deleted the feat/#843 branch December 6, 2023 07:07

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[BUG] formData 훅 리팩토링하며 이름 미적용된 부분이 있어 오류발생 #844

[BUG] formData 훅 리팩토링하며 이름 미적용된 부분이 있어 오류발생 #844

chsua commented Nov 19, 2023

github-actions bot commented Nov 19, 2023 •

edited

Loading

Gilpop8663 left a comment

Gilpop8663 Nov 20, 2023

Gilpop8663 Nov 20, 2023

Gilpop8663 commented Nov 20, 2023

tjdtls690 left a comment

[BUG] formData 훅 리팩토링하며 이름 미적용된 부분이 있어 오류발생 #844

[BUG] formData 훅 리팩토링하며 이름 미적용된 부분이 있어 오류발생 #844

Conversation

chsua commented Nov 19, 2023

🔥 연관 이슈

📝 작업 요약

⏰ 소요 시간

🔎 작업 상세 설명

github-actions bot commented Nov 19, 2023 • edited Loading

Gilpop8663 left a comment

Choose a reason for hiding this comment

Gilpop8663 Nov 20, 2023

Choose a reason for hiding this comment

Gilpop8663 Nov 20, 2023

Choose a reason for hiding this comment

Gilpop8663 commented Nov 20, 2023

tjdtls690 left a comment

Choose a reason for hiding this comment

github-actions bot commented Nov 19, 2023 •

edited

Loading