본문글 개행 적용, 모달 외부 누르면 모달 닫히기 적용, 즐겨찾기 아이콘 수정, API 통신 실패 시 Toast에 띄울 메시…

…지 가공 (#440) * fix: (#417) 게시글 본문에 공백이 보이도록 css 수정 * fix: (#416) 글 수정 시 image url 가공 없이 전송 * fix: (#418) TwoButtonModal 외부를 누르면 닫히도록 수정 * feat: (#421) 작성자가 투표하는 경우 toast 띄우기 * refactor: (#424) 카테고리 토글 버튼을 별모양 아이콘으로 변경 * fix: (#433) API 통신 실패의 응답, 오류 메시지를 toast에 띄우기 * fix: (#416) 글 수정 시 선택지에서 기존의 이미지 보이도록 수정 * fix: (#416) 글수정 시 imageUrl 앞의 주소 제거 * fix: (#417) API 통신 실패 시 Toast가 무한으로 띄워지는 에러 해결 * fix: (#442) 투표가 된 게시글은 수정 페이지로 라우팅 못하게 early return 하기 * fix: (#417) 이미지 url 값 변경 * fix: (#443) 비회원이 즐겨찾기하는 경우 적절한 에러 메시지 띄우도록 수정
woowacourse-teams · Aug 16, 2023 · b8bab3c · b8bab3c
1 parent 1e13f72
commit b8bab3c
Show file tree

Hide file tree

Showing 13 changed files with 69 additions and 24 deletions.
diff --git a/frontend/src/assets/star-filled.svg b/frontend/src/assets/star-filled.svg
diff --git a/frontend/src/assets/star-lined.svg b/frontend/src/assets/star-lined.svg
diff --git a/frontend/src/components/PostForm/index.tsx b/frontend/src/components/PostForm/index.tsx
@@ -22,7 +22,7 @@ import Toast from '@components/common/Toast';
 import WritingVoteOptionList from '@components/optionList/WritingVoteOptionList';
 
 import { PATH } from '@constants/path';
-import { CATEGORY_COUNT_LIMIT, POST_CONTENT, POST_TITLE } from '@constants/post';
+import { CATEGORY_COUNT_LIMIT, IMAGE_BASE_URL, POST_CONTENT, POST_TITLE } from '@constants/post';
 
 import { calculateDeadlineTime } from '@utils/post/calculateDeadlineTime';
 import { checkWriter } from '@utils/post/checkWriter';
@@ -118,8 +118,8 @@ export default function PostForm({ data, mutate }: PostFormProps) {
  const formData = new FormData();
 
  const imageUrlList = [
- contentImageHook.contentImage,
- ...writingOptionHook.optionList.map(option => option.imageUrl),
+ contentImageHook.contentImage.replace(IMAGE_BASE_URL, ''),
+ ...writingOptionHook.optionList.map(option => option.imageUrl.replace(IMAGE_BASE_URL, '')),
  ];
 
  if (e.target instanceof HTMLFormElement) {

diff --git a/frontend/src/components/comment/CommentList/CommentItem/index.tsx b/frontend/src/components/comment/CommentList/CommentItem/index.tsx
@@ -77,7 +77,11 @@ export default function CommentItem({ comment, userType }: CommentItemProps) {
  };
 
  useEffect(() => {
- isError && error instanceof Error && openToast(error.message);
+ if (isError && error instanceof Error) {
+ const errorResponse = JSON.parse(error.message);
+ openToast(errorResponse.message);
+ return;
+ }
  }, [isError, error]);
 
  const USER_TYPE = COMMENT_USER_MENU[userType];

diff --git a/frontend/src/components/comment/CommentList/CommentTextForm/index.tsx b/frontend/src/components/comment/CommentList/CommentTextForm/index.tsx
@@ -67,7 +67,7 @@ export default function CommentTextForm({
 
  useEffect(() => {
  isEditError && editError instanceof Error && openToast(editError.message);
- }, [isEditError, editError]);
+ }, [isEditError, editError, openToast]);
 
  return (
  <S.Container>

diff --git a/frontend/src/components/common/Dashboard/CategoryToggle/index.tsx b/frontend/src/components/common/Dashboard/CategoryToggle/index.tsx
@@ -1,14 +1,17 @@
-import React, { useEffect, useState } from 'react';
+import React, { useContext, useEffect, useState } from 'react';
 
 import { Category } from '@type/category';
 
+import { AuthContext } from '@hooks/context/auth';
 import { useCategoryFavoriteToggle } from '@hooks/query/category/useCategoryFavoriteToggle';
 import { useToast } from '@hooks/useToast';
 
 import Toast from '@components/common/Toast';
 
 import chevronDown from '@assets/chevron-down.svg';
 import chevronUp from '@assets/chevron-up.svg';
+import starFilled from '@assets/star-filled.svg';
+import startLined from '@assets/star-lined.svg';
 
 import * as S from './style';
 
@@ -27,12 +30,22 @@ export default function CategoryToggle({
  const { isToastOpen, openToast, toastMessage } = useToast();
  const { mutate, isError, error } = useCategoryFavoriteToggle();
 
+ const { loggedInfo } = useContext(AuthContext);
+
  const handleToggleClick = () => {
  setIsToggleOpen(prevIsToggleOpen => !prevIsToggleOpen);
  };
 
  useEffect(() => {
- isError && error instanceof Error && openToast(error.message);
+ if (isError && error instanceof Error) {
+ if (!loggedInfo.isLoggedIn) {
+ openToast('즐겨찾기는 로그인 후 이용할 수 있습니다.');
+ return;
+ }
+ const errorResponse = JSON.parse(error.message);
+ openToast(errorResponse.message);
+ return;
+ }
  }, [isError, error]);
 
  return (
@@ -50,11 +63,9 @@ export default function CategoryToggle({
  {categoryList.length === 0 && <S.Caption>현재 카테고리가 없습니다</S.Caption>}
  {categoryList.map(({ id, name, isFavorite }) => (
  <S.CategoryItem key={id}>
- <S.Circle
- title="즐겨찾기 버튼"
- onClick={() => mutate({ id, isFavorite })}
- $isFavorite={isFavorite}
- />
+ <S.Circle title="즐겨찾기 버튼" onClick={() => mutate({ id, isFavorite })}>
+ <img src={isFavorite ? starFilled : startLined} alt="" />
+ </S.Circle>
  <S.CategoryNameLink to={`/posts/category/${id}`}>{name}</S.CategoryNameLink>
  </S.CategoryItem>
  ))}

diff --git a/frontend/src/components/common/Dashboard/CategoryToggle/style.ts b/frontend/src/components/common/Dashboard/CategoryToggle/style.ts
@@ -40,14 +40,11 @@ export const CategoryItem = styled.div`
  align-items: center;
 `;
 
-export const Circle = styled.button<{ $isFavorite: boolean }>`
- width: 12px;
- height: 12px;
- border-radius: 50%;
+export const Circle = styled.button`
+ width: 17px;
+ height: 17px;
  margin-right: 12px;
 
- background-color: ${({ $isFavorite }) => ($isFavorite ? 'var(--primary-color)' : '#CCCCCC')};
-
  cursor: pointer;
 `;
 

diff --git a/frontend/src/components/common/Post/index.tsx b/frontend/src/components/common/Post/index.tsx
@@ -59,7 +59,10 @@ export default function Post({ postInfo, isPreview }: PostProps) {
  return;
  }
 
- if (writer.nickname === loggedInfo.userInfo?.nickname) return;
+ if (writer.nickname === loggedInfo.userInfo?.nickname) {
+ openToast('내가 쓴 글에는 투표를 할 수 없습니다.');
+ return;
+ }
 
  if (voteInfo.selectedOptionId === newOptionId) return;
 

diff --git a/frontend/src/components/common/Post/style.ts b/frontend/src/components/common/Post/style.ts
@@ -100,6 +100,7 @@ export const Content = styled.p<{ $isPreview: boolean }>`
  font: var(--text-caption);
  text-overflow: ellipsis;
  word-break: break-word;
+ white-space: pre-wrap;
 
  overflow: hidden;
 

diff --git a/frontend/src/components/common/TwoButtonModal/index.tsx b/frontend/src/components/common/TwoButtonModal/index.tsx
@@ -1,4 +1,4 @@
-import { PropsWithChildren } from 'react';
+import { PropsWithChildren, useEffect, useRef } from 'react';
 
 import SquareButton from '@components/common/SquareButton';
 
@@ -21,11 +21,25 @@ export default function TwoButtonModal({
  secondaryButton,
  children,
 }: CommentModalProps) {
+ const BackDropRef = useRef<HTMLDivElement>(null);
+
  const { text: primaryText, handleClick: primaryClick } = primaryButton;
  const { text: secondaryText, handleClick: secondaryClick } = secondaryButton;
 
+ useEffect(() => {
+ const handler = (e: MouseEvent) => {
+ if (e.target === BackDropRef.current) {
+ secondaryClick();
+ }
+ };
+
+ document.addEventListener('click', handler);
+
+ return () => document.removeEventListener('click', handler);
+ }, [BackDropRef, secondaryClick]);
+
  return (
- <S.Container>
+ <S.Container ref={BackDropRef}>
  <S.ModalContainer>
  <S.Title>{title}</S.Title>
  {children}

diff --git a/frontend/src/pages/post/CreatePostPage/index.tsx b/frontend/src/pages/post/CreatePostPage/index.tsx
@@ -25,7 +25,11 @@ export default function CreatePostPage() {
  }, [isSuccess, navigate]);
 
  useEffect(() => {
- isError && error instanceof Error && openToast(error.message);
+ if (isError && error instanceof Error) {
+ const errorResponse = JSON.parse(error.message);
+ openToast(errorResponse.message);
+ return;
+ }
  }, [isError, error]);
 
  return (

diff --git a/frontend/src/pages/post/EditPostPage/EditPost/index.tsx b/frontend/src/pages/post/EditPostPage/EditPost/index.tsx
@@ -30,8 +30,12 @@ export default function EditPost() {
  }, [isSuccess, navigate, postId]);
 
  useEffect(() => {
- isError && error instanceof Error && openToast(error.message);
- }, [isError, error, openToast]);
+ if (isError && error instanceof Error) {
+ const errorResponse = JSON.parse(error.message);
+ openToast(errorResponse.message);
+ return;
+ }
+ }, [isError, error]);
 
  return (
  <>

diff --git a/frontend/src/pages/post/PostDetail/PostDetail/index.tsx b/frontend/src/pages/post/PostDetail/PostDetail/index.tsx
@@ -55,6 +55,7 @@ export default function PostDetail() {
  moveWritePostPage: () => {
  if (postDataFallback.voteInfo.allPeopleCount) {
  openToast('투표한 사용자가 있어 글 수정이 불가합니다.');
+ return;
  }
 
  navigate(`/posts/write/${postId}`);