From 17ff970598b72cc05329e69295fa1f3f7269c156 Mon Sep 17 00:00:00 2001 From: tyoung Date: Wed, 22 Feb 2023 10:24:01 +0900 Subject: [PATCH 1/6] =?UTF-8?q?=F0=9F=94=A8Fix:=20=EC=BD=94=EB=A9=98?= =?UTF-8?q?=ED=8A=B8=20=EC=BD=94=EB=93=9C=20=EC=88=98=EC=A0=95=20?= =?UTF-8?q?=F0=9F=92=84=20Design:=20=EB=94=94=EC=9E=90=EC=9D=B8=20?= =?UTF-8?q?=EC=88=98=EC=A0=95=EC=9C=BC=EB=A1=9C=20=EC=9D=B8=ED=95=B4=20CSS?= =?UTF-8?q?=20=EC=88=98=EC=A0=95=20#23?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/post-list/Comment/Comment.tsx | 7 +- components/post-list/Comment/CommentList.tsx | 124 +++++++++++------- components/post-list/Comment/CommentWrite.tsx | 64 ++++++--- 3 files changed, 122 insertions(+), 73 deletions(-) diff --git a/components/post-list/Comment/Comment.tsx b/components/post-list/Comment/Comment.tsx index f4be08c..199675c 100644 --- a/components/post-list/Comment/Comment.tsx +++ b/components/post-list/Comment/Comment.tsx @@ -12,7 +12,7 @@ export default function Comment({ path }: any) { useEffect(() => { const collectionRef = collection(dbService, path); - const q = query(collectionRef, orderBy('timestamp', 'asc')); + const q = query(collectionRef, orderBy('createdAt', 'desc')); onSnapshot(q, (snapshot: any) => setComments( @@ -25,10 +25,10 @@ export default function Comment({ path }: any) {

댓글

{comments?.length}개의 댓글이 작성되었어요

