Skip to content

Commit

Permalink
Merge pull request #667 from sparcs-kaist/#633-event-instagram-story
Browse files Browse the repository at this point in the history 
#633 인스타그램 스토리 이동 이벤트 앱으로 전달
  • Loading branch information
@14KGun
14KGun authored Sep 23, 2023
2 parents c31ec75 + 43ac722 commit afcaf5f
Show file tree
Hide file tree
Showing 13 changed files with 415 additions and 276 deletions.
18 changes: 14 additions & 4 deletions src/components/DottedLine.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
import { HTMLAttributes } from "react";

import theme from "tools/theme";

type Direction = "row" | "column";
Expand All @@ -8,9 +10,13 @@ type LineProps = {
Margin,
`${PixelValue}` | `${PixelValue} ${PixelValue} ${PixelValue} ${PixelValue}`
>;
};
} & HTMLAttributes<HTMLDivElement>;

const DottedLine = ({ direction = "row", margin = "0 0" }: LineProps) => {
const DottedLine = ({
direction = "row",
margin = "0 0",
...divProps
}: LineProps) => {
const wrapper = {
height: direction === "row" ? "1px" : undefined,
width:
Expand All @@ -33,9 +39,13 @@ const DottedLine = ({ direction = "row", margin = "0 0" }: LineProps) => {
direction === "column" ? `5px dotted ${theme.gray_line}` : undefined,
marginTop: direction === "column" ? "-2px" : undefined,
};

return (
<div style={{ ...wrapper, overflow: "hidden", boxSizing: "border-box" }}>
<div style={line}></div>
<div
css={{ ...wrapper, overflow: "hidden", boxSizing: "border-box" }}
{...divProps}
>
<div css={line}></div>
</div>
);
};
Expand Down
176 changes: 83 additions & 93 deletions src/components/Event/WhiteContainerSuggestJoinEvent/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,13 @@
import { useCallback, useMemo, useState } from "react";
import { useMemo, useState } from "react";

import { sendPopupInstagramStoryShareToFlutter } from "hooks/skeleton/useFlutterEventCommunicationEffect";
import { useValueRecoilState } from "hooks/useFetchRecoilState";

import Button from "components/Button";
import { ModalNotification } from "components/ModalPopup";
import ModalEvent2023FallJoin from "components/ModalPopup/ModalEvent2023FallJoin";
import LinkEvent2023FallInstagramStoryShare from "components/Link/LinkEvent2023FallInstagramStoryShare";
import {
ModalEvent2023FallJoin,
ModalNotification,
} from "components/ModalPopup";
import WhiteContainer from "components/WhiteContainer";

import { deviceType } from "tools/loadenv";
Expand All @@ -20,16 +22,6 @@ const WhiteContainerSuggestJoinEvent = () => {
const [isOpenJoin, setIsOpenJoin] = useState<boolean>(false);
const [isOpenNotification, setIsOpenNotification] = useState<boolean>(false);

const onClickInstagramShare = useCallback(() => {
sendPopupInstagramStoryShareToFlutter({
backgroundLayerUrl:
"https://sparcs-taxi-prod.s3.ap-northeast-2.amazonaws.com/assets/event-2023fall/instagram_background.png",
stickerLayerUrl:
"https://sparcs-taxi-prod.s3.ap-northeast-2.amazonaws.com/assets/event-2023fall/instagram_sticker.png",
});
// @todo, @fixme : 퀘스트 완려 API날리고 이벤트인포 업데이트하기
}, [isLogin]);

const styleText = {
...theme.font14,
marginBottom: "12px",
Expand All @@ -40,93 +32,91 @@ const WhiteContainerSuggestJoinEvent = () => {
...theme.font14_bold,
};

return !isLogin ? null : !isAgreeOnTermsOfEvent ? (
<WhiteContainer>
<div css={styleText}>
<b>🌟 첫 발걸음</b>
</div>
<div css={styleText}>
이벤트 참여 동의 이후 퀘스트 달성 및 달토끼 상점 이용이 가능합니다. 많은
혜택과 기회를 놓치지 마세요!
</div>
<Button
type="purple"
css={styleButton}
onClick={() => setIsOpenJoin(true)}
>
이벤트 참여하기
</Button>
return (
<>
{!isLogin ? null : !isAgreeOnTermsOfEvent ? (
<WhiteContainer>
<div css={styleText}>
<b>🌟 첫 발걸음</b>
</div>
<div css={styleText}>
이벤트 참여 동의 이후 퀘스트 달성 및 달토끼 상점 이용이 가능합니다.
많은 혜택과 기회를 놓치지 마세요!
</div>
<Button
type="purple"
css={styleButton}
onClick={() => setIsOpenJoin(true)}
>
이벤트 참여하기
</Button>
</WhiteContainer>
) : randomToken &&
completedQuests &&
!completedQuests.includes("adPushAgreement") ? (
<WhiteContainer>
<div css={styleText}>
<b>🌟 Taxi의 소울메이트</b>
</div>
<div css={styleText}>
Taxi 서비스를 잊지 않도록 가끔 찾아갈게요! 광고성 푸시 알림 수신
동의를 해주시면 방이 많이 모이는 시즌, 주변에 택시앱 사용자가 있을
때 알려드릴 수 있어요.
</div>
<Button
type="purple"
css={styleButton}
onClick={() => setIsOpenNotification(true)}
>
광고성 푸시 알림 수신 동의하고 송편 50개 얻기
</Button>
</WhiteContainer>
) : completedQuests &&
!completedQuests.includes("eventSharingOnInstagram") &&
deviceType.startsWith("app/") ? (
<WhiteContainer>
<div css={styleText}>
<b>🌟 나만 알기에는 아까운 이벤트</b>
</div>
<div css={styleText}>
추석에 맞춰 쏟아지는 혜택들. 나만 알 순 없죠. 인스타그램 친구들에게
스토리로 공유해보아요.
</div>
<LinkEvent2023FallInstagramStoryShare type="eventSharingOnInstagram">
<Button type="purple" css={styleButton}>
인스타그램 스토리에 공유하고 송편 100개 얻기
</Button>
</LinkEvent2023FallInstagramStoryShare>
</WhiteContainer>
) : completedQuests && !completedQuests.includes("adPushAgreement") ? (
<WhiteContainer>
<div css={styleText}>
<b>🌟 Taxi의 소울메이트</b>
</div>
<div css={styleText}>
Taxi 서비스를 잊지 않도록 가끔 찾아갈게요! 광고성 푸시 알림 수신
동의를 해주시면 방이 많이 모이는 시즌, 주변에 택시앱 사용자가 있을
때 알려드릴 수 있어요.
</div>
<Button
type="purple"
css={styleButton}
onClick={() => setIsOpenNotification(true)}
>
광고성 푸시 알림 수신 동의하고 송편 50개 얻기
</Button>
</WhiteContainer>
) : null}
<ModalEvent2023FallJoin
isOpen={isOpenJoin}
onChangeIsOpen={setIsOpenJoin}
/>
</WhiteContainer>
) : randomToken &&
completedQuests &&
!completedQuests.includes("adPushAgreement") ? (
<WhiteContainer>
<div css={styleText}>
<b>🌟 Taxi의 소울메이트</b>
</div>
<div css={styleText}>
Taxi 서비스를 잊지 않도록 가끔 찾아갈게요! 광고성 푸시 알림 수신 동의를
해주시면 방이 많이 모이는 시즌, 주변에 택시앱 사용자가 있을 때 알려드릴
수 있어요.
</div>
<Button
type="purple"
css={styleButton}
onClick={() => setIsOpenNotification(true)}
>
광고성 푸시 알림 수신 동의하고 송편 50개 얻기
</Button>
<ModalNotification
isOpen={isOpenNotification}
onChangeIsOpen={setIsOpenNotification}
/>
</WhiteContainer>
) : completedQuests &&
!completedQuests.includes("eventSharingOnInstagram") &&
deviceType.startsWith("app/") ? (
<WhiteContainer>
<div css={styleText}>
<b>🌟 나만 알기에는 아까운 이벤트</b>
</div>
<div css={styleText}>
추석에 맞춰 쏟아지는 혜택들. 나만 알 순 없죠. 인스타그램 친구들에게
스토리로 공유해보아요.
</div>
<Button type="purple" css={styleButton} onClick={onClickInstagramShare}>
인스타그램 스토리에 공유하고 송편 100개 얻기
</Button>
<ModalNotification
isOpen={isOpenNotification}
onChangeIsOpen={setIsOpenNotification}
/>
</WhiteContainer>
) : completedQuests && !completedQuests.includes("adPushAgreement") ? (
<WhiteContainer>
<div css={styleText}>
<b>🌟 Taxi의 소울메이트</b>
</div>
<div css={styleText}>
Taxi 서비스를 잊지 않도록 가끔 찾아갈게요! 광고성 푸시 알림 수신 동의를
해주시면 방이 많이 모이는 시즌, 주변에 택시앱 사용자가 있을 때 알려드릴
수 있어요.
</div>
<Button
type="purple"
css={styleButton}
onClick={() => setIsOpenNotification(true)}
>
광고성 푸시 알림 수신 동의하고 송편 50개 얻기
</Button>
<ModalNotification
isOpen={isOpenNotification}
onChangeIsOpen={setIsOpenNotification}
/>
</WhiteContainer>
) : null;
</>
);
};

export default WhiteContainerSuggestJoinEvent;
92 changes: 92 additions & 0 deletions src/components/Link/LinkEvent2023FallInstagramStoryShare.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,92 @@
import { HTMLAttributes, ReactNode, useCallback, useState } from "react";

import { useEvent2023FallQuestComplete } from "hooks/event/useEvent2023FallQuestComplete";
import { sendPopupInstagramStoryShareToFlutter } from "hooks/skeleton/useFlutterEventCommunicationEffect";
import { useValueRecoilState } from "hooks/useFetchRecoilState";
import { useAxios } from "hooks/useTaxiAPI";

import ModalEvent2023FallJoin from "components/ModalPopup/ModalEvent2023FallJoin";

import alertAtom from "atoms/alert";
import { useSetRecoilState } from "recoil";

import { deviceType } from "tools/loadenv";

const backgroundLayerDefaultUrl =
"https://sparcs-taxi-prod.s3.ap-northeast-2.amazonaws.com/assets/event-2023fall/instagram_background.png";
const stickerLayerDefaultUrl =
"https://sparcs-taxi-prod.s3.ap-northeast-2.amazonaws.com/assets/event-2023fall/instagram_sticker.png";

type LinkEvent2023FallInstagramStoryShareProps = {
type: "eventSharingOnInstagram" | "purchaseSharingOnInstagram";
backgroundLayerUrl?: string;
stickerLayerUrl?: string;
children?: ReactNode;
} & HTMLAttributes<HTMLAnchorElement>;

const LinkEvent2023FallInstagramStoryShare = ({
type,
backgroundLayerUrl = backgroundLayerDefaultUrl,
stickerLayerUrl = stickerLayerDefaultUrl,
children,
...aProps
}: LinkEvent2023FallInstagramStoryShareProps) => {
const axios = useAxios();
const setAlert = useSetRecoilState(alertAtom);
const isLogin = !!useValueRecoilState("loginInfo")?.id;
const { isAgreeOnTermsOfEvent } =
useValueRecoilState("event2023FallInfo") || {};
const [isOpenJoin, setIsOpenJoin] = useState<boolean>(false);

//#region event2023Fall
const event2023FallQuestComplete = useEvent2023FallQuestComplete();
//#endregion

const onClick = useCallback(async () => {
if (!deviceType.startsWith("app/")) {
setAlert("앱에서만 이용 가능합니다.");
} else if (!isLogin) {
setAlert("로그인 이후 이용해주세요.");
} else if (!isAgreeOnTermsOfEvent) {
setIsOpenJoin(true);
} else {
const result = await sendPopupInstagramStoryShareToFlutter({
backgroundLayerUrl,
stickerLayerUrl,
});
if (!result) {
setAlert("인스타그램 실행에 실패하였습니다.");
return;
}
axios({
url: `/events/2023fall/quests/complete/${type}`,
method: "post",
onSuccess: () => {
//#region event2023Fall
event2023FallQuestComplete(type);
//#endregion
},
});
}
}, [
isLogin,
isAgreeOnTermsOfEvent,
backgroundLayerUrl,
stickerLayerUrl,
event2023FallQuestComplete,
]);

return (
<>
<a onClick={onClick} css={{ textDecoration: "none" }} {...aProps}>
{children}
</a>
<ModalEvent2023FallJoin
isOpen={isOpenJoin}
onChangeIsOpen={setIsOpenJoin}
/>
</>
);
};

export default LinkEvent2023FallInstagramStoryShare;
Loading

0 comments on commit afcaf5f

Please sign in to comment.