feat: 로그아웃 훅, 친구 근황 수정

DDD-Community · Feb 25, 2024 · df95bf3 · df95bf3
1 parent 2c22e49
commit df95bf3
Show file tree

Hide file tree

Showing 9 changed files with 59 additions and 15 deletions.
diff --git a/src/components/organisms/FriendsFridgeList.tsx b/src/components/organisms/FriendsFridgeList.tsx
@@ -1,17 +1,19 @@
-import { SearchInput, Container } from '../atoms';
+import { Container } from '../atoms';
 
 import { AngleIcon } from '@/assets/icons';
 import { FriendsFridgeItem } from '../molecules';
 import React from 'react';
+import { useGetMyFriendsCount } from '@/hooks/queries/mypage';
 
 const FriendsFridgeList: React.FC<{
   toggleIsOpenOrderListModal: () => void;
 }> = ({ toggleIsOpenOrderListModal }) => {
+  const count = useGetMyFriendsCount();
   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">13</span>
+          친구 목록 <span className="heading2-bold text-primary3">{count}</span>
         </div>
         <div
           className="flex items-center gap-[6px]"
@@ -27,7 +29,6 @@ const FriendsFridgeList: React.FC<{
         </div>
       </div>
       <Container className="bg-white">
-        <SearchInput placeholder="친구의 이름을 입력하세요" />
         <div className="w-full flex flex-col gap-[24px]">
           <FriendsFridgeItem name="김지수" ingredientCount={13} linkTo="#" />
           <FriendsFridgeItem name="김지수" ingredientCount={13} linkTo="#" />

diff --git a/src/components/organisms/FriendsRecentBoard.tsx b/src/components/organisms/FriendsRecentBoard.tsx
@@ -8,12 +8,12 @@ const FriendsRecentBoard: React.FC<{ friendNews: FriendObjectType }> = ({
   friendNews,
 }) => {
   return (
-    <Container className="flex bg-white">
+    <Container className="flex bg-white gap-[12px]">
       <div className="text-primary2 body2-semibold">최신근황</div>
-      <div className="text-center text-gray8">
+      <div className="text-center text-gray8 heading3-semibold">
         {friendNews.nickname} 님이
         <br />
-        토마토를 추가했어요!
+        {friendNews.friendRefrigeratorIngredientGroupList[0].name}를 추가했어요!
       </div>
       <div className="text-gray6 body2-medium">
         그밖에 신선한 재료를 구경할 수 있어요.

diff --git a/src/hooks/useLogout.ts b/src/hooks/useLogout.ts
@@ -0,0 +1,12 @@
+import { useRouter } from 'next/router';
+
+const useLogout = () => {
+  const router = useRouter();
+  return () => {
+    localStorage.removeItem('accessToken');
+    localStorage.removeItem('refreshToken');
+    router.push('/login');
+  };
+};
+
+export default useLogout;
diff --git a/src/pages/fridge/add/index.tsx b/src/pages/fridge/add/index.tsx
@@ -53,7 +53,9 @@ const FridgePage: NextPage = () => {
       )}
       <div className={'pt-[52px] min-h-screen'}>
         <Header headerTitle={'식자재 추가'} />
-        <main className={`flex flex-col min-h-screen p-20 bg-gray1 gap-[18px]`}>
+        <main
+          className={`flex flex-col min-h-screen p-0 pl-20 pr-20 pb-20 bg-gray1 gap-[18px]`}
+        >
           <section className="flex gap-[10px] flex-wrap">
             {['전체', ...(data?.map((item) => item.category) as string[])].map(
               (category) => (

diff --git a/src/pages/fridge/index.tsx b/src/pages/fridge/index.tsx
@@ -58,7 +58,9 @@ const FridgePage: NextPage = () => {
       </Modal>
       <div className={'pt-[52px] min-h-screen'}>
         <Header headerTitle={'내 냉장고'} />
-        <section className={`flex flex-col min-h-screen p-20 bg-gray1`}>
+        <section
+          className={`flex flex-col min-h-screen p-0 pl-20 pr-20 pb-20 bg-gray1`}
+        >
           <FridgeInfoBox
             userName={nickName}
             toggleIsOpenFridgeListModal={onOpenFridgeListModal}

diff --git a/src/pages/friend/[id]/index.tsx b/src/pages/friend/[id]/index.tsx
@@ -59,7 +59,9 @@ const FriendIdPage: NextPage = () => {
       </Modal>
       <div className={'pt-[52px] min-h-screen'}>
         <Header headerTitle={'친구 냉장고'} />
-        <section className={`flex flex-col min-h-screen p-20 bg-gray1`}>
+        <section
+          className={`flex flex-col min-h-screen p-0 pl-20 pr-20 pb-20 bg-gray1`}
+        >
           <FridgeInfoBox
             userName={nickname}
             toggleIsOpenFridgeListModal={onOpenFridgeListModal}

diff --git a/src/pages/friends/index.tsx b/src/pages/friends/index.tsx
@@ -20,8 +20,12 @@ import 'swiper/css/pagination';
 import 'swiper/css/scrollbar';
 import { Container } from '@/components/atoms';
 import { EmptyBox } from '@/components/molecules';
+import { PlusIcon } from '@/assets/icons';
+import { useRouter } from 'next/router';
 
 const FriendsPage: NextPage = () => {
+  const router = useRouter();
+
   const {
     isOpen: isOpenOrderListModal,
     onOpen: onOpenOrderListModal,
@@ -52,8 +56,22 @@ const FriendsPage: NextPage = () => {
         </ModalContent>
       </Modal>
       <div className={'pt-[52px] min-h-screen'}>
-        <Header headerTitle={'친구 냉장고'} />
-        <section className={`flex flex-col min-h-screen p-20 bg-gray1`}>
+        <Header
+          headerTitle={'친구 냉장고'}
+          headerRight={
+            <PlusIcon
+              fill="gray7"
+              width={24}
+              height={24}
+              onClick={() => {
+                router.push('/mypage/friendship');
+              }}
+            />
+          }
+        />
+        <section
+          className={`flex flex-col min-h-screen pt-[10px] pl-20 pr-20 pb-20 bg-gray1`}
+        >
           {friendsNewsList && friendsNewsList.length !== 0 ? (
             <Swiper className="w-[100%]" spaceBetween={20}>
               {friendsNewsList.map((friendNews) => (

diff --git a/src/pages/home/index.tsx b/src/pages/home/index.tsx
@@ -25,11 +25,13 @@ const Home: NextPage = () => {
           </div>
         }
       />
-      <section className={`flex flex-col min-h-screen p-20 bg-gray1`}>
+      <section
+        className={`flex flex-col min-h-screen p-0 pl-20 pr-20 pb-20 bg-gray1`}
+      >
         {!!ingredientCount && (
-          <NearExpirationWarnBox className="mt-12" count={ingredientCount} />
+          <NearExpirationWarnBox className="mb-12" count={ingredientCount} />
         )}
-        <div className="flex gap-8.5 mt-12">
+        <div className="flex gap-8.5">
           <SvgAndTextBox
             svgComponent={<MyFridgeImg />}
             text="내 냉장고"

diff --git a/src/pages/mypage/account/index.tsx b/src/pages/mypage/account/index.tsx
@@ -1,14 +1,19 @@
 import Header from '@/components/organisms/Header';
+import useLogout from '@/hooks/useLogout';
 import { type NextPage } from 'next';
 
 const FriendsListPage: NextPage = () => {
+  const logout = useLogout();
+
   return (
     <div className={'bg-white pt-[52px] min-h-screen'}>
       <Header headerTitle={'계정'} />
       <section
         className={`flex flex-col items-center gap-[40px] min-h-screen p-20 bg-gray1 pt-[40px]`}
       >
-        <div className="w-full">로그아웃</div>
+        <button className="w-full text-left" onClick={logout}>
+          로그아웃
+        </button>
         <div className="w-full">탈퇴하기</div>
       </section>
     </div>