From 70e8e2e999be0e5bf91a48ff5ba9b6023d0c363b Mon Sep 17 00:00:00 2001 From: hyeseon han Date: Sat, 24 Feb 2024 01:33:42 +0900 Subject: [PATCH 01/13] feat: react-hook-form install --- package.json | 1 + yarn.lock | 5 +++++ 2 files changed, 6 insertions(+) diff --git a/package.json b/package.json index e81db38..a48a124 100644 --- a/package.json +++ b/package.json @@ -37,6 +37,7 @@ "react-dom": "^18", "react-draggable": "^4.4.6", "react-error-boundary": "^4.0.12", + "react-hook-form": "^7.50.1", "recoil": "^0.7.7", "swiper": "^11.0.6" }, diff --git a/yarn.lock b/yarn.lock index cdd84f3..5b9f8b7 100644 --- a/yarn.lock +++ b/yarn.lock @@ -10146,6 +10146,11 @@ react-focus-lock@^2.9.4: use-callback-ref "^1.3.0" use-sidecar "^1.1.2" +react-hook-form@^7.50.1: + version "7.50.1" + resolved "https://registry.yarnpkg.com/react-hook-form/-/react-hook-form-7.50.1.tgz#f6aeb17a863327e5a0252de8b35b4fc8990377ed" + integrity sha512-3PCY82oE0WgeOgUtIr3nYNNtNvqtJ7BZjsbxh6TnYNbXButaD5WpjOmTjdxZfheuHKR68qfeFnEDVYoSSFPMTQ== + react-is@18.1.0: version "18.1.0" resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.1.0.tgz#61aaed3096d30eacf2a2127118b5b41387d32a67" From ffb8ae9f7860ea5400394df6cdebdc1e9abc0a95 Mon Sep 17 00:00:00 2001 From: hyeseon han Date: Mon, 26 Feb 2024 23:11:32 +0900 Subject: [PATCH 02/13] =?UTF-8?q?fix:=20share=20data=20=ED=95=84=EB=93=9C?= =?UTF-8?q?=EA=B0=92=20=EC=88=98=EC=A0=95=EC=97=90=20=EB=94=B0=EB=A5=B8=20?= =?UTF-8?q?=EB=B3=80=EA=B2=BD=20=EC=82=AC=ED=95=AD=20=EB=B0=98=EC=98=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/organisms/ShareListItem.tsx | 4 ++-- src/types/share/index.d.ts | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/organisms/ShareListItem.tsx b/src/components/organisms/ShareListItem.tsx index a08b24c..fb347cb 100644 --- a/src/components/organisms/ShareListItem.tsx +++ b/src/components/organisms/ShareListItem.tsx @@ -14,9 +14,9 @@ const ShareListItem: React.FC<{ href={`/share/${data.shareId}`} className="flex flex-1 items-center mb-[12px] pl-[18px] pr-[12px] py-[16px] rounded-[12px] bg-white" > - {data.thumbNailImage ? ( + {data.thumbnailImage ? ( Date: Mon, 26 Feb 2024 23:24:27 +0900 Subject: [PATCH 03/13] =?UTF-8?q?fix:=20=EB=82=98=EB=88=94=20=EB=AA=A9?= =?UTF-8?q?=EB=A1=9D,=20=EC=83=81=EC=84=B8=20=EC=8B=9C=EA=B0=84=20?= =?UTF-8?q?=EC=B4=88=EB=8B=A8=EC=9C=84=20=EC=A0=9C=EA=B1=B0=ED=95=98?= =?UTF-8?q?=EC=97=AC=20=EB=85=B8=EC=B6=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/organisms/ShareListItem.tsx | 2 +- src/pages/share/[id].tsx | 2 +- src/types/share/index.d.ts | 2 ++ 3 files changed, 4 insertions(+), 2 deletions(-) diff --git a/src/components/organisms/ShareListItem.tsx b/src/components/organisms/ShareListItem.tsx index fb347cb..a8fe0b0 100644 --- a/src/components/organisms/ShareListItem.tsx +++ b/src/components/organisms/ShareListItem.tsx @@ -44,7 +44,7 @@ const ShareListItem: React.FC<{ className="mx-[4px] mb-1" /> - {`${dayjs(data.shareDate).format('MM월 DD일')} ${data.shareTime}`} + {`${dayjs(data.shareDate).format('MM월 DD일')} ${data.shareTime.slice(0, 5)}`}

