fix: 기본 냉장고, 냉장고 식자재 변경 resetQueries, 친구목록, 나눔 내역 api 수정 (#36)

* feat: 친구들페이지 친구 목록, 내 기본 냉장고 추가 * fix: 냉장고 정보 useState * fix: 구글 로그인 수정 * chore: import 순서 변경 * fix: api 수정 * feat: 문의 주소 추가 * fix: 식자재 추가 시 해당 냉장고로 이동 * fix: 진행중인 나눔 내역 sort 반영 * fix: queryClient.resetQueries after mutation success * fix: eslint error
DDD-Community · Mar 1, 2024 · 649d229 · 649d229
1 parent 66fd8b9
commit 649d229
Show file tree

Hide file tree

Showing 36 changed files with 298 additions and 169 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -1,26 +1,25 @@
-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,
     fetchNextPage: fetchIngredientNextPage,
     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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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>