feat: 나눔 내역 API 연동

.eslintrc.js

@@ -10,6 +10,7 @@ module.exports = {
     'standard-with-typescript',
     'eslint:recommended',
     'plugin:prettier/recommended',
+    'next/core-web-vitals'
   ],
   parserOptions: {
     ecmaVersion: 'latest',

.prettierrc

@@ -4,7 +4,7 @@
   "useTabs": false,
   "tabWidth": 2,
   "trailingComma": "all",
-  "printWidth": 80,
+  "printWidth": 120,
   "bracketSpacing": true,
   "arrowParens": "always",
   "endOfLine": "auto"

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"
   },

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;

src/assets/icons/SearchIcon.tsx

@@ -11,14 +11,14 @@ const SearchIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
     >
         <path
             d="M9.16667 15.8333C12.8486 15.8333 15.8333 12.8486 15.8333 9.16667C15.8333 5.48477 12.8486 2.5 9.16667 2.5C5.48477 2.5 2.5 5.48477 2.5 9.16667C2.5 12.8486 5.48477 15.8333 9.16667 15.8333Z"
-            stroke={props.fill ? "current" : '#9299AA'}
+            stroke={props.stroke ? "current" : '#9299AA'}
             strokeWidth="1.66667"
             strokeLinecap="round"
             strokeLinejoin="round"
         />
         <path
             d="M17.5002 17.4998L13.9169 13.9165"
-            stroke={props.fill ? "current" : '#9299AA'}
+            stroke={props.stroke ? "current" : '#9299AA'}
             strokeWidth="1.66667"
             strokeLinecap="round"
             strokeLinejoin="round"

src/components/atoms/Container.tsx

