Skip to content

Commit

Permalink
Merge pull request #326 from Team-Lecue/fix/QA
Browse files Browse the repository at this point in the history
dev 머지 !!
  • Loading branch information
Arooming authored Apr 30, 2024
2 parents 96baf8e + 978a1ef commit 82c241c
Show file tree
Hide file tree
Showing 19 changed files with 121 additions and 77 deletions.
2 changes: 1 addition & 1 deletion src/Detail/components/BigLecueNote/BigLecueNote.style.ts
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ export const BigLecueNoteContentWrapper = styled.div`
display: flex;
justify-content: center;
align-items: center;
overflow: scroll;
overflow-y: auto;
width: 100%;
height: 22.4rem;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,7 @@ export const LecueNoteModalContentWrapper = styled.div`
display: flex;
justify-content: center;
align-items: center;
overflow: scroll;
overflow-y: auto;
width: 100%;
height: 23.4rem;
Expand Down
3 changes: 1 addition & 2 deletions src/EditNickname/components/NicknameInput/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -10,8 +10,8 @@ function NicknameInput({
handleSetNickname,
handleSetIsValid,
}: NicknameInputProps) {
const [wordCnt, setWordCnt] = useState(0);
const currentNickname: string = localStorage.getItem('nickname') || '';
const [wordCnt, setWordCnt] = useState(currentNickname.length);

const handleSetWordCnt = (wordCnt: number) => {
setWordCnt(wordCnt);
Expand All @@ -29,7 +29,6 @@ function NicknameInput({
handleSetNickname,
handleSetWordCnt,
handleSetIsValid,
currentNickname,
e,
});
}}
Expand Down
7 changes: 6 additions & 1 deletion src/EditNickname/hooks/usePatchNickname.ts
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { AxiosError } from 'axios';
import { useMutation } from 'react-query';
import { useMutation, useQueryClient } from 'react-query';
import { useNavigate } from 'react-router-dom';

