댓글의 임시저장 기능을 구현한다 #788
Merged
댓글의 임시저장 기능을 구현한다 #788
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
- Toast 이미지 가져오는 로직이 중복되어 함수로 분리 - 코멘트 작성 함수에서 너무 많은 일을 하고 있어 함수로 분리
훅 내부에 comment 와 관련된 상태만 있어서 이름을 comment로 조정함
Editor에 ref가 걸려있기 때문에 매초마다 state 저장을 요청하여 처리
commentInputModal에서 너무 많은 로직이 존재하여 hook으로 빼기
hwangstar156
requested changes
Oct 18, 2022
Comment on lines
+6
to
+18
| export const takeToastImgEditor = (content: MutableRefObject<Editor | null>) => { | ||
| if (content.current) { | ||
| content.current.getInstance().removeHook('addImageBlobHook'); | ||
| content.current.getInstance().addHook('addImageBlobHook', (blob, callback) => { | ||
| (async () => { | ||
| const formData = new FormData(); | ||
| formData.append('imageFile', blob); | ||
| const url = await postImageUrlConverter(formData); | ||
| callback(url, 'alt-text'); | ||
| })(); | ||
| }); | ||
| } | ||
| }; |
There was a problem hiding this comment.
이 로직 제가 지난 pr에서 뺀것 같은 기억이있네요..!
Comment on lines
12
to
54
| const useHandleCommentInputModalState = ({ | ||
| closeModal, | ||
| articleId, | ||
| modalType, | ||
| commentId, | ||
| setTempSavedComment, | ||
| }: Omit<CommentInputModalProps, 'placeholder'>) => { | ||
| const [isAnonymous, setIsAnonymous] = useState(false); | ||
| const commentContent = useRef<Editor | null>(null); | ||
| const { showSnackBar } = useSnackBar(); | ||
| const { | ||
| isLoading: postIsLoading, | ||
| mutate: postMutate, | ||
| isSuccess: postIsSuccess, | ||
| } = usePostCommentInputModal(closeModal); | ||
| const { | ||
| isLoading: putIsLoading, | ||
| mutate: putMutate, | ||
| isSuccess: putIsSuccess, | ||
| } = usePutCommentInputModal(closeModal); | ||
|
|
||
| useEffect(() => { | ||
| if (postIsSuccess || putIsSuccess) { | ||
| queryClient.refetchQueries('comments'); | ||
| } | ||
| }); | ||
|
|
||
| useEffect(() => { | ||
| takeToastImgEditor(commentContent); | ||
| }, [commentContent]); | ||
|
|
||
| useEffect(() => { | ||
| const commentTempSavedInterval = setInterval(() => { | ||
| if (commentContent.current !== null) { | ||
| setTempSavedComment(commentContent.current.getInstance().getMarkdown()); | ||
| } | ||
| }, 1000); | ||
| return () => clearInterval(commentTempSavedInterval); | ||
| }, []); | ||
|
|
||
| const onClickCommentPostButton = () => { | ||
| if (modalType === 'register') { | ||
| handleCreateComment(); |
Comment on lines
+43
to
+50
| useEffect(() => { | ||
| const commentTempSavedInterval = setInterval(() => { | ||
| if (commentContent.current !== null) { | ||
| setTempSavedComment(commentContent.current.getInstance().getMarkdown()); | ||
| } | ||
| }, 1000); | ||
| return () => clearInterval(commentTempSavedInterval); | ||
| }, []); |
There was a problem hiding this comment.
state에 저장하는 로직입니다 ! editor를 ref로접근하고 있어서 몇 초마다 저장하는 명령을 해야 제대로 저장이 되더라고요
hwangstar156
approved these changes
Oct 19, 2022
liswktjs
added a commit
that referenced
this pull request
Oct 20, 2022
* emotion theme관련 에러가 발생하여 babel-loader로 수정 (#765) emotion theme관련 에러가 발생하여 babel-loader로 수정 * README.md 생성하기 (#536) * docs: 공식 README.md 초안 작성 * docs: frontend 기술스택 update * docs: backend 기술스택 update * docs: 오타 수정 * docs: 공식 history 추가 공식의 공개된 스프린트 발표 영상을 링크로 추가 * docs: Frontend 기술 스택 교체 및 4차 스프린트 영상 추가 * fix: 기능에서 프론트 , 백엔드 분리 된거 제거 * feat:CI/CD와 인프라 구조도 추가 * refactor: 팀문화 이미지 수정 * feat: 4차 데모영상 추가 * feat: 기능 소개 추가 Co-authored-by: brorae <[email protected]> Co-authored-by: 윤주리 <[email protected]> * feat: 백엔드 기술스택 변경 * 게시글 자세히 보기에서 수정 , 삭제 버튼이 잘 보이도록 UI 수정하기 (#732) * chore: 사용하지 않는 React 제거 * refactor: Detail 페이지에 theme끼리를 묶음 * refactor: 수정, 삭제 버튼을 아이콘으로 대체 * fix: margin값 조정 및 이름 수정 * 조회 쿼리 개선 및 반정규화 진행 (#776) * refactor: Article에 likeCount와 CommentCount 추가 * refactor: findAllByPage Dto로 반환하도록 수정 * refactor: ArticleService 수정 및 타입 Long으로 통일 * refactor: findAllByLikes Dto 반환하도록 수정 * refactor: searchByText Dto 반환하도록 수정 * refactor: searchByAuthor, searchByTag Dto 반환하도록 수정 * refactor: 전체페이지에서 익명 적용되도록 수정 * refactor: tag 검색 시 중복 제거 * refactor: infra 패키지 분리 * refactor: isLike 조회 쿼리 생성 * refactor: PagingArticleRepository에서 DTO 한번에 반환하도록 수정 * refactor: Article column 변경 사항 flyway 적용 * refactor: 좋아요 갯수 추가 * refactor: left join -> inner join으로 변경 * refactor: views, likes index 적용 flyway 추가 * refactor: 불필요한 메서드 제거 * feat: 04시에 좋아요수 및 댓글수 동기화 scheduling 구현 * refactor: scheduling config로 설정 * refactor: enableScheduling annotation 제거 * refactor: 불필요한 개행 제거 * refactor: Schedule 수정 * auth가 필요한 테스트에서만 레디스 컨테이너가 뜨도록 수정 (#778) * refactor: auth가 필요한 테스트에서만 레디스 컨테이너가 뜨도록 수정 * refactor: 띄어쓰기 수정 Co-authored-by: brorae <[email protected]> Co-authored-by: brorae <[email protected]> * docs: 이미지 사이즈 변경 * docs: 기능 및 소개 수정 * docs: 불필요한 태그 삭제 및 개행 추가 * feat: jenkins 파일 추가 (#782) * 데스크탑 모드의 글 작성 페이지에서 카테고리 선택의 위치를 조정한다 (#728) * refactor: theme을 많이 사용하는 곳에서 묶어서 간단하게 보이도록 함 categorybutton, 임시저장버튼 스타일 수정 * fix: style파일 충돌 해결 * feat: Card 컴포넌트 조정 값에 margin 추가 * fix: category 선택 하는 곳 margin-top값 조정 * fix: 제목과 해시태그 입력하는 곳 글씨 크기 축소 * 마이페이지에서 내용을 보여주는 Item 컴포넌트에 반응형을 적용한다 (#731) * fix: userArticleItem에 대해서 큰 화면에서 width값 줄이기 * fix: comment 데스크탑 화면일 때에 width 수정 * fix:임시저장글 데스크타입일 때에 스타일 수정 * refactor: Mypage의 컴포넌트 theme으로 묶음 * fix: width값 조정하여 가운데 정렬하게 함 * 해시태그페이지의 닫기, 열기 버튼의 UI를 수정한다 (#730) * fix: 닫기, 열기 버튼을 아이콘으로 대체 닫기, 더보기 버튼을 아이콘으로 대체하고 theme을 2개이상 사용시 theme을 묶어서 정리 * fix: ; 빠진 것 추가 * 공통 모달을 개발한다. (#724) * feat: 모달에 대한 공용 컴포넌트 구현 * feat: 공용모달을 이용할 수 있는 useModal hook 구현 * feat: 제네릭 내부에 들어있는 타입을 빼오는 type 구현 * feat: MenuSlider에 공통 모달 적용 * style: 이용하지 않는 외부 의존성 제거 * fix: 모달이 열렸을 경우만 스크롤을 이용하지 못하도록 수정 * feat: 모바일에서만 켜지는 모달에 대한 분기 처리 진행 * feat: CommentInputModal에 대한 공통 모달 적용 * feat: snackBar에서 portal처리 하는 로직 공통 모달로 처리 * feat: mobileOnly 속성 추가 * feat: 필요없는 recoil state제거 * refactor: App.tsx에서 Menuslider관련 로직 제거 * refactor: 절대 경로 제거 * refactor: modalId 타입 변경 * feat: modalId에 누락된 snackBar추가 * refactor: util.ts -> getInside.ts로 변경 * feat: ModalPortal 네이밍 변경 * feat: modalType을 좀더 명확한 네이밍을 통하여 분리처리 하도록 변경 * feat: isMobileOnly: false 추가 * feat: getInside -> innerType으로 네이밍 변경 * refactor: 절대 경로 수정 * 상세페이지가 스크린 리더기에서 올바르게 읽히도록 웹 접근성을 높인다 (#780) * feat: aria-label 과 tabIndex 부여 * fix: 리뷰내용 반영 * feat: header aria-label추가 * fix: TabBar에 aria-label추가 * feat: aria-label추가 * TabBar이 아이콘들을 정렬하고 댓글의 프로필 이미지 크기를 조정한다 (#787) * fix: tabBar 아이템 정렬 * fix: 데스크탑 환경에서 댓글 모달에 스크롤바 보이던 것을 삭제 * style: 유저 프로필 크기 조정 및 padding 부여 * fix: 빠진 괄호 복구 * 댓글의 임시저장 기능을 구현한다 (#788) * refactor: 함수 리팩토링 - Toast 이미지 가져오는 로직이 중복되어 함수로 분리 - 코멘트 작성 함수에서 너무 많은 일을 하고 있어 함수로 분리 * fix: 불필요한 import문 삭제 * fix:훅 이름 comment로 조정 훅 내부에 comment 와 관련된 상태만 있어서 이름을 comment로 조정함 * feat: 댓글을 1초마다 임시저장하도록 기능 구현 Editor에 ref가 걸려있기 때문에 매초마다 state 저장을 요청하여 처리 * refactor: CommentPortal 내의 상태 관련 로직들 훅으로 분리 commentInputModal에서 너무 많은 로직이 존재하여 hook으로 빼기 * feat: 댓글을 수정하거나, 생성시 임시 저장한 글이 없어지도록 한다 * fix: develop과의 머지에 따른 코드 수정 진행 * 이벤트 핸들러에 대한 컨벤션을 맞춰 수정한다. (#762) * refactor: 이벤트 핸들러 네이밍 변경 및 컨벤션 맞춰서 수정 * refactor: 이벤트 핸들러 변경점 test 코드에도 반영 * fix: useHeartClick에서 하트를 클릭했을떄 반대로 동작하던 문제 해결 * feat: 좀 더 자세한 함수네이밍 변경 * S3를 이용해서 이미지 저장 기능을 구현한다 (#734) * chore: s3, testcontainers 관련 의존성 추가 * refactor: 테스트 yml 설정 변경 * feat: 파일 이름, 확장자 예외 처리 구현 * feat: 이미지 업로드 기능 구현 * chore: 이미지 관련 설정 추가 * chore: invalidToken 설정 파일 위치 변경 * chore: invalidToken 설정 파일 위치 변경 * chore: testcontainers 버전 변경 * chore: test log를 위한 의존성 추가 * chore: test yml 파일 위치 변경 및 test 의존성 제거 * chore: test yml 파일 위치 변경 및 test 의존성 제거 * refactor: 파일 업로드 실패 예외 추가 * 해시태그 검색이 되도록 한다 (#796) * fix: 함수 네이밍 변경 * feat: 해시태그 검색 기능 구현 * style: 해시태그 검색 리스트 스타일링 * fix: 오타 변경 * feat: 해시태그 검색 결과 중에서 선택하여 게시글 검색가능하도록 조정 * feat: 엔터를 해도 검색이 되도록 조취 및 검색 실패시 result 상태 초기화 * fix: 중복되는 스타일 코드 제거 * refactor: 중복되는 로직 함수로 분리 * feat: input창에 글씨 입력할 때마다 검색하도록 기능 구현 * fix: 리팩토링 내용 반영 상수화 및 함수 분리해서 적용 * style: 스타일 수정 * fix: 삼항 연산자로 변경 * carousel ui를 변경한다. + 홈페이지의 접근성을 향상한다. (#786) * refactor: useGetPopularArticles에서 carousel 이동 로직을 분리 * feat: 기존 colorKey를 이용하는 컴포넌트 제거 * feat: useCarousel 로직 수정 useEffect를 통하여 carousel을 움직일 수 있도록 수정 * feat: carousel 기본 스타일링 변경 * refactor: card의 children을 옵셔널도 허용하도록 변경 * feat: scroll을 통해서 캐러셀을 움직일 수 있도록 구현 * feat: 비화성화된 carousel 아이템에 대한 스타일링 추가 * feat: profile box에 대한 스타일링 변경 * fix: 화살표가 반응형에서 깨지는 오류 수정 * feat: 클릭하면 이동할 수 있는 handler 추가 * feat: 스크롤 이동 범위 300 -> 340px로 변경 * feat: commentIcon과 ViewIcon 추가 * feat: progressiveBar 컴포넌트로 분리 * feat: 마지막 요소에서 다음으로 넘어갈때 처음으로 갈 수 있도록 구현 * feat: 일정시간후에 다음으로 자동으로 넘어가도록 구현 * feat: progressive bar 반영한것 적용 * feat: 처음과 마지막에 빈요소를 보여주는것 수정 * feat: PopularArticleItem에 카테고리와 좋아요 수 추가 * feat: 자동으로 넘어가는 시간 5초에서 3초로 단축 * feat: carousel에 이용하는 숫자들 상수화하여 관리 * feat: resize 될때마다 스크롤 이동시켜야될 너비를 변경할 수 있도록 구현 debounce를 이용하여 마지막 resize만 적용한다. * feat: inActive인 carousel item에 대해서 스타일 추가 * feat: left, right arrowButton 스타일링 변경 * feat: 사용하지 않는 애니메이션 객체 제거 * feat: scroll smooth를 위해 scale제거후 brigtness로 대체 * feat: 캐러셀과 게시물사이의 margin-top 감소 * feat: 웹 접근성을 위한 role과 aria 추가 * feat: 탭을 이용할때 inActive한 요소에는 포커싱되지 않도록 inert 옵션 추가 * fix: window가 포커스 안되있을때 state는 변하지만 스크롤은 변하지 않는 문제 해결 * feat: enter만 이용해서 컨트롤 할 수 있도록 설정 * feat: inert가 isActive를 인자로 받는 요소한테만 적용할 수 있도록 설정 * feat: 오늘의 인기글과 캐러셀을 연결 * feat: profileIcon에 접근성 추가 * feat: categoryTitle에 대한 접근성 추가 * feat: 각 역할에 맞는 role 부여 * feat: 검색에 대한 웹접근성 추가 * feat: articleItem에 대한 접근성 추가 * feat: dropdown id제거 및 이미지 alt 추가 * feat: ul속성의 자식으로 li를 이용할 수 있도록 as 속성 추가 * feat: SortDropdown 접근성 추가 * feat: 좋아요수에 대한 접근성 수정 * feat: 질문, 토론 카테고리에 따라서 보여주는 색 변경 * refactor: 절대 경로 수정 * refactor: inline css props 제거 * feat: px로 된것 theme을 이용하여 관리 * feat: 중복되는 import 통일 * refactor: 변수이름을 더 명시적으로 변경 isLog -> isShowAlertLog * feat: useEnterToClick의 ref에 대해서 더 명시적인 네이밍 설정 * refactor: 불필요한 주석 제거 * refactor: theme 3개 이상 사용하는 부분 통일 * refactor: px로 이용한 코드 theme을 통하여 관리 * feat: progressive bar 지연시간을 상수로 관리 * feat: carouselElementRef에 타입가드 작성 * refactor: linear gradient theme으로 관리 * fix: 처음 더미요소가 슬라이드 되는 문제 해결 * feat: 제목이 두 줄만 될수 있도록 설정 * feat: 빈 해시태그일떄도 높이가 동일하도록 설정 * feat: 너비의 50%만큼 이동하도록 수정 * feat: 반응형 크기 수정 * fix: 중복 선언된 스타일 제거 * fix: 첫번째 요소에서 왼쪽으로 넘어가지는 오류 수정 Co-authored-by: JASUN LEE <[email protected]> * 동시성 이슈를 해결한다. (#795) * refactor: 투표하기에서 동시성 이슈 제거 * chore: 리프레시토큰 테이블 제거 * refactor: 투표할 때, 동시성 발생하면 낙관적 락으로 처리하도록 수정 * refactor: 게시글 조회수 증가에 대한 동시성 이슈 해결 * chore: version column 추가 * refactor: 토론게시판에서만 투표가 있으면 삭제하도록 수정 * feat: voteItem과 article 에 대해서 낙관적 락 적용 * refactor: 스케줄러 제거 * feat: 외래키 역할의 컬럼에 인덱스 추가 * refactor: 불필요한 스케줄러 로직 제거 * refactor: view update 로직 수정 * style: service layer에서 create로 메서드명 수정 * refactor: 낙관적 락 예외처리 하도록 수정 * refactor: 불필요한 스케줄러 제거 * refactor: 불필요한 스케줄러 제거 * 헤더가 보이지 않는 문제 해결 (#800) useState -> useRecoilState로 변경하여 수정 * 스토리북을 수정하고 배포한다. (#797) * feat: mobile에서만 보이는 컴포넌트들은 바로 모바일로 이동할 수 있도록 설정 * feat: snackBar에 recoil 적용 * feat: detail의 필요없는 useParams 제거 * feat: storybook에 react-router가 작동할 수 있도록 추가 * chore: chromatic 명령어 추가 * chore: gitignore 추가 * fix: 스토리북에서 이미지가 깨지는 오류 해결 convertGithubAvatarUrlForResize를 개발환경에서는 실행하지 않도록 설정 * feat: comment에 browserRouter 추가 * feat: sortDropdown에 sortList 추가 * fix: TabBar 중앙정렬 * chore: api요청을 스토리북에서 이용할 수 있도록 설정 * feat: 해시태그로 게시물 조회하는 api 스토리북에서 모킹할 수 있도록 설정 * feat: vote에 대한 스토리북 추가 * feat: 스토리북일때는 뒤에 size 쿼리스트링을 붙히지 않도록 수정 * fix: 스토리북 배포환경에서 이미지 깨지는것 수정 * refactor: voteItemId -> votedItemId로 네이밍 변경 * fix: voteItemId -> votedItemId 누락된것 수정 * refactor: 스토리북 문구 변경 * 이미지 업로드 기능을 구현한다 (#805) * chore: s3, testcontainers 관련 의존성 추가 * refactor: 테스트 yml 설정 변경 * feat: 파일 이름, 확장자 예외 처리 구현 * feat: 이미지 업로드 기능 구현 * chore: 이미지 관련 설정 추가 * chore: invalidToken 설정 파일 위치 변경 * chore: invalidToken 설정 파일 위치 변경 * chore: testcontainers 버전 변경 * chore: test log를 위한 의존성 추가 * chore: test yml 파일 위치 변경 및 test 의존성 제거 * chore: test yml 파일 위치 변경 및 test 의존성 제거 * refactor: 파일 업로드 실패 예외 추가 * chore: asw-sdk version1으로 변경 및 의존성 추가 * feat: 중복된 이름 생성되지 않도록 uuid 활용해서 이름 생성 * refactor: 불필요한 테스트 코드 삭제 및 업로드 로직 변경 * refactor: FileNameGenerator Component 어노테이션 추가 * refactor: upload url 연산 +로 변경 * votedItemId -> voteItemId로 수정 (#807) * image converter 요청 보내는 url을 변경한다. (#801) * feat: imageUrl 변경하는 함수 * fix: 이미지 서버 주소 변경에 따른 수정 진행 Co-authored-by: JASUN LEE <[email protected]> Co-authored-by: JASUN LEE <[email protected]> * feat: 이미지 파일 네임을 변경한다. (#812) imageFile -> file * feat: 이미지 변환 api에 대한 명세 변경 (#814) * fix: imageUrl을 url로 변경한다. (#816) * 질문, 토론 게시판이 선택될때 그 상태가 유지되도록 한다. (#803) * feat: 충돌 해결 과정에서 제거된 react-icons 추가 * feat: 질문, 토론 게시물을 본 뒤 보던 카테고리로 유지 할 수 있도록 구현 * 투표 요청에는 voteItemId, 응답에는 votedItemId로 수정 (#809) * feat: 응답받는것은 votedItemId로 요청하는것은 voteItemId로 수정 * fix: voteItem에서 투표를 하지 않을 경우 모든 항목이 투표된것 처럼 보이는 에러 해결 * refactor: voteItems LinkedHashSet으로 순서 보장하도록 수정 (#822) * 검색에서 엔터가 되지 않는 문제를 해결한다. (#823) * fix: 검색을 할떄 엔터가 되지 않는 문제 해결 * fix: 사용하지 않는 import문 제거및 theme 사용 * fix: console.log 제거 Co-authored-by: JASUN LEE <[email protected]> * refactor: 투표가 없는 토론게시글이 삭제할 수 있도록 수정 (#828) * 이름이 너무 길어졌을 때에 ...처리를 하여 보여지게 한다 (#824) * fix: 유저이름에 대한 유효성 평가 * fix: 글자수가 넘쳤을 때에 스타일링 적용 * 투표 만료처리가 없는것을 해결한다 (#830) * 모바일에서 로그아웃 안되던 것을 새로고침으로 문제 해결 (#832) * 회원이름 길이 제한 255자로 설정 (#829) * refactor: 회원이름 길이 제한 255자로 설정 * refactor: dto 검증 제거 * fix: usePage사용하여 페이지 이동 감지시 모달창 내리기 (#834) * 상세 페이지 처음 들어갈시 스크롤을 최상위로 올릴 수 있도록 수정 (#835) * 투표 이름이 길 때에 화면에 넘치는 것을 방지한다 (#837) * style: 이름이 길어서 넘칠때에 대한 스타일링 처리 * fix: disabled제거하여 수정 * fix: usePage사용하여 페이지 이동 감지시 모달창 내리기 (#834) * 상세 페이지 처음 들어갈시 스크롤을 최상위로 올릴 수 있도록 수정 (#835) * feat: 투표 이름에 line-height 부여 Co-authored-by: Jungmin Hwang <[email protected]> Co-authored-by: hwangjungmin <[email protected]> * 투표 아이템 수 순서대로 나오도록 수정 (#841) * refactor: 투표가 없는 토론게시글이 삭제할 수 있도록 수정 * fix: 투표아이템 순서대로 생성되도록 자료구조 변경 * chore: submodule 업데이트 Co-authored-by: brorae <[email protected]> Co-authored-by: 윤주리 <[email protected]> Co-authored-by: giron <[email protected]> Co-authored-by: Hanul Lee <[email protected]> Co-authored-by: Jungmin Hwang <[email protected]> Co-authored-by: hwangjungmin <[email protected]>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
close #772