From aa86fcd927e53c68300b3931946146d87ed40f56 Mon Sep 17 00:00:00 2001 From: LSJ Date: Tue, 13 Aug 2024 21:38:26 +0900 Subject: [PATCH] gather-kakao-share --- assets/images/imageUrl.ts | 2 + components/atoms/Icons/KakaoShareBtn.tsx | 7 +- modals/gather/GatherKakaoShareModal.tsx | 1 - pageTemplates/gather/detail/GatherHeader.tsx | 68 ++++++++++++++++--- .../SecretSquare/SecretSquareComments.tsx | 1 + pages/gather/index.tsx | 1 - pages/home/index.tsx | 1 - pages/square/index.tsx | 1 + 8 files changed, 68 insertions(+), 14 deletions(-) diff --git a/assets/images/imageUrl.ts b/assets/images/imageUrl.ts index 0301da637..25d3d3420 100644 --- a/assets/images/imageUrl.ts +++ b/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 = diff --git a/components/atoms/Icons/KakaoShareBtn.tsx b/components/atoms/Icons/KakaoShareBtn.tsx index e482a10a5..d44829509 100644 --- a/components/atoms/Icons/KakaoShareBtn.tsx +++ b/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,8 +111,7 @@ function KakaoShareBtn({ window.Kakao.Link.createDefaultButton(options); } - // eslint-disable-next-line react-hooks/exhaustive-deps - }, [img]); + }, [img, type, url, subtitle]); return ( @@ -119,7 +119,7 @@ function KakaoShareBtn({ ) : ( )} @@ -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; diff --git a/modals/gather/GatherKakaoShareModal.tsx b/modals/gather/GatherKakaoShareModal.tsx index fad5a6794..45630da4f 100644 --- a/modals/gather/GatherKakaoShareModal.tsx +++ b/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%; diff --git a/pageTemplates/gather/detail/GatherHeader.tsx b/pageTemplates/gather/detail/GatherHeader.tsx index ba6446133..d2ad8393a 100644 --- a/pageTemplates/gather/detail/GatherHeader.tsx +++ b/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,6 +33,7 @@ function GatherHeader({ gatherData }: IGatherHeader) { const setIsGatherEdit = useSetRecoilState(isGatherEditState); const [isModal, setIsModal] = useState(false); + const [selectedItem, setSelectedItem] = useState(); const onClick = () => { setGatherWriting({ ...gatherData, date: dayjs(gatherData.date) }); @@ -36,6 +41,10 @@ function GatherHeader({ gatherData }: IGatherHeader) { router.push("/gather/writing/category"); }; + const onClickItem = (idx) => { + setSelectedItem(idx); + }; + return ( <>
@@ -51,12 +60,34 @@ function GatherHeader({ gatherData }: IGatherHeader) {
{isModal && ( - + setIsModal(false)}> + + + 단톡방에 공유 할 이미지를 선택해 주세요! + + + {GATHER_SHARE_IMAGES.map((item, idx) => ( + onClickItem(idx)} isSelected={idx === selectedItem}> + gatherShareImage + + ))} + + + + + + )} ); @@ -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; diff --git a/pageTemplates/square/SecretSquare/SecretSquareComments.tsx b/pageTemplates/square/SecretSquare/SecretSquareComments.tsx index da215a409..520eb405d 100644 --- a/pageTemplates/square/SecretSquare/SecretSquareComments.tsx +++ b/pageTemplates/square/SecretSquare/SecretSquareComments.tsx @@ -34,6 +34,7 @@ function SecretSquareComments({ comments, refetch }: SecretSquareCommentsProps) refetch(); }, }); + const { mutate: writeSubComment } = useSubCommentMutation("post", "square", squareId, { onSuccess() { refetch(); diff --git a/pages/gather/index.tsx b/pages/gather/index.tsx index ab734b2ad..a1a144606 100644 --- a/pages/gather/index.tsx +++ b/pages/gather/index.tsx @@ -6,7 +6,6 @@ import GatherMain from "../../pageTemplates/gather/GatherMain"; import GatherReviewSlider from "../../pageTemplates/gather/GatherReviewSlider"; function Gather() { - return ( <> diff --git a/pages/home/index.tsx b/pages/home/index.tsx index f8265046e..1f38c7e4a 100644 --- a/pages/home/index.tsx +++ b/pages/home/index.tsx @@ -13,7 +13,6 @@ import EventBanner from "../../pageTemplates/home/study/EventBanner"; function Home() { const [tab, setTab] = useState(); -; return ( <> diff --git a/pages/square/index.tsx b/pages/square/index.tsx index d58feaae1..6edbc4d46 100644 --- a/pages/square/index.tsx +++ b/pages/square/index.tsx @@ -20,6 +20,7 @@ function SquarePage() { const [tab, setTab] = useState("시크릿 스퀘어"); const [isRuleModal, setIsRuleModal] = useState(false); + useEffect(() => { if (!tabParam) { router.replace("/square?tab=secret");