Merge pull request #95 from Qfeed-Dev/feature/#91

[Feat] 게시글 및 유저 차단

src/apis/account/index.ts

@@ -76,13 +76,20 @@ const accountAPI = {
         const response = await qFeedAxios.delete(`/account/${id}/unfollow`);
         return response.data;
     },
-
     async accountFetch() {
         const response = await qFeedAxios
             .get("/account/fetch")
             .then(({ data }) => data)
             .catch((err) => err.response);
         return response.data;
+    },
+    async blockFriend({ id }: { id: number }) {
+        const response = await qFeedAxios.post(`/account/${id}/Block`);
+        return response.data;
+    },
+    async unBlockFriend({ id }: { id: number }) {
+        const response = await qFeedAxios.delete(`/account/${id}/unblock`);
+        return response.data;
     }
 };
 

src/app/(padding)/friend/@modal/ban/page.tsx → src/app/(padding)/friend/[id]/@modal/block/page.tsx

@@ -2,17 +2,21 @@
 
 import Modal from "src/components/common/Modal";
 import { useRouter } from "next/navigation";
+import useBlockFriendMutation from "src/hooks/account/useBlockFriendMutation";
 
-export default function AccountCheckModal() {
+export default function BlockModal({ params }: { params: { id: number } }) {
     const router = useRouter();
+    const blockFriend = useBlockFriendMutation();
 
     return (
         <Modal
             handleClose={() => router.back()}
             title="차단하시겠어요?"
-            detail="쪽지 수신 및 발신이 모두 차단되며, 다시 해제하실 수 없습니다."
+            detail="쪽지 수신 및 발신이 모두 차단되며,\n다시 해제하실 수 있습니다."
             rightText="차단"
-            rightClick={() => {}}
+            rightClick={() => {
+                blockFriend.mutate(params.id);
+            }}
         />
     );
 }

src/app/(padding)/friend/[id]/@modal/unblock/page.tsx

@@ -0,0 +1,22 @@
+"use client";
+
+import Modal from "src/components/common/Modal";
+import { useRouter } from "next/navigation";
+import useUnBlockFriendMutation from "src/hooks/account/useUnBlockFriendMutation";
+
+export default function UnBlockModal({ params }: { params: { id: number } }) {
+    const router = useRouter();
+    const unblockFriend = useUnBlockFriendMutation();
+
+    return (
+        <Modal
+            handleClose={() => router.back()}
+            title="차단을 해제하시겠어요?"
+            detail="쪽지 수신 및 발신이 모두 가능해집니다."
+            rightText="차단 해제"
+            rightClick={() => {
+                unblockFriend.mutate(params.id);
+            }}
+        />
+    );
+}

src/app/question/[id]/page.tsx → src/app/(padding)/question/[id]/page.tsx

@@ -1,24 +1,33 @@
 "use client";
 import styled from "styled-components";
-import ProfileTitle from "src/pages-edit/question/ProfileTitle";
 import Question from "src/pages-edit/question/Question";
-import Spacing from "src/components/Spacing";
-import BackTitle from "src/components/Title/BackTitle";
+import Flex from "src/components/common/Flex";
+import Text from "src/components/common/Text";
+import NavigationTopBack from "src/components/navigations/NavigationTopBack";
+
 import { useEffect, useState } from "react";
+import { useAppDispatch, useAppSelector } from "src/hooks/useReduxHooks";
+import {
+    changeAction,
+    changeVisibleType
+} from "src/reducer/slices/bottomSheet/bottomSheetSlice";
 import Image from "src/components/Image";
 import { useGetQuestionsId } from "src/hooks/questions/useGetQuestionId";
 import VoteButton from "src/components/Button/VoteButton";
-import { postQuestionsIdChoices } from "src/apis/questions";
 import { useUserQuery } from "src/hooks/account/useUserQuery";
 import useQChoiceMutation from "src/hooks/questions/useQChoiceMutation";
 import Loading from "src/components/common/Loading";
+import Icon from "src/components/Icon";
 
 export default function Page({ params }: { params: { id: number } }) {
     const { data: questionData, isLoading } = useGetQuestionsId({
         questionId: params.id
     });
+    console.log(questionData);
+
     const { user } = useUserQuery();
     const { mutate } = useQChoiceMutation(params.id);
+    const dispatch = useAppDispatch();
 
     // choices에 본인이 있는지 확인
     const checkName = (el: any) => {
@@ -72,7 +81,48 @@ export default function Page({ params }: { params: { id: number } }) {
     return isLoading ? (
         <Loading />
     ) : (
-        <>
+        <Flex height="100%" direction="column">
+            <NavigationTopBack
+                leftIcon={
+                    <Flex gap={8}>
+                        <Image
+                            type="default"
+                            size={35}
+                            src={
+                                questionData?.owner?.profileImage
+                                    ? questionData?.owner?.profileImage
+                                    : ""
+                            }
+                        />
+                        <Text typo="Subtitle1b">
+                            {questionData?.owner?.nickname}
+                        </Text>
+                    </Flex>
+                }
+                rightIcon={
+                    <Flex width="auto" gap={16}>
+                        <Text typo="Subtitle1r">
+                            {questionData?.choices?.length}명 응답
+                        </Text>
+                        <Icon
+                            icon="DotsHoriz"
+                            onClick={() =>
+                                dispatch(
+                                    changeVisibleType({
+                                        type: "bottomSheet",
+                                        value: [
+                                            1,
+                                            "reportBlock",
+                                            questionData?.owner?.id
+                                        ]
+                                    })
+                                )
+                            }
+                        />
+                    </Flex>
+                }
+                transparent
+            />
             {questionData?.backgroundImage && (
                 <ImageWrapper>
                     <Image
@@ -81,17 +131,12 @@ export default function Page({ params }: { params: { id: number } }) {
                     />
                 </ImageWrapper>
             )}
+            <Flex height="100%" direction="column" justify="space-between">
+                <QuestionWrapper height="100%">
+                    <Question title={questionData?.title} />
+                </QuestionWrapper>
 
-            <QuestionWrapper>
-                <BackTitle type="profile" reportType="report">
-                    <ProfileTitle data={questionData} />
-                </BackTitle>
-                <Spacing size={54} />
-                <Question title={questionData?.title} />
-            </QuestionWrapper>
-
-            <BottomButton>
-                <BottomInner>
+                <BottomButton width="100%" direction="column" gap={12}>
                     {questionData.choiceList?.map(
                         (choice: string, idx: number) => {
                             return (
@@ -134,10 +179,9 @@ export default function Page({ params }: { params: { id: number } }) {
                             );
                         }
                     )}
-                </BottomInner>
-                <Spacing size={52} />
-            </BottomButton>
-        </>
+                </BottomButton>
+            </Flex>
+        </Flex>
     );
 }
 
@@ -147,32 +191,13 @@ const ImageWrapper = styled.div`
     height: 100%;
 
     opacity: 0.3;
-    position: absolute;
+    position: fixed;
     top: 0;
-`;
-
-const QuestionWrapper = styled.div`
-    height: 100%;
-    padding: 0 16px;
-`;
-
-const BottomButton = styled.div`
-    width: 100%;
-
-    position: absolute;
     left: 0;
-    bottom: 0;
-
-    background-color: transparent;
 `;
 
-const BottomInner = styled.div`
-    max-width: 600px;
-    margin-top: 20px;
-    padding: 0 16px;
-    margin: auto;
-
-    display: flex;
-    flex-direction: column;
-    gap: 14px;
+const QuestionWrapper = styled(Flex)`
+    padding: 0 1rem;
 `;
+
+const BottomButton = styled(Flex)``;

src/components/BottomNavigation/BottomNavigation.tsx

@@ -44,7 +44,7 @@ const BottomNavigation = ({}: Props) => {
                         selected={Boolean(pathname.match("/((friend).*)"))}
                     />
                 </NavIconWrapper>
-                <NavIconWrapper href={"mypage"}>
+                <NavIconWrapper href={"/mypage"}>
                     <Icon
                         icon="BMypage"
                         width={24}

src/components/BottomSheet/BottomSheet.tsx

@@ -19,6 +19,7 @@ interface Props {
 const COMPONENT_HEIGHT: any = {
     report: 540 + 30,
     reportFriend: 331,
+    reportBlock: 167,
     coin: 324 + 30,
     friend: 394,
     friendModal: 325 + 60,
@@ -164,7 +165,7 @@ const Background = styled.div<{
             : css`
                   opacity: ${visible};
               `}
-    background-color: ${colors.line_black_50};
+    background-color: ${colors.line_black_70};
     z-index: 998;
 `;
 
@@ -183,7 +184,9 @@ const Handle = styled.div<{ selectedIdx: number; backgroundColor: KeyOfColor }>`
     display: flex;
 
     background-color: ${({ selectedIdx, backgroundColor }) =>
-        selectedIdx !== -1 ? colors["light_qwhite"] : colors[backgroundColor]};
+        colors[backgroundColor]};
+
+    border-radius: 2px;
 `;
 
 const BottomSheetWrapper = styled.div<{
@@ -220,6 +223,7 @@ const BottomSheetWrapper = styled.div<{
 
 const ContentWrapper = styled.div`
     width: 100%;
+    height: 100%;
     padding: 0 16px;
     overflow: none;
 `;

src/components/BottomSheet/children/ReportBlock.tsx

@@ -0,0 +1,64 @@
+"use client";
+import Flex from "src/components/common/Flex";
+import Text from "src/components/common/Text";
+import styled from "styled-components";
+import { colors } from "styles/theme";
+
+import useBlockFriendMutation from "src/hooks/account/useBlockFriendMutation";
+import { useAppSelector, useAppDispatch } from "src/hooks/useReduxHooks";
+import { changeAction } from "src/reducer/slices/bottomSheet/bottomSheetSlice";
+import { useRouter } from "next/navigation";
+
+const ReportBlock = () => {
+    const blockFriend = useBlockFriendMutation();
+    const dispatch = useAppDispatch();
+    const router = useRouter();
+
+    const { selectedIdx } = useAppSelector((state) => state.bottomSheet);
+
+    return (
+        <Flex height="100%" direction="column">
+            <Menu
+                border
+                onClick={() => {
+                    blockFriend.mutate(selectedIdx);
+                    dispatch(
+                        changeAction({
+                            type: "bottomSheet",
+                            value: { on: false }
+                        })
+                    );
+                }}
+            >
+                <Text typo="Subtitle2r">차단하기</Text>
+            </Menu>
+            <Menu
+                onClick={() => {
+                    dispatch(
+                        changeAction({
+                            type: "bottomSheet",
+                            value: { on: false }
+                        })
+                    );
+                }}
+            >
+                <Text typo="Subtitle2r" color="primary_qred">
+                    신고하기
+                </Text>
+            </Menu>
+        </Flex>
+    );
+};
+
+const Menu = styled.div<{ border?: boolean }>`
+    width: 100%;
+    padding: 1rem 0;
+
+    display: flex;
+    justify-content: center;
+
+    border-bottom: ${({ border }) =>
+        border && `1px solid ${colors.line_black_5}`};
+`;
+
+export default ReportBlock;

src/components/Icon/icons/DotsHoriz.tsx

@@ -0,0 +1,28 @@
+import React from "react";
+
+const DotsHoriz = () => {
+    return (
+        <svg
+            width="24"
+            height="25"
+            viewBox="0 0 24 25"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+        >
+            <path
+                d="M6.5 12.5C6.5 11.3954 5.60457 10.5 4.5 10.5C3.39543 10.5 2.5 11.3954 2.5 12.5C2.5 13.6046 3.39543 14.5 4.5 14.5C5.60457 14.5 6.5 13.6046 6.5 12.5Z"
+                fill="white"
+            />
+            <path
+                d="M14 12.5C14 11.3954 13.1046 10.5 12 10.5C10.8954 10.5 10 11.3954 10 12.5C10 13.6046 10.8954 14.5 12 14.5C13.1046 14.5 14 13.6046 14 12.5Z"
+                fill="white"
+            />
+            <path
+                d="M21.5 12.5C21.5 11.3954 20.6046 10.5 19.5 10.5C18.3954 10.5 17.5 11.3954 17.5 12.5C17.5 13.6046 18.3954 14.5 19.5 14.5C20.6046 14.5 21.5 13.6046 21.5 12.5Z"
+                fill="white"
+            />
+        </svg>
+    );
+};
+
+export default DotsHoriz;

src/components/Icon/icons/index.ts

@@ -23,6 +23,7 @@ export { default as Person } from "./Person";
 export { default as Chat } from "./Chat";
 export { default as RightBracket } from "./RightBracket";
 export { default as Down } from "./Down";
+export { default as DotsHoriz } from "./DotsHoriz";
 
 // images
 export { default as AngelImage } from "./images/AngelImage";

src/components/common/Line.tsx

@@ -0,0 +1,15 @@
+import styled from "styled-components";
+import { KeyOfColor } from "styles/theme";
+import { colors } from "styles/theme";
+
+const Line = styled.div<{
+    border?: number;
+    color?: KeyOfColor;
+}>`
+    width: 100%;
+    height: ${({ border }) => (border ? border : 1)}px;
+    color: ${({ color }) => (color ? colors[color] : colors.light_qblack)};
+    border: none;
+`;
+
+export default Line;