diff --git a/src/pages/share/[id].tsx b/src/pages/share/[id].tsx index a4bd8b7..efedc65 100644 --- a/src/pages/share/[id].tsx +++ b/src/pages/share/[id].tsx @@ -87,7 +87,7 @@ const ShareDetailPage: NextPage = () => { Date: Thu, 29 Feb 2024 00:28:31 +0900 Subject: [PATCH 04/13] =?UTF-8?q?chore:=20prettier=20printWidth=20?= =?UTF-8?q?=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .prettierrc | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.prettierrc b/.prettierrc index 9ad9a45..cc7b645 100644 --- a/.prettierrc +++ b/.prettierrc @@ -4,7 +4,7 @@ "useTabs": false, "tabWidth": 2, "trailingComma": "all", - "printWidth": 80, + "printWidth": 120, "bracketSpacing": true, "arrowParens": "always", "endOfLine": "auto" From 1d9733ed4870e9160f9b8131c532a33e015095b9 Mon Sep 17 00:00:00 2001 From: hyeseon han Date: Thu, 29 Feb 2024 00:30:57 +0900 Subject: [PATCH 05/13] =?UTF-8?q?style:=20SearchIcon=20props=20=EC=A0=81?= =?UTF-8?q?=EC=9A=A9=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/icons/SearchIcon.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/assets/icons/SearchIcon.tsx b/src/assets/icons/SearchIcon.tsx index a61010b..5360f1f 100644 --- a/src/assets/icons/SearchIcon.tsx +++ b/src/assets/icons/SearchIcon.tsx @@ -11,14 +11,14 @@ const SearchIcon: React.FC> = (props) => ( > Date: Thu, 29 Feb 2024 00:52:24 +0900 Subject: [PATCH 06/13] =?UTF-8?q?feat:=20usePostUpload=20hook=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/hooks/queries/queryKeys.ts | 26 ++++++----------------- src/hooks/queries/share/index.ts | 1 + src/hooks/queries/share/usePostUpload.ts | 27 ++++++++++++++++++++++++ 3 files changed, 34 insertions(+), 20 deletions(-) create mode 100644 src/hooks/queries/share/usePostUpload.ts diff --git a/src/hooks/queries/queryKeys.ts b/src/hooks/queries/queryKeys.ts index a91ba14..f0fda26 100644 --- a/src/hooks/queries/queryKeys.ts +++ b/src/hooks/queries/queryKeys.ts @@ -1,18 +1,10 @@ -import type { - FriendshipSortType, - ShareSortType, - ShareStatusType, -} from '@/types/friendship'; +import type { FriendshipSortType, ShareSortType, ShareStatusType } from '@/types/friendship'; export const queryKeys = { COUNT: () => ['count'], MY_FRIDGE_LIST: () => ['my_fridge_list'], MY_FRIENDS_COUNT: () => ['my_friends_count'], - MY_FRIDGE_CONTENT: (id: number, location: string) => [ - 'my_fridge', - id, - location, - ], + MY_FRIDGE_CONTENT: (id: number, location: string) => ['my_fridge', id, location], MY_INGREDIENTS_COUNT: () => ['my_ingredient_count'], MY_INGREDIENT_ID: (id: number) => ['my-ingredient', id], MY_FRIENDS_NEWS: () => ['my_friends_news'], @@ -22,16 +14,8 @@ export const queryKeys = { INGREDIENTS_RECENT: () => ['my-ingredient', 'recent'], KAKAO: () => ['kakao'], GOOGLE: () => ['google'], - SHARES: (sort: ShareSortType, status: ShareStatusType) => [ - 'shares', - sort, - status, - ], - MY_SHARES: (sort: ShareSortType, status: ShareStatusType) => [ - 'my-shares', - sort, - status, - ], + SHARES: (sort: ShareSortType, status: ShareStatusType) => ['shares', sort, status], + MY_SHARES: (sort: ShareSortType, status: ShareStatusType) => ['my-shares', sort, status], ME: () => ['my-info'], FRIENDSHIPS: (sort: FriendshipSortType) => ['friendship', sort], DELETE_FRIENDSHIP: () => ['deleteFriendship'], @@ -39,6 +23,8 @@ export const queryKeys = { ADD_FRIENDSHIP: () => ['addFriendship'], SHARE_DETAIL: () => ['shareDetail'], SHARE_APPLICANTS: () => ['shareApplicants'], + UPLOAD: () => ['upload'], + ADD_SHARE: () => ['addShare'], } as const; export type QueryKeys = (typeof queryKeys)[keyof typeof queryKeys]; diff --git a/src/hooks/queries/share/index.ts b/src/hooks/queries/share/index.ts index 705877b..054cedc 100644 --- a/src/hooks/queries/share/index.ts +++ b/src/hooks/queries/share/index.ts @@ -1,3 +1,4 @@ export { default as useGetShares } from './useGetShares'; export { default as useGetShareDetail } from './useGetShareDetail'; export { default as useGetShareApplicants } from './useGetShareApplicants'; +export { default as usePostUpload } from './usePostUpload'; diff --git a/src/hooks/queries/share/usePostUpload.ts b/src/hooks/queries/share/usePostUpload.ts new file mode 100644 index 0000000..351aae6 --- /dev/null +++ b/src/hooks/queries/share/usePostUpload.ts @@ -0,0 +1,27 @@ +import axios from 'axios'; +import { queryKeys } from '../queryKeys'; +import { useMutation } from '@tanstack/react-query'; + +const usePostUpload = ({ onSuccess }: { onSuccess: (res: string) => void }) => { + const upload = async (file: FormData) => { + const accessToken = localStorage.getItem('accessToken'); + const response = await axios({ + method: 'POST', + url: `${process.env.NEXT_PUBLIC_BASE_URI}/s3/upload?dir=images/share/thumbnail/`, + data: file, + headers: { + ...(accessToken ? { Authorization: `Bearer ${accessToken}` } : undefined), + }, + }); + return response.data; + }; + // TODO useBaseMutation 으로 수정 + return useMutation({ + mutationKey: queryKeys.UPLOAD(), + mutationFn: async (file: FormData) => { + const res = await upload(file); + onSuccess(res.data); + }, + }); +}; +export default usePostUpload; From b76936b2f556095993fae46b69c207347e099d59 Mon Sep 17 00:00:00 2001 From: hyeseon han Date: Thu, 29 Feb 2024 00:53:13 +0900 Subject: [PATCH 07/13] =?UTF-8?q?feat:=20usePostShare=20hook=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/hooks/queries/share/index.ts | 1 + src/hooks/queries/share/usePostShare.ts | 13 +++++++++++++ src/types/share/index.d.ts | 12 ++++++++++++ 3 files changed, 26 insertions(+) create mode 100644 src/hooks/queries/share/usePostShare.ts diff --git a/src/hooks/queries/share/index.ts b/src/hooks/queries/share/index.ts index 054cedc..83f0f78 100644 --- a/src/hooks/queries/share/index.ts +++ b/src/hooks/queries/share/index.ts @@ -2,3 +2,4 @@ export { default as useGetShares } from './useGetShares'; export { default as useGetShareDetail } from './useGetShareDetail'; export { default as useGetShareApplicants } from './useGetShareApplicants'; export { default as usePostUpload } from './usePostUpload'; +export { default as usePostShare } from './usePostShare'; diff --git a/src/hooks/queries/share/usePostShare.ts b/src/hooks/queries/share/usePostShare.ts new file mode 100644 index 0000000..1309d83 --- /dev/null +++ b/src/hooks/queries/share/usePostShare.ts @@ -0,0 +1,13 @@ +import type { AddShareReq } from '@/types/share'; +import { queryKeys } from '../queryKeys'; +import { useBaseMutation } from '../useBaseMutation'; +import { useRouter } from 'next/router'; + +const usePostShare = () => { + const router = useRouter(); + const onSuccess = () => { + router.replace('/share'); + }; + return useBaseMutation(queryKeys.ADD_SHARE(), `/shares`, onSuccess); +}; +export default usePostShare; diff --git a/src/types/share/index.d.ts b/src/types/share/index.d.ts index 5a3dd40..f4a40cf 100644 --- a/src/types/share/index.d.ts +++ b/src/types/share/index.d.ts @@ -25,3 +25,15 @@ interface ShareApplicantData { nickname: string; profileImage: ProfileEnum; } + +interface AddShareReq { + title: string; + ingredientDetailId: number; + content: string; + shareTime: string; + shareDate: string; + limitPerson: number; + location: string; + status: string; + thumbnailImage: string; +} From 94f7dd30ecf2bba3755dfb7654703b9cadf36ca9 Mon Sep 17 00:00:00 2001 From: hyeseon han Date: Thu, 29 Feb 2024 01:07:30 +0900 Subject: [PATCH 08/13] =?UTF-8?q?feat:=20SelectFridgeModal,=20SelectFridge?= =?UTF-8?q?Board=20component=20=EC=83=9D=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../molecules/IngredientItemBox.tsx | 21 +++--- .../organisms/SelectFridgeBoard.tsx | 69 +++++++++++++++++++ .../organisms/SelectFridgeModal.tsx | 52 ++++++++++++++ src/components/organisms/index.ts | 2 + .../queries/fridge/useGetFridgeContentById.ts | 15 ++-- src/hooks/queries/useBaseInfiniteQuery.ts | 10 +-- src/types/fridge/index.d.ts | 5 ++ 7 files changed, 147 insertions(+), 27 deletions(-) create mode 100644 src/components/organisms/SelectFridgeBoard.tsx create mode 100644 src/components/organisms/SelectFridgeModal.tsx diff --git a/src/components/molecules/IngredientItemBox.tsx b/src/components/molecules/IngredientItemBox.tsx index 5ddc984..a0ec7e5 100644 --- a/src/components/molecules/IngredientItemBox.tsx +++ b/src/components/molecules/IngredientItemBox.tsx @@ -1,19 +1,18 @@ -import React from 'react'; +import Image from 'next/image'; import { IngredientDateTag } from '../atoms'; import type { IngredientDetailType } from '@/types/fridge'; -import Image from 'next/image'; +import React from 'react'; const IngredientItemBox: React.FC<{ data?: IngredientDetailType; handleDetailIngreditentId?: (id: number) => void; -}> = ({ data, handleDetailIngreditentId }) => { + handleSelectIngredientInfo?: () => void; +}> = ({ data, handleDetailIngreditentId, handleSelectIngredientInfo }) => { const addDate = new Date(data?.addDate as string); const expirationDate = new Date(data?.expirationDate as string); const today = new Date(); - const dDay = Math.ceil( - (expirationDate.getTime() - today.getTime()) / (24 * 60 * 60 * 1000), - ); + const dDay = Math.ceil((expirationDate.getTime() - today.getTime()) / (24 * 60 * 60 * 1000)); return (
- {data?.name + {data?.name
{data?.name ?? ''}
diff --git a/src/components/organisms/SelectFridgeBoard.tsx b/src/components/organisms/SelectFridgeBoard.tsx new file mode 100644 index 0000000..075ca6b --- /dev/null +++ b/src/components/organisms/SelectFridgeBoard.tsx @@ -0,0 +1,69 @@ +import { Container, Lottie } from '@/components/atoms'; +import { EmptyBox, FridgeTab, IngredientItemBox } from '@/components/molecules'; +import React, { useRef, useState } from 'react'; + +import type { IngredientDetailType } from '@/types/fridge'; +import { useGetFridgeContentById } from '@/hooks/queries/fridge'; +import { useObserver } from '@/hooks/useObserver'; + +const SelectFridgeBoard: React.FC<{ + fridgeId?: number; + setSelectedIngredientInfo: React.Dispatch>; + onCloseSelectIngredient: () => void; +}> = ({ fridgeId, setSelectedIngredientInfo, onCloseSelectIngredient }) => { + const bottom = useRef(null); + const [currentTabName, setCurrentTabName] = useState<'냉장' | '냉동'>('냉장'); + + const { + data: ingredients, + fetchNextPage: fetchIngredientNextPage, + isFetchingNextPage: isFetchingIngredientNextPage, + } = useGetFridgeContentById({ + id: fridgeId, + sort: currentTabName === '냉장' ? 'FREEZING' : 'REFRIGERATION', + }); + + const handleTabNameChange: (tabName: '냉장' | '냉동') => void = (tabName) => { + setCurrentTabName(tabName); + }; + + const onIntersect: IntersectionObserverCallback = ([entry]) => { + if (entry.isIntersecting) { + void fetchIngredientNextPage(); + } + }; + + useObserver({ + target: bottom, + onIntersect, + }); + + return ( + + +
+ {ingredients?.pages.map(({ content }) => + content && content.length > 0 ? ( + content.map((ingredient) => ( + { + setSelectedIngredientInfo(ingredient); + onCloseSelectIngredient(); + }} + /> + )) + ) : ( +
+ +
+ ), + )} + {isFetchingIngredientNextPage ? :
} +
+ + ); +}; + +export default SelectFridgeBoard; diff --git a/src/components/organisms/SelectFridgeModal.tsx b/src/components/organisms/SelectFridgeModal.tsx new file mode 100644 index 0000000..43021d5 --- /dev/null +++ b/src/components/organisms/SelectFridgeModal.tsx @@ -0,0 +1,52 @@ +import { Button, ModalContainer } from '../atoms'; +import React, { useState } from 'react'; + +import type { FridgeData } from '@/types/fridge'; +import { FridgeListItem } from '../molecules'; + +const SelectFridgeModal: React.FC<{ + fridgeList: Array<{ + id: number; + name: string; + }>; + selectedFridge?: FridgeData; + onCloseFridgeListModal: () => void; + setSelectedFridge: React.Dispatch>; +}> = ({ fridgeList, selectedFridge, onCloseFridgeListModal, setSelectedFridge }) => { + const [isEditingFridgeName, setIsEditingFridgeName] = useState(false); + + const togglesetIsEditingFridgeName = () => { + setIsEditingFridgeName((prev) => !prev); + }; + + return ( + +
+
냉장고 목록
+
자유롭게 여러 냉장고를 정리할 수 있어요
+
+
+ {fridgeList?.map(({ id, name }) => ( + { + setSelectedFridge({ id, name }); + }} + /> + ))} +
+
+
+ + ); +}; + +export default SelectFridgeModal; diff --git a/src/components/organisms/index.ts b/src/components/organisms/index.ts index d4ddc79..e97f17b 100644 --- a/src/components/organisms/index.ts +++ b/src/components/organisms/index.ts @@ -13,3 +13,5 @@ export { default as InputLabelContainer } from './InputLabelContainer'; export { default as InputSectionContainer } from './InputSectionContainer'; export { default as FriendListItem } from './FriendListItem'; export { default as BulletNoticeBox } from './BulletNoticeBox'; +export { default as SelectFridgeModal } from './SelectFridgeModal'; +export { default as SelectFridgeBoard } from './SelectFridgeBoard'; diff --git a/src/hooks/queries/fridge/useGetFridgeContentById.ts b/src/hooks/queries/fridge/useGetFridgeContentById.ts index e59661b..38bc7f3 100644 --- a/src/hooks/queries/fridge/useGetFridgeContentById.ts +++ b/src/hooks/queries/fridge/useGetFridgeContentById.ts @@ -1,8 +1,8 @@ -import { queryKeys } from '../queryKeys'; import type { LocationEnum } from '@/types/common'; +import { queryKeys } from '../queryKeys'; import { useBaseInfiniteQuery } from '../useBaseInfiniteQuery'; -interface FridgeContentType { +export interface FridgeContentType { ingredientDetailId: number; iconImage: string; name: string; @@ -13,17 +13,12 @@ interface FridgeContentType { expirationDate: string; isDeleted: true; } -const useGetFridgeContentById = ({ - sort, - id, -}: { - sort: LocationEnum; - id: number; -}) => { +const useGetFridgeContentById = ({ sort, id }: { sort: LocationEnum; id?: number }) => { const data = useBaseInfiniteQuery({ - queryKey: queryKeys.MY_FRIDGE_CONTENT(id, sort), + queryKey: queryKeys.MY_FRIDGE_CONTENT(id as number, sort), url: `/ingrs/detail/refrig/${id}`, params: { location: sort }, + enabled: typeof id === 'number', }); return data; }; diff --git a/src/hooks/queries/useBaseInfiniteQuery.ts b/src/hooks/queries/useBaseInfiniteQuery.ts index f6d874a..fde0810 100644 --- a/src/hooks/queries/useBaseInfiniteQuery.ts +++ b/src/hooks/queries/useBaseInfiniteQuery.ts @@ -14,18 +14,18 @@ export const useBaseInfiniteQuery = ({ url, size, params, + enabled, }: { queryKey: QueryKey; url: string; size?: number; params?: Record; + enabled?: boolean; }) => { const INITIAL_PAGE_PARAM = 0; const DEFAULT_SIZE = 10; - const fetchData = async ( - context: QueryFunctionContext, - ) => { + const fetchData = async (context: QueryFunctionContext) => { const { pageParam = 0 } = context; const paginationParamString = buildQuery({ @@ -36,8 +36,7 @@ export const useBaseInfiniteQuery = ({ const queryParamString = params ? `&${buildQuery(params)}` : ''; const URL = `${url}?${paginationParamString}${queryParamString}`; - const response = - await axiosInstance.get>>(URL); + const response = await axiosInstance.get>>(URL); return response.data.data; }; @@ -50,5 +49,6 @@ export const useBaseInfiniteQuery = ({ initialPageParam: INITIAL_PAGE_PARAM, getNextPageParam: (res) => getNextOffset(res), staleTime: 0, + enabled, }); }; diff --git a/src/types/fridge/index.d.ts b/src/types/fridge/index.d.ts index 9c3e6bc..3d2a3dc 100644 --- a/src/types/fridge/index.d.ts +++ b/src/types/fridge/index.d.ts @@ -14,3 +14,8 @@ export interface IngredientDetailType { expirationDate: string; isDeleted: true; } + +export interface FridgeData { + id: number; + name: string; +} From 6f6a2323559065e12c477b4afadd2c5a55141119 Mon Sep 17 00:00:00 2001 From: hyeseon han Date: Thu, 29 Feb 2024 01:11:24 +0900 Subject: [PATCH 09/13] =?UTF-8?q?feat:=20SelectIngredientTemplate=20compon?= =?UTF-8?q?ent=20=EC=83=9D=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../templates/SelectIngredientTemplate.tsx | 101 ++++++++++++++++++ src/components/templates/index.ts | 1 + 2 files changed, 102 insertions(+) create mode 100644 src/components/templates/SelectIngredientTemplate.tsx diff --git a/src/components/templates/SelectIngredientTemplate.tsx b/src/components/templates/SelectIngredientTemplate.tsx new file mode 100644 index 0000000..718c5bd --- /dev/null +++ b/src/components/templates/SelectIngredientTemplate.tsx @@ -0,0 +1,101 @@ +import type { FridgeData, IngredientDetailType } from '@/types/fridge'; +import { Header, SelectFridgeBoard, SelectFridgeModal } from '@/components/organisms'; +import { Modal, ModalBody, ModalContent, ModalOverlay, useDisclosure } from '@chakra-ui/react'; +import React, { useEffect, useState } from 'react'; + +import { AngleIcon } from '@/assets/icons'; +import { Lottie } from '../atoms'; +import { useGetMe } from '@/hooks/queries/mypage'; +import useGetMyFridgeList from '@/hooks/queries/fridge/useGetFridgeList'; + +const SelectIngredientTemplate: React.FC<{ + setSelectedIngredientInfo: React.Dispatch>; + onCloseSelectIngredient: () => void; +}> = ({ setSelectedIngredientInfo, onCloseSelectIngredient }) => { + const { + isOpen: isOpenFridgeListModal, + onOpen: onOpenFridgeListModal, + onClose: onCloseFridgeListModal, + } = useDisclosure(); + + const { nickname } = useGetMe(); + + const [selectedFridge, setSelectedFridge] = useState(); + + const fridgeList = useGetMyFridgeList(); + + useEffect(() => { + if (!fridgeList) { + onOpenFridgeListModal(); + } + }, []); + + useEffect(() => { + if (!fridgeList || fridgeList.length < 0) { + return; + } + setSelectedFridge(fridgeList[0]); + }, [fridgeList]); + + if (!fridgeList) { + return Lottie(); + } + + return ( + <> + + + + + + + + +
+
+ + + } + /> +
+
+
+
{nickname} 님의
+
+
{selectedFridge?.name}
+ +
+
+
+ +
+
+ + ); +}; + +export default SelectIngredientTemplate; diff --git a/src/components/templates/index.ts b/src/components/templates/index.ts index b1a7b9e..284b59d 100644 --- a/src/components/templates/index.ts +++ b/src/components/templates/index.ts @@ -3,3 +3,4 @@ export { default as FriendListTemplate } from './FriendListTemplate'; export { default as AddFriendTemplate } from './AddFriendTemplate'; export { default as ErrorFallback } from './ErrorFallback'; export { default as SuspenseFallback } from './SuspenseFallback'; +export { default as SelectIngredientTemplate } from './SelectIngredientTemplate'; From 34a2bd5a34ad20e4f57831ff57c78f9b3a08534e Mon Sep 17 00:00:00 2001 From: hyeseon han Date: Thu, 29 Feb 2024 01:11:41 +0900 Subject: [PATCH 10/13] =?UTF-8?q?feat:=20=EB=82=98=EB=88=94=EA=B8=80=20?= =?UTF-8?q?=EC=9E=91=EC=84=B1=20API=20=EC=97=B0=EB=8F=99?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/add-share/index.tsx | 191 ++++++++++++++++++++++++++-------- 1 file changed, 146 insertions(+), 45 deletions(-) diff --git a/src/pages/add-share/index.tsx b/src/pages/add-share/index.tsx index 7ab8f46..8ebc26d 100644 --- a/src/pages/add-share/index.tsx +++ b/src/pages/add-share/index.tsx @@ -1,19 +1,45 @@ -import { CameraIcon, CircleCloseIcon } from '@/assets/icons'; import { Button, Input } from '@/components/atoms'; +import { CameraIcon, CircleCloseIcon, SearchIcon } from '@/assets/icons'; +import { Header, InputLabelContainer, InputSectionContainer } from '@/components/organisms'; +import React, { useCallback, useState } from 'react'; + +import type { ChangeEvent } from 'react'; import { Counter } from '@/components/molecules'; -import { - Header, - InputLabelContainer, - InputSectionContainer, -} from '@/components/organisms'; -import useCount from '@/hooks/useCount'; -import { type NextPage } from 'next'; import Image from 'next/image'; -import React, { type ChangeEvent, useState } from 'react'; +import type { IngredientDetailType } from '@/types/fridge'; +import type { NextPage } from 'next'; +import { SelectIngredientTemplate } from '@/components/templates'; +import dayjs from 'dayjs'; +import useCount from '@/hooks/useCount'; +import { usePostShare } from '@/hooks/queries/share'; +import usePostUpload from '@/hooks/queries/share/usePostUpload'; +interface AddShareData { + title: string; + content: string; + shareTime: string; + shareDate: string; + location: string; +} const AddSharePage: NextPage = () => { const { currentCount, handleIncreaseCount, handleDecreaseCount } = useCount(); const [selectedImage, setSelectedImage] = useState(); + const [selectIngredientVisible, setSelectIngrediendtVisible] = useState(false); + const [selectedIngredientInfo, setSelectedIngredientInfo] = useState(); + const [data, setData] = useState({ + title: '', + shareDate: '', + shareTime: '12:00:00', + location: '', + content: '', + }); + const imageUpload = usePostUpload({ + onSuccess: (res) => { + onSubmit(res); + }, + }); + + const addShare = usePostShare(); const onChangeFile = (e: ChangeEvent) => { const targetFiles = (e.target as HTMLInputElement).files as FileList; @@ -26,52 +52,136 @@ const AddSharePage: NextPage = () => { setSelectedImage(null); }; + const onUploadImage = useCallback(() => { + if (!selectedImage) { + return; + } + + const formData = new FormData(); + formData.append('image', selectedImage); + + imageUpload.mutate(formData); + }, [selectedImage]); + + const onChangeValue = useCallback( + (e: React.ChangeEvent) => { + const { value, name } = e.target; + console.log(e.target); + setData({ + ...data, + [name]: value, + }); + }, + [data], + ); + + const onSubmit = useCallback( + (image: string) => { + console.log(data); + const body = { + title: data.title, + ingredientDetailId: selectedIngredientInfo?.ingredientDetailId as number, + content: data.content, + shareTime: data.shareTime, + shareDate: data.shareDate, + limitPerson: currentCount, + location: data.location, + status: 'SHARE_START', + thumbnailImage: image, + }; + + addShare.mutate(body); + }, + [data], + ); + + if (selectIngredientVisible) { + return ( + { + setSelectIngrediendtVisible(false); + }} + /> + ); + } + return (
- + - + + - + - + - + - + - + { /> - + + name="content" + value={data?.content} + onChange={onChangeValue} + /> - +
@@ -135,10 +239,7 @@ const AddSharePage: NextPage = () => {
-
From 74224cf9abe038829f2512f59e2910cb96e8e40c Mon Sep 17 00:00:00 2001 From: hyeseon han Date: Thu, 29 Feb 2024 01:28:57 +0900 Subject: [PATCH 11/13] =?UTF-8?q?refactor:=20prettier=20printWidth=20?= =?UTF-8?q?=EC=A0=81=EC=9A=A9=20&=20build=20error=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/api/axiosInstance.ts | 5 +- src/components/atoms/Container.tsx | 5 +- src/components/atoms/IngredientDateTag.tsx | 5 +- src/components/atoms/Lottie.tsx | 10 +- src/components/molecules/FridgeListItem.tsx | 5 +- src/components/organisms/FridgeBoard.tsx | 17 +--- src/components/organisms/FridgeInfoBox.tsx | 20 +--- src/components/organisms/FridgeListModal.tsx | 13 +-- .../organisms/FriendsFridgeList.tsx | 21 +--- .../organisms/FriendsRecentBoard.tsx | 30 ++---- src/components/organisms/IngredientModal.tsx | 90 +++-------------- src/components/organisms/ShareListItem.tsx | 22 +---- .../templates/AddFriendTemplate.tsx | 15 +-- .../queries/fridge/useDeleteIngredientById.ts | 14 +-- src/hooks/queries/fridge/useGetFridgeList.ts | 5 +- .../queries/fridge/useGetIngredientById.ts | 5 +- .../queries/fridge/useGetMyIngredient.ts | 5 +- src/hooks/queries/fridge/usePostFridge.ts | 6 +- src/hooks/queries/fridge/usePostIngredient.ts | 6 +- .../queries/fridge/usePostNewIngredient.ts | 5 +- .../queries/fridge/usePutIngredientById.ts | 12 +-- .../queries/friends/useGetFriendsNews.ts | 5 +- .../queries/home/useGetMyIngredientSummary.ts | 5 +- src/hooks/queries/login/usePostUser.ts | 6 +- .../mypage/useGetMyIngredientsCount.ts | 6 +- src/hooks/queries/mypage/useGetMyShares.ts | 8 +- src/hooks/queries/mypage/usePutMe.ts | 7 +- src/pages/_app.tsx | 6 +- src/pages/fridge/add/index.tsx | 97 ++++++------------- src/pages/fridge/index.tsx | 18 +--- src/pages/friend/[id]/index.tsx | 28 +----- src/pages/friends/index.tsx | 22 +---- src/pages/home/index.tsx | 24 +---- src/pages/login/index.tsx | 12 +-- src/pages/mypage/account/index.tsx | 8 +- src/pages/mypage/index.tsx | 16 +-- src/pages/mypage/profile/index.tsx | 49 +++------- src/pages/mypage/share/index.tsx | 19 +--- src/pages/share/[id].tsx | 42 ++------ src/pages/share/index.tsx | 23 +---- yarn.lock | 12 --- 41 files changed, 146 insertions(+), 583 deletions(-) diff --git a/src/api/axiosInstance.ts b/src/api/axiosInstance.ts index 376f605..0c56505 100644 --- a/src/api/axiosInstance.ts +++ b/src/api/axiosInstance.ts @@ -29,10 +29,7 @@ axiosInstance.interceptors.response.use( if (error.response?.status === 401 && !originalRequest._retry) { originalRequest._retry = true; - const refreshToken = - typeof window !== 'undefined' - ? localStorage.getItem('refreshToken') - : null; + const refreshToken = typeof window !== 'undefined' ? localStorage.getItem('refreshToken') : null; try { originalRequest.headers['Refresh-Token'] = refreshToken; diff --git a/src/components/atoms/Container.tsx b/src/components/atoms/Container.tsx index 14cf524..7c5fcc4 100644 --- a/src/components/atoms/Container.tsx +++ b/src/components/atoms/Container.tsx @@ -8,10 +8,7 @@ interface ContainerProps { const Container: React.FC = ({ children, className, id }) => { return ( -
+
{children}
); diff --git a/src/components/atoms/IngredientDateTag.tsx b/src/components/atoms/IngredientDateTag.tsx index dc11385..0d0c3cc 100644 --- a/src/components/atoms/IngredientDateTag.tsx +++ b/src/components/atoms/IngredientDateTag.tsx @@ -30,10 +30,7 @@ const IngredientDateTag: React.FC = ({ dDay }) => { } return ( -
+
{textDay}
); diff --git a/src/components/atoms/Lottie.tsx b/src/components/atoms/Lottie.tsx index 68ea74f..3cd9d57 100644 --- a/src/components/atoms/Lottie.tsx +++ b/src/components/atoms/Lottie.tsx @@ -3,15 +3,7 @@ import animationData from './../../assets/lottie.webp'; import Image from 'next/image'; const LottieComponent = () => { - return ( - 로딩중 - ); + return 로딩중; }; export default LottieComponent; diff --git a/src/components/molecules/FridgeListItem.tsx b/src/components/molecules/FridgeListItem.tsx index d8e9c2b..435ecff 100644 --- a/src/components/molecules/FridgeListItem.tsx +++ b/src/components/molecules/FridgeListItem.tsx @@ -34,10 +34,7 @@ const FridgeListItem: React.FC = ({ }; return ( - +
{isEditingFridgeName && id === newFridgeName.id ? ( { )} - +
{ingredients?.pages.map(({ content }) => content && content.length > 0 ? ( @@ -102,9 +93,7 @@ const FridgeBoard: React.FC = () => { )) ) : (
- +
), )} diff --git a/src/components/organisms/FridgeInfoBox.tsx b/src/components/organisms/FridgeInfoBox.tsx index 0aa9ab1..e2e5382 100644 --- a/src/components/organisms/FridgeInfoBox.tsx +++ b/src/components/organisms/FridgeInfoBox.tsx @@ -13,20 +13,10 @@ const FridgeInfoBox: React.FC<{ return (
-
- {userName ?? '사용자정보없음'} 님의 -
-
+
{userName ?? '사용자정보없음'} 님의
+
{name ?? '냉장고를 선택해주세요'}
- +
{isOkIngredientAdd && ( @@ -34,9 +24,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=${fridgeid as string}&name=${name as string}`); }} /> )} diff --git a/src/components/organisms/FridgeListModal.tsx b/src/components/organisms/FridgeListModal.tsx index 1281005..9623fd2 100644 --- a/src/components/organisms/FridgeListModal.tsx +++ b/src/components/organisms/FridgeListModal.tsx @@ -29,9 +29,7 @@ const FridgeListModal: React.FC<{ const handleFridgeClick = (id: number, name: string) => { void router.push( - ownerId - ? `/friend/${ownerId}?fridgeid=${id}&name=${name}` - : `fridge/?fridgeid=${id}&name=${name}`, + ownerId ? `/friend/${ownerId}?fridgeid=${id}&name=${name}` : `fridge/?fridgeid=${id}&name=${name}`, ); onCloseFridgeListModal(); }; @@ -58,9 +56,7 @@ const FridgeListModal: React.FC<{
냉장고 목록
-
- 자유롭게 여러 냉장고를 정리할 수 있어요 -
+
자유롭게 여러 냉장고를 정리할 수 있어요
{fridgeList?.map(({ id, name }) => ( @@ -91,10 +87,7 @@ const FridgeListModal: React.FC<{
{!ownerId && ( - )} diff --git a/src/components/organisms/FriendsFridgeList.tsx b/src/components/organisms/FriendsFridgeList.tsx index 22355c9..e08e67d 100644 --- a/src/components/organisms/FriendsFridgeList.tsx +++ b/src/components/organisms/FriendsFridgeList.tsx @@ -18,30 +18,15 @@ const FriendsFridgeList: React.FC<{
친구 목록 {count}
-
+
등록순
- +
{data && data.length !== 0 ? ( - data.map((friend) => ( - - )) + data.map((friend) => ) ) : ( )} diff --git a/src/components/organisms/FriendsRecentBoard.tsx b/src/components/organisms/FriendsRecentBoard.tsx index 48e2ee7..3eb9230 100644 --- a/src/components/organisms/FriendsRecentBoard.tsx +++ b/src/components/organisms/FriendsRecentBoard.tsx @@ -4,9 +4,7 @@ import Link from 'next/link'; import type { FriendObjectType } from '@/hooks/queries/friends/useGetFriendsNews'; import Image from 'next/image'; -const FriendsRecentBoard: React.FC<{ friendNews: FriendObjectType }> = ({ - friendNews, -}) => { +const FriendsRecentBoard: React.FC<{ friendNews: FriendObjectType }> = ({ friendNews }) => { return (
최신근황
@@ -15,26 +13,14 @@ const FriendsRecentBoard: React.FC<{ friendNews: FriendObjectType }> = ({
{friendNews.friendRefrigeratorIngredientGroupList[0].name}를 추가했어요!
-
- 그밖에 신선한 재료를 구경할 수 있어요. -
+
그밖에 신선한 재료를 구경할 수 있어요.
- {friendNews.friendRefrigeratorIngredientGroupList.map( - ({ name, iconImage }) => ( -
- {`${name} -
{name}
-
- ), - )} + {friendNews.friendRefrigeratorIngredientGroupList.map(({ name, iconImage }) => ( +
+ {`${name} +
{name}
+
+ ))}
void; -}> = ({ - id, - categoryImage, - toggleIsOpenIngredientModal, - isDetailModal = false, - category, - ingredientsRefetch, -}) => { +}> = ({ id, categoryImage, toggleIsOpenIngredientModal, isDetailModal = false, category, ingredientsRefetch }) => { const router = useRouter(); const today = new Date(); @@ -53,18 +39,9 @@ const IngredientModal: React.FC<{ queryClient.invalidateQueries({ queryKey: ['my_fridge'] }); }; - const postIngredient = usePostIngredient( - onSuccess, - fridgeid as string, - name as string, - ); + const postIngredient = usePostIngredient(onSuccess, fridgeid as string, name as string); - const data = - id === 0 - ? null - : isDetailModal - ? useGetMyIngredient(id) - : useGetIngredientById(id); + const data = id === 0 ? null : isDetailModal ? useGetMyIngredient(id) : useGetIngredientById(id); const expirationDate = new Date(today); expirationDate.setDate(today.getDate() + (data?.expirationDays ?? 0)); @@ -78,28 +55,14 @@ const IngredientModal: React.FC<{ location: data?.location ?? 'FREEZING', memo: '', addDate: today, - expirationDate: data?.expirationDate - ? new Date(data?.expirationDate) - : expirationDate, + expirationDate: data?.expirationDate ? new Date(data?.expirationDate) : expirationDate, isDeleted: false, }); - const deleteIngredient = useDeleteIngredientById( - id, - Number(fridgeid), - reqBody?.location, - ingredientsRefetch, - ); - const putIngredient = usePutIngredientById( - id, - Number(fridgeid), - reqBody?.location, - ingredientsRefetch, - ); + const deleteIngredient = useDeleteIngredientById(id, Number(fridgeid), reqBody?.location, ingredientsRefetch); + const putIngredient = usePutIngredientById(id, Number(fridgeid), reqBody?.location, ingredientsRefetch); - const [isInFreezer, setIsInFreezer] = useState( - reqBody?.location === 'REFRIGERATION', - ); + const [isInFreezer, setIsInFreezer] = useState(reqBody?.location === 'REFRIGERATION'); const toggleIsInFreezer: () => void = () => { setIsInFreezer((prev) => !prev); @@ -129,12 +92,7 @@ const IngredientModal: React.FC<{
- {data?.name + {data?.name {isEditingName ? (
- } - title="소비기한" - > + } title="소비기한">
- } - title="수량" - > + } title="수량"> { @@ -210,18 +160,10 @@ const IngredientModal: React.FC<{ }} /> - } - title="냉동보관" - > + } title="냉동보관"> - } - title="메모" - > + } title="메모"> ) => { @@ -261,11 +203,7 @@ const IngredientModal: React.FC<{ />
) : ( -
diff --git a/src/components/organisms/ShareListItem.tsx b/src/components/organisms/ShareListItem.tsx index a8fe0b0..3242b0c 100644 --- a/src/components/organisms/ShareListItem.tsx +++ b/src/components/organisms/ShareListItem.tsx @@ -15,34 +15,18 @@ const ShareListItem: React.FC<{ className="flex flex-1 items-center mb-[12px] pl-[18px] pr-[12px] py-[16px] rounded-[12px] bg-white" > {data.thumbnailImage ? ( - thumbnail + thumbnail ) : (
)}

{data.title}

- +

{data.location} - + {`${dayjs(data.shareDate).format('MM월 DD일')} ${data.shareTime.slice(0, 5)}`}

diff --git a/src/components/templates/AddFriendTemplate.tsx b/src/components/templates/AddFriendTemplate.tsx index d4466fc..6ccd3cc 100644 --- a/src/components/templates/AddFriendTemplate.tsx +++ b/src/components/templates/AddFriendTemplate.tsx @@ -1,9 +1,6 @@ import { LabelRoundBox, WarningLine } from '@/components/molecules'; import React, { useState } from 'react'; -import { - useAddFriendship, - useGetMyInviteCode, -} from '@/hooks/queries/friendship'; +import { useAddFriendship, useGetMyInviteCode } from '@/hooks/queries/friendship'; import { BulletNoticeBox } from '@/components/organisms'; import { MiniButton } from '@/components/atoms'; @@ -68,15 +65,9 @@ const AddFriendTemplate: React.FC = () => { }} maxLength={10} /> - +
- {warningVisible ? ( - - ) : null} + {warningVisible ? : null} } /> diff --git a/src/hooks/queries/fridge/useDeleteIngredientById.ts b/src/hooks/queries/fridge/useDeleteIngredientById.ts index e36bcc1..2230016 100644 --- a/src/hooks/queries/fridge/useDeleteIngredientById.ts +++ b/src/hooks/queries/fridge/useDeleteIngredientById.ts @@ -2,22 +2,12 @@ import { queryClient } from '@/pages/_app'; import { queryKeys } from '../queryKeys'; import { useBaseMutation } from '../useBaseMutation'; -const useDeleteIngredientById = ( - id: number, - fridgeId: number, - location: string, - fn?: () => void, -) => { +const useDeleteIngredientById = (id: number, fridgeId: number, location: string, fn?: () => void) => { const onSuccess = () => { void queryClient.invalidateQueries(); if (fn) fn(); }; - return useBaseMutation( - queryKeys.MY_FRIDGE_CONTENT(fridgeId, location), - `/ingrs/detail/${id}`, - onSuccess, - 'DELETE', - ); + return useBaseMutation(queryKeys.MY_FRIDGE_CONTENT(fridgeId, location), `/ingrs/detail/${id}`, onSuccess, 'DELETE'); }; export default useDeleteIngredientById; diff --git a/src/hooks/queries/fridge/useGetFridgeList.ts b/src/hooks/queries/fridge/useGetFridgeList.ts index 2de3a7e..a4bf3cf 100644 --- a/src/hooks/queries/fridge/useGetFridgeList.ts +++ b/src/hooks/queries/fridge/useGetFridgeList.ts @@ -7,10 +7,7 @@ interface IngredientType { } const useGetMyFridgeList = (id?: number) => { - const { data } = useBaseQuery( - queryKeys.MY_FRIDGE_LIST(), - `/refrigs/${id ? `users/${id}` : 'my'}`, - ); + const { data } = useBaseQuery(queryKeys.MY_FRIDGE_LIST(), `/refrigs/${id ? `users/${id}` : 'my'}`); return data?.data; }; diff --git a/src/hooks/queries/fridge/useGetIngredientById.ts b/src/hooks/queries/fridge/useGetIngredientById.ts index 1b9aef4..3891606 100644 --- a/src/hooks/queries/fridge/useGetIngredientById.ts +++ b/src/hooks/queries/fridge/useGetIngredientById.ts @@ -14,10 +14,7 @@ export interface IngredientType { } const useGetIngredientById = (id: number) => { - const { data } = useBaseQuery( - queryKeys.INGREDIENT_ID(id), - `/ingrs/${id}`, - ); + const { data } = useBaseQuery(queryKeys.INGREDIENT_ID(id), `/ingrs/${id}`); if (!data?.data) return; diff --git a/src/hooks/queries/fridge/useGetMyIngredient.ts b/src/hooks/queries/fridge/useGetMyIngredient.ts index b634dbf..cebd76b 100644 --- a/src/hooks/queries/fridge/useGetMyIngredient.ts +++ b/src/hooks/queries/fridge/useGetMyIngredient.ts @@ -3,10 +3,7 @@ import { useBaseQuery } from '../useBaseQuery'; import type { IngredientType } from './useGetIngredientById'; const useGetMyIngredient = (id: number) => { - const { data } = useBaseQuery( - queryKeys.MY_INGREDIENT_ID(id), - `/ingrs/detail/${id}`, - ); + const { data } = useBaseQuery(queryKeys.MY_INGREDIENT_ID(id), `/ingrs/detail/${id}`); return data?.data; }; diff --git a/src/hooks/queries/fridge/usePostFridge.ts b/src/hooks/queries/fridge/usePostFridge.ts index 131831b..d7ff09c 100644 --- a/src/hooks/queries/fridge/usePostFridge.ts +++ b/src/hooks/queries/fridge/usePostFridge.ts @@ -10,11 +10,7 @@ const usePostFridge = () => { const onSuccess = (data: PostFridgeBodyType) => { void queryClient.invalidateQueries(); }; - return useBaseMutation( - queryKeys.INGREDIENT_LIST, - `/refrigs`, - onSuccess, - ); + return useBaseMutation(queryKeys.INGREDIENT_LIST, `/refrigs`, onSuccess); }; export default usePostFridge; diff --git a/src/hooks/queries/fridge/usePostIngredient.ts b/src/hooks/queries/fridge/usePostIngredient.ts index 1214888..3a9fb51 100644 --- a/src/hooks/queries/fridge/usePostIngredient.ts +++ b/src/hooks/queries/fridge/usePostIngredient.ts @@ -20,10 +20,6 @@ const usePostIngredient = (fn: () => void, fridgeid: string, name: string) => { void router.push(`/fridge?fridgeid=${fridgeid}&name=${name}`); fn(); }; - return useBaseMutation( - queryKeys.INGREDIENTS(), - `/ingrs/detail`, - onSuccess, - ); + return useBaseMutation(queryKeys.INGREDIENTS(), `/ingrs/detail`, onSuccess); }; export default usePostIngredient; diff --git a/src/hooks/queries/fridge/usePostNewIngredient.ts b/src/hooks/queries/fridge/usePostNewIngredient.ts index 0973806..a27ca06 100644 --- a/src/hooks/queries/fridge/usePostNewIngredient.ts +++ b/src/hooks/queries/fridge/usePostNewIngredient.ts @@ -9,9 +9,6 @@ export interface PostNewIngredientBodyType { } const usePostNewIngredient = () => { - return useBaseMutation( - queryKeys.INGREDIENTS(), - `/ingrs`, - ); + return useBaseMutation(queryKeys.INGREDIENTS(), `/ingrs`); }; export default usePostNewIngredient; diff --git a/src/hooks/queries/fridge/usePutIngredientById.ts b/src/hooks/queries/fridge/usePutIngredientById.ts index b5ab0fe..d1ec65f 100644 --- a/src/hooks/queries/fridge/usePutIngredientById.ts +++ b/src/hooks/queries/fridge/usePutIngredientById.ts @@ -13,21 +13,13 @@ export interface FridgeBodyType { isDeleted: boolean; } -const usePutIngredientById = ( - id: number, - fridgeId: number, - location: string, - fn?: () => void, -) => { +const usePutIngredientById = (id: number, fridgeId: number, location: string, fn?: () => void) => { const onSuccess = () => { void queryClient.invalidateQueries(); if (fn) fn(); }; return useBaseMutation( - [ - ...queryKeys.MY_FRIDGE_CONTENT(fridgeId, location), - ...queryKeys.MY_INGREDIENT_ID(id), - ], + [...queryKeys.MY_FRIDGE_CONTENT(fridgeId, location), ...queryKeys.MY_INGREDIENT_ID(id)], `/ingrs/detail/${id}`, onSuccess, 'PUT', diff --git a/src/hooks/queries/friends/useGetFriendsNews.ts b/src/hooks/queries/friends/useGetFriendsNews.ts index 7fd661a..5be02df 100644 --- a/src/hooks/queries/friends/useGetFriendsNews.ts +++ b/src/hooks/queries/friends/useGetFriendsNews.ts @@ -10,10 +10,7 @@ export interface FriendObjectType { } const useGetFriendsNews = () => { - const { data } = useBaseQuery( - queryKeys.MY_FRIENDS_NEWS(), - `friend-refrigs/recent`, - ); + const { data } = useBaseQuery(queryKeys.MY_FRIENDS_NEWS(), `friend-refrigs/recent`); return data?.data; }; diff --git a/src/hooks/queries/home/useGetMyIngredientSummary.ts b/src/hooks/queries/home/useGetMyIngredientSummary.ts index bd16f85..34d7521 100644 --- a/src/hooks/queries/home/useGetMyIngredientSummary.ts +++ b/src/hooks/queries/home/useGetMyIngredientSummary.ts @@ -3,10 +3,7 @@ import { queryKeys } from '../queryKeys'; import { useBaseQuery } from '../useBaseQuery'; const useGetMyIngredientSummary = () => { - const { data } = useBaseQuery( - queryKeys.INGREDIENTS_RECENT(), - '/ingrs/detail/recent', - ); + const { data } = useBaseQuery(queryKeys.INGREDIENTS_RECENT(), '/ingrs/detail/recent'); return data?.data; }; diff --git a/src/hooks/queries/login/usePostUser.ts b/src/hooks/queries/login/usePostUser.ts index 9443d34..7166e67 100644 --- a/src/hooks/queries/login/usePostUser.ts +++ b/src/hooks/queries/login/usePostUser.ts @@ -26,10 +26,6 @@ const usePostUser = () => { localStorage.setItem('refreshToken', data.refreshToken); void router.push('/home'); }; - return useBaseMutation( - queryKeys.KAKAO(), - `/users`, - onSuccess, - ); + return useBaseMutation(queryKeys.KAKAO(), `/users`, onSuccess); }; export default usePostUser; diff --git a/src/hooks/queries/mypage/useGetMyIngredientsCount.ts b/src/hooks/queries/mypage/useGetMyIngredientsCount.ts index b38d558..34f3e1f 100644 --- a/src/hooks/queries/mypage/useGetMyIngredientsCount.ts +++ b/src/hooks/queries/mypage/useGetMyIngredientsCount.ts @@ -2,11 +2,7 @@ import { queryKeys } from '../queryKeys'; import { useBaseQuery } from '../useBaseQuery'; const useGetMyIngredientsCount = () => { - const { data } = useBaseQuery( - queryKeys.MY_INGREDIENTS_COUNT(), - `/ingrs/detail/count?day=7`, - true, - ); + const { data } = useBaseQuery(queryKeys.MY_INGREDIENTS_COUNT(), `/ingrs/detail/count?day=7`, true); return data?.data; }; diff --git a/src/hooks/queries/mypage/useGetMyShares.ts b/src/hooks/queries/mypage/useGetMyShares.ts index 9f0bae3..27a3091 100644 --- a/src/hooks/queries/mypage/useGetMyShares.ts +++ b/src/hooks/queries/mypage/useGetMyShares.ts @@ -4,13 +4,7 @@ import type { ShareData } from '@/types/share'; import { queryKeys } from '../queryKeys'; import { useBaseInfiniteQuery } from '../useBaseInfiniteQuery'; -const useGetMyShares = ({ - sort, - status, -}: { - sort: ShareSortType; - status: ShareStatusType; -}) => +const useGetMyShares = ({ sort, status }: { sort: ShareSortType; status: ShareStatusType }) => useBaseInfiniteQuery({ queryKey: queryKeys.MY_SHARES(sort, status), url: `/shares/created`, diff --git a/src/hooks/queries/mypage/usePutMe.ts b/src/hooks/queries/mypage/usePutMe.ts index 8429653..38be55f 100644 --- a/src/hooks/queries/mypage/usePutMe.ts +++ b/src/hooks/queries/mypage/usePutMe.ts @@ -15,11 +15,6 @@ const usePutMe = () => { void queryClient.invalidateQueries(); router.push('/mypage'); }; - return useBaseMutation( - queryKeys.ME(), - `/users`, - onSuccess, - 'PUT', - ); + return useBaseMutation(queryKeys.ME(), `/users`, onSuccess, 'PUT'); }; export default usePutMe; diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx index 9d73b61..95c2200 100644 --- a/src/pages/_app.tsx +++ b/src/pages/_app.tsx @@ -3,11 +3,7 @@ import Layout from '@/components/templates/Layout'; import '@/styles/globals.css'; import type { AppProps } from 'next/app'; import { RecoilRoot } from 'recoil'; -import { - QueryClient, - QueryClientProvider, - QueryErrorResetBoundary, -} from '@tanstack/react-query'; +import { QueryClient, QueryClientProvider, QueryErrorResetBoundary } from '@tanstack/react-query'; import React from 'react'; import 'dayjs/locale/ko'; import dayjs from 'dayjs'; diff --git a/src/pages/fridge/add/index.tsx b/src/pages/fridge/add/index.tsx index e912db3..c236e9b 100644 --- a/src/pages/fridge/add/index.tsx +++ b/src/pages/fridge/add/index.tsx @@ -4,13 +4,7 @@ import { Container } from '../../../components/atoms'; 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 { Modal, ModalOverlay, ModalBody, ModalContent, useDisclosure } from '@chakra-ui/react'; import Draggable from 'react-draggable'; import type { DraggableEvent } from 'react-draggable'; @@ -64,10 +58,7 @@ const FridgePage: NextPage = () => { const containerWidth = 1400; const maxScrollX = containerWidth - window.innerWidth; - const handleDrag = ( - e: DraggableEvent, - { deltaX }: { deltaX: number }, - ): void => { + const handleDrag = (e: DraggableEvent, { deltaX }: { deltaX: number }): void => { const newScrollX = scrollX - deltaX; if (newScrollX > maxScrollX) { setScrollX(maxScrollX); @@ -109,62 +100,43 @@ const FridgePage: NextPage = () => { )}
-
+
-
- {['전체', ...(data?.map((item) => item.category) ?? [])].map( - (category) => ( -
{ - handleCategoryClick(category); - }} - className={`${category === currentCategory ? 'bg-primary2 text-white' : 'bg-white text-gray4'} cursor-pointer body1-semibold pt-[6px] pb-[6px] pl-[18px] pr-[18px] rounded-[20px]`} - style={{ whiteSpace: 'nowrap' }} - data-category={category} - > - {category} -
- ), - )} +
+ {['전체', ...(data?.map((item) => item.category) ?? [])].map((category) => ( +
{ + handleCategoryClick(category); + }} + className={`${category === currentCategory ? 'bg-primary2 text-white' : 'bg-white text-gray4'} cursor-pointer body1-semibold pt-[6px] pb-[6px] pl-[18px] pr-[18px] rounded-[20px]`} + style={{ whiteSpace: 'nowrap' }} + data-category={category} + > + {category} +
+ ))}
{data?.map((items) => ( - +
    - {items.ingredientGroupList - .slice(0, CATEGORY_COUNT[items.category]) - .map((item) => ( -
  • { - setIngredientId(item.id); - onOpenIngredientModal(); - }} - className="flex flex-col items-center" - > - {item.name} -
    {item.name}
    -
    • - ))} + {items.ingredientGroupList.slice(0, CATEGORY_COUNT[items.category]).map((item) => ( +
  • { + setIngredientId(item.id); + onOpenIngredientModal(); + }} + className="flex flex-col items-center" + > + {item.name} +
    {item.name}
    +
    • + ))}
  • { @@ -175,12 +147,7 @@ const FridgePage: NextPage = () => { }} className="flex flex-col items-center" > - {items.category} + {items.category}
    직접 추가
diff --git a/src/pages/fridge/index.tsx b/src/pages/fridge/index.tsx index 2f44a6d..b2aa6de 100644 --- a/src/pages/fridge/index.tsx +++ b/src/pages/fridge/index.tsx @@ -1,17 +1,7 @@ import Header from '@/components/organisms/Header'; -import { - FridgeBoard, - FridgeInfoBox, - FridgeListModal, -} from '@/components/organisms'; +import { FridgeBoard, FridgeInfoBox, FridgeListModal } from '@/components/organisms'; import { type NextPage } from 'next'; -import { - Modal, - ModalOverlay, - ModalBody, - ModalContent, - useDisclosure, -} from '@chakra-ui/react'; +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'; @@ -61,9 +51,7 @@ const FridgePage: NextPage = () => {
-
+
{ @@ -50,22 +40,14 @@ const FriendIdPage: NextPage = () => { margin={0} > - +
-
- +
+
diff --git a/src/pages/friends/index.tsx b/src/pages/friends/index.tsx index b95d809..9e33ef3 100644 --- a/src/pages/friends/index.tsx +++ b/src/pages/friends/index.tsx @@ -1,17 +1,7 @@ -import { - FriendsFridgeList, - FriendsRecentBoard, - OrderListModal, -} from '@/components/organisms'; +import { FriendsFridgeList, FriendsRecentBoard, OrderListModal } from '@/components/organisms'; import Header from '@/components/organisms/Header'; import { useGetFriendsNews } from '@/hooks/queries/friends'; -import { - Modal, - ModalBody, - ModalContent, - ModalOverlay, - useDisclosure, -} from '@chakra-ui/react'; +import { Modal, ModalBody, ModalContent, ModalOverlay, useDisclosure } from '@chakra-ui/react'; import { type NextPage } from 'next'; import { Swiper, SwiperSlide } from 'swiper/react'; import 'swiper/css'; @@ -69,9 +59,7 @@ const FriendsPage: NextPage = () => { /> } /> -
+
{friendsNewsList && friendsNewsList.length !== 0 ? ( {friendsNewsList.map((friendNews) => ( @@ -85,9 +73,7 @@ const FriendsPage: NextPage = () => { )} - +
diff --git a/src/pages/home/index.tsx b/src/pages/home/index.tsx index 8b13e8e..24959d5 100644 --- a/src/pages/home/index.tsx +++ b/src/pages/home/index.tsx @@ -25,28 +25,14 @@ const Home: NextPage = () => {
} /> -
- {!!ingredientCount && ( - - )} +
+ {!!ingredientCount && }
- } - text="내 냉장고" - linkTo="/fridge" - /> - } - text="친구 냉장고" - linkTo="/friends" - /> + } text="내 냉장고" linkTo="/fridge" /> + } text="친구 냉장고" linkTo="/friends" />
-
- 소비기한 -
+
소비기한
diff --git a/src/pages/login/index.tsx b/src/pages/login/index.tsx index 72f656c..fded3c2 100644 --- a/src/pages/login/index.tsx +++ b/src/pages/login/index.tsx @@ -30,22 +30,16 @@ const LoginPage: NextPage = () => { } return ( -
+
-
- 냉장고 관리, 얼른 시작해봐요 -
+
냉장고 관리, 얼른 시작해봐요
-
- SNS 계정으로 로그인 -
+
SNS 계정으로 로그인
diff --git a/src/pages/mypage/account/index.tsx b/src/pages/mypage/account/index.tsx index 9f9e04c..2218387 100644 --- a/src/pages/mypage/account/index.tsx +++ b/src/pages/mypage/account/index.tsx @@ -10,14 +10,10 @@ const FriendsListPage: NextPage = () => { return (
-
+
연결된계정
-
- {data.kakaoEmail ?? data.googleEmail ?? ''} -
+
{data.kakaoEmail ?? data.googleEmail ?? ''}
diff --git a/src/pages/mypage/profile/index.tsx b/src/pages/mypage/profile/index.tsx index 9d70ce1..fd38116 100644 --- a/src/pages/mypage/profile/index.tsx +++ b/src/pages/mypage/profile/index.tsx @@ -35,20 +35,14 @@ const ProfilePage: NextPage = () => { const [selectedProfile, setSelectedProfile] = useState('BLUE'); const [nickname, setNickname] = useState(MyInfo?.nickname ?? ''); - const [isNicknameAvailable, setIsNicknameAvailable] = useState< - null | boolean - >(null); - const [isNicknameChecked, setIsNicknameChecked] = useState( - null, - ); + const [isNicknameAvailable, setIsNicknameAvailable] = useState(null); + const [isNicknameChecked, setIsNicknameChecked] = useState(null); const putMe = usePutMe(); const postUser = usePostUser(); - const handleNicknameChange: ( - e: React.ChangeEvent, - ) => void = (e) => { + const handleNicknameChange: (e: React.ChangeEvent) => void = (e) => { setNickname(e.target.value); setIsNicknameChecked(false); void debouncedHandleNicknameChange(e.target.value); @@ -84,10 +78,7 @@ const ProfilePage: NextPage = () => { const handleSumbit = (e: FormEvent) => { e.preventDefault(); - const urlParams = - typeof window !== 'undefined' - ? new URLSearchParams(window.location.search) - : null; + const urlParams = typeof window !== 'undefined' ? new URLSearchParams(window.location.search) : null; const kakaoId = urlParams?.get('kakaoId'); const kakaoEmail = urlParams?.get('kakaoEmail'); @@ -107,9 +98,7 @@ const ProfilePage: NextPage = () => { return (
-
+
{ width={120} height={120} /> -
+
- +
{isNicknameChecked && (isNicknameAvailable ? ( - - 사용가능한 닉네임입니다. - + 사용가능한 닉네임입니다. ) : ( - + ))}
{PROFILES.map(({ string, pointColor }) => ( 프로필 이미지 {
{data?.pages.map((page) => - page.content.map((ele: ShareData) => ( - - )), + page.content.map((ele: ShareData) => ), )} {isFetchingNextPage ? :
}
- + { )}
-

- {MOCK_DATA_IS_AUTHOR ? '나의 나눔' : data?.userName} -

-

- {data?.title} -

+

{MOCK_DATA_IS_AUTHOR ? '나의 나눔' : data?.userName}

+

{data?.title}

- +
- +
0 ? dayjs(data?.limitDate).diff(dayjs(), 'day') : 0}`} />
- - - + + +
@@ -103,11 +81,7 @@ const ShareDetailPage: NextPage = () => {
{MOCK_DATA_IS_AUTHOR ? ( - + ) : (
); }; diff --git a/src/components/atoms/IngredientIcons.tsx b/src/components/atoms/IngredientIcons.tsx index d97b930..ddc0bf4 100644 --- a/src/components/atoms/IngredientIcons.tsx +++ b/src/components/atoms/IngredientIcons.tsx @@ -11,17 +11,9 @@ export const AppleIcon: React.FC> = (props) => ( xmlnsXlink="http://www.w3.org/1999/xlink" > - + - + , - HTMLInputElement - > -> = ({ ...props }) => { +const Input: React.FC, HTMLInputElement>> = ({ + ...props +}) => { return ( + ); diff --git a/src/components/atoms/RadioButtonField.tsx b/src/components/atoms/RadioButtonField.tsx index 0986960..242e0dc 100644 --- a/src/components/atoms/RadioButtonField.tsx +++ b/src/components/atoms/RadioButtonField.tsx @@ -7,10 +7,7 @@ const RadioButtonField: React.FC<{ checked: boolean; }> = ({ label, onClick, checked }) => { return ( - diff --git a/src/components/atoms/SearchInput.tsx b/src/components/atoms/SearchInput.tsx index 7464cef..f809082 100644 --- a/src/components/atoms/SearchInput.tsx +++ b/src/components/atoms/SearchInput.tsx @@ -9,23 +9,12 @@ interface SearchInputProps { placeholder?: string; } -const SearchInput: React.FC = ({ - searchKeyword, - onClick, - placeholder, - onChange, - className, -}) => { +const SearchInput: React.FC = ({ searchKeyword, onClick, placeholder, onChange, className }) => { return (
- +
); diff --git a/src/components/atoms/SortButton.tsx b/src/components/atoms/SortButton.tsx index 02c3056..dce8090 100644 --- a/src/components/atoms/SortButton.tsx +++ b/src/components/atoms/SortButton.tsx @@ -1,19 +1,11 @@ import { AngleIcon } from '@/assets/icons'; import React from 'react'; -const SortButton: React.FC<{ label: string; onClick: () => void }> = ({ - label, - onClick, -}) => { +const SortButton: React.FC<{ label: string; onClick: () => void }> = ({ label, onClick }) => { return ( ); }; diff --git a/src/components/atoms/Toggle.tsx b/src/components/atoms/Toggle.tsx index 875f1c6..153785f 100644 --- a/src/components/atoms/Toggle.tsx +++ b/src/components/atoms/Toggle.tsx @@ -5,9 +5,7 @@ const Toggle: React.FC<{ isToggleOn?: boolean; onClick?: () => void; }> = ({ isToggleOn, onClick }) => { - return ( - - ); + return ; }; export default Toggle; diff --git a/src/components/molecules/Counter.tsx b/src/components/molecules/Counter.tsx index b09fd97..a378b1d 100644 --- a/src/components/molecules/Counter.tsx +++ b/src/components/molecules/Counter.tsx @@ -1,11 +1,8 @@ import React, { useEffect } from 'react'; + import type { CountState } from '@/hooks/useCount'; -const Counter: React.FC = ({ - currentCount, - handleDecreaseCount, - handleIncreaseCount, -}) => { +const Counter: React.FC = ({ currentCount, handleDecreaseCount, handleIncreaseCount }) => { useEffect(() => {}, [currentCount]); return (
diff --git a/src/components/molecules/FridgeEnterButton.tsx b/src/components/molecules/FridgeEnterButton.tsx index 0ae0a97..19aec97 100644 --- a/src/components/molecules/FridgeEnterButton.tsx +++ b/src/components/molecules/FridgeEnterButton.tsx @@ -1,5 +1,5 @@ -import React from 'react'; import Link from 'next/link'; +import React from 'react'; interface FridgeEnterButtonProps { svgComponent: React.ReactNode; @@ -7,11 +7,7 @@ interface FridgeEnterButtonProps { linkTo: string; } -const FridgeEnterButton: React.FC = ({ - svgComponent, - text, - linkTo, -}) => { +const FridgeEnterButton: React.FC = ({ svgComponent, text, linkTo }) => { return ( {svgComponent} diff --git a/src/components/molecules/FridgeTab.tsx b/src/components/molecules/FridgeTab.tsx index afe9bc2..109f17f 100644 --- a/src/components/molecules/FridgeTab.tsx +++ b/src/components/molecules/FridgeTab.tsx @@ -1,21 +1,14 @@ -import React from 'react'; import { BorderTab } from '../atoms'; +import React from 'react'; interface FridgeTabProps { currentTabName: '냉장' | '냉동'; handleTabNameChange: (tabName: '냉장' | '냉동') => void; } -const FridgeTab: React.FC = ({ - currentTabName, - handleTabNameChange, -}) => { +const FridgeTab: React.FC = ({ currentTabName, handleTabNameChange }) => { return (
- + = ({ - name, - ingredientCount, - linkTo, -}) => { +const FriendsFridgeItem: React.FC = ({ name, ingredientCount, linkTo }) => { return ( - +
- {`누군가의 + {`누군가의
{name}
-
- 냉장고 저장 목록 {ingredientCount}개 -
+
냉장고 저장 목록 {ingredientCount}개
diff --git a/src/components/molecules/FriendshipHeaderSettingButton.tsx b/src/components/molecules/FriendshipHeaderSettingButton.tsx index 42c49a7..ea28168 100644 --- a/src/components/molecules/FriendshipHeaderSettingButton.tsx +++ b/src/components/molecules/FriendshipHeaderSettingButton.tsx @@ -1,9 +1,7 @@ import React from 'react'; import { SettingIcon } from '@/assets/icons'; -const FriendshipHeaderSettingButton: React.FC<{ onClick: () => void }> = ({ - onClick, -}) => { +const FriendshipHeaderSettingButton: React.FC<{ onClick: () => void }> = ({ onClick }) => { return ( )} {!headerLeft && (
-

- {typeof headerTitle === 'string' ? headerTitle : ''} -

+

{typeof headerTitle === 'string' ? headerTitle : ''}

)} {headerRight ??
} diff --git a/src/components/organisms/ShareDetailAuthorBottomWrapper.tsx b/src/components/organisms/ShareDetailAuthorBottomWrapper.tsx index 66365e6..0bc7959 100644 --- a/src/components/organisms/ShareDetailAuthorBottomWrapper.tsx +++ b/src/components/organisms/ShareDetailAuthorBottomWrapper.tsx @@ -1,10 +1,4 @@ -import { - Modal, - ModalBody, - ModalContent, - ModalOverlay, - useDisclosure, -} from '@chakra-ui/react'; +import { Modal, ModalBody, ModalContent, ModalOverlay, useDisclosure } from '@chakra-ui/react'; import { Button, RadioButtonField } from '@/components/atoms'; import React from 'react'; @@ -23,11 +17,7 @@ const ShareDetailAuthorBottomWrapper: React.FC<{ curStatus: SortLabel; onChangeStatus: React.Dispatch>; }> = ({ id, curStatus, onChangeStatus }) => { - const { - isOpen: isStatusModalOpen, - onOpen: onStatusModalOpen, - onClose: onStatusModalClose, - } = useDisclosure(); + const { isOpen: isStatusModalOpen, onOpen: onStatusModalOpen, onClose: onStatusModalClose } = useDisclosure(); const { isOpen: isParticipantsModalOpen, onOpen: onParticipantsModalOpen, @@ -39,11 +29,7 @@ const ShareDetailAuthorBottomWrapper: React.FC<{ return ( <>
-
- + ))}
-
@@ -105,20 +82,10 @@ const ShareDetailAuthorBottomWrapper: React.FC<{ >
- {applicants?.map((ele, idx) => ( - - ))} + {applicants?.map((ele, idx) => )}
-
diff --git a/src/components/templates/ErrorFallback.tsx b/src/components/templates/ErrorFallback.tsx index 9dfa73b..e847260 100644 --- a/src/components/templates/ErrorFallback.tsx +++ b/src/components/templates/ErrorFallback.tsx @@ -1,11 +1,7 @@ -import React from 'react'; import { Button } from '../atoms'; +import React from 'react'; -const ErrorFallback: React.FC = ({ - resetErrorBoundary, -}: { - resetErrorBoundary?: () => void; -}) => { +const ErrorFallback: React.FC = ({ resetErrorBoundary }: { resetErrorBoundary?: () => void }) => { const handleRefresh = () => { if (resetErrorBoundary) { resetErrorBoundary(); @@ -14,15 +10,9 @@ const ErrorFallback: React.FC = ({ return (
-
+
에러 발생!
-
diff --git a/src/components/templates/FriendListTemplate.tsx b/src/components/templates/FriendListTemplate.tsx index a2918ab..f0a4c3f 100644 --- a/src/components/templates/FriendListTemplate.tsx +++ b/src/components/templates/FriendListTemplate.tsx @@ -1,19 +1,10 @@ -import { - Modal, - ModalBody, - ModalContent, - ModalOverlay, - useDisclosure, -} from '@chakra-ui/react'; +import { Modal, ModalBody, ModalContent, ModalOverlay, useDisclosure } from '@chakra-ui/react'; import React, { useCallback, useEffect, useRef, useState } from 'react'; import { type SortLabel } from '@/types/common'; import { Button, RadioButtonField, SortButton } from '@/components/atoms'; import { FriendListItem } from '../organisms'; -import { - useDeleteFriendship, - useGetFriendships, -} from '@/hooks/queries/friendship'; +import { useDeleteFriendship, useGetFriendships } from '@/hooks/queries/friendship'; import type { FriendshipData, FriendshipSortType } from '@/types/friendship'; import { SuspenseFallback } from '.'; import { useObserver } from '@/hooks/useObserver'; @@ -23,16 +14,10 @@ const SORT_TYPES: SortLabel[] = [ { label: '등록순', value: 'createdAt' }, ]; -const FriendListTemplate: React.FC<{ possibleDelete: boolean }> = ({ - possibleDelete, -}) => { +const FriendListTemplate: React.FC<{ possibleDelete: boolean }> = ({ possibleDelete }) => { const bottom = useRef(null); const { isOpen, onOpen, onClose } = useDisclosure(); - const { - isOpen: deleteIsOpen, - onOpen: deleteOnOpen, - onClose: deleteOnClose, - } = useDisclosure(); + const { isOpen: deleteIsOpen, onOpen: deleteOnOpen, onClose: deleteOnClose } = useDisclosure(); const [curSortType, setCurSortType] = useState(SORT_TYPES[0]); const [selectedFriendIds, setSelectedFriendIds] = useState([]); const { @@ -95,9 +80,7 @@ const FriendListTemplate: React.FC<{ possibleDelete: boolean }> = ({
-

- 총 {friendsData?.pages[0].totalElements}명 -

+

총 {friendsData?.pages[0].totalElements}명

@@ -116,11 +99,7 @@ const FriendListTemplate: React.FC<{ possibleDelete: boolean }> = ({ /> )), )} - {isFetchingfriendsNextPage ? ( - - ) : ( -
- )} + {isFetchingfriendsNextPage ? :
}
{possibleDelete ? ( @@ -134,25 +113,12 @@ const FriendListTemplate: React.FC<{ possibleDelete: boolean }> = ({
) : null} - + - +

친구삭제

-

- 삭제하기 버튼을 누르면 친구 목록에서 삭제됩니다. -

+

삭제하기 버튼을 누르면 친구 목록에서 삭제됩니다.

- {curTab.value === 'list' ? ( - - ) : ( - - )} + {curTab.value === 'list' ? : }
); }; diff --git a/src/pages/share/[id].tsx b/src/pages/share/[id].tsx index f088f38..7648ac5 100644 --- a/src/pages/share/[id].tsx +++ b/src/pages/share/[id].tsx @@ -9,19 +9,6 @@ import Image from 'next/image'; import { useRouter } from 'next/router'; import React, { useEffect, useState } from 'react'; -// const MOCK_DATA = { -// shareerName: '김지수', -// image: '', -// title: '사과받아갈사람선착순12345명', -// ingredient: '사과', -// fixedNum: 15, -// useByDate: dayjs('2024-02-30'), -// meetingDate: dayjs('2024-02-20'), -// meetingTime: '14:00', -// meetingLocation: '디지털시티역 8번출구 뜌레주르앞', -// desc: '사과는역시청송사과맛있음은당연보장선착순1명사과는역시청송사과맛있음은당연보장선착순1명사과는역체시청송사과맛있음은당연보장선착순1명사과는역시청송사과맛있음은당연보장선착순1명은당연보장선착순1명사당연', -// }; - const MOCK_DATA_IS_AUTHOR: boolean = true; const MOCK_DATA_SHARE_STATUS = { label: '나눔 신청', value: 'enroll' }; diff --git a/src/stories/ToastMessage.stories.tsx b/src/stories/ToastMessage.stories.tsx index 9cef5b2..0bddbf5 100644 --- a/src/stories/ToastMessage.stories.tsx +++ b/src/stories/ToastMessage.stories.tsx @@ -1,8 +1,9 @@ +import { RecoilRoot, useRecoilState } from 'recoil'; + import React from 'react'; +import { ToastMessage } from '../components/atoms'; import type { ToastType } from '../stores/toastState'; import { toastState } from '../stores/toastState'; -import { ToastMessage } from '../components/atoms'; -import { RecoilRoot, useRecoilState } from 'recoil'; export default { title: 'ToastMessage', @@ -39,10 +40,7 @@ const Template: any = (args: ToastStoryArgs) => { return (
{toast.isOpen && } -
diff --git a/src/utils/buildQuery.ts b/src/utils/buildQuery.ts index f0971d4..6ccdaf6 100644 --- a/src/utils/buildQuery.ts +++ b/src/utils/buildQuery.ts @@ -1,8 +1,6 @@ export const buildQuery = (param: Record) => { const queryParam = Object.fromEntries( - Object.entries(param).filter( - ([, value]) => value !== '' && value !== null && value !== undefined, - ), + Object.entries(param).filter(([, value]) => value !== '' && value !== null && value !== undefined), ); return new URLSearchParams(queryParam).toString(); }; diff --git a/src/utils/debounceUtil.ts b/src/utils/debounceUtil.ts index 813d843..259f70e 100644 --- a/src/utils/debounceUtil.ts +++ b/src/utils/debounceUtil.ts @@ -1,9 +1,6 @@ -import debounce from 'lodash/debounce'; import type { DebouncedFunc } from 'lodash'; +import debounce from 'lodash/debounce'; -export const debounceFunction = void>( - func: T, - delay: number, -): DebouncedFunc => { +export const debounceFunction = void>(func: T, delay: number): DebouncedFunc => { return debounce(func, delay); }; From 82b77146cba9baf293c9f282a7b54bbc7faafb68 Mon Sep 17 00:00:00 2001 From: hyeseon han Date: Thu, 29 Feb 2024 01:45:21 +0900 Subject: [PATCH 13/13] =?UTF-8?q?fix:=20eslint=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .eslintrc.js | 1 + 1 file changed, 1 insertion(+) diff --git a/.eslintrc.js b/.eslintrc.js index 140164d..d66373e 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -10,6 +10,7 @@ module.exports = { 'standard-with-typescript', 'eslint:recommended', 'plugin:prettier/recommended', + 'next/core-web-vitals' ], parserOptions: { ecmaVersion: 'latest',