gather-kakao-share

assets/images/imageUrl.ts

@@ -10,6 +10,8 @@ export const GATHER_SHARE_IMAGES = [
   "https://studyabout.s3.ap-northeast-2.amazonaws.com/%EB%AA%A8%EC%9E%84+%EA%B3%B5%EC%9C%A0+%EC%9D%B4%EB%AF%B8%EC%A7%80/%EA%B2%8C%EC%9E%84.jpg",
   "https://studyabout.s3.ap-northeast-2.amazonaws.com/%EB%AA%A8%EC%9E%84+%EA%B3%B5%EC%9C%A0+%EC%9D%B4%EB%AF%B8%EC%A7%80/%EC%98%81%ED%99%94%EA%B4%80.jpg",
   "https://studyabout.s3.ap-northeast-2.amazonaws.com/%EC%86%8C%EB%AA%A8%EC%9E%84/%EB%A9%94%EC%9D%B8%EC%BB%A4%EB%B2%84/%EC%B6%9C%EC%82%AC.webp",
+  "https://studyabout.s3.ap-northeast-2.amazonaws.com/%EB%B0%B0%EB%84%88/%ED%8E%AD%EA%B7%842.jpg",
+  "https://studyabout.s3.ap-northeast-2.amazonaws.com/%EB%B0%B0%EB%84%88/%ED%8E%AD%EA%B7%841.jpg",
 ];
 
 export const DEFAULT_IMAGE_URL =

components/atoms/Icons/KakaoShareBtn.tsx

