-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge branch '818-2024-fall-event-daily-attendance' of https://github…
….com/sparcs-kaist/taxi-front into 818-2024-fall-event-daily-attendance
- Loading branch information
Showing
9 changed files
with
614 additions
and
258 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
81 changes: 81 additions & 0 deletions
81
packages/web/src/components/Event/WhiteContainerSuggestShareEvent/index.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,81 @@ | ||
| import { useEffect, useState } from "react"; | ||
|
|
||
| import { useIsLogin, useValueRecoilState } from "@/hooks/useFetchRecoilState"; | ||
| import { useAxios } from "@/hooks/useTaxiAPI"; | ||
|
|
||
| import Button from "@/components/Button"; | ||
| import { ModalEvent2024FallShare } from "@/components/ModalPopup"; | ||
| import WhiteContainer from "@/components/WhiteContainer"; | ||
|
|
||
| import alertAtom from "@/atoms/alert"; | ||
| import { useSetRecoilState } from "recoil"; | ||
|
|
||
| import theme from "@/tools/theme"; | ||
|
|
||
| const WhiteContainerSuggestShareEvent = () => { | ||
| const isLogin = useIsLogin(); | ||
| const { isAgreeOnTermsOfEvent } = | ||
| useValueRecoilState("event2024FallInfo") || {}; | ||
| const [inviteUrl, setInviteUrl] = useState<string>(""); | ||
| const [isOpenShare, setIsOpenShare] = useState<boolean>(false); | ||
| const axios = useAxios(); | ||
| const setAlert = useSetRecoilState(alertAtom); | ||
|
|
||
| const styleText = { | ||
| ...theme.font14, | ||
| marginBottom: "12px", | ||
| }; | ||
| const styleButton = { | ||
| padding: "14px 0 13px", | ||
| borderRadius: "12px", | ||
| ...theme.font14_bold, | ||
| }; | ||
|
|
||
| useEffect(() => { | ||
| if (isAgreeOnTermsOfEvent) | ||
| axios({ | ||
| url: `/events/2024fall/invites/create`, | ||
| method: "post", | ||
| onSuccess: ({ inviteUrl }) => { | ||
| setInviteUrl(inviteUrl); | ||
| }, | ||
| onError: () => setAlert("초대 링크를 생성하지 못했습니다."), | ||
| }); | ||
| }, [isAgreeOnTermsOfEvent]); | ||
|
|
||
| return ( | ||
| <> | ||
| {isLogin && isAgreeOnTermsOfEvent && ( | ||
| <WhiteContainer> | ||
| <div css={styleText}> | ||
| <b>🎊 이벤트 공유하기</b> | ||
| </div> | ||
| <div css={styleText}> | ||
| 이벤트를 공유하여 친구가 이벤트에 참여하면, 친구와 함께 송편코인 | ||
| 700개를 받을 수 있어요! | ||
| </div> | ||
| <Button | ||
| type="purple" | ||
| css={styleButton} | ||
| onClick={() => { | ||
| if (inviteUrl) setIsOpenShare(true); | ||
| else | ||
| setAlert( | ||
| "이벤트를 공유하기 위해서는 이벤트에 참여해야 합니다." | ||
| ); | ||
| }} | ||
| > | ||
| 이벤트 공유하기 | ||
| </Button> | ||
| <ModalEvent2024FallShare | ||
| isOpen={isOpenShare} | ||
| onChangeIsOpen={setIsOpenShare} | ||
| inviteUrl={inviteUrl || ""} | ||
| /> | ||
| </WhiteContainer> | ||
| )} | ||
| </> | ||
| ); | ||
| }; | ||
|
|
||
| export default WhiteContainerSuggestShareEvent; |
114 changes: 114 additions & 0 deletions
114
packages/web/src/components/ModalPopup/Body/BodyEvent2024FallShare.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,114 @@ | ||
| import { useCallback, useEffect, useState } from "react"; | ||
| import QRCode from "react-qr-code"; | ||
|
|
||
| import ButtonShare from "@/components/Button/ButtonShare"; | ||
| import DottedLine from "@/components/DottedLine"; | ||
| import LinkCopy from "@/components/Link/LinkCopy"; | ||
| import LinkKakaotalkShare from "@/components/Link/LinkKakaotalkShare"; | ||
|
|
||
| import { ogServer } from "@/tools/loadenv"; | ||
| import theme from "@/tools/theme"; | ||
|
|
||
| import { ReactComponent as KakaoTalkLogo } from "@/static/assets/serviceLogos/KakaoTalkLogo.svg"; | ||
| import CheckIcon from "@mui/icons-material/Check"; | ||
| import ContentCopyIcon from "@mui/icons-material/ContentCopy"; | ||
|
|
||
| export type BodyEvent2024FallShareProps = { | ||
| inviteUrl: string; | ||
| height?: number; | ||
| }; | ||
|
|
||
| const BodyEvent2024FallShare = ({ | ||
| height, | ||
| inviteUrl, | ||
| }: BodyEvent2024FallShareProps) => { | ||
| const [isCopied, setIsCopied] = useState(false); | ||
| const onCopy = useCallback(() => setIsCopied(true), [setIsCopied]); | ||
|
|
||
| useEffect(() => { | ||
| if (isCopied) { | ||
| const timer = setTimeout(() => setIsCopied(false), 1000); | ||
| return () => clearTimeout(timer); | ||
| } | ||
| }, [isCopied]); | ||
|
|
||
| const styleWrapper = height | ||
| ? { | ||
| height, | ||
| display: "flex", | ||
| flexDirection: "column" as any, | ||
| } | ||
| : {}; | ||
|
|
||
| const styleGuide = { | ||
| ...theme.font12, | ||
| color: theme.gray_text, | ||
| margin: "0 8px 12px", | ||
| }; | ||
| const styleQRSection = { | ||
| marginTop: "12px", | ||
| position: "relative" as any, | ||
| overflow: "hidden", | ||
| textAlign: "center" as any, | ||
| }; | ||
| const styleButtonSection = { | ||
| display: "flex", | ||
| justifyContent: "center", | ||
| gap: "10px", | ||
| margin: "12px 0px 0", | ||
| }; | ||
|
|
||
| return ( | ||
| <div css={styleWrapper}> | ||
| <div css={styleGuide}> | ||
| 이벤트를 다른 사람들에게 공유할 수 있습니다. 이 링크를 통해 다른 | ||
| 사용자가 이벤트에 참여하면, 회원님과 새 참여자 모두{" "} | ||
| <b>송편코인 700개</b>를 획득합니다. | ||
| </div> | ||
| <DottedLine /> | ||
| <div css={{ flexGrow: 1 }} /> | ||
| <div css={styleQRSection}> | ||
| <QRCode value={inviteUrl} size={120} bgColor="none" /> | ||
| </div> | ||
| <div css={{ flexGrow: 1 }} /> | ||
| <div css={styleButtonSection}> | ||
| <LinkKakaotalkShare | ||
| title={"Taxi 추석 이벤트"} | ||
| description={`Taxi 추석 이벤트에 참여해 보세요! 이 링크로 참여하면 송편코인 700개를 획득할 수 있어요!`} | ||
| imageUrl={ | ||
| ogServer | ||
| ? `${ogServer}/eventInvite/${inviteUrl.split("/").pop()}` | ||
| : undefined | ||
| } | ||
| buttonText="확인하기" | ||
| buttonTo={new URL(inviteUrl).pathname} | ||
| partNum={1} | ||
| > | ||
| <ButtonShare | ||
| text="카카오톡" | ||
| icon={<KakaoTalkLogo css={{ width: "22px" }} />} | ||
| background="#FFE812" | ||
| /> | ||
| </LinkKakaotalkShare> | ||
| <LinkCopy | ||
| value={`🚕 Taxi 추석 이벤트에 참여해 보세요!\n🚕 참여 링크: ${inviteUrl}`} | ||
| onCopy={onCopy} | ||
| > | ||
| <ButtonShare | ||
| text="초대 복사" | ||
| icon={ | ||
| isCopied ? ( | ||
| <CheckIcon style={{ fontSize: "16px" }} /> | ||
| ) : ( | ||
| <ContentCopyIcon style={{ fontSize: "16px" }} /> | ||
| ) | ||
| } | ||
| background={theme.gray_background} | ||
| /> | ||
| </LinkCopy> | ||
| </div> | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| export default BodyEvent2024FallShare; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.