Skip to content

Commit

Permalink
Merge pull request #55 from young-02/Feat/detailView
Browse files Browse the repository at this point in the history
detail-view  댓글,유저반응,공유하기,커스텀 버튼 변경
  • Loading branch information
Hah-nna authored Feb 22, 2023
2 parents 70e9497 + e0041c3 commit dbe9236
Show file tree
Hide file tree
Showing 16 changed files with 392 additions and 149 deletions.
71 changes: 71 additions & 0 deletions components/Hooks/useGetKakao.tsx
Original file line number Diff line number Diff line change
@@ -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 };
13 changes: 10 additions & 3 deletions components/Hooks/useGetReaction.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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};
}
1 change: 1 addition & 0 deletions components/PostListCard.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -59,6 +59,7 @@ const PostListCard = ({ post, currentUserId }: PostListCardProps) => {
const nowDate = detailDate(post.createdAt);

return (

<PostListCardLayout key={post.id}>
<Link href={`/detail/${post.id}`}>
<div
Expand Down
34 changes: 27 additions & 7 deletions components/detail/DetailView.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -21,15 +21,19 @@ export default function DetailView({}) {
(detail) =>
id == detail.id && (
<DetailViewLayout key={detail.id}>
<div className="detail-view">
<div className="detail-header">
<DetailViewUserInfor detail={detail} />
<DetailViewSlide detail={detail} />
<DetailViewText detail={detail} />
<Comment path={`postData/${id}/comments`} />
</div>
<div className="detail-product">
<DetailViewProducts detail={detail} />
</div>
<DetailViewDiv>
<div className="detail-view">
<DetailViewSlide detail={detail} />
<DetailViewText detail={detail} />
<Comment path={`postData/${id}/comments`} />
</div>
<div className="detail-product">
<DetailViewProducts detail={detail} />
</div>
</DetailViewDiv>
</DetailViewLayout>
),
)}
Expand All @@ -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;
}
`;
54 changes: 39 additions & 15 deletions components/detail/DetailViewProducts.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -7,30 +7,54 @@ export default function DetailViewProducts({ detail }: Props) {
const { products } = detail;
return (
<DetailViewProductsLayout>
<h3>사용한 제품</h3>
<p>{products?.length}개의 제품이 사용됐어요.</p>

{products?.map((product) => (
<div className="product-list" key={product.title}>
<img className="product-img" src={product.img} alt={product.title} />
<p className="product-title">{product.title}</p>
<p className="product-hasTag">{product.hashTag}</p>
</div>
))}
<h3 className="title">사용한 제품</h3>
<p className="description">{products?.length}개의 제품이 사용됐어요.</p>

<div className="product-wrap">
{products?.map((product) => (
<div className="product-list" key={product.title}>
<img
className="product-img"
src={product.img}
alt={product.title}
/>
<p className="product-title">{product.title}</p>
<p className="product-hasTag">{product.hashTag}</p>
</div>
))}
</div>
</DetailViewProductsLayout>
);
}

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 {
Expand All @@ -39,7 +63,7 @@ const DetailViewProductsLayout = styled.div`
}
.product-title {
margin: 10px 0 2px;
margin: 0.625rem 0 0.125rem;
font-weight: 700;
}
}
Expand Down
2 changes: 1 addition & 1 deletion components/detail/DetailViewSlide.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ export default function DetailViewSlide({ detail }) {
}

const DetailViewSlideLayout = styled.div`
border-radius: 10px;
border-radius: 0.625rem;
overflow: hidden;
.post-img {
Expand Down
95 changes: 82 additions & 13 deletions components/detail/DetailViewText.tsx
Original file line number Diff line number Diff line change
@@ -1,22 +1,57 @@
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 (
<>
<DetailViewTextLayout>
<div className="detail-view-title">{detail.postTitle}</div>
<div className="detail-view-text">{detail.postText}</div>
</DetailViewTextLayout>
<ShareLayout>
<div className="share">공유</div>
<ul className="sns">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<div className="share" onClick={clickToShare}>
공유
</div>
{socialSharing && (
<ul className="sns">
<li className="sns-icon kakao" onClick={handleKakaoButton}>
kakao
</li>
<FacebookShareButton url={currentUrl}>
<li className="sns-icon facebook">facebook</li>
</FacebookShareButton>
<CopyToClipboard text={currentUrl}>
<li className="sns-icon link">link</li>
</CopyToClipboard>
</ul>
)}
</ShareLayout>
</>
);
Expand All @@ -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;
}
}
}
`;
Loading

0 comments on commit dbe9236

Please sign in to comment.