import { patchNickname } from '../api/patchNickname';
Expand All @@ -12,6 +12,7 @@ const usePatchNickname = (props: usePatchNicknameProps) => {
const { handleSetIsValid, handleSetIsActive, token, nickname } = props;

const navigate = useNavigate();
const queryClient = useQueryClient();

const mutation = useMutation({
mutationFn: async ({ token, nickname }: patchNicknameProps) => {
Expand All @@ -31,6 +32,10 @@ const usePatchNickname = (props: usePatchNicknameProps) => {
}
},
onSuccess: () => {
queryClient.refetchQueries(['useGetMyNickName'], {
exact: true,
});

window.localStorage.setItem('token', token);
window.localStorage.setItem('nickname', nickname);
navigate('/');
Expand Down
1 change: 0 additions & 1 deletion src/EditNickname/types/editNicknameTypes.ts
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,6 @@ export interface CheckNicknameProps {
handleSetNickname: (nickname: string) => void;
handleSetWordCnt: (wordCnt: number) => void;
handleSetIsValid: (isValid: isValidState) => void;
currentNickname: string;
e: React.ChangeEvent<HTMLInputElement>;
}

Expand Down
27 changes: 10 additions & 17 deletions src/History/components/MyLecueBook/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -21,16 +21,15 @@ function MyLecueBook(props: LecueBookProps) {
} = props;
const [noteCount, setNoteCount] = useState('');
const [modalOn, setModalOn] = useState(false);
const [favorite, setFavorite] = useState(isFavorite);

const navigate = useNavigate();

const deleteMutation = useDeleteMyBook();
const FavoritePostMutation = usePostFavorite();
const FavoriteDeleteMutation = useDeleteFavorite('mypage');
const deleteBookMutation = useDeleteMyBook();
const postFavoriteMutation = usePostFavorite();
const deleteFavoriteMutation = useDeleteFavorite('myLecueBook');

const convertNoteCount = (noteNum: number) => {
setNoteCount(noteNum.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ','));
setNoteCount(noteNum.toLocaleString());
};

const handleClickBook = (bookUuid: string) => {
Expand All @@ -49,22 +48,16 @@ function MyLecueBook(props: LecueBookProps) {
bookId: number,
) => {
event.stopPropagation();
if (favorite) {
FavoriteDeleteMutation.mutate(bookId);
setFavorite(false);
} else {
FavoritePostMutation.mutate(bookId);
setFavorite(true);
}
isFavorite ? deleteFavoriteMutation(bookId) : postFavoriteMutation(bookId);
};

const handleFn = () => {
deleteMutation.mutate(bookId);
const handleDeleteBookFn = () => {
deleteBookMutation(bookId);
};

useEffect(() => {
convertNoteCount(noteNum);
}, [favorite]);
}, []);

return (
<S.Wrapper>
Expand All @@ -81,7 +74,7 @@ function MyLecueBook(props: LecueBookProps) {
handleClickFavoriteBtn(event, bookId);
}}
>
{favorite ? <IcStar /> : <IcStarDefault />}
{isFavorite ? <IcStar /> : <IcStarDefault />}
</S.Favorite>
</S.Header>
<S.Title>{title}</S.Title>
Expand All @@ -101,7 +94,7 @@ function MyLecueBook(props: LecueBookProps) {
<CommonModal
category="book_delete"
setModalOn={setModalOn}
handleFn={handleFn}
handleFn={handleDeleteBookFn}
/>
)}
</S.Wrapper>
Expand Down
17 changes: 15 additions & 2 deletions src/History/components/MyLetter/MyLetter.style.ts
Original file line number Diff line number Diff line change
@@ -1,12 +1,25 @@
import { css } from '@emotion/react';
import styled from '@emotion/styled';

export const MyLetterWrapper = styled.article`
export const MyLetterWrapper = styled.article<{
noteTextColor: string;
noteBackground: string;
}>`
width: 100%;
height: 16.3rem;
padding: 1.3rem 1.2rem;
border-radius: 0.4rem;
background-color: ${({ theme }) => theme.colors.sub_purple};
${({ noteBackground }) =>
noteBackground.substring(0, 1) === '#'
? css`
background-color: ${noteBackground};
`
: css`
background: url(${noteBackground});
`};
background-size: 100% 16.3rem;
color: ${({ noteTextColor }) => noteTextColor};
`;

export const MyLetterFavorite = styled.h1`
Expand Down
8 changes: 7 additions & 1 deletion src/History/components/MyLetter/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,8 @@ function MyLetter({
title,
content,
noteDate,
noteTextColor,
noteBackground,
}: MyLetterProps) {
const navigate = useNavigate();

Expand All @@ -17,7 +19,11 @@ function MyLetter({
};

return (
<S.MyLetterWrapper onClick={handleClickMyLetter}>
<S.MyLetterWrapper
onClick={handleClickMyLetter}
noteTextColor={noteTextColor}
noteBackground={noteBackground}
>
<S.MyLetterFavorite>{favoriteName}</S.MyLetterFavorite>
<S.MyLetterTitle>{title}</S.MyLetterTitle>
<S.MyLetterContent>{content}</S.MyLetterContent>
Expand Down
11 changes: 8 additions & 3 deletions src/History/hooks/useDeleteMyBook.ts
Original file line number Diff line number Diff line change
@@ -1,18 +1,23 @@
import { useMutation } from 'react-query';
import { useMutation, useQueryClient } from 'react-query';
import { useNavigate } from 'react-router-dom';

import { deleteMyBook } from '../api/deleteMyBook';

const useDeleteMyBook = () => {
const navigate = useNavigate();
const queryClient = useQueryClient();
const mutation = useMutation({
mutationFn: (noteId: number) => {
return deleteMyBook(noteId);
},
onError: () => navigate('/error'),
onSuccess: () => location.reload(),
onSuccess: () => {
queryClient.refetchQueries(['get-my-lecueBook'], {
exact: true,
});
},
});
return mutation;
return mutation.mutate;
};

export default useDeleteMyBook;
2 changes: 1 addition & 1 deletion src/History/hooks/useGetMyBookList.ts
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import { getMyBookList } from '../api/getMyBookList';
export default function useGetMyBookList() {
const navigate = useNavigate();
const { data: myBookList, isLoading } = useQuery(
['useGetMyBookList'],
['get-my-lecueBook'],
() => getMyBookList(),
{
onError: () => {
Expand Down
2 changes: 2 additions & 0 deletions src/History/types/historyType.ts
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,8 @@ export interface MyLetterProps {
title: string;
content: string;
noteDate: string;
noteTextColor: string;
noteBackground: string;
}

export interface HistoryEmptyViewProps {
Expand Down
7 changes: 3 additions & 4 deletions src/Home/components/HomeMainBanner/HomeMainBanner.style.ts
Original file line number Diff line number Diff line change
Expand Up @@ -8,11 +8,10 @@ export const MainWrapper = styled.div`

export const IconWrapper = styled.section`
display: flex;
gap: 16rem;
align-items: baseline;
justify-content: space-between;
align-items: flex-end;
width: 100%;
margin: 4rem 1.8rem 3.5rem 1.6rem;
margin: 4rem 1.6rem 3.4rem;
`;

export const Button = styled.button`
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ export const Wrapper = styled.div`
padding: 0.2rem 0.1rem 1rem 0.3rem;
overflow-x: scroll;
overflow-x: auto;
`;

export const Input = styled.input`
Expand Down
2 changes: 1 addition & 1 deletion src/Target/components/NameInput/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ function NameInput({ name, changeName }: NameInputProps) {
<S.InputContainer isEmpty={name.length === 0}>
<S.Input
type="text"
placeholder="마음을 전하고 싶은 최애는 누구인가요?"
placeholder="마음을 전하고 싶은 분은 누구인가요?"
value={name}
onChange={handleChangeInput}
/>
Expand Down
4 changes: 2 additions & 2 deletions src/Target/page/TargetPage/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -83,11 +83,11 @@ function TargetPage() {
<S.TargetPageBodyWrapper>
<S.InputSectionWrapper>
<S.NameInputWrapper>
<S.SectionTitle>최애의 이름</S.SectionTitle>
<S.SectionTitle>이름 입력</S.SectionTitle>
<NameInput name={name} changeName={(name) => setName(name)} />
</S.NameInputWrapper>
<S.FavoriteInputWrapper>
<S.SectionTitle>최애의 사진 업로드</S.SectionTitle>
<S.SectionTitle>사진 업로드</S.SectionTitle>
<FavoriteImageInput changeFileData={(file) => setFileData(file)} />
</S.FavoriteInputWrapper>
</S.InputSectionWrapper>
Expand Down
50 changes: 25 additions & 25 deletions src/assets/img/img_home_01.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
8 changes: 4 additions & 4 deletions src/components/common/LecueBook/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -28,16 +28,16 @@ function LecueBook(props: LecueBookProps) {

const navigate = useNavigate();

const MypageDeleteMutation = useDeleteFavorite('mypage');
const HomeDeleteMutation = useDeleteFavorite('home');
const deleteMypageMutation = useDeleteFavorite('favoriteBook');
const deleteHomeMutation = useDeleteFavorite('home');

const handleClickFavoriteBtn = (
bookId: number,
deleteType: deleteType | undefined,
) => {
deleteType === 'home'
? HomeDeleteMutation.mutate(bookId)
: MypageDeleteMutation.mutate(bookId);
? deleteHomeMutation(bookId)
: deleteMypageMutation(bookId);
};

const handleClickBook = (bookUuid: string) => {
Expand Down
33 changes: 25 additions & 8 deletions src/libs/hooks/useDeleteFavorite.ts
Original file line number Diff line number Diff line change
Expand Up @@ -6,22 +6,39 @@ import deleteFavorite from '../api/deleteFavorite';
const useDeleteFavorite = (state: string) => {
const navigate = useNavigate();
const queryClient = useQueryClient();

const handleRefetchQueries = (state: string) => {
switch (state) {
case 'home':
queryClient.refetchQueries(['get-favorite'], {
exact: true,
});
break;

case 'favoriteBook':
queryClient.refetchQueries(['get-mypage-favorite'], {
exact: true,
});
break;

case 'myLecueBook':
queryClient.refetchQueries(['get-my-lecueBook'], {
exact: true,
});
break;
}
};

const mutation = useMutation({
mutationFn: (bookId: number) => {
return deleteFavorite(bookId);
},
onError: () => navigate('/error'),
onSuccess: () => {
state === 'home'
? queryClient.refetchQueries(['get-favorite'], {
exact: true,
})
: queryClient.refetchQueries(['get-mypage-favorite'], {
exact: true,
});
handleRefetchQueries(state);
},
});
return mutation;
return mutation.mutate;
};

export default useDeleteFavorite;
10 changes: 8 additions & 2 deletions src/libs/hooks/usePostFavorite.ts
Original file line number Diff line number Diff line change
@@ -1,17 +1,23 @@
import { useMutation } from 'react-query';
import { useMutation, useQueryClient } from 'react-query';
import { useNavigate } from 'react-router-dom';

import postFavorite from '../api/postFavorite';

const usePostFavorite = () => {
const navigate = useNavigate();
const queryClient = useQueryClient();
const mutation = useMutation({
mutationFn: (bookId: number) => {
return postFavorite(bookId);
},
onError: () => navigate('/error'),
onSuccess: () => {
queryClient.refetchQueries(['get-my-lecueBook'], {
exact: true,
});
},
});
return mutation;
return mutation.mutate;
};

export default usePostFavorite;

0 comments on commit 82c241c

Please sign in to comment.