From 649d229902802724757bbf614fdbc9922be6c891 Mon Sep 17 00:00:00 2001
From: "Ahyeon, Jung" <75254185+a-honey@users.noreply.github.com>
Date: Fri, 1 Mar 2024 14:28:57 +0900
Subject: [PATCH] =?UTF-8?q?fix:=20=EA=B8=B0=EB=B3=B8=20=EB=83=89=EC=9E=A5?=
 =?UTF-8?q?=EA=B3=A0,=20=EB=83=89=EC=9E=A5=EA=B3=A0=20=EC=8B=9D=EC=9E=90?=
 =?UTF-8?q?=EC=9E=AC=20=EB=B3=80=EA=B2=BD=20resetQueries,=20=EC=B9=9C?=
 =?UTF-8?q?=EA=B5=AC=EB=AA=A9=EB=A1=9D,=20=EB=82=98=EB=88=94=20=EB=82=B4?=
 =?UTF-8?q?=EC=97=AD=20api=20=EC=88=98=EC=A0=95=20(#36)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* feat: 친구들페이지 친구 목록, 내 기본 냉장고 추가

* fix: 냉장고 정보 useState

* fix: 구글 로그인 수정

* chore: import 순서 변경

* fix: api 수정

* feat: 문의 주소 추가

* fix: 식자재 추가 시 해당 냉장고로 이동

* fix: 진행중인 나눔 내역 sort 반영

* fix: queryClient.resetQueries after mutation success

* fix: eslint error
---
 .eslintrc.js                                  |   9 +-
 package.json                                  |   1 +
 src/components/atoms/BorderTab.tsx            |   7 +-
 src/components/atoms/Button.tsx               |  15 ++-
 src/components/atoms/CheckBox.tsx             |   8 +-
 src/components/atoms/ExclamationAlertSpan.tsx |  11 +-
 src/components/organisms/FridgeBoard.tsx      |  16 +--
 src/components/organisms/FridgeInfoBox.tsx    |  11 +-
 src/components/organisms/FridgeListModal.tsx  |  11 +-
 src/components/organisms/FriendListItem.tsx   |   7 +-
 .../organisms/FriendsFridgeList.tsx           | 116 ++++++++++++++----
 .../organisms/FriendsRecentBoard.tsx          |  12 +-
 src/components/organisms/IngredientBoard.tsx  |   5 +-
 src/components/organisms/IngredientModal.tsx  |  33 +++--
 src/components/organisms/NavWhiteBox.tsx      |   2 +-
 .../templates/FriendListTemplate.tsx          |   2 +-
 .../queries/fridge/useDeleteIngredientById.ts |   2 +-
 .../queries/fridge/useGetMyIngredient.ts      |   2 +-
 src/hooks/queries/fridge/usePostIngredient.ts |   2 +-
 .../queries/fridge/usePutIngredientById.ts    |   6 +-
 .../queries/friendship/useGetFriendships.ts   |   3 +-
 src/hooks/queries/login/useGetGoogleToken.ts  |   2 +-
 src/hooks/queries/login/usePostUser.ts        |   2 +-
 src/hooks/queries/mypage/useGetMyShares.ts    |  10 +-
 src/hooks/queries/queryKeys.ts                |   4 +-
 src/pages/_app.tsx                            |  20 +--
 src/pages/fridge/add/index.tsx                |  11 +-
 src/pages/fridge/index.tsx                    |  45 ++++---
 src/pages/friend/[id]/index.tsx               |  42 +++++--
 src/pages/mypage/index.tsx                    |   2 +-
 src/pages/mypage/notification/index.tsx       |   4 +-
 src/pages/mypage/profile/index.tsx            |  14 +--
 src/pages/mypage/share/index.tsx              |  11 +-
 src/types/fridge/index.d.ts                   |   6 +
 src/types/mypage/index.d.ts                   |   1 +
 yarn.lock                                     |  12 ++
 36 files changed, 298 insertions(+), 169 deletions(-)
 create mode 100644 src/types/mypage/index.d.ts

diff --git a/.eslintrc.js b/.eslintrc.js
index d66373e..62dd04f 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -6,12 +6,7 @@ module.exports = {
   globals: {
     JSX: true,
   },
-  extends: [
-    'standard-with-typescript',
-    'eslint:recommended',
-    'plugin:prettier/recommended',
-    'next/core-web-vitals'
-  ],
+  extends: ['standard-with-typescript', 'eslint:recommended', 'plugin:prettier/recommended'],
   parserOptions: {
     ecmaVersion: 'latest',
     sourceType: 'module',
@@ -21,6 +16,6 @@ module.exports = {
     '@typescript-eslint/strict-boolean-expressions': 'off',
     'prettier/prettier': ['error', { endOfLine: 'auto' }],
     '@typescript-eslint/explicit-function-return-type': 'off',
-    '@typescript-eslint/no-floating-promises': 'off'
+    '@typescript-eslint/no-floating-promises': 'off',
   },
 };
diff --git a/package.json b/package.json
index a48a124..b5eca10 100644
--- a/package.json
+++ b/package.json
@@ -25,6 +25,7 @@
     "@emotion/react": "^11.11.3",
     "@emotion/styled": "^11.11.0",
     "@tanstack/react-query": "^5.18.1",
+    "@tanstack/react-query-devtools": "^5.24.1",
     "@typescript-eslint/parser": "^6.19.0",
     "axios": "^1.6.5",
     "dayjs": "^1.11.10",
diff --git a/src/components/atoms/BorderTab.tsx b/src/components/atoms/BorderTab.tsx
index 26bf1a4..1c156c1 100644
--- a/src/components/atoms/BorderTab.tsx
+++ b/src/components/atoms/BorderTab.tsx
@@ -7,12 +7,7 @@ interface BorderTabProps {
   clickHandler?: () => void;
   className?: string;
 }
-const BorderTab: React.FC<BorderTabProps> = ({
-  tabName,
-  className,
-  currentTabName,
-  handleTabNameChange,
-}) => {
+const BorderTab: React.FC<BorderTabProps> = ({ tabName, className, currentTabName, handleTabNameChange }) => {
   return (
     <div
       className={`bg-white w-full border-2 p-[8px] text-center rounded-[24px] ${className} ${
diff --git a/src/components/atoms/Button.tsx b/src/components/atoms/Button.tsx
index 76e4d15..6617966 100644
--- a/src/components/atoms/Button.tsx
+++ b/src/components/atoms/Button.tsx
@@ -6,15 +6,14 @@ interface ButtonProps {
   className?: string;
 }
 
-const Button: React.FC<
-  ButtonProps & React.ButtonHTMLAttributes<HTMLButtonElement>
-> = ({ text, className, onClick, ...props }) => {
+const Button: React.FC<ButtonProps & React.ButtonHTMLAttributes<HTMLButtonElement>> = ({
+  text,
+  className,
+  onClick,
+  ...props
+}) => {
   return (
-    <button
-      className={`p-18 gap-12 rounded-12 heading4-semibold ${className}`}
-      onClick={onClick}
-      {...props}
-    >
+    <button className={`p-18 gap-12 rounded-12 heading4-semibold ${className}`} onClick={onClick} {...props}>
       {text}
     </button>
   );
diff --git a/src/components/atoms/CheckBox.tsx b/src/components/atoms/CheckBox.tsx
index 9f8e388..f212ca4 100644
--- a/src/components/atoms/CheckBox.tsx
+++ b/src/components/atoms/CheckBox.tsx
@@ -1,12 +1,8 @@
 import { CheckIcon } from '@/assets/icons';
 import React from 'react';
 
-const CheckBox: React.FC<{ active: boolean; onClick: () => void }> = ({
-  active = false,
-  onClick,
-}) => {
-  const commonStyle =
-    'flex justify-center items-center w-[20px] h-[20px] rounded-full';
+const CheckBox: React.FC<{ active: boolean; onClick: () => void }> = ({ active = false, onClick }) => {
+  const commonStyle = 'flex justify-center items-center w-[20px] h-[20px] rounded-full';
   const buttonClassName = `${commonStyle} ${active ? 'bg-primary2' : 'border border-gray5'}`;
   return (
     <button onClick={onClick} className={buttonClassName}>
diff --git a/src/components/atoms/ExclamationAlertSpan.tsx b/src/components/atoms/ExclamationAlertSpan.tsx
index 4260a5b..5c906e6 100644
--- a/src/components/atoms/ExclamationAlertSpan.tsx
+++ b/src/components/atoms/ExclamationAlertSpan.tsx
@@ -1,19 +1,14 @@
-import React from 'react';
 import { ExclamationIcon } from '@/assets/icons';
+import React from 'react';
 
 interface AlertMessageProps {
   message: string;
   className?: string;
 }
 
-const ExclamationAlertSpan: React.FC<AlertMessageProps> = ({
-  message,
-  className,
-}) => {
+const ExclamationAlertSpan: React.FC<AlertMessageProps> = ({ message, className }) => {
   return (
-    <span
-      className={`flex items-center gap-[4px] text-point4 body1-medium ${className}`}
-    >
+    <span className={`flex items-center gap-[4px] text-point4 body1-medium ${className}`}>
       <ExclamationIcon />
       {message}
     </span>
diff --git a/src/components/organisms/FridgeBoard.tsx b/src/components/organisms/FridgeBoard.tsx
index 556ce54..32bdba5 100644
--- a/src/components/organisms/FridgeBoard.tsx
+++ b/src/components/organisms/FridgeBoard.tsx
@@ -1,18 +1,17 @@
-import React, { useRef, useState } from 'react';
 import { Container, Lottie } from '@/components/atoms';
 import { EmptyBox, FridgeTab, IngredientItemBox } from '@/components/molecules';
+import { Modal, ModalBody, ModalContent, ModalOverlay, useDisclosure } from '@chakra-ui/react';
+import React, { useRef, useState } from 'react';
+
+import type { CurrentFridgeInfoType } from '@/types/fridge';
 import { IngredientModal } from '.';
-import { Modal, ModalOverlay, ModalBody, ModalContent, useDisclosure } from '@chakra-ui/react';
 import { useGetFridgeContentById } from '@/hooks/queries/fridge';
 import { useObserver } from '@/hooks/useObserver';
-import { useRouter } from 'next/router';
 
-const FridgeBoard: React.FC = () => {
+const FridgeBoard: React.FC<{ currentFridgeInfo: CurrentFridgeInfoType }> = ({ currentFridgeInfo }) => {
   const bottom = useRef<HTMLDivElement>(null);
-  const router = useRouter();
   const [detailIngredientId, setDetailIngredientId] = useState(0);
   const [currentTabName, setCurrentTabName] = useState<'냉장' | '냉동'>('냉장');
-  const { fridgeid: fridgeId } = router.query;
 
   const {
     data: ingredients,
@@ -20,7 +19,7 @@ const FridgeBoard: React.FC = () => {
     isFetchingNextPage: isFetchingIngredientNextPage,
     refetch: ingredientsRefetch,
   } = useGetFridgeContentById({
-    id: Number(fridgeId),
+    id: Number(currentFridgeInfo.fridgeId),
     sort: currentTabName === '냉장' ? 'FREEZING' : 'REFRIGERATION',
   });
 
@@ -52,7 +51,7 @@ const FridgeBoard: React.FC = () => {
 
   return (
     <>
-      {isOpenIngredientModal && (
+      {!currentFridgeInfo.username && isOpenIngredientModal && (
         <Modal
           onClose={onCloseIngredientModal}
           isOpen={isOpenIngredientModal}
@@ -70,6 +69,7 @@ const FridgeBoard: React.FC = () => {
           >
             <ModalBody padding={0}>
               <IngredientModal
+                currentFridgeInfo={currentFridgeInfo}
                 isDetailModal
                 id={detailIngredientId}
                 ingredientsRefetch={ingredientsRefetch}
diff --git a/src/components/organisms/FridgeInfoBox.tsx b/src/components/organisms/FridgeInfoBox.tsx
index e2e5382..05f3192 100644
--- a/src/components/organisms/FridgeInfoBox.tsx
+++ b/src/components/organisms/FridgeInfoBox.tsx
@@ -1,21 +1,24 @@
 import { AngleIcon } from '@/assets/icons';
 import { Button } from '../atoms';
+import type { CurrentFridgeInfoType } from '@/types/fridge';
 import React from 'react';
 import { useRouter } from 'next/router';
 
 const FridgeInfoBox: React.FC<{
+  currentFridgeInfo: CurrentFridgeInfoType;
+  fridgeName?: string;
   userName: string;
   toggleIsOpenFridgeListModal: () => void;
   isOkIngredientAdd?: boolean;
-}> = ({ userName = '', toggleIsOpenFridgeListModal, isOkIngredientAdd }) => {
+}> = ({ currentFridgeInfo, fridgeName, userName = '', toggleIsOpenFridgeListModal, isOkIngredientAdd }) => {
   const router = useRouter();
-  const { fridgeid, name } = router.query;
+
   return (
     <div className="flex justify-between items-end mb-[28px]">
       <div className="flex flex-col gap-[12px]">
         <div className="body1-medium text-gray7">{userName ?? '사용자정보없음'} 님의</div>
         <div className="flex items-center gap-[8px]" onClick={toggleIsOpenFridgeListModal}>
-          <div className="heading1-bold">{name ?? '냉장고를 선택해주세요'}</div>
+          <div className="heading1-bold">{currentFridgeInfo.fridgeName ?? '냉장고정보없음'}</div>
           <AngleIcon width={16} height={16} fill="#000000" transform="rotate(-90)" />
         </div>
       </div>
@@ -24,7 +27,7 @@ const FridgeInfoBox: React.FC<{
           className="rounded-6 w-[100px] p-[10px] body1-semibold bg-primary2 text-white"
           text="식자재 추가"
           onClick={() => {
-            void router.push(`/fridge/add?fridgeid=${fridgeid as string}&name=${name as string}`);
+            void router.push(`/fridge/add?fridgeid=${currentFridgeInfo.fridgeId}&name=${currentFridgeInfo.fridgeName}`);
           }}
         />
       )}
diff --git a/src/components/organisms/FridgeListModal.tsx b/src/components/organisms/FridgeListModal.tsx
index 9623fd2..1a1431a 100644
--- a/src/components/organisms/FridgeListModal.tsx
+++ b/src/components/organisms/FridgeListModal.tsx
@@ -3,15 +3,15 @@ import { PlusIcon, TrashcanIcon } from '@/assets/icons';
 import React, { useState } from 'react';
 
 import { FridgeListItem } from '../molecules';
+import { useDeleteFridgeById } from '@/hooks/queries/fridge';
 import useGetMyFridgeList from '@/hooks/queries/fridge/useGetFridgeList';
-import { useRouter } from 'next/router';
 import usePostFridge from '@/hooks/queries/fridge/usePostFridge';
-import { useDeleteFridgeById } from '@/hooks/queries/fridge';
 
 const FridgeListModal: React.FC<{
+  handleCurrentFridgeInfo: (id: number, name: string) => void;
   ownerId?: number;
   onCloseFridgeListModal: () => void;
-}> = ({ ownerId, onCloseFridgeListModal }) => {
+}> = ({ handleCurrentFridgeInfo, ownerId, onCloseFridgeListModal }) => {
   const [isEditingFridgeName, setIsEditingFridgeName] = useState(false);
   const [newFridgeName, setNewFridgeName] = useState({
     id: 0,
@@ -22,15 +22,12 @@ const FridgeListModal: React.FC<{
     name: '기본 냉장고',
   });
 
-  const router = useRouter();
   const fridgeList = useGetMyFridgeList(ownerId ?? undefined);
   const fridgeMutation = usePostFridge();
   const deleteFridgeMutation = useDeleteFridgeById(currentFridge.id);
 
   const handleFridgeClick = (id: number, name: string) => {
-    void router.push(
-      ownerId ? `/friend/${ownerId}?fridgeid=${id}&name=${name}` : `fridge/?fridgeid=${id}&name=${name}`,
-    );
+    handleCurrentFridgeInfo(id, name);
     onCloseFridgeListModal();
   };
 
diff --git a/src/components/organisms/FriendListItem.tsx b/src/components/organisms/FriendListItem.tsx
index 71abe59..cf1da6c 100644
--- a/src/components/organisms/FriendListItem.tsx
+++ b/src/components/organisms/FriendListItem.tsx
@@ -10,9 +10,12 @@ const FriendListItem: React.FC<{
   possibleDelete: boolean;
   onClick: () => void;
   active: boolean;
-}> = ({ data, possibleDelete, onClick, active }) => {
+}> = ({ data, possibleDelete, onClick = () => {}, active }) => {
   return (
-    <div className="flex p-[16px] mb-[12px] justify-between items-center bg-white rounded-[12px]">
+    <div
+      onClick={possibleDelete ? () => {} : onClick}
+      className="flex p-[16px] mb-[12px] justify-between items-center bg-white rounded-[12px]"
+    >
       <div className="flex items-center">
         <Image
           src={returnProfileImg(data.profileImage)}
diff --git a/src/components/organisms/FriendsFridgeList.tsx b/src/components/organisms/FriendsFridgeList.tsx
index a181562..c7705e9 100644
--- a/src/components/organisms/FriendsFridgeList.tsx
+++ b/src/components/organisms/FriendsFridgeList.tsx
@@ -1,38 +1,106 @@
-import { EmptyBox, FriendsFridgeItem } from '../molecules';
-
-import { AngleIcon } from '@/assets/icons';
-import { Container } from '../atoms';
-import React from 'react';
+import { EmptyBox } from '../molecules';
+import { Modal, ModalBody, ModalContent, ModalOverlay, useDisclosure } from '@chakra-ui/react';
+import { Container, Lottie, RadioButtonField, SortButton } from '../atoms';
+import React, { useRef, useState } from 'react';
 import { useGetCount } from '@/hooks/queries/mypage';
+import type { SortLabel } from '@/types/common';
+import { SORT_TYPES } from '../templates/FriendListTemplate';
+import { useGetFriendships } from '@/hooks/queries/friendship';
+import type { FriendshipData, FriendshipSortType } from '@/types/friendship';
+import { useObserver } from '@/hooks/useObserver';
+import { FriendListItem } from '.';
+import { useRouter } from 'next/router';
 
 const FriendsFridgeList: React.FC<{
   toggleIsOpenOrderListModal: () => void;
 }> = ({ toggleIsOpenOrderListModal }) => {
+  const router = useRouter();
+  const bottom = useRef<HTMLDivElement>(null);
+  const [curSortType, setCurSortType] = useState<SortLabel>(SORT_TYPES[0]);
+
+  const { isOpen, onOpen, onClose } = useDisclosure();
+
   const count = useGetCount()?.friendCount;
 
-  const data = ['hi'];
+  const {
+    data: friendsData,
+    fetchNextPage: fetchFriendsNextPage,
+    isFetchingNextPage: isFetchingfriendsNextPage,
+  } = useGetFriendships({
+    sort: curSortType.value as FriendshipSortType,
+    size: 5,
+  });
+
+  const onIntersect: IntersectionObserverCallback = ([entry]) => {
+    if (entry.isIntersecting) {
+      void fetchFriendsNextPage();
+    }
+  };
+
+  useObserver({
+    target: bottom,
+    onIntersect,
+  });
 
   return (
-    <div className="mt-[37px]">
-      <div className="mb-[19.5px] flex justify-between">
-        <div className="heading2-semibold text-gray8">
-          친구 목록 <span className="heading2-bold text-primary3">{count}</span>
-        </div>
-        <div className="flex items-center gap-[6px]" onClick={toggleIsOpenOrderListModal}>
-          <div>등록순</div>
-          <AngleIcon width={14} height={14} fill="#9299AA" transform="rotate(-90)" />
+    <>
+      <Modal onClose={onClose} isOpen={isOpen} motionPreset="slideInBottom" trapFocus={false}>
+        <ModalOverlay height="100vh" onClick={onClose} />
+        <ModalContent
+          className=" bg-white"
+          position="fixed"
+          bottom="0"
+          mb="72"
+          borderRadius="24px 24px 0px 0px"
+          maxW="lg"
+          margin={0}
+        >
+          <ModalBody padding={0}>
+            {SORT_TYPES.map((ele: SortLabel) => (
+              <RadioButtonField
+                key={ele.value}
+                label={ele.label}
+                onClick={() => {
+                  setCurSortType(ele);
+                  onClose();
+                }}
+                checked={ele.value === curSortType.value}
+              />
+            ))}
+          </ModalBody>
+        </ModalContent>
+      </Modal>
+      <div className="mt-[37px]">
+        <div className="mb-[19.5px] flex justify-between">
+          <div className="heading2-semibold text-gray8">
+            친구 목록 <span className="heading2-bold text-primary3">{count}</span>
+          </div>
+          <SortButton label={curSortType.label} onClick={onOpen} />
         </div>
+        <Container className="bg-white p-[20px]">
+          <section className="flex flex-col w-full">
+            {friendsData?.pages.map((page) =>
+              page.content && page.content.length === 0 ? (
+                <EmptyBox text="추가된 친구가 없어요!" />
+              ) : (
+                page.content.map((ele: FriendshipData) => (
+                  <FriendListItem
+                    key={ele.userId}
+                    data={ele}
+                    possibleDelete={false}
+                    onClick={() => {
+                      router.push(`/friend/${ele.userId}?name=${ele.nickname}`);
+                    }}
+                    active={false}
+                  />
+                ))
+              ),
+            )}
+            {isFetchingfriendsNextPage ? <Lottie /> : <div ref={bottom} />}
+          </section>
+        </Container>
       </div>
-      <Container className="bg-white">
-        <div className="w-full flex flex-col gap-[24px]">
-          {data && data.length !== 0 ? (
-            data.map((friend) => <FriendsFridgeItem key="김지수" name="김지수" ingredientCount={13} linkTo="#" />)
-          ) : (
-            <EmptyBox text="추가된 친구가 없어요!" />
-          )}
-        </div>
-      </Container>
-    </div>
+    </>
   );
 };
 
diff --git a/src/components/organisms/FriendsRecentBoard.tsx b/src/components/organisms/FriendsRecentBoard.tsx
index 3eb9230..e4a525e 100644
--- a/src/components/organisms/FriendsRecentBoard.tsx
+++ b/src/components/organisms/FriendsRecentBoard.tsx
@@ -1,8 +1,9 @@
-import React from 'react';
-import { GreenArrowButton, Container } from '../atoms';
-import Link from 'next/link';
+import { Container, GreenArrowButton } from '../atoms';
+
 import type { FriendObjectType } from '@/hooks/queries/friends/useGetFriendsNews';
 import Image from 'next/image';
+import Link from 'next/link';
+import React from 'react';
 
 const FriendsRecentBoard: React.FC<{ friendNews: FriendObjectType }> = ({ friendNews }) => {
   return (
@@ -22,10 +23,7 @@ const FriendsRecentBoard: React.FC<{ friendNews: FriendObjectType }> = ({ friend
           </div>
         ))}
       </div>
-      <Link
-        className="w-full"
-        href={`/friend/${friendNews.userId}?fridgeid=${friendNews.refrigeratorId}&name=${friendNews.nickname}`}
-      >
+      <Link className="w-full" href={`/friend/${friendNews.userId}?name=${friendNews.nickname}`}>
         <GreenArrowButton className="bg-primary2" text="친구 냉장고 보러가기" />
       </Link>
     </Container>
diff --git a/src/components/organisms/IngredientBoard.tsx b/src/components/organisms/IngredientBoard.tsx
index 91d5af3..97e50e4 100644
--- a/src/components/organisms/IngredientBoard.tsx
+++ b/src/components/organisms/IngredientBoard.tsx
@@ -1,6 +1,7 @@
-import React from 'react';
-import { Container } from '@/components/atoms';
 import { EmptyBox, IngredientItemBox } from '@/components/molecules';
+
+import { Container } from '@/components/atoms';
+import React from 'react';
 import { useGetMyIngredientSummary } from '@/hooks/queries/home';
 
 const TermBoard: React.FC = () => {
diff --git a/src/components/organisms/IngredientModal.tsx b/src/components/organisms/IngredientModal.tsx
index 4262095..5b3721b 100644
--- a/src/components/organisms/IngredientModal.tsx
+++ b/src/components/organisms/IngredientModal.tsx
@@ -2,20 +2,22 @@ import { BoxIcon, CalendarIcon, EditIcon, FreezerIcon, MemoIcon, TrashcanIcon }
 import { Button, Toggle } from '@/components/atoms';
 import { Counter, IngredientAddItemContainer } from '../molecules';
 import React, { useEffect, useState } from 'react';
-import useToast from '@/hooks/useToast';
-import ModalContainer from '../atoms/ModalContainer';
 import {
   useDeleteIngredientById,
   useGetIngredientById,
   useGetMyIngredient,
   usePostIngredient,
 } from '@/hooks/queries/fridge';
+
+import type { CurrentFridgeInfoType } from '@/types/fridge';
 import Image from 'next/image';
+import ModalContainer from '../atoms/ModalContainer';
 import type { PostIngredientBodyType } from '@/hooks/queries/fridge/usePostIngredient';
-import { useRouter } from 'next/router';
-import usePutIngredientById from '@/hooks/queries/fridge/usePutIngredientById';
 import axiosInstance from '@/api/axiosInstance';
 import { queryClient } from '@/pages/_app';
+import usePutIngredientById from '@/hooks/queries/fridge/usePutIngredientById';
+import { useRouter } from 'next/router';
+import useToast from '@/hooks/useToast';
 
 const IngredientModal: React.FC<{
   id: number;
@@ -24,7 +26,16 @@ const IngredientModal: React.FC<{
   categoryImage?: string;
   category?: string;
   toggleIsOpenIngredientModal: () => void;
-}> = ({ id, categoryImage, toggleIsOpenIngredientModal, isDetailModal = false, category, ingredientsRefetch }) => {
+  currentFridgeInfo?: CurrentFridgeInfoType;
+}> = ({
+  id,
+  categoryImage,
+  currentFridgeInfo,
+  toggleIsOpenIngredientModal,
+  isDetailModal = false,
+  category,
+  ingredientsRefetch,
+}) => {
   const router = useRouter();
   const today = new Date();
 
@@ -59,8 +70,14 @@ const IngredientModal: React.FC<{
     isDeleted: false,
   });
 
-  const deleteIngredient = useDeleteIngredientById(id, Number(fridgeid), reqBody?.location, ingredientsRefetch);
-  const putIngredient = usePutIngredientById(id, Number(fridgeid), reqBody?.location, ingredientsRefetch);
+  const deleteIngredient = useDeleteIngredientById(id, currentFridgeInfo?.fridgeId as number, reqBody?.location, () => {
+    ingredientsRefetch();
+    toggleIsOpenIngredientModal();
+  });
+  const putIngredient = usePutIngredientById(id, currentFridgeInfo?.fridgeId as number, reqBody?.location, () => {
+    ingredientsRefetch();
+    toggleIsOpenIngredientModal();
+  });
 
   const [isInFreezer, setIsInFreezer] = useState(reqBody?.location === 'REFRIGERATION');
 
@@ -180,7 +197,6 @@ const IngredientModal: React.FC<{
               className="p-[13px] border-2 rounded-[12px]"
               onClick={() => {
                 deleteIngredient.mutate({});
-                toggleIsOpenIngredientModal();
               }}
             >
               <TrashcanIcon />
@@ -198,7 +214,6 @@ const IngredientModal: React.FC<{
                   expirationDate: reqBody.expirationDate,
                   isDeleted: false,
                 });
-                toggleIsOpenIngredientModal();
               }}
             />
           </div>
diff --git a/src/components/organisms/NavWhiteBox.tsx b/src/components/organisms/NavWhiteBox.tsx
index 2f33f3a..3b1aabf 100644
--- a/src/components/organisms/NavWhiteBox.tsx
+++ b/src/components/organisms/NavWhiteBox.tsx
@@ -1,6 +1,6 @@
-import React from 'react';
 import { Container } from '../atoms';
 import { NavWhiteBoxItem } from '../molecules';
+import React from 'react';
 
 interface NavItem {
   name: string;
diff --git a/src/components/templates/FriendListTemplate.tsx b/src/components/templates/FriendListTemplate.tsx
index f0a4c3f..62b7607 100644
--- a/src/components/templates/FriendListTemplate.tsx
+++ b/src/components/templates/FriendListTemplate.tsx
@@ -9,7 +9,7 @@ import type { FriendshipData, FriendshipSortType } from '@/types/friendship';
 import { SuspenseFallback } from '.';
 import { useObserver } from '@/hooks/useObserver';
 
-const SORT_TYPES: SortLabel[] = [
+export const SORT_TYPES: SortLabel[] = [
   { label: '이름순', value: 'nickname' },
   { label: '등록순', value: 'createdAt' },
 ];
diff --git a/src/hooks/queries/fridge/useDeleteIngredientById.ts b/src/hooks/queries/fridge/useDeleteIngredientById.ts
index 2230016..68f056a 100644
--- a/src/hooks/queries/fridge/useDeleteIngredientById.ts
+++ b/src/hooks/queries/fridge/useDeleteIngredientById.ts
@@ -4,8 +4,8 @@ import { useBaseMutation } from '../useBaseMutation';
 
 const useDeleteIngredientById = (id: number, fridgeId: number, location: string, fn?: () => void) => {
   const onSuccess = () => {
-    void queryClient.invalidateQueries();
     if (fn) fn();
+    void queryClient.resetQueries({ queryKey: queryKeys.MY_FRIDGE_CONTENT(fridgeId, location), exact: true });
   };
   return useBaseMutation(queryKeys.MY_FRIDGE_CONTENT(fridgeId, location), `/ingrs/detail/${id}`, onSuccess, 'DELETE');
 };
diff --git a/src/hooks/queries/fridge/useGetMyIngredient.ts b/src/hooks/queries/fridge/useGetMyIngredient.ts
index cebd76b..bcc28f9 100644
--- a/src/hooks/queries/fridge/useGetMyIngredient.ts
+++ b/src/hooks/queries/fridge/useGetMyIngredient.ts
@@ -1,6 +1,6 @@
+import type { IngredientType } from './useGetIngredientById';
 import { queryKeys } from '../queryKeys';
 import { useBaseQuery } from '../useBaseQuery';
-import type { IngredientType } from './useGetIngredientById';
 
 const useGetMyIngredient = (id: number) => {
   const { data } = useBaseQuery<IngredientType>(queryKeys.MY_INGREDIENT_ID(id), `/ingrs/detail/${id}`);
diff --git a/src/hooks/queries/fridge/usePostIngredient.ts b/src/hooks/queries/fridge/usePostIngredient.ts
index 3a9fb51..d25951c 100644
--- a/src/hooks/queries/fridge/usePostIngredient.ts
+++ b/src/hooks/queries/fridge/usePostIngredient.ts
@@ -1,6 +1,6 @@
-import { useRouter } from 'next/router';
 import { queryKeys } from '../queryKeys';
 import { useBaseMutation } from '../useBaseMutation';
+import { useRouter } from 'next/router';
 
 export interface PostIngredientBodyType {
   refrigeratorId: number;
diff --git a/src/hooks/queries/fridge/usePutIngredientById.ts b/src/hooks/queries/fridge/usePutIngredientById.ts
index d1ec65f..bac09b7 100644
--- a/src/hooks/queries/fridge/usePutIngredientById.ts
+++ b/src/hooks/queries/fridge/usePutIngredientById.ts
@@ -1,7 +1,7 @@
 import type { LocationEnum } from '@/types/common';
+import { queryClient } from '@/pages/_app';
 import { queryKeys } from '../queryKeys';
 import { useBaseMutation } from '../useBaseMutation';
-import { queryClient } from '@/pages/_app';
 
 export interface FridgeBodyType {
   name: string;
@@ -15,11 +15,11 @@ export interface FridgeBodyType {
 
 const usePutIngredientById = (id: number, fridgeId: number, location: string, fn?: () => void) => {
   const onSuccess = () => {
-    void queryClient.invalidateQueries();
     if (fn) fn();
+    void queryClient.resetQueries({ queryKey: queryKeys.MY_FRIDGE_CONTENT(fridgeId, location), exact: true });
   };
   return useBaseMutation<FridgeBodyType>(
-    [...queryKeys.MY_FRIDGE_CONTENT(fridgeId, location), ...queryKeys.MY_INGREDIENT_ID(id)],
+    queryKeys.MY_FRIDGE_CONTENT(fridgeId, location),
     `/ingrs/detail/${id}`,
     onSuccess,
     'PUT',
diff --git a/src/hooks/queries/friendship/useGetFriendships.ts b/src/hooks/queries/friendship/useGetFriendships.ts
index deceb7d..51e90a0 100644
--- a/src/hooks/queries/friendship/useGetFriendships.ts
+++ b/src/hooks/queries/friendship/useGetFriendships.ts
@@ -3,11 +3,12 @@ import type { FriendshipData, FriendshipSortType } from '@/types/friendship';
 import { queryKeys } from '../queryKeys';
 import { useBaseInfiniteQuery } from '../useBaseInfiniteQuery';
 
-const useGetFriendships = ({ sort }: { sort: FriendshipSortType }) => {
+const useGetFriendships = ({ sort, size }: { sort: FriendshipSortType; size?: number }) => {
   return useBaseInfiniteQuery<FriendshipData[]>({
     queryKey: queryKeys.FRIENDSHIPS(sort),
     url: '/friendship',
     params: { sort },
+    size,
   });
 };
 
diff --git a/src/hooks/queries/login/useGetGoogleToken.ts b/src/hooks/queries/login/useGetGoogleToken.ts
index 4a9d13d..06faa08 100644
--- a/src/hooks/queries/login/useGetGoogleToken.ts
+++ b/src/hooks/queries/login/useGetGoogleToken.ts
@@ -1,6 +1,6 @@
-import { useRouter } from 'next/router';
 import { queryKeys } from '../queryKeys';
 import { useBaseQuery } from '../useBaseQuery';
+import { useRouter } from 'next/router';
 
 const useGetGoogleToken = (code: string | null = '') => {
   const router = useRouter();
diff --git a/src/hooks/queries/login/usePostUser.ts b/src/hooks/queries/login/usePostUser.ts
index 7166e67..0772bce 100644
--- a/src/hooks/queries/login/usePostUser.ts
+++ b/src/hooks/queries/login/usePostUser.ts
@@ -1,6 +1,6 @@
-import { useRouter } from 'next/router';
 import { queryKeys } from '../queryKeys';
 import { useBaseMutation } from '../useBaseMutation';
+import { useRouter } from 'next/router';
 
 interface PostUserBodyType {
   nickName: string;
diff --git a/src/hooks/queries/mypage/useGetMyShares.ts b/src/hooks/queries/mypage/useGetMyShares.ts
index 27a3091..bbd1c6a 100644
--- a/src/hooks/queries/mypage/useGetMyShares.ts
+++ b/src/hooks/queries/mypage/useGetMyShares.ts
@@ -1,14 +1,14 @@
-import type { ShareSortType, ShareStatusType } from '@/types/friendship';
-
+import type { MySharesSortType } from '@/types/mypage';
 import type { ShareData } from '@/types/share';
+import type { ShareStatusType } from '@/types/friendship';
 import { queryKeys } from '../queryKeys';
 import { useBaseInfiniteQuery } from '../useBaseInfiniteQuery';
 
-const useGetMyShares = ({ sort, status }: { sort: ShareSortType; status: ShareStatusType }) =>
+const useGetMyShares = ({ sort, status }: { sort: MySharesSortType; status: ShareStatusType }) =>
   useBaseInfiniteQuery<ShareData[]>({
     queryKey: queryKeys.MY_SHARES(sort, status),
-    url: `/shares/created`,
-    params: { status },
+    url: `/users/me/shares/${sort}`,
+    params: { status, sort: 'string' },
   });
 
 export default useGetMyShares;
diff --git a/src/hooks/queries/queryKeys.ts b/src/hooks/queries/queryKeys.ts
index f0fda26..7a65efa 100644
--- a/src/hooks/queries/queryKeys.ts
+++ b/src/hooks/queries/queryKeys.ts
@@ -1,5 +1,7 @@
 import type { FriendshipSortType, ShareSortType, ShareStatusType } from '@/types/friendship';
 
+import type { MySharesSortType } from '@/types/mypage';
+
 export const queryKeys = {
   COUNT: () => ['count'],
   MY_FRIDGE_LIST: () => ['my_fridge_list'],
@@ -15,7 +17,7 @@ export const queryKeys = {
   KAKAO: () => ['kakao'],
   GOOGLE: () => ['google'],
   SHARES: (sort: ShareSortType, status: ShareStatusType) => ['shares', sort, status],
-  MY_SHARES: (sort: ShareSortType, status: ShareStatusType) => ['my-shares', sort, status],
+  MY_SHARES: (sort: MySharesSortType, status: ShareStatusType) => ['my-shares', sort, status],
   ME: () => ['my-info'],
   FRIENDSHIPS: (sort: FriendshipSortType) => ['friendship', sort],
   DELETE_FRIENDSHIP: () => ['deleteFriendship'],
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
index 95c2200..5c200a3 100644
--- a/src/pages/_app.tsx
+++ b/src/pages/_app.tsx
@@ -1,14 +1,19 @@
-import { ThemeProvider, CSSReset, extendTheme } from '@chakra-ui/react';
-import Layout from '@/components/templates/Layout';
 import '@/styles/globals.css';
-import type { AppProps } from 'next/app';
-import { RecoilRoot } from 'recoil';
+import 'dayjs/locale/ko';
+
+import { CSSReset, ThemeProvider, extendTheme } from '@chakra-ui/react';
+import { ErrorFallback, SuspenseFallback } from '@/components/templates';
 import { QueryClient, QueryClientProvider, QueryErrorResetBoundary } from '@tanstack/react-query';
+
+import type { AppProps } from 'next/app';
+import { ErrorBoundary } from 'react-error-boundary';
+import Layout from '@/components/templates/Layout';
 import React from 'react';
-import 'dayjs/locale/ko';
+import { RecoilRoot } from 'recoil';
 import dayjs from 'dayjs';
-import { ErrorBoundary } from 'react-error-boundary';
-import { ErrorFallback, SuspenseFallback } from '@/components/templates';
+
+// import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
+
 dayjs.locale('ko');
 
 const theme = extendTheme({
@@ -47,6 +52,7 @@ export default function App({ Component, pageProps }: AppProps): JSX.Element {
           </ErrorBoundary>
         )}
       </QueryErrorResetBoundary>
+      {/* <ReactQueryDevtools initialIsOpen={false} /> */}
     </QueryClientProvider>
   );
 }
diff --git a/src/pages/fridge/add/index.tsx b/src/pages/fridge/add/index.tsx
index c236e9b..67cdcc5 100644
--- a/src/pages/fridge/add/index.tsx
+++ b/src/pages/fridge/add/index.tsx
@@ -1,12 +1,13 @@
-import type { NextPage } from 'next';
 import { Header, IngredientModal } from '@/components/organisms';
-import { Container } from '../../../components/atoms';
+import { Modal, ModalBody, ModalContent, ModalOverlay, useDisclosure } from '@chakra-ui/react';
 import { useRef, useState } from 'react';
-import { useGetIngredientList } from '@/hooks/queries/fridge';
-import Image from 'next/image';
-import { Modal, ModalOverlay, ModalBody, ModalContent, useDisclosure } from '@chakra-ui/react';
+
+import { Container } from '../../../components/atoms';
 import Draggable from 'react-draggable';
 import type { DraggableEvent } from 'react-draggable';
+import Image from 'next/image';
+import type { NextPage } from 'next';
+import { useGetIngredientList } from '@/hooks/queries/fridge';
 
 // 임시 식자재 추가 disapper
 const CATEGORY_COUNT: Record<string, number> = {
diff --git a/src/pages/fridge/index.tsx b/src/pages/fridge/index.tsx
index b2aa6de..4050b8b 100644
--- a/src/pages/fridge/index.tsx
+++ b/src/pages/fridge/index.tsx
@@ -3,29 +3,44 @@ import { FridgeBoard, FridgeInfoBox, FridgeListModal } from '@/components/organi
 import { type NextPage } from 'next';
 import { Modal, ModalOverlay, ModalBody, ModalContent, useDisclosure } from '@chakra-ui/react';
 import { useGetMe } from '@/hooks/queries/mypage';
-import { useRouter } from 'next/router';
-import { useEffect } from 'react';
-import { EmptyBox } from '@/components/molecules';
-import { Container } from '@/components/atoms';
+import { useEffect, useState } from 'react';
 import withLogin from '@/components/templates/withLogin';
+import useGetMyFridgeList from '@/hooks/queries/fridge/useGetFridgeList';
+import type { CurrentFridgeInfoType } from '@/types/fridge';
+import { useRouter } from 'next/router';
 
 const FridgePage: NextPage = () => {
   const router = useRouter();
+  const [currentFridgeInfo, setCurrentFridgeInfo] = useState<CurrentFridgeInfoType>({
+    username: null,
+    fridgeId: 0,
+    fridgeName: '',
+  });
   const {
     isOpen: isOpenFridgeListModal,
     onOpen: onOpenFridgeListModal,
     onClose: onCloseFridgeListModal,
   } = useDisclosure();
 
+  const fridgeList = useGetMyFridgeList();
   const { nickname } = useGetMe();
 
-  const { fridgeid: fridgeId } = router.query;
+  const { fridgeid, name } = router.query;
 
   useEffect(() => {
-    if (!fridgeId) {
-      onOpenFridgeListModal();
+    if (!fridgeList || fridgeList.length < 0) {
+      return;
     }
-  }, []);
+    if (fridgeid) {
+      setCurrentFridgeInfo({ username: null, fridgeId: Number(fridgeid), fridgeName: name as string });
+      return;
+    }
+    setCurrentFridgeInfo({ username: null, fridgeId: fridgeList[0].id, fridgeName: fridgeList[0].name });
+  }, [fridgeList]);
+
+  const handleCurrentFridgeInfo = (id: number, name: string) => {
+    setCurrentFridgeInfo((prev) => ({ ...prev, fridgeId: id, fridgeName: name }));
+  };
 
   return (
     <>
@@ -45,7 +60,10 @@ const FridgePage: NextPage = () => {
           margin={0}
         >
           <ModalBody padding={0}>
-            <FridgeListModal onCloseFridgeListModal={onCloseFridgeListModal} />
+            <FridgeListModal
+              handleCurrentFridgeInfo={handleCurrentFridgeInfo}
+              onCloseFridgeListModal={onCloseFridgeListModal}
+            />
           </ModalBody>
         </ModalContent>
       </Modal>
@@ -53,17 +71,12 @@ const FridgePage: NextPage = () => {
         <Header headerTitle={'내 냉장고'} />
         <section className={`flex flex-col min-h-screen p-0 pl-20 pr-20 pb-20 bg-gray1`}>
           <FridgeInfoBox
+            currentFridgeInfo={currentFridgeInfo}
             userName={nickname}
             toggleIsOpenFridgeListModal={onOpenFridgeListModal}
             isOkIngredientAdd={true}
           />
-          {fridgeId ? (
-            <FridgeBoard />
-          ) : (
-            <Container className="p-[20px] bg-white">
-              <EmptyBox text={`추가된 식자재가 없어요!`} />
-            </Container>
-          )}
+          <FridgeBoard currentFridgeInfo={currentFridgeInfo} />
         </section>
       </div>
     </>
diff --git a/src/pages/friend/[id]/index.tsx b/src/pages/friend/[id]/index.tsx
index 40c623f..1968343 100644
--- a/src/pages/friend/[id]/index.tsx
+++ b/src/pages/friend/[id]/index.tsx
@@ -4,24 +4,38 @@ import { type NextPage } from 'next';
 import { Modal, ModalOverlay, ModalBody, ModalContent, useDisclosure } from '@chakra-ui/react';
 import { useEffect, useState } from 'react';
 import { useRouter } from 'next/router';
+import useGetMyFridgeList from '@/hooks/queries/fridge/useGetFridgeList';
+import type { CurrentFridgeInfoType } from '@/types/fridge';
+
 const FriendIdPage: NextPage = () => {
   const router = useRouter();
-  const [nickname, setNickName] = useState('');
   const {
     isOpen: isOpenFridgeListModal,
     onOpen: onOpenFridgeListModal,
     onClose: onCloseFridgeListModal,
   } = useDisclosure();
 
-  const { id: userId, fridgeid: fridgeId, name } = router.query;
+  const { id: userId, name: username } = router.query;
+
+  const [currentFridgeInfo, setCurrentFridgeInfo] = useState<CurrentFridgeInfoType>({
+    username: username as string,
+    fridgeId: 0,
+    fridgeName: '',
+  });
 
-  if (!fridgeId) {
-    onOpenFridgeListModal();
-  }
+  const fridgeList = useGetMyFridgeList(Number(userId));
+
+  const handleCurrentFridgeInfo = (id: number, name: string) => {
+    setCurrentFridgeInfo((prev) => ({ ...prev, fridgeId: id, fridgeName: name }));
+  };
 
   useEffect(() => {
-    setNickName(name as string);
-  }, []);
+    if (!fridgeList || fridgeList.length < 0) {
+      return;
+    }
+    handleCurrentFridgeInfo(fridgeList[0].id, fridgeList[0].name);
+  }, [fridgeList]);
+
   return (
     <>
       <Modal
@@ -40,15 +54,23 @@ const FriendIdPage: NextPage = () => {
           margin={0}
         >
           <ModalBody padding={0}>
-            <FridgeListModal onCloseFridgeListModal={onCloseFridgeListModal} ownerId={Number(userId)} />
+            <FridgeListModal
+              handleCurrentFridgeInfo={handleCurrentFridgeInfo}
+              onCloseFridgeListModal={onCloseFridgeListModal}
+              ownerId={Number(userId)}
+            />
           </ModalBody>
         </ModalContent>
       </Modal>
       <div className={'pt-[52px] min-h-screen'}>
         <Header headerTitle={'친구 냉장고'} />
         <section className={`flex flex-col min-h-screen p-0 pl-20 pr-20 pb-20 bg-gray1`}>
-          <FridgeInfoBox userName={nickname} toggleIsOpenFridgeListModal={onOpenFridgeListModal} />
-          <FridgeBoard />
+          <FridgeInfoBox
+            userName={username as string}
+            currentFridgeInfo={currentFridgeInfo}
+            toggleIsOpenFridgeListModal={onOpenFridgeListModal}
+          />
+          <FridgeBoard currentFridgeInfo={currentFridgeInfo} />
         </section>
       </div>
     </>
diff --git a/src/pages/mypage/index.tsx b/src/pages/mypage/index.tsx
index bb2b192..b735ed3 100644
--- a/src/pages/mypage/index.tsx
+++ b/src/pages/mypage/index.tsx
@@ -39,7 +39,7 @@ const GENERAGE_NAV_LIST = [
 ];
 
 const ETC_NAV_LIST = [
-  { name: '문의', svgComponent: <QuestionIcon />, linkTo: '#' },
+  { name: '문의', svgComponent: <QuestionIcon />, linkTo: 'https://forms.gle/m9NtmA2ppgzr9h24A' },
   { name: '약관 및 정책', svgComponent: <PolicyIcon />, linkTo: '#' },
   { name: '버전정보', svgComponent: <InfoIcon />, linkTo: '', text: '1.0.1' },
 ];
diff --git a/src/pages/mypage/notification/index.tsx b/src/pages/mypage/notification/index.tsx
index 1ea92cb..da85d2f 100644
--- a/src/pages/mypage/notification/index.tsx
+++ b/src/pages/mypage/notification/index.tsx
@@ -6,9 +6,7 @@ const NotificationPage: NextPage = () => {
   return (
     <div className={'pt-[52px] min-h-screen'}>
       <Header headerTitle={'알림'} />
-      <section
-        className={`flex flex-col gap-[20px] min-h-screen p-20 bg-gray1`}
-      >
+      <section className={`flex flex-col gap-[20px] min-h-screen p-20 bg-gray1`}>
         <div className="flex flex-col justify-center items-center gap-22 p-32  w-full bg-white rounded-12 p-[18px]">
           <div className="w-full flex justify-between items-center">
             <div className="heading4-semibold">알림 허용</div>
diff --git a/src/pages/mypage/profile/index.tsx b/src/pages/mypage/profile/index.tsx
index fd38116..007d304 100644
--- a/src/pages/mypage/profile/index.tsx
+++ b/src/pages/mypage/profile/index.tsx
@@ -10,6 +10,7 @@ import { useGetMe, usePutMe } from '@/hooks/queries/mypage';
 import type { ProfileEnum } from '@/types/common';
 import axiosInstance from '@/api/axiosInstance';
 import { returnProfileImg } from '@/utils/returnProfileImg';
+import { useRouter } from 'next/router';
 
 const PROFILES: Array<{ string: ProfileEnum; pointColor: string }> = [
   {
@@ -31,6 +32,9 @@ const PROFILES: Array<{ string: ProfileEnum; pointColor: string }> = [
 ];
 
 const ProfilePage: NextPage = () => {
+  const router = useRouter();
+  const { kakaoId, kakaoEmail, googleEmail } = router.query;
+
   const MyInfo = useGetMe();
 
   const [selectedProfile, setSelectedProfile] = useState<ProfileEnum>('BLUE');
@@ -78,16 +82,12 @@ const ProfilePage: NextPage = () => {
   const handleSumbit = (e: FormEvent) => {
     e.preventDefault();
 
-    const urlParams = typeof window !== 'undefined' ? new URLSearchParams(window.location.search) : null;
-    const kakaoId = urlParams?.get('kakaoId');
-    const kakaoEmail = urlParams?.get('kakaoEmail');
-
-    if (kakaoEmail && kakaoId) {
+    if ((kakaoEmail && kakaoId) ?? googleEmail) {
       postUser.mutate({
         nickName: nickname,
         kakaoId: Number(kakaoId ?? MyInfo.kakaoId),
-        kakaoEmail: kakaoEmail ?? MyInfo.kakaoEmail,
-        googleEmail: null,
+        kakaoEmail: (kakaoEmail as string) ?? MyInfo.kakaoEmail,
+        googleEmail: (googleEmail as string) ?? MyInfo.googleEmail,
         profileImage: selectedProfile,
       });
     } else {
diff --git a/src/pages/mypage/share/index.tsx b/src/pages/mypage/share/index.tsx
index 231f925..552ff01 100644
--- a/src/pages/mypage/share/index.tsx
+++ b/src/pages/mypage/share/index.tsx
@@ -1,6 +1,6 @@
 import { Modal, ModalBody, ModalContent, ModalOverlay, useDisclosure } from '@chakra-ui/react';
 import { RadioButtonField, SortButton, TabButton } from '@/components/atoms';
-import type { ShareSortType, ShareStatusType } from '@/types/friendship';
+import type { ShareStatusType } from '@/types/friendship';
 import type { SortLabel, TabLabel } from '@/types/common';
 import { useRef, useState } from 'react';
 
@@ -11,6 +11,7 @@ import ShareListItem from '@/components/organisms/ShareListItem';
 import { SuspenseFallback } from '@/components/templates';
 import { useObserver } from '@/hooks/useObserver';
 import { useGetMyShares } from '@/hooks/queries/mypage';
+import type { MySharesSortType } from '@/types/mypage';
 
 const TABS: TabLabel[] = [
   { label: '나눔 중', value: 'SHARE_IN_PROGRESS' },
@@ -18,9 +19,9 @@ const TABS: TabLabel[] = [
 ];
 
 const SORT_TYPES: SortLabel[] = [
-  { label: '전체 나눔글', value: 'registeredDate' },
-  { label: '작성한 나눔글', value: 'dueDate' },
-  { label: '참여한 나눔글', value: 'dueDate' },
+  { label: '전체 나눔글', value: 'all' },
+  { label: '작성한 나눔글', value: 'created' },
+  { label: '참여한 나눔글', value: 'applied' },
 ];
 
 const MySharePage: NextPage = () => {
@@ -29,7 +30,7 @@ const MySharePage: NextPage = () => {
   const { isOpen, onOpen, onClose } = useDisclosure();
   const bottom = useRef<HTMLDivElement>(null);
   const { data, fetchNextPage, isFetchingNextPage } = useGetMyShares({
-    sort: curSortType.value as ShareSortType,
+    sort: curSortType.value as MySharesSortType,
     status: curTab.value as ShareStatusType,
   });
 
diff --git a/src/types/fridge/index.d.ts b/src/types/fridge/index.d.ts
index 3d2a3dc..fb11713 100644
--- a/src/types/fridge/index.d.ts
+++ b/src/types/fridge/index.d.ts
@@ -19,3 +19,9 @@ export interface FridgeData {
   id: number;
   name: string;
 }
+
+export interface CurrentFridgeInfoType {
+  username: string | null;
+  fridgeId: number;
+  fridgeName: string;
+}
diff --git a/src/types/mypage/index.d.ts b/src/types/mypage/index.d.ts
new file mode 100644
index 0000000..9d597b1
--- /dev/null
+++ b/src/types/mypage/index.d.ts
@@ -0,0 +1 @@
+export type MySharesSortType = 'all' | 'applied' | 'created';
diff --git a/yarn.lock b/yarn.lock
index 9c95606..e56421c 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3971,6 +3971,18 @@
   resolved "https://registry.yarnpkg.com/@tanstack/query-core/-/query-core-5.18.1.tgz#b653ee354b7f4712d53565ccc5c6d8fb83ec866c"
   integrity sha512-fYhrG7bHgSNbnkIJF2R4VUXb4lF7EBiQjKkDc5wOlB7usdQOIN4LxxHpDxyE3qjqIst1WBGvDtL48T0sHJGKCw==
 
+"@tanstack/query-devtools@5.24.0":
+  version "5.24.0"
+  resolved "https://registry.yarnpkg.com/@tanstack/query-devtools/-/query-devtools-5.24.0.tgz#b9b7828d42d5034415b1973ff4a154e880b17d59"
+  integrity sha512-pThim455t69zrZaQKa7IRkEIK8UBTS+gHVAdNfhO72Xh4rWpMc63ovRje5/n6iw63+d6QiJzVadsJVdPoodSeQ==
+
+"@tanstack/react-query-devtools@^5.24.1":
+  version "5.24.1"
+  resolved "https://registry.yarnpkg.com/@tanstack/react-query-devtools/-/react-query-devtools-5.24.1.tgz#e3a8ea71115fb899119126e1507fc340ee9d9496"
+  integrity sha512-qa4SEugN+EF8JJXcpsM9Lu05HfUv5cvHvLuB0uw/81eJZyNHFdtHFBi5RLCgpBrOyVMDfH8UQ3VBMqXzFKV68A==
+  dependencies:
+    "@tanstack/query-devtools" "5.24.0"
+
 "@tanstack/react-query@^5.18.1":
   version "5.18.1"
   resolved "https://registry.yarnpkg.com/@tanstack/react-query/-/react-query-5.18.1.tgz#fd4e7b87260e82c5277355ad64f0e431a9302e02"