Merge pull request #104 from Qfeed-Dev/develop

1.0.0 (14)
Qfeed-Dev · Oct 17, 2023 · 6932e55 · 6932e55
2 parents e670f7d + e9b4167
commit 6932e55
Show file tree

Hide file tree

Showing 7 changed files with 70 additions and 12 deletions.
diff --git a/src/components/buttons/button-fill-xsmall.tsx b/src/components/buttons/button-fill-xsmall.tsx
@@ -7,7 +7,7 @@ import { motion } from "framer-motion";
 import { KeyOfColor, colors } from "styles/theme";
 import { changeXSBtnColor } from "src/constants/animation";
 
-type ButtonState = "active" | "disabled" | "default";
+type ButtonState = "active" | "disabled" | "default" | "warning";
 
 interface ButtonProps {
     text: string | React.ReactNode;

diff --git a/src/constants/animation.ts b/src/constants/animation.ts
@@ -59,6 +59,13 @@ export const changeXSBtnColor = {
         },
         color: theme.colors.light_qblack,
         background: theme.colors.light_qwhite
+    },
+    warning: {
+        transition: {
+            duration: 0.2
+        },
+        color: theme.colors.light_qblack,
+        background: theme.colors.primary_qorange
     }
 };
 

diff --git a/src/hooks/account/useUnBlockFriendMutation.ts b/src/hooks/account/useUnBlockFriendMutation.ts
@@ -2,7 +2,7 @@ import { useMutation, useQueryClient } from "@tanstack/react-query";
 import { useRouter } from "next/navigation";
 
 import accountAPI from "src/apis/account";
-import { friendKeys } from "src/constants/queryKeys/accountKeys";
+import { friendKeys, usersKeys } from "src/constants/queryKeys/accountKeys";
 
 const useUnBlockFriendMutation = () => {
     const queryClient = useQueryClient();
@@ -11,6 +11,7 @@ const useUnBlockFriendMutation = () => {
     return useMutation((id: number) => accountAPI.unBlockFriend({ id }), {
         onSuccess: (data: any, id: number) => {
             queryClient.invalidateQueries(friendKeys.all);
+            queryClient.invalidateQueries(usersKeys.all);
         },
         onError: (error: any) => {}
     });

diff --git a/src/pages-edit/friend/FriendDetail.tsx b/src/pages-edit/friend/FriendDetail.tsx
@@ -50,7 +50,12 @@ export default function FriendDetailPage({
                     />
                     <Flex direction="column" gap={32}>
                         {friend && <InfoList user={friend} isMe={false} />}
-                        {friend?.id && <QfeedList id={friend.id} />}
+                        {friend && (
+                            <QfeedList
+                                id={friend.id}
+                                isBlocking={friend.isBlocking}
+                            />
+                        )}
                     </Flex>
                 </Flex>
             )}

diff --git a/src/pages-edit/friend/components/FriendItem.tsx b/src/pages-edit/friend/components/FriendItem.tsx
@@ -12,6 +12,7 @@ import FriendProfile from "src/components/Profile/FriendProfile";
 import useFriendMutation from "src/hooks/account/useFriendMutation";
 import useDeleteFriendMutation from "src/hooks/account/useDeleteFriendMutation";
 import { Friend } from "src/models/account";
+import useUnBlockFriendMutation from "src/hooks/account/useUnBlockFriendMutation";
 
 export default function FriendItem({
     isFollowing,
@@ -24,6 +25,7 @@ export default function FriendItem({
     const [follow, setFollow] = useState(isFollowing);
     const { friendMutation } = useFriendMutation(friend.id);
     const { delFriendMutation } = useDeleteFriendMutation(friend.id);
+    const unblock = useUnBlockFriendMutation();
 
     return (
         <FriendWrapper>
@@ -40,14 +42,32 @@ export default function FriendItem({
             </Flex>
             <Flex width="auto" gap={16}>
                 <ButtonFillXSmall
-                    text={follow ? "팔로잉" : "팔로우"}
+                    text={
+                        friend.isBlocking
+                            ? "차단 해제"
+                            : follow
+                            ? "팔로잉"
+                            : "팔로우"
+                    }
                     onClick={() => {
-                        follow
-                            ? delFriendMutation.mutate()
-                            : friendMutation.mutate();
-                        setFollow((follow) => !follow);
+                        if (friend.isBlocking) {
+                            unblock.mutate(friend.id);
+                        } else {
+                            if (follow) {
+                                delFriendMutation.mutate();
+                            } else {
+                                friendMutation.mutate();
+                            }
+                            setFollow((follow) => !follow);
+                        }
                     }}
-                    state={follow ? "disabled" : "active"}
+                    state={
+                        friend.isBlocking
+                            ? "warning"
+                            : follow
+                            ? "disabled"
+                            : "active"
+                    }
                 />
             </Flex>
         </FriendWrapper>

diff --git a/src/pages-edit/mypage/components/InfoList.tsx b/src/pages-edit/mypage/components/InfoList.tsx
@@ -67,7 +67,13 @@ export default function InfoList({
                             setFollow((follow) => !follow);
                         }
                     }}
-                    state={follow && !user.isBlocking ? "disabled" : "active"}
+                    state={
+                        user.isBlocking
+                            ? "warning"
+                            : follow
+                            ? "disabled"
+                            : "active"
+                    }
                 />
             )}
             <Flex justify="space-between">

diff --git a/src/pages-edit/mypage/components/QfeedList.tsx b/src/pages-edit/mypage/components/QfeedList.tsx
@@ -1,20 +1,39 @@
 "use client";
 
 import Flex from "src/components/common/Flex";
+import Text from "src/components/common/Text";
 import ButtonQfeedSelect from "./ButtonQfeedSelect";
 import MakeList from "./MakeList";
 import SelectList from "./SelectList";
 
 import { useAppSelector } from "src/hooks/useReduxHooks";
 import { Qtype } from "src/models/questions";
 
-export default function QfeedList({ id }: { id: number }) {
+export default function QfeedList({
+    id,
+    isBlocking
+}: {
+    id: number;
+    isBlocking?: boolean;
+}) {
     const selected: Qtype = useAppSelector((state) => state.qtype.qtype);
 
     return (
         <Flex direction="column" gap={16}>
             <ButtonQfeedSelect value={selected} />
-            {selected === "personal" ? (
+            {isBlocking ? (
+                <Flex height="100%" direction="column">
+                    <Text typo="Subtitle1r" color="light_gray2">
+                        차단한 친구입니다.
+                    </Text>
+                    <Text typo="Subtitle1r" color="light_gray2">
+                        친구의 OfficialQ를 보기 위해
+                    </Text>
+                    <Text typo="Subtitle1r" color="light_gray2">
+                        차단을 해제해주세요!
+                    </Text>
+                </Flex>
+            ) : selected === "personal" ? (
                 <MakeList id={id} />
             ) : (
                 <SelectList id={id} />