wip

AboutClan · Nov 6, 2024 · d6b9fe4 · d6b9fe4
1 parent 332deac
commit d6b9fe4
Show file tree

Hide file tree

Showing 5 changed files with 117 additions and 65 deletions.
diff --git a/components/Icons/KakaoShareBtn.tsx b/components/Icons/KakaoShareBtn.tsx
@@ -1,4 +1,4 @@
-import { Button } from "@chakra-ui/react";
+import { Box, Button } from "@chakra-ui/react";
 import { useCallback, useEffect } from "react";
 import styled from "styled-components";
 
@@ -20,6 +20,7 @@ interface IKakaoShareBtn {
   isFull?: boolean;
   temp?: boolean;
   isTemp?: boolean;
+  variant?: "unstyled";
 }
 
 function KakaoShareBtn({
@@ -33,6 +34,7 @@ function KakaoShareBtn({
   isFull,
   temp,
   isTemp,
+  variant,
 }: IKakaoShareBtn) {
   const handleShareOnApp = useCallback(() => {
     if (isWebView()) {
@@ -73,67 +75,69 @@ function KakaoShareBtn({
               },
             }
           : type === "study2"
-            ? {
-                container: "#kakao-share-button",
-                objectType: "location",
-                content: {
-                  title,
-                  description: subtitle,
-                  imageUrl: img,
+          ? {
+              container: "#kakao-share-button",
+              objectType: "location",
+              content: {
+                title,
+                description: subtitle,
+                imageUrl: img,
+                link: {
+                  mobileWebUrl: url,
+                  webUrl: url,
+                },
+              },
+              address: location,
+              // addressTitle: "카카오 본사",
+              buttons: [
+                {
+                  title: "웹으로 이동",
                   link: {
                     mobileWebUrl: url,
                     webUrl: url,
                   },
                 },
-                address: location,
-                // addressTitle: "카카오 본사",
-                buttons: [
-                  {
-                    title: "웹으로 이동",
-                    link: {
-                      mobileWebUrl: url,
-                      webUrl: url,
-                    },
-                  },
-                ],
-              }
-            : type === "secretSquare"
-              ? {
-                  container: "#kakao-share-button",
-                  objectType: "feed",
-                  content: {
-                    title,
-                    description: subtitle,
-                    imageWidth: 800,
-                    imageHeight: 400,
-                    imageUrl: img,
-                    link: {
-                      mobileWebUrl: url,
-                      webUrl: url,
-                    },
-                  },
-                }
-              : {
-                  container: "#kakao-share-button",
-                  objectType: "feed",
-                  content: {
-                    title,
-                    description: subtitle,
-                    imageUrl: REVIEW_DATA[0]?.images[0],
-                    link: {
-                      mobileWebUrl: url,
-                      webUrl: url,
-                    },
-                  },
-                };
+              ],
+            }
+          : type === "secretSquare"
+          ? {
+              container: "#kakao-share-button",
+              objectType: "feed",
+              content: {
+                title,
+                description: subtitle,
+                imageWidth: 800,
+                imageHeight: 400,
+                imageUrl: img,
+                link: {
+                  mobileWebUrl: url,
+                  webUrl: url,
+                },
+              },
+            }
+          : {
+              container: "#kakao-share-button",
+              objectType: "feed",
+              content: {
+                title,
+                description: subtitle,
+                imageUrl: REVIEW_DATA[0]?.images[0],
+                link: {
+                  mobileWebUrl: url,
+                  webUrl: url,
+                },
+              },
+            };
 
       window.Kakao.Link.createDefaultButton(options);
     }
   }, [img, type, url, subtitle]);
 
   return (
     <Layout id="kakao-share-button" isFull={isFull} temp={temp} onClick={handleShareOnApp}>
-      {isTemp ? (
+      {variant === "unstyled" ? (
+        <Box>카카오톡으로 공유하기</Box>
+      ) : isTemp ? (
         <Button
           color="mint"
           bg="white"

diff --git a/components/atoms/buttons/MenuButton.tsx b/components/atoms/buttons/MenuButton.tsx
@@ -0,0 +1,40 @@
+import { Button, Menu, MenuButton as ChakraMenuButton, MenuItem, MenuList } from "@chakra-ui/react";
+import { EllipsisIcon } from "../../Icons/DotIcons";
+import KakaoShareBtn from "../../Icons/KakaoShareBtn";
+import ButtonWrapper from "../ButtonWrapper";
+
+export interface MenuProps {
+  text?: string;
+  func?: () => void;
+  kakaoOptions?: any;
+}
+
+interface MenuButtonProps {
+  menuArr: MenuProps[];
+}
+
+function MenuButton({ menuArr }: MenuButtonProps) {
+  return (
+    <Menu>
+      {({ isOpen }) => (
+        <>
+          <ChakraMenuButton isActive={isOpen} as={Button} variant="unstyled">
+            <ButtonWrapper>
+              <EllipsisIcon />
+            </ButtonWrapper>
+          </ChakraMenuButton>
+          <MenuList fontSize="14px">
+            {menuArr.map((menu) => (
+              <MenuItem key={menu?.text || "kakao"} onClick={menu?.func}>
+                {menu?.text}
+                {menu?.kakaoOptions && <KakaoShareBtn variant="unstyled" {...menu.kakaoOptions} />}
+              </MenuItem>
+            ))}
+          </MenuList>
+        </>
+      )}
+    </Menu>
+  );
+}
+
+export default MenuButton;
diff --git a/pageTemplates/group/detail/GroupHeader.tsx b/pageTemplates/group/detail/GroupHeader.tsx
@@ -1,8 +1,7 @@
-import { Button } from "@chakra-ui/react";
 import { useRouter } from "next/router";
 import { useState } from "react";
+import MenuButton, { MenuProps } from "../../../components/atoms/buttons/MenuButton";
 
-import { EllipsisIcon } from "../../../components/Icons/DotIcons";
 import Header from "../../../components/layouts/Header";
 import { GROUP_STUDY_ALL } from "../../../constants/keys/queryKeys";
 import { useResetQueryData } from "../../../hooks/custom/CustomHooks";
@@ -46,17 +45,26 @@ function GroupHeader({ group }: IGroupHeader) {
     mutate();
   };
 
+  const menuArr: MenuProps[] = [
+    {
+      text: "내용 수정하기",
+      func: () => {},
+    },
+    {
+      kakaoOptions: {
+        type: "study",
+        title: group.title,
+        subtitle: group.category.main,
+        img: group.image,
+        url: `/group/${group.id}`,
+      },
+    },
+  ];
+
   return (
     <>
-      <Header title={group?.title}>
-        <Button
-          variant="unstyled"
-          onClick={() => {
-            typeToast("not-yet");
-          }}
-        >
-          <EllipsisIcon />
-        </Button>
+      <Header title={group?.title} rightPadding={6}>
+        <MenuButton menuArr={menuArr} />
       </Header>
       {isSettigModal && (
         <BottomDrawer type="group" onClose={() => setIsSettingModal(false)} onSubmit={handleQuit} />

diff --git a/pageTemplates/study/StudyHeader.tsx b/pageTemplates/study/StudyHeader.tsx
@@ -53,7 +53,7 @@ function StudyHeader({ brand, name, address, coverImage }: IStudyHeader) {
             subTitle: "장소 추가, 카카오톡 공유, 정보 수정 등의 기능을 점검중에 있습니다.",
             kakaoOption: {
               type: "study",
-              title: `${dayjsToFormat(dayjs(date), "(M/D)")} 같이 스터디 해요~!}`,
+              title: `${dayjsToFormat(dayjs(date), "(M/D)")} 같이 스터디 해요~!`,
               subtitle: name,
               location: address,
               img: coverImage,

diff --git a/pages/group/[id]/index.tsx b/pages/group/[id]/index.tsx
@@ -1,8 +1,8 @@
 import "dayjs/locale/ko"; // 로케일 플러그인 로드
 
 import dayjs from "dayjs";
-import { useParams } from "next/navigation";
 import { useSession } from "next-auth/react";
+import { useParams } from "next/navigation";
 import { useEffect, useState } from "react";
 import { useRecoilState } from "recoil";
 import styled from "styled-components";
@@ -35,7 +35,7 @@ function GroupDetail() {
   const [transferGroup, setTransferGroup] = useRecoilState(transferGroupDataState);
 
   const { data: groupData, refetch } = useGroupIdQuery(id, { enabled: !!id && !transferGroup });
-
+  console.log(groupData);
   useEffect(() => {
     if (groupData) {
       setGroup(groupData);
@@ -75,7 +75,7 @@ function GroupDetail() {
 
   return (
     <>
-      <GroupHeader group={group} />
+      {group && <GroupHeader group={group} />}
       <Slide isNoPadding>
         {group && (
           <Layout>