main으로 머지 !~

src/Detail/components/BigLecueNote/BigLecueNote.style.ts

@@ -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;

src/Detail/components/LecueNoteModal/LecueNoteModal.style.ts

@@ -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;

src/EditNickname/components/NicknameInput/index.tsx

@@ -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);
@@ -29,7 +29,6 @@ function NicknameInput({
               handleSetNickname,
               handleSetWordCnt,
               handleSetIsValid,
-              currentNickname,
               e,
             });
           }}

src/EditNickname/hooks/usePatchNickname.ts

@@ -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';
@@ -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) => {
@@ -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('/');

src/EditNickname/types/editNicknameTypes.ts

@@ -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>;
 }
 

src/History/components/MyLecueBook/index.tsx

@@ -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) => {
@@ -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>
@@ -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>
@@ -101,7 +94,7 @@ function MyLecueBook(props: LecueBookProps) {
         <CommonModal
           category="book_delete"
           setModalOn={setModalOn}
-          handleFn={handleFn}
+          handleFn={handleDeleteBookFn}
         />
       )}
     </S.Wrapper>

src/History/components/MyLetter/MyLetter.style.ts

@@ -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`

src/History/components/MyLetter/index.tsx

@@ -9,6 +9,8 @@ function MyLetter({
   title,
   content,
   noteDate,
+  noteTextColor,
+  noteBackground,
 }: MyLetterProps) {
   const navigate = useNavigate();
 
@@ -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>

src/History/hooks/useDeleteMyBook.ts

@@ -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;

src/History/hooks/useGetMyBookList.ts

@@ -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: () => {

src/History/types/historyType.ts

@@ -30,6 +30,8 @@ export interface MyLetterProps {
   title: string;
   content: string;
   noteDate: string;
+  noteTextColor: string;
+  noteBackground: string;
 }
 
 export interface HistoryEmptyViewProps {

src/Home/components/HomeMainBanner/HomeMainBanner.style.ts

@@ -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`

src/LecueNote/components/ShowColorChart/ShowColorChart.style.ts

@@ -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`

src/Target/components/NameInput/index.tsx

@@ -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}
         />

src/Target/page/TargetPage/index.tsx

@@ -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>

src/components/common/LecueBook/index.tsx

@@ -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) => {

src/libs/hooks/useDeleteFavorite.ts

@@ -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;

src/libs/hooks/usePostFavorite.ts

@@ -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;