+ {comments?.map((comment: any) => { return ; })} - ); } @@ -39,8 +39,11 @@ const CommentLayout = styled.div` .title { font-size: 1.25rem; + font-weight: 700; } .description { margin: 0.75rem 0 1.125rem; + font-size: 0.75rem; + color: #868e96; } `; diff --git a/components/post-list/Comment/CommentList.tsx b/components/post-list/Comment/CommentList.tsx index 76b59cd..ae1120e 100644 --- a/components/post-list/Comment/CommentList.tsx +++ b/components/post-list/Comment/CommentList.tsx @@ -7,7 +7,9 @@ import styled from 'styled-components'; type Props = {}; export default function CommentList({ comment, path }) { - const { userProfile, userNickName, createdAt, commentText, id } = comment; + console.log(comment); + const { userProfile, userNickName, createdAt, commentText, id, userId } = + comment; const [edit, setEdit] = useState({ active: false, editText: commentText, @@ -51,47 +53,54 @@ export default function CommentList({ comment, path }) { updateDoc(docRef, payload); }; + console.log(auth.currentUser?.uid); + return ( + + +

{userNickName}

{nowDate}

- - - {!active ? ( -

{commentText}

- ) : ( - //
- setEdit({ ...edit, editText: e.target.value })} - /> - )} - {/* {auth.currentUser && ( */} -
- editComment(id)} - > - 수정 - - deleteComment(id)} - > - 삭제 - +
+ {!active ? ( +

{commentText}

+ ) : ( + //
+ setEdit({ ...edit, editText: e.target.value })} + /> + )}
- {/* )} */} - + + + {auth.currentUser?.uid === userId ? ( + <> + editComment(id)} + > + 수정 + + deleteComment(id)} + > + 삭제 + + + ) : null} + ); } @@ -103,6 +112,7 @@ const CommentListLayout = styled.div` width: 100%; border-radius: 0.5rem; margin-bottom: 1.25rem; + padding: 0.125rem; &:hover { background: #f1f3f5; @@ -112,36 +122,41 @@ const CommentListLayout = styled.div` export const WriteInformationDiv = styled.div` display: flex; align-items: center; - - .userInformation { - .nickName { - margin-bottom: 0.125rem; - font-size: 0.875rem; - font-weight: 700; - } - - .date { - font-size: 0.75rem; - } - } + flex-direction: column; `; export const ProfileImg = styled.img` width: 40px; height: 40px; - margin-right: 0.625rem; + border-radius: 100%; object-fit: cover; `; -const CommentText = styled.div` +const CommentTextDiv = styled.div` display: flex; justify-content: space-between; - width: 100%; + flex-direction: column; + width: calc(100% - 10rem); + .userInformation { + display: flex; + align-items: center; + + .nickName { + margin-bottom: 0.125rem; + font-size: 0.875rem; + font-weight: 700; + } + + .date { + margin-left: 0.625rem; + font-size: 0.75rem; + color: #868e96; + } + } .commenText { overflow-wrap: anywhere; - } .editInput { @@ -154,8 +169,15 @@ const CommentText = styled.div` font-size: 0.875rem; } - .commentModify { + .comment-list { + width: 100%; display: flex; - font-size: 0.75rem; + margin-top: 0.375rem; + justify-content: space-between; } `; + +const CommentModify = styled.div` + display: flex; + gap: 10px; +`; diff --git a/components/post-list/Comment/CommentWrite.tsx b/components/post-list/Comment/CommentWrite.tsx index 9f7e8c8..8a04442 100644 --- a/components/post-list/Comment/CommentWrite.tsx +++ b/components/post-list/Comment/CommentWrite.tsx @@ -4,13 +4,17 @@ import { addDoc, collection, serverTimestamp } from 'firebase/firestore'; import React, { useState } from 'react'; import styled from 'styled-components'; import { ProfileImg, WriteInformationDiv } from './CommentList'; +import useCheckLogin from '../../Hooks/useCheckLogin'; +import { useRouter } from 'next/router'; +import Image from 'next/image'; export default function CommentWrite({ path }) { const [commentText, setCommnetText] = useState(''); - const userNickName = auth.currentUser?.displayName ?? 'notNicName'; + const userNickName = auth.currentUser?.displayName ?? ''; const userProfile = - auth.currentUser?.photoURL ?? - 'data:image/jpeg;base64,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'; + auth.currentUser?.photoURL ?? '/images/defaultProfile.png'; + const { isLogin } = useCheckLogin(); + const router = useRouter(); const createdAt = Date.now(); @@ -19,29 +23,34 @@ export default function CommentWrite({ path }) { }; const addComment = async () => { - if (commentText.trim().length == 0) { - return; + if (isLogin) { + if (commentText.trim().length == 0) { + return; + } + + const collectionRef = collection(dbService, path); + const payload = { + commentText, + userNickName, + userProfile, + createdAt, + userId: auth.currentUser?.uid, + }; + await addDoc(collectionRef, payload); + setCommnetText(''); + } else { + router.push('/auth/sign-in'); } - const collectionRef = collection(dbService, path); - const payload = { - commentText, - userNickName, - userProfile, - createdAt, - timestamp: serverTimestamp(), - }; - await addDoc(collectionRef, payload); - setCommnetText(''); }; return ( - +

{userNickName}

- + Date: Wed, 22 Feb 2023 10:26:45 +0900 Subject: [PATCH 2/6] =?UTF-8?q?=F0=9F=93=9D=20Docs:=20detail=20view=20url?= =?UTF-8?q?=20=EB=B3=80=EA=B2=BD=20#6=20#20?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/PostListCard.tsx | 2 +- pages/{post-list => detail}/[id].tsx | 1 + 2 files changed, 2 insertions(+), 1 deletion(-) rename pages/{post-list => detail}/[id].tsx (89%) diff --git a/components/PostListCard.tsx b/components/PostListCard.tsx index 4246bd0..ed70f36 100644 --- a/components/PostListCard.tsx +++ b/components/PostListCard.tsx @@ -35,7 +35,7 @@ const PostListCard = ({ post, currentUserId }: PostListCardProps) => { }; return ( - +
Date: Wed, 22 Feb 2023 10:27:42 +0900 Subject: [PATCH 3/6] =?UTF-8?q?=F0=9F=92=84=20Design:=20=EC=BB=A4=EC=8A=A4?= =?UTF-8?q?=ED=85=80=EB=B2=84=ED=8A=BC=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/ui/CustomButton.tsx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/components/ui/CustomButton.tsx b/components/ui/CustomButton.tsx index 4587b4d..8021b44 100644 --- a/components/ui/CustomButton.tsx +++ b/components/ui/CustomButton.tsx @@ -10,7 +10,7 @@ interface CustomButtonProps { paddingColumns?: string; fontColor?: string; onClick?: any; - borderColor?:string + border?: string; } export default function CustomButton({ @@ -21,7 +21,7 @@ export default function CustomButton({ paddingColumns, fontColor, onClick, - borderColor + border, }: CustomButtonProps) { return ( ); @@ -45,5 +45,5 @@ const Button = styled.button` background: ${(props) => props.backgoundColor}; border-radius: 0.625rem; cursor: pointer; - border:1px solid ${props=>props.borderColor} + border: ${(props) => props.border}; `; From c9f9fc1e6c1f79885378a28170a85a8aadc89586 Mon Sep 17 00:00:00 2001 From: tyoung Date: Wed, 22 Feb 2023 13:11:02 +0900 Subject: [PATCH 4/6] =?UTF-8?q?=E2=9C=A8=20Feat:=C2=A0sns=20=EA=B3=B5?= =?UTF-8?q?=EC=9C=A0=ED=95=98=EA=B8=B0=20=EB=B2=84=ED=8A=BC=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80=20#22=20#?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/Hooks/useGetKakao.tsx | 71 ++++++++++++++++++++ components/detail/DetailViewText.tsx | 95 +++++++++++++++++++++++---- public/images/snsWrapper.png | Bin 0 -> 2468 bytes public/images/sprite_icon.png | Bin 5549 -> 5743 bytes 4 files changed, 153 insertions(+), 13 deletions(-) create mode 100644 components/Hooks/useGetKakao.tsx create mode 100644 public/images/snsWrapper.png diff --git a/components/Hooks/useGetKakao.tsx b/components/Hooks/useGetKakao.tsx new file mode 100644 index 0000000..1687197 --- /dev/null +++ b/components/Hooks/useGetKakao.tsx @@ -0,0 +1,71 @@ +// hooks.js +import { useState, useEffect } from 'react'; + +function useGetKakao(src) { + // Keep track of script status ("idle", "loading", "ready", "error") + const [status, setStatus] = useState(src ? 'loading' : 'idle'); + + useEffect( + () => { + // Allow falsy src value if waiting on other data needed for + // constructing the script URL passed to this hook. + if (!src) { + setStatus('idle'); + return; + } + + // Fetch existing script element by src + // It may have been added by another intance of this hook + let script = document.querySelector(`script[src="${src}"]`); + + if (!script) { + // Create script + script = document.createElement('script'); + script.src = src; + script.async = true; + script.setAttribute('data-status', 'loading'); + // Add script to document body + document.body.appendChild(script); + + // Store status in attribute on script + // This can be read by other instances of this hook + const setAttributeFromEvent = (event) => { + script.setAttribute( + 'data-status', + event.type === 'load' ? 'ready' : 'error', + ); + }; + + script.addEventListener('load', setAttributeFromEvent); + script.addEventListener('error', setAttributeFromEvent); + } else { + // Grab existing script status from attribute and set to state. + setStatus(script.getAttribute('data-status')); + } + + // Script event handler to update status in state + // Note: Even if the script already exists we still need to add + // event handlers to update the state for *this* hook instance. + const setStateFromEvent = (event) => { + setStatus(event.type === 'load' ? 'ready' : 'error'); + }; + + // Add event listeners + script.addEventListener('load', setStateFromEvent); + script.addEventListener('error', setStateFromEvent); + + // Remove event listeners on cleanup + return () => { + if (script) { + script.removeEventListener('load', setStateFromEvent); + script.removeEventListener('error', setStateFromEvent); + } + }; + }, + [src], // Only re-run effect if script src changes + ); + + return status; +} + +export { useGetKakao }; diff --git a/components/detail/DetailViewText.tsx b/components/detail/DetailViewText.tsx index 7de4d4d..e51c8a6 100644 --- a/components/detail/DetailViewText.tsx +++ b/components/detail/DetailViewText.tsx @@ -1,9 +1,34 @@ -import React from 'react'; +import React, { useEffect, useState } from 'react'; +import { FacebookShareButton } from 'react-share'; import styled from 'styled-components'; - +import { CopyToClipboard } from 'react-copy-to-clipboard'; +import { useGetKakao } from '../Hooks/useGetKakao'; type Props = {}; export default function DetailViewText({ detail }: Props) { + const [socialSharing, setSocialSharing] = useState(false); + + const clickToShare = () => { + setSocialSharing((prev) => !prev); + }; + const currentUrl = window.location.href; + + const status = useGetKakao('https://developers.kakao.com/sdk/js/kakao.js'); + useEffect(() => { + if (status === 'ready' && window.Kakao) { + if (!window.Kakao.isInitialized()) { + // 두번째 step 에서 가져온 javascript key 를 이용하여 initialize + window.Kakao.init('a81b3af974c17b5fc4088249f10e7f77'); + } + } + }, [status]); + + const handleKakaoButton = () => { + window.Kakao.Link.sendScrap({ + requestUrl: currentUrl, + }); + }; + return ( <> @@ -11,12 +36,22 @@ export default function DetailViewText({ detail }: Props) {
{detail.postText}
 -
공유
-
    -
  • 1
    • -
  • 2
    • -
  • 3
    • -
+
+ 공유 +
+ {socialSharing && ( +
    +
  • + kakao +
    • + +
  • facebook
    • +     + +
  • link
    • +     +
+ )} ); @@ -43,16 +78,50 @@ const ShareLayout = styled.div` display: flex; justify-content: flex-end; position: relative; + padding: 1rem; .share { - padding: 20px; - cursor: point; + display: block; + width: 28px; + height: 28px; + background: url('/images/sprite_icon.png'); + background-position: -108px 0; + cursor: pointer; + text-indent: -999999%; } + .sns { position: absolute; - right: 0; - bottom: 0; - + right: -4%; + bottom: -3.125rem; display: flex; + justify-content: space-between; + align-items: center; + padding: 0.625rem; + width: 7.75rem; + height: 3.5rem; + background: url('/images/snsWrapper.png') no-repeat center; + border-radius: 0.625rem; + + .sns-icon { + display: flex; + align-items: center; + gap: 0.625rem; + width: 1.875rem; + height: 1.875rem; + text-indent: -999999%; + background: url('/images/sprite_icon.png') no-repeat center; + cursor: pointer; + + &.kakao { + background-position: -2.125rem 0.0625rem; + } + &.facebook { + background-position: 0 0.0625rem; + } + &.link { + background-position: -72px 0.0625rem; + } + } } `; diff --git a/public/images/snsWrapper.png b/public/images/snsWrapper.png new file mode 100644 index 0000000000000000000000000000000000000000..73ed663c93c0020ee45431947223d1e4cccd6b31 GIT binary patch literal 2468 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 MNkvXXt^-0~f*8q~?f?J) From 2dd0bbec7defea619eee4f4881d0032b18747ded Mon Sep 17 00:00:00 2001 From: tyoung Date: Wed, 22 Feb 2023 15:40:49 +0900 Subject: [PATCH 5/6] =?UTF-8?q?=E2=9C=A8Feat:=C2=A0=EA=B3=B5=EC=9C=A0?= =?UTF-8?q?=ED=95=98=EA=B8=B0,=20=ED=8C=94=EB=A1=9C=EC=9A=B0=20=EC=A0=80?= =?UTF-8?q?=EC=9E=A5=20=EB=94=94=ED=85=8C=EC=9D=BC=20=EB=B7=B0=ED=8E=98?= =?UTF-8?q?=EC=9D=B4=EC=A7=80=20/=20=EC=9C=A0=EC=A0=80=EB=B0=98=EC=9D=91?= =?UTF-8?q?=20#21?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/Hooks/useGetReaction.tsx | 13 ++++-- components/detail/DetailViewUserInfor.tsx | 53 +++++++++++------------ pages/auth/sign-in/index.tsx | 13 +++--- 3 files changed, 43 insertions(+), 36 deletions(-) diff --git a/components/Hooks/useGetReaction.tsx b/components/Hooks/useGetReaction.tsx index f8c4090..742230b 100644 --- a/components/Hooks/useGetReaction.tsx +++ b/components/Hooks/useGetReaction.tsx @@ -4,16 +4,23 @@ import React, { useEffect, useState } from 'react'; export default function useGetReaction() { const [userInfor, setUserInfor] = useState([]); + const [follow, setFollow] = useState(); + const [scrap, setScrap] = useState(); useEffect(() => { const collectionRef = collection(dbService, 'userInfo'); onSnapshot(collectionRef, (snapshot: any) => setUserInfor( - snapshot.docs.map((doc: any) => ({ ...doc.data(), id: doc.id })), + snapshot.docs?.map((doc: any) => ({ ...doc.data(), id: doc.id })), ), ); - }, [userInfor]); - return { userInfor }; + userInfor?.map( + (item) => auth.currentUser?.uid == item.id && setFollow(item.following)|| auth.currentUser?.uid == item.id && setScrap(item.scraps), + ); + }, [auth.currentUser?.uid, follow,scrap]); + // userInfor.map((item) => setGetUser(item)); + // console.log('getUser',getUser) + return { userInfor, follow ,scrap}; } diff --git a/components/detail/DetailViewUserInfor.tsx b/components/detail/DetailViewUserInfor.tsx index f47f85b..270c228 100644 --- a/components/detail/DetailViewUserInfor.tsx +++ b/components/detail/DetailViewUserInfor.tsx @@ -9,38 +9,36 @@ import { useRouter } from 'next/router'; export default function DetailViewUserInfor({ detail }) { const router = useRouter(); - const { userProfile, userId, jobCategory, likesCount, id, likes, scrap } = - detail; + const { userProfile, userId, jobCategory, likesCount, id, likes } = detail; const { isLogin, isUserObj, logOut } = useCheckLogin(); const like = likes.includes(isUserObj) ? true : false; const { userInfor } = useGetReaction(); - const [followings, setFollowings] = useState(); - const [scraps, setScraps] = useState(); - const follow = !!followings?.includes(userId) ? true : false; - const scraping = !!scraps?.includes(id) ? true : false; + const [following, setFollowing] = useState<[] | undefined>(); + const [scraps, setScraps] = useState<[] | undefined>(); + const scraper = scraps?.includes(id) ? true : false; + const follower = following?.includes(userId) ? true : false; useEffect(() => { userInfor?.map( (item) => - (auth.currentUser?.uid === item.id && setFollowings(item.followings)) || - (auth.currentUser?.uid === item.id && setScraps(item.scraps)), + (auth.currentUser?.uid === item.id && setFollowing(item.following)) || + (auth.currentUser?.uid == item.id && setScraps(item.scraps)), ); - }, [userInfor]); + }, [userInfor, following, scraps]); - const onclickScrap = async (num) => { + const onclickScrap = async (num: any) => { if (isLogin) { - if (!!scraps.includes(id)) { - scraps.pop(id); + if (scraps?.includes(id)) { + scraps?.pop(id); } else { - scraps.push(id); + scraps?.push(id); } - - const docRef = doc(dbService, 'userInfo', num); - const payload = { scraps }; - await updateDoc(docRef, payload); } else { router.push('/auth/sign-in'); } + const docRef = doc(dbService, 'userInfo', num); + const payload = { scraps }; + await updateDoc(docRef, payload); }; const onclickLove = async (num: any) => { @@ -63,18 +61,17 @@ export default function DetailViewUserInfor({ detail }) { const onclickFollow = async (num: any) => { if (isLogin) { - if (!!followings.includes(userId)) { - followings.pop(userId); + if (following?.includes(userId)) { + following?.pop(userId); } else { - followings.push(userId); + following?.push(userId); } - - const docRef = doc(dbService, 'userInfo', num); - const payload = { followings }; - await updateDoc(docRef, payload); } else { router.push('/auth/sign-in'); } + const docRef = doc(dbService, 'userInfo', num); + const payload = { following }; + await updateDoc(docRef, payload); }; return ( @@ -86,10 +83,9 @@ export default function DetailViewUserInfor({ detail }) {

{jobCategory}

-
{likesCount} +
- {!follow ? ( + {!follower ? ( ) : ( { console.log(e.target.checked); setStayLoginIsChecked(e.target.checked); @@ -153,8 +156,8 @@ export default function SignIn({}: Props) { const collectionRef = doc(dbService, `userInfo/${auth.currentUser?.uid}`); const payload = { userId: auth.currentUser?.uid, - scraps: [], - following: [], + scraps: [...scrap], + following: [...follow], introduction: '안녕하세요!', }; @@ -178,8 +181,8 @@ export default function SignIn({}: Props) { const collectionRef = doc(dbService, `userInfo/${auth.currentUser?.uid}`); const payload = { userId: auth.currentUser?.uid, - scraps: [], - following: [], + scraps: [...scrap], + following: [...follow], introduction: '안녕하세요!', }; From a73a1f1f4f32bb0f9485f219d864c2358a28c654 Mon Sep 17 00:00:00 2001 From: tyoung Date: Wed, 22 Feb 2023 15:45:27 +0900 Subject: [PATCH 6/6] =?UTF-8?q?=F0=9F=92=84Design:=20=EB=A0=88=EC=9D=B4?= =?UTF-8?q?=EC=95=84=EC=9B=83=20=EB=B3=80=EA=B2=BD=20#20?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/detail/DetailView.tsx | 34 ++++++++++++--- components/detail/DetailViewProducts.tsx | 54 +++++++++++++++++------- components/detail/DetailViewSlide.tsx | 2 +- package.json | 2 + 4 files changed, 69 insertions(+), 23 deletions(-) diff --git a/components/detail/DetailView.tsx b/components/detail/DetailView.tsx index a6e2a53..0e31327 100644 --- a/components/detail/DetailView.tsx +++ b/components/detail/DetailView.tsx @@ -21,15 +21,19 @@ export default function DetailView({}) { (detail) => id == detail.id && ( -
+
- - - -
-
-
+ +
+ + + +
+
+ +
+ ), )} @@ -38,15 +42,31 @@ export default function DetailView({}) { } const DetailViewLayout = styled.div` + max-width: 75rem; + width: 100%; + margin: 9.25rem auto; + + .detail-header { + width: 100%; + max-width: 55.875rem; + } +`; + +const DetailViewDiv = styled.div` display: flex; justify-content: space-between; + align-items: flex-start; gap: 1.5rem; .detail-view { width: 100%; max-width: 55.875rem; } + .detail-product { width: calc(100% - 55.875rem); + background-color: #f1f3f5; + padding: 1.25rem; + border-radius: 0.625rem; } `; diff --git a/components/detail/DetailViewProducts.tsx b/components/detail/DetailViewProducts.tsx index 3626765..0adf13b 100644 --- a/components/detail/DetailViewProducts.tsx +++ b/components/detail/DetailViewProducts.tsx @@ -7,30 +7,54 @@ export default function DetailViewProducts({ detail }: Props) { const { products } = detail; return ( -

사용한 제품

-

{products?.length}개의 제품이 사용됐어요.

- - {products?.map((product) => ( -
- {product.title} -

{product.title}

-

{product.hashTag}

-
- ))} +

사용한 제품

+

{products?.length}개의 제품이 사용됐어요.

+ +
+ {products?.map((product) => ( +
+ {product.title} +

{product.title}

+

{product.hashTag}

+
+ ))} +
); } const DetailViewProductsLayout = styled.div` + .title { + font-size: 1.5rem; + font-weight: 700; + margin-bottom: 0.25rem; + } + + .description { + font-size: 0.75rem; + color: #868e96; + } + .product-wrap { + max-height: 66.875rem; + min-height: 66.875rem; + overflow-y: auto; + padding: 0 0.625rem 0 0; + } + .product-list { display: flex; flex-direction: column; align-items: center; justify-content: center; - padding: 10px; - margin: 10px 0 1rem; - border: 1px solid #868e96; - border-radius: 10px; + padding: 0.625rem; + margin: 0.625rem 0 1rem; + border: 0.0625rem solid #868e96; + border-radius: 0.625rem; + background: #fff; text-align: center; .product-img { @@ -39,7 +63,7 @@ const DetailViewProductsLayout = styled.div` } .product-title { - margin: 10px 0 2px; + margin: 0.625rem 0 0.125rem; font-weight: 700; } } diff --git a/components/detail/DetailViewSlide.tsx b/components/detail/DetailViewSlide.tsx index da8d9dc..60eef8d 100644 --- a/components/detail/DetailViewSlide.tsx +++ b/components/detail/DetailViewSlide.tsx @@ -29,7 +29,7 @@ export default function DetailViewSlide({ detail }) { } const DetailViewSlideLayout = styled.div` - border-radius: 10px; + border-radius: 0.625rem; overflow: hidden; .post-img { diff --git a/package.json b/package.json index 9161484..97744f3 100644 --- a/package.json +++ b/package.json @@ -20,11 +20,13 @@ "firebase": "^9.17.1", "next": "13.1.6", "react": "18.2.0", + "react-copy-to-clipboard": "^5.1.0", "react-dom": "18.2.0", "react-firebase-hooks": "^5.1.1", "react-icons": "^4.7.1", "react-query": "^3.39.3", "react-quill": "^2.0.0", + "react-share": "^4.4.1", "styled-components": "^5.3.6", "styled-reset": "^4.4.5", "swiper": "^9.0.5",