@@ -8,10 +8,7 @@ interface ContainerProps {
 
 const Container: React.FC<ContainerProps> = ({ children, className, id }) => {
   return (
-    <div
-      id={id}
-      className={`flex flex-col justify-center items-center gap-22 p-32 w-full rounded-12 ${className}`}
-    >
+    <div id={id} className={`flex flex-col justify-center items-center gap-22 p-32 w-full rounded-12 ${className}`}>
       {children}
     </div>
   );

src/components/atoms/GreenArrowButton.tsx

@@ -7,23 +7,14 @@ interface GreenArrowButtonProps {
   className: string;
 }
 
-const GreenArrowButton: React.FC<GreenArrowButtonProps> = ({
-  text,
-  className,
-  onClick,
-}) => {
+const GreenArrowButton: React.FC<GreenArrowButtonProps> = ({ text, className, onClick }) => {
   return (
     <button
       onClick={onClick}
       className={`flex items-center justify-center w-full bg-primary2 text-white p-18 gap-12 rounded-12 heading4-semibold ${className}`}
     >
       {text}
-      <AngleIcon
-        fill="#ffffff"
-        width={16}
-        height={16}
-        transform="rotate(180)"
-      />
+      <AngleIcon fill="#ffffff" width={16} height={16} transform="rotate(180)" />
     </button>
   );
 };

src/components/atoms/IngredientDateTag.tsx

@@ -30,10 +30,7 @@ const IngredientDateTag: React.FC<IngredientDateTagProps> = ({ dDay }) => {
   }
 
   return (
-    <div
-      className={`min-w-[64px] p-9 rounded-6 text-center body1-semibold ${className}`}
-      style={{ backgroundColor }}
-    >
+    <div className={`min-w-[64px] p-9 rounded-6 text-center body1-semibold ${className}`} style={{ backgroundColor }}>
       {textDay}
     </div>
   );

src/components/atoms/IngredientIcons.tsx

@@ -11,17 +11,9 @@ export const AppleIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
     xmlnsXlink="http://www.w3.org/1999/xlink"
   >
     <rect width="38" height="38" rx="19" fill="#DAF7A3" />
-    <path
-      d="M8.44424 28.5893H29.5554V7.47819H8.44424V28.5893Z"
-      fill="url(#pattern0)"
-    />
+    <path d="M8.44424 28.5893H29.5554V7.47819H8.44424V28.5893Z" fill="url(#pattern0)" />
     <defs>
-      <pattern
-        id="pattern0"
-        patternContentUnits="objectBoundingBox"
-        width="1"
-        height="1"
-      >
+      <pattern id="pattern0" patternContentUnits="objectBoundingBox" width="1" height="1">
         <use xlinkHref="#image0_204_3739" transform="scale(0.00625)" />
       </pattern>
       <image

src/components/atoms/Input.tsx

@@ -1,11 +1,8 @@
 import React from 'react';
 
-const Input: React.FC<
-  React.DetailedHTMLProps<
-    React.InputHTMLAttributes<HTMLInputElement>,
-    HTMLInputElement
-  >
-> = ({ ...props }) => {
+const Input: React.FC<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>> = ({
+  ...props
+}) => {
   return (
     <input
       {...props}

src/components/atoms/Lottie.tsx

@@ -3,15 +3,7 @@ import animationData from './../../assets/lottie.webp';
 import Image from 'next/image';
 
 const LottieComponent = () => {
-  return (
-    <Image
-      className="m-auto"
-      src={animationData}
-      alt="로딩중"
-      width={167}
-      height={156}
-    />
-  );
+  return <Image className="m-auto" src={animationData} alt="로딩중" width={167} height={156} />;
 };
 
 export default LottieComponent;

src/components/atoms/MiniButton.tsx

@@ -17,11 +17,7 @@ const MiniButton: React.FC<{
   }, []);
 
   return (
-    <button
-      disabled={variant === 'disable'}
-      onClick={onClick}
-      className={`px-[16px] py-[10px] rounded-[6px] ${style}`}
-    >
+    <button disabled={variant === 'disable'} onClick={onClick} className={`px-[16px] py-[10px] rounded-[6px] ${style}`}>
       {label}
     </button>
   );

src/components/atoms/RadioButtonField.tsx

@@ -7,10 +7,7 @@ const RadioButtonField: React.FC<{
   checked: boolean;
 }> = ({ label, onClick, checked }) => {
   return (
-    <button
-      onClick={onClick}
-      className="flex flex-1 w-screen px-[20px] py-[24px] justify-between"
-    >
+    <button onClick={onClick} className="flex flex-1 w-screen px-[20px] py-[24px] justify-between">
       <p className="heading3-semibold">{label}</p>
       <Radio checked={checked} />
     </button>

src/components/atoms/SearchInput.tsx

@@ -9,23 +9,12 @@ interface SearchInputProps {
   placeholder?: string;
 }
 
-const SearchInput: React.FC<SearchInputProps> = ({
-  searchKeyword,
-  onClick,
-  placeholder,
-  onChange,
-  className,
-}) => {
+const SearchInput: React.FC<SearchInputProps> = ({ searchKeyword, onClick, placeholder, onChange, className }) => {
   return (
     <div
       className={`flex items-center justify-center w-full bg-gray1 text-white p-18 gap-12 rounded-12 heading4-semibold ${className}`}
     >
-      <input
-        className="w-full bg-gray1 text"
-        placeholder={placeholder}
-        onChange={onChange}
-        value={searchKeyword}
-      />
+      <input className="w-full bg-gray1 text" placeholder={placeholder} onChange={onChange} value={searchKeyword} />
       <SearchIcon />
     </div>
   );

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 (
     <button onClick={onClick} className="flex justify-center items-center">
       <span className="mr-[4px] text-gray5">{label}</span>
-      <AngleIcon
-        width={14}
-        height={14}
-        fill="#9299AA"
-        transform="rotate(270)"
-      />
+      <AngleIcon width={14} height={14} fill="#9299AA" transform="rotate(270)" />
     </button>
   );
 };

src/components/atoms/Toggle.tsx

@@ -5,9 +5,7 @@ const Toggle: React.FC<{
   isToggleOn?: boolean;
   onClick?: () => void;
 }> = ({ isToggleOn, onClick }) => {
-  return (
-    <Switch colorScheme="primary2" isChecked={isToggleOn} onChange={onClick} />
-  );
+  return <Switch colorScheme="primary2" isChecked={isToggleOn} onChange={onClick} />;
 };
 
 export default Toggle;

src/components/molecules/Counter.tsx

@@ -1,11 +1,8 @@
 import React, { useEffect } from 'react';
+
 import type { CountState } from '@/hooks/useCount';
 
-const Counter: React.FC<CountState> = ({
-  currentCount,
-  handleDecreaseCount,
-  handleIncreaseCount,
-}) => {
+const Counter: React.FC<CountState> = ({ currentCount, handleDecreaseCount, handleIncreaseCount }) => {
   useEffect(() => {}, [currentCount]);
   return (
     <div className="flex items-center h-[32px] bg-white rounded-[6px]">

src/components/molecules/FridgeEnterButton.tsx

@@ -1,17 +1,13 @@
-import React from 'react';
 import Link from 'next/link';
+import React from 'react';
 
 interface FridgeEnterButtonProps {
   svgComponent: React.ReactNode;
   text: string;
   linkTo: string;
 }
 
-const FridgeEnterButton: React.FC<FridgeEnterButtonProps> = ({
-  svgComponent,
-  text,
-  linkTo,
-}) => {
+const FridgeEnterButton: React.FC<FridgeEnterButtonProps> = ({ svgComponent, text, linkTo }) => {
   return (
     <Link href={linkTo}>
       {svgComponent}

src/components/molecules/FridgeListItem.tsx

@@ -34,10 +34,7 @@ const FridgeListItem: React.FC<FridgeListItemProps> = ({
   };
 
   return (
-    <GrayBox
-      className="flex-row items-center justify-between h-[70px]"
-      onClick={onClick}
-    >
+    <GrayBox className="flex-row items-center justify-between h-[70px]" onClick={onClick}>
       <div className="flex gap-[9px] items-center">
         {isEditingFridgeName && id === newFridgeName.id ? (
           <input

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<FridgeTabProps> = ({
-  currentTabName,
-  handleTabNameChange,
-}) => {
+const FridgeTab: React.FC<FridgeTabProps> = ({ currentTabName, handleTabNameChange }) => {
   return (
     <div className="flex w-full justify-evenly">
-      <BorderTab
-        tabName="냉장"
-        currentTabName={currentTabName}
-        handleTabNameChange={handleTabNameChange}
-      />
+      <BorderTab tabName="냉장" currentTabName={currentTabName} handleTabNameChange={handleTabNameChange} />
       <BorderTab
         tabName="냉동"
         currentTabName={currentTabName}

src/components/molecules/FriendsFridgeItem.tsx

@@ -10,30 +10,16 @@ interface FriendsFridgeItemProps {
   linkTo: string;
 }
 
-const FriendsFridgeItem: React.FC<FriendsFridgeItemProps> = ({
-  name,
-  ingredientCount,
-  linkTo,
-}) => {
+const FriendsFridgeItem: React.FC<FriendsFridgeItemProps> = ({ name, ingredientCount, linkTo }) => {
   return (
-    <Link
-      href={`friend/1`}
-      className="w-full flex items-center justify-between"
-    >
+    <Link href={`friend/1`} className="w-full flex items-center justify-between">
       <div className="flex gap-[12px]">
         <div>
-          <Image
-            src={profileImg}
-            width={50}
-            height={50}
-            alt={`누군가의 프로필`}
-          />
+          <Image src={profileImg} width={50} height={50} alt={`누군가의 프로필`} />
         </div>
         <div className="flex flex-col justify-center">
           <div className="heading4-semibold text-gray7">{name}</div>
-          <div className="body2-medium text-gray5">
-            냉장고 저장 목록 {ingredientCount}개
-          </div>
+          <div className="body2-medium text-gray5">냉장고 저장 목록 {ingredientCount}개</div>
         </div>
       </div>
       <Link href={`${linkTo}`}>

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 (
     <button onClick={onClick}>
       <SettingIcon />

src/components/molecules/IngredientAddItemContainer.tsx

@@ -1,5 +1,5 @@
-import React from 'react';
 import { GrayBox } from '../atoms';
+import React from 'react';
 
 interface IngredientAddItemContainerProps {
   isRow: boolean;
@@ -14,11 +14,7 @@ const IngredientAddItemContainer: React.FC<IngredientAddItemContainerProps> = ({
   children,
 }) => {
   return (
-    <GrayBox
-      className={
-        isRow ? 'h-[60px] flex-row justify-between items-center' : undefined
-      }
-    >
+    <GrayBox className={isRow ? 'h-[60px] flex-row justify-between items-center' : undefined}>
       <div className="flex gap-[4px]">
         {svgComponent}
         <div className="heading4-semibold">{title}</div>