-
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.
카카오 제외 나머지 구현 완료
- Loading branch information
Showing
9 changed files
with
314 additions
and
4 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
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
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
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
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 |
|---|---|---|
| @@ -1,3 +1,4 @@ | ||
| export { default as GalleryHeader } from './galleryHeader'; | ||
| export { default as GalleryRotate } from './galleryTemplate/rotate'; | ||
| export { default as ReviewModal} from './reviewModal'; | ||
| export { default as ReviewModal } from './reviewModal'; | ||
| export { default as ShareModal } from './shareModal'; |
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,106 @@ | ||
| import { useState } from 'react'; | ||
| import * as S from './styles'; | ||
| import { Icon } from '@/components'; | ||
| import { | ||
| EmailShareButton, | ||
| EmailIcon, | ||
| FacebookShareButton, | ||
| FacebookIcon, | ||
| TwitterShareButton, | ||
| TwitterIcon, | ||
| InstapaperIcon, | ||
| InstapaperShareButton, | ||
| PinterestShareButton, | ||
| PinterestIcon, | ||
| LineShareButton, | ||
| LineIcon, | ||
| LinkedinShareButton, | ||
| LinkedinIcon, | ||
| WhatsappShareButton, | ||
| WhatsappIcon, | ||
| TumblrShareButton, | ||
| TumblrIcon, | ||
| TelegramShareButton, | ||
| TelegramIcon | ||
| } from 'react-share'; | ||
| import shareKakao from '../../hooks/shareKakao'; | ||
|
|
||
| interface ShareModalProps { | ||
| location: string; | ||
| title: string; | ||
| thumbnail: string; | ||
| } | ||
|
|
||
| const ShareModal = ({ location, title, thumbnail }: ShareModalProps) => { | ||
| const [copy, setCopy] = useState(false); | ||
|
|
||
| const onHandleCopy = () => { | ||
| const input = document.querySelector('#share-url') as HTMLInputElement; | ||
| input.select(); | ||
| document.execCommand('copy'); | ||
| setCopy(true); | ||
| }; | ||
|
|
||
| const onHandleSocial = (platform: string, location?: string, title?: string) => { | ||
| if (platform === 'kakao') { | ||
| shareKakao(); | ||
| } else if (platform === 'naver') { | ||
| window.open("https://share.naver.com/web/shareView?url=" + location + "&title=" + title); | ||
| } | ||
| }; | ||
|
|
||
| return ( | ||
| <S.Container> | ||
| <S.UrlBox> | ||
| <S.UrlText | ||
| readOnly | ||
| value={location} | ||
| id='share-url'/> | ||
| <S.CopyBtn onClick={onHandleCopy}>URL 복사</S.CopyBtn> | ||
| <Icon value='check' size={20} color={copy ? 'black' : 'gray400'}/> | ||
| </S.UrlBox> | ||
| <S.SocialBox> | ||
| <EmailShareButton url={location}> | ||
| <EmailIcon size={48} round={true} borderRadius={24}></EmailIcon> | ||
| </EmailShareButton> | ||
| <S.SocialBtn | ||
| onClick={() => onHandleSocial('kakao')} | ||
| id="kakao-sharing-btn"> | ||
| <Icon value='kakaoShare' size={50} $active={false}/> | ||
| </S.SocialBtn> | ||
| <S.SocialBtn onClick={() => onHandleSocial('naver', location, title)}> | ||
| <Icon value='naver' size={50} $active={false} /> | ||
| </S.SocialBtn> | ||
| <FacebookShareButton url={location}> | ||
| <FacebookIcon size={48} round={true} borderRadius={24}></FacebookIcon> | ||
| </FacebookShareButton> | ||
| <TwitterShareButton url={location}> | ||
| <TwitterIcon size={48} round={true} borderRadius={24}></TwitterIcon> | ||
| </TwitterShareButton> | ||
| <LineShareButton url={location}> | ||
| <LineIcon size={48} round={true} borderRadius={24}></LineIcon> | ||
| </LineShareButton> | ||
| <InstapaperShareButton url={location}> | ||
| <InstapaperIcon size={48} round={true} borderRadius={24}></InstapaperIcon> | ||
| </InstapaperShareButton> | ||
| <PinterestShareButton url={location} media={thumbnail}> | ||
| <PinterestIcon size={48} round={true} borderRadius={24}></PinterestIcon> | ||
| </PinterestShareButton> | ||
| <LinkedinShareButton url={location}> | ||
| <LinkedinIcon size={48} round={true} borderRadius={24}></LinkedinIcon> | ||
| </LinkedinShareButton> | ||
| <WhatsappShareButton url={location}> | ||
| <WhatsappIcon size={48} round={true} borderRadius={24}></WhatsappIcon> | ||
| </WhatsappShareButton> | ||
| <TumblrShareButton url={location}> | ||
| <TumblrIcon size={48} round={true} borderRadius={24}></TumblrIcon> | ||
| </TumblrShareButton> | ||
| <TelegramShareButton url={location}> | ||
| <TelegramIcon size={48} round={true} borderRadius={24}></TelegramIcon> | ||
| </TelegramShareButton> | ||
| </S.SocialBox> | ||
| </S.Container> | ||
| ) | ||
| } | ||
|
|
||
| export default ShareModal |
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,67 @@ | ||
| import { buttonSizeMap, buttonTypeMap } from "@/styles/button"; | ||
| import { colors } from "@/styles/colorPalette"; | ||
| import { LayoutMap } from "@/styles/layout"; | ||
| import { typographyMap } from "@/styles/typography"; | ||
| import styled from "@emotion/styled"; | ||
|
|
||
| export const Container = styled.div` | ||
| ${LayoutMap.displayFlex}; | ||
| flex-direction: column; | ||
| gap : 30px; | ||
| padding : 20px; | ||
| `; | ||
|
|
||
| export const UrlBox = styled.div` | ||
| width : 400px; | ||
| height : 50px; | ||
| background-color : ${colors.gray100}; | ||
| ${LayoutMap.displayFlex}; | ||
| justify-content : center; | ||
| gap : 20px; | ||
| padding : 10px; | ||
| border-radius : 10px; | ||
| `; | ||
|
|
||
| export const UrlText = styled.input` | ||
| width : 60%; | ||
| height: 100%; | ||
| background-color : white; | ||
| ${LayoutMap.displayFlex}; | ||
| padding-left : 5px; | ||
| white-space: nowrap; | ||
| overflow : hidden; | ||
| text-overflow : ellipsis; | ||
| cursor: text; | ||
| border-radius : 5px; | ||
| `; | ||
|
|
||
| export const CopyBtn = styled.button` | ||
| width : 55%; | ||
| height : 100%; | ||
| ${buttonTypeMap.rectangleWhite}; | ||
| ${buttonSizeMap.fit}; | ||
| ${typographyMap.t7}; | ||
| padding : 5px; | ||
| transition : all 0.3s ease; | ||
| border-radius : 5px; | ||
| &:hover { | ||
| ${buttonTypeMap.rectangleGray}; | ||
| } | ||
| `; | ||
|
|
||
| export const SocialBox = styled.div` | ||
| width : 100%; | ||
| height : 100px; | ||
| display: grid; | ||
| grid-template-columns: repeat(auto-fill, minmax(50px, 1fr)); | ||
| grid-gap: 10px; | ||
| justify-items: center; | ||
| align-items: center; | ||
| margin-bottom : 10px; | ||
| `; | ||
|
|
||
| export const SocialBtn = styled.button` | ||
| width : 50px; | ||
| height : 50px; | ||
| `; |
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,80 @@ | ||
|
|
||
|
|
||
|
|
||
| export const shareKakao = () => { | ||
|
|
||
| if (window.Kakao) { | ||
| const kakao = window.Kakao; | ||
|
|
||
| if (!kakao.isInitialized()) { | ||
| kakao.init('2de91a34726841d2d47e292877371dbd'); | ||
| } | ||
|
|
||
| kakao.Share.sendDefault({ | ||
| objectType: 'feed', | ||
| content: { | ||
| title: '안녕하세요', | ||
| description: '아메리카노, 빵, 케익', | ||
| imageUrl: 'https://mud-kage.kakao.com/dn/NTmhS/btqfEUdFAUf/FjKzkZsnoeE4o19klTOVI1/openlink_640x640s.jpg', | ||
| link: { | ||
| mobileWebUrl: 'https://developers.kakao.com', | ||
| webUrl: 'https://developers.kakao.com', | ||
| }, | ||
| }, | ||
| itemContent: { | ||
| profileText: 'Kakao', | ||
| profileImageUrl: 'https://mud-kage.kakao.com/dn/Q2iNx/btqgeRgV54P/VLdBs9cvyn8BJXB3o7N8UK/kakaolink40_original.png', | ||
| titleImageUrl: 'https://mud-kage.kakao.com/dn/Q2iNx/btqgeRgV54P/VLdBs9cvyn8BJXB3o7N8UK/kakaolink40_original.png', | ||
| titleImageText: 'Cheese cake', | ||
| titleImageCategory: 'Cake', | ||
| items: [ | ||
| { | ||
| item: 'Cake1', | ||
| itemOp: '1000원', | ||
| }, | ||
| { | ||
| item: 'Cake2', | ||
| itemOp: '2000원', | ||
| }, | ||
| { | ||
| item: 'Cake3', | ||
| itemOp: '3000원', | ||
| }, | ||
| { | ||
| item: 'Cake4', | ||
| itemOp: '4000원', | ||
| }, | ||
| { | ||
| item: 'Cake5', | ||
| itemOp: '5000원', | ||
| }, | ||
| ], | ||
| sum: '총 결제금액', | ||
| sumOp: '15000원', | ||
| }, | ||
| social: { | ||
| likeCount: 10, | ||
| commentCount: 20, | ||
| sharedCount: 30, | ||
| }, | ||
| buttons: [ | ||
| { | ||
| title: '웹으로 이동', | ||
| link: { | ||
| mobileWebUrl: 'https://developers.kakao.com', | ||
| webUrl: 'https://developers.kakao.com', | ||
| }, | ||
| }, | ||
| { | ||
| title: '앱으로 이동', | ||
| link: { | ||
| mobileWebUrl: 'https://developers.kakao.com', | ||
| webUrl: 'https://developers.kakao.com', | ||
| }, | ||
| }, | ||
| ], | ||
| }); | ||
| } | ||
| } | ||
|
|
||
| export default shareKakao |
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 |
|---|---|---|
| @@ -1 +1 @@ | ||
| /// <reference types="vite/client" /> | ||
| /// <reference types="vite/client" /> |