@@ -35,6 +35,7 @@ function KakaoShareBtn({
 
   useEffect(() => {
     if (type === "gather" && !img) return;
+
     if (window.Kakao) {
       const options =
         type === "gather" || type === "study"
@@ -110,16 +111,15 @@ function KakaoShareBtn({
 
       window.Kakao.Link.createDefaultButton(options);
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [img]);
+  }, [img, type, url, subtitle]);
 
   return (
     <Layout id="kakao-share-button" isFull={isFull}>
       {!isBig ? (
         <i className="fa-light fa-share-nodes fa-lg" />
       ) : (
         <Button as="div" colorScheme="mintTheme" width="100%" size="lg">
-          공유하기
+          카카오톡으로 공유하기
         </Button>
       )}
     </Layout>
@@ -129,6 +129,7 @@ function KakaoShareBtn({
 const Layout = styled.button<{ isFull: boolean }>`
   padding: ${(props) => (props.isFull ? 0 : "8px")};
   width: ${(props) => (props.isFull ? "100%" : "undefined")};
+  width: 100%;
 `;
 
 export default KakaoShareBtn;

modals/gather/GatherKakaoShareModal.tsx

@@ -74,7 +74,6 @@ const Container = styled.div`
 const Item = styled.div<{ isSelected: boolean }>`
   position: relative;
   border: ${(props) => (props.isSelected ? "4px solid var(--color-mint)" : null)};
-
   border-radius: var(--rounded-lg);
   overflow: hidden;
   width: 100%;

pageTemplates/gather/detail/GatherHeader.tsx

@@ -1,13 +1,17 @@
-import { Flex } from "@chakra-ui/react";
+import { Box, Flex } from "@chakra-ui/react";
 import dayjs from "dayjs";
+import Image from "next/image";
 import { useRouter } from "next/router";
 import { useSession } from "next-auth/react";
 import { useState } from "react";
 import { useSetRecoilState } from "recoil";
 import styled from "styled-components";
 
+import { GATHER_SHARE_IMAGES } from "../../../assets/images/imageUrl";
+import KakaoShareBtn from "../../../components/atoms/Icons/KakaoShareBtn";
 import Header from "../../../components/layouts/Header";
-import GatherKakaoShareModal from "../../../modals/gather/GatherKakaoShareModal";
+import RightDrawer from "../../../components/organisms/drawer/RightDrawer";
+import { WEB_URL } from "../../../constants/system";
 import { isGatherEditState } from "../../../recoils/checkAtoms";
 import { sharedGatherWritingState } from "../../../recoils/sharedDataAtoms";
 import { IGather } from "../../../types/models/gatherTypes/gatherTypes";
@@ -29,13 +33,18 @@ function GatherHeader({ gatherData }: IGatherHeader) {
   const setIsGatherEdit = useSetRecoilState(isGatherEditState);
 
   const [isModal, setIsModal] = useState(false);
+  const [selectedItem, setSelectedItem] = useState<number>();
 
   const onClick = () => {
     setGatherWriting({ ...gatherData, date: dayjs(gatherData.date) });
     setIsGatherEdit(true);
     router.push("/gather/writing/category");
   };
 
+  const onClickItem = (idx) => {
+    setSelectedItem(idx);
+  };
+
   return (
     <>
       <Header title="">
@@ -51,12 +60,34 @@ function GatherHeader({ gatherData }: IGatherHeader) {
         </Flex>
       </Header>
       {isModal && (
-        <GatherKakaoShareModal
-          setIsModal={setIsModal}
-          title={title}
-          date={date}
-          locationMain={locationMain}
-        />
+        <RightDrawer title="이미지 공유" onClose={() => setIsModal(false)}>
+          <Box p="16px">
+            <Box fontSize="16px" mt="4px" mb="20px" fontWeight={600}>
+              단톡방에 공유 할 이미지를 선택해 주세요!
+            </Box>
+            <Container>
+              {GATHER_SHARE_IMAGES.map((item, idx) => (
+                <Item key={idx} onClick={() => onClickItem(idx)} isSelected={idx === selectedItem}>
+                  <Image src={item} fill={true} sizes="150px" alt="gatherShareImage" />
+                </Item>
+              ))}
+            </Container>
+          </Box>
+          <Box position="fixed" bottom="0" w="100%" p="16px">
+            <KakaoShareBtn
+              isFull
+              title={title}
+              subtitle={date === "미정" ? date : dayjs(date).format("M월 D일(dd)")}
+              type="gather"
+              url={WEB_URL + router.asPath}
+              location={locationMain}
+              isBig={true}
+              img={
+                selectedItem !== null ? GATHER_SHARE_IMAGES[selectedItem] : GATHER_SHARE_IMAGES[1]
+              }
+            />
+          </Box>
+        </RightDrawer>
       )}
     </>
   );
@@ -71,4 +102,25 @@ const IconWrapper = styled.button`
   margin-left: var(--gap-3);
 `;
 
+const Container = styled.div`
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  grid-template-rows: repeat(3, 1fr);
+  width: 100%;
+  height: 100%;
+  gap: var(--gap-3);
+`;
+
+const Item = styled.div<{ isSelected: boolean }>`
+  position: relative;
+  border: ${(props) => (props.isSelected ? "4px solid var(--color-mint)" : null)};
+  border-radius: var(--rounded-lg);
+  overflow: hidden;
+  width: 100%;
+  aspect-ratio: 2/1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+
 export default GatherHeader;

pageTemplates/square/SecretSquare/SecretSquareComments.tsx

@@ -34,6 +34,7 @@ function SecretSquareComments({ comments, refetch }: SecretSquareCommentsProps)
       refetch();
     },
   });
+
   const { mutate: writeSubComment } = useSubCommentMutation("post", "square", squareId, {
     onSuccess() {
       refetch();

pages/gather/index.tsx

@@ -6,7 +6,6 @@ import GatherMain from "../../pageTemplates/gather/GatherMain";
 import GatherReviewSlider from "../../pageTemplates/gather/GatherReviewSlider";
 
 function Gather() {
-
   return (
     <>
       <GatherHeader />

pages/home/index.tsx

@@ -13,7 +13,6 @@ import EventBanner from "../../pageTemplates/home/study/EventBanner";
 
 function Home() {
   const [tab, setTab] = useState<HomeTab>();
-;
   return (
     <>
       <HomeInitialSetting />

pages/square/index.tsx

@@ -20,6 +20,7 @@ function SquarePage() {
 
   const [tab, setTab] = useState<SquareTab>("시크릿 스퀘어");
   const [isRuleModal, setIsRuleModal] = useState(false);
+
   useEffect(() => {
     if (!tabParam) {
       router.replace("/square?tab=secret");