From 6e2d94946089aa38f85e79c324cf886ec610574c Mon Sep 17 00:00:00 2001 From: Hooni07 Date: Wed, 6 Mar 2024 10:38:05 +0900 Subject: [PATCH 1/2] =?UTF-8?q?Chore:=20Card=EC=97=90=20=EB=A7=88=EC=9A=B0?= =?UTF-8?q?=EC=8A=A4=20=EC=98=AC=EB=A6=B4=20=EA=B2=BD=EC=9A=B0=20cursor?= =?UTF-8?q?=EA=B0=80=20pointer=EB=A1=9C=20=EC=84=A4=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/post/Card.jsx | 4 +++- src/pages/PostId.jsx | 33 +++++++++++++++++++++++++++++++-- 2 files changed, 34 insertions(+), 3 deletions(-) diff --git a/src/components/post/Card.jsx b/src/components/post/Card.jsx index 32ba86d..046dc04 100644 --- a/src/components/post/Card.jsx +++ b/src/components/post/Card.jsx @@ -23,6 +23,8 @@ export const CardContentWrapper = styled.div` background: var(--white); box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.08); + cursor: pointer; + @media (max-width: 1023px) { width: 50%; } @@ -104,7 +106,7 @@ const CardContentText = styled.div` display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; - overflow-wrap:break-word; + overflow-wrap: break-word; overflow: hidden; text-overflow: ellipsis; color: var(--gray600); diff --git a/src/pages/PostId.jsx b/src/pages/PostId.jsx index b57f747..2a33e95 100644 --- a/src/pages/PostId.jsx +++ b/src/pages/PostId.jsx @@ -1,12 +1,15 @@ import styled from 'styled-components'; import { useNavigate, useParams } from 'react-router-dom'; -import { useEffect, useState } from 'react'; +import { useEffect, useRef, useState } from 'react'; import Header from '../components/common/Header'; import SubHeader from '../components/post/SubHeader'; import { CardContentWrapper } from '../components/post/Card'; import { getAllMessages, getRecipientData } from '../api/GetApi'; import EditButton from '../components/common/Buttons/EditButton'; import CardItems from '../components/post/card/CardItems'; +import ModalPortal from '../components/modal/ModalPortal'; +// import CardModal from '../components/modal/CardModal'; +import KakaoModal from '../components/modal/KakaoModal'; export const HeaderWrapper = styled.div` position: sticky; @@ -89,6 +92,8 @@ function PostId() { const { id } = useParams(); const [data, setData] = useState({}); const [messages, setMessages] = useState(null); + const [isCardOpen, setIsCardOpen] = useState(true); + const ref = useRef(); const handleIdData = async () => { try { @@ -113,6 +118,25 @@ function PostId() { handleMessages(id); }, []); + const handleOutsideClick = (e) => { + if (isCardOpen && (!ref.current || !ref.current.contains(e.target))) { + setIsCardOpen(false); + } + }; + + useEffect(() => { + window.addEventListener('click', handleOutsideClick); + return () => { + window.removeEventListener('click', handleOutsideClick); + }; + }, [isCardOpen]); + + const handleClickCard = (e) => { + e.preventDefault(); + setIsCardOpen(!isCardOpen); + console.log(isCardOpen); + }; + return ( - + + {isCardOpen && ( + + + + )} ); From c5061efc4224a8189d04256838d7a5844e7dae57 Mon Sep 17 00:00:00 2001 From: Hooni07 Date: Wed, 6 Mar 2024 17:49:56 +0900 Subject: [PATCH 2/2] =?UTF-8?q?Feat:=20Card=20=EC=9A=94=EC=86=8C=EC=97=90?= =?UTF-8?q?=20=EB=8C=80=ED=95=B4=20modal=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/modal/CardModal.jsx | 171 +++++++++++++++++++++++++++++ src/components/post/Card.jsx | 43 ++++++-- src/pages/PostId.jsx | 33 +----- 3 files changed, 209 insertions(+), 38 deletions(-) create mode 100644 src/components/modal/CardModal.jsx diff --git a/src/components/modal/CardModal.jsx b/src/components/modal/CardModal.jsx new file mode 100644 index 0000000..652629b --- /dev/null +++ b/src/components/modal/CardModal.jsx @@ -0,0 +1,171 @@ +import styled, { css } from 'styled-components'; +import ModalWindow from '../common/ModalWindow'; + +const Text = css` + font-family: Pretendard; + font-style: normal; +`; + +const userStateColors = { + 가족: { background: 'var(--green100)', color: 'var(--green500)' }, + 동료: { background: 'var(--purple100)', color: 'var(--purple600)' }, + 지인: { background: 'var(--orange100)', color: 'var(--orange500)' }, + 친구: { background: 'var(--blue100)', color: 'var(--blue500)' }, +}; + +function CardModal({ + src, + name, + cardFont, + userState, + cardContent, + cardCreatedAt, +}) { + const createdDays = new Date(cardCreatedAt); + const fontClass = { + 'Noto Sans': 'noto-sans', + Pretendard: 'pretendard', + 나눔명조: 'nanum-gothic', + '나눔손글씨 손편지체': 'nanum-myeongjo', + }; + + const font = fontClass[cardFont] || ''; + + const Card = ( + + + + + + From. {name} + {userState} + + + {`${createdDays.getFullYear()}. ${ + createdDays.getMonth() + 1 + }. ${createdDays.getDate()}`} + + + + + + + + + + ); + + return ; +} + +const CardContent = styled.div` + margin: 28px 24px 24px; +`; + +const UserInfo = styled.div` + display: flex; + gap: 14px; +`; + +const UserPicture = styled.img` + display: flex; + width: 56px; + height: 56px; + align-items: center; + + border-radius: 100px; + border: 1px solid var(--gray200); + background: var(--white); +`; + +const UserText = styled.div` + ${Text} + display: block; + position: relative; + color: #000; + font-size: 20px; + font-weight: 400; + line-height: 24px; +`; + +const UserName = styled.span` + font-weight: 700; +`; + +const UserState = styled.div` + display: flex; + padding: 1.5px 8px 0; + margin-top: 6px; + width: 41px; + height: 20px; + text-align: center; + align-items: center; + + border-radius: 4px; + background: ${({ $state }) => + userStateColors[$state] + ? userStateColors[$state].background + : 'defaultColor'}; + color: ${({ $state }) => + userStateColors[$state] ? userStateColors[$state].color : 'defaultColor'}; + + font-size: 14px; + font-weight: 400; + line-height: 20px; + letter-spacing: -0.07px; +`; + +const SplitHorizontal = styled.div` + width: 100%; + height: 1px; + background: var(--gray200); + margin: 15px auto; +`; + +const CardContentTextContainer = styled.div` + height: 112px; + width: 312px; +`; + +const CardContentText = styled.div` + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 4; + overflow-wrap: break-word; + overflow: hidden; + text-overflow: ellipsis; + color: var(--gray600); + width: 100%; + /* max-height: 112px; */ + /* max-width: 312px; */ + + font-size: 18px; + font-weight: 400; + line-height: 28px; + letter-spacing: -0.18px; + + flex-wrap: wrap; +`; + +const CardCreatedAt = styled.div` + ${Text} + position: absolute; + left: 24px; + bottom: 24px; + + color: var(--gray400); + font-size: 12px; + font-weight: 400; + line-height: 18px; + letter-spacing: -0.06px; +`; +const ShareContainer = styled.div` + position: relative; + width: 100%; + height: 100%; +`; + +export default CardModal; diff --git a/src/components/post/Card.jsx b/src/components/post/Card.jsx index 046dc04..44a491d 100644 --- a/src/components/post/Card.jsx +++ b/src/components/post/Card.jsx @@ -1,5 +1,8 @@ import styled, { css } from 'styled-components'; +import { useRef, useEffect, useState } from 'react'; import DeleteMessageButton from '../common/Buttons/DeleteMessageButton'; +import ModalPortal from '../modal/ModalPortal'; +import CardModal from '../modal/CardModal'; const Text = css` font-family: Pretendard; @@ -143,15 +146,29 @@ function Card({ cardContent = '코로나가 또다시 기승을 부리는 요즘이네요. 건강, 체력 모두 조심 또 조심하세요!', cardCreatedAt = '2023.07.08', }) { - // const [cardFont, setCardFonts] = useState(''); + const [isCardOpen, setIsCardOpen] = useState(false); + const ref = useRef(); - const createdDays = new Date(cardCreatedAt); + const handleOutsideClick = (e) => { + if (isCardOpen && (!ref.current || !ref.current.contains(e.target))) { + setIsCardOpen(false); + } + }; - // const handleCardFontChange = (fonts) => { - // setCardFonts(fonts); + useEffect(() => { + window.addEventListener('click', handleOutsideClick); + return () => { + window.removeEventListener('click', handleOutsideClick); + }; + }, [isCardOpen]); + + const handleClickCard = (e) => { + e.preventDefault(); + console.log(isCardOpen); + setIsCardOpen(!isCardOpen); + }; - // console.log(cardFont); - // }; + const createdDays = new Date(cardCreatedAt); const fontClass = { 'Noto Sans': 'noto-sans', @@ -163,7 +180,7 @@ function Card({ const font = fontClass[cardFont] || ''; return ( - + @@ -187,6 +204,18 @@ function Card({ }. ${createdDays.getDate()}`} + {isCardOpen && ( + + + + )} ); } diff --git a/src/pages/PostId.jsx b/src/pages/PostId.jsx index 2a33e95..b57f747 100644 --- a/src/pages/PostId.jsx +++ b/src/pages/PostId.jsx @@ -1,15 +1,12 @@ import styled from 'styled-components'; import { useNavigate, useParams } from 'react-router-dom'; -import { useEffect, useRef, useState } from 'react'; +import { useEffect, useState } from 'react'; import Header from '../components/common/Header'; import SubHeader from '../components/post/SubHeader'; import { CardContentWrapper } from '../components/post/Card'; import { getAllMessages, getRecipientData } from '../api/GetApi'; import EditButton from '../components/common/Buttons/EditButton'; import CardItems from '../components/post/card/CardItems'; -import ModalPortal from '../components/modal/ModalPortal'; -// import CardModal from '../components/modal/CardModal'; -import KakaoModal from '../components/modal/KakaoModal'; export const HeaderWrapper = styled.div` position: sticky; @@ -92,8 +89,6 @@ function PostId() { const { id } = useParams(); const [data, setData] = useState({}); const [messages, setMessages] = useState(null); - const [isCardOpen, setIsCardOpen] = useState(true); - const ref = useRef(); const handleIdData = async () => { try { @@ -118,25 +113,6 @@ function PostId() { handleMessages(id); }, []); - const handleOutsideClick = (e) => { - if (isCardOpen && (!ref.current || !ref.current.contains(e.target))) { - setIsCardOpen(false); - } - }; - - useEffect(() => { - window.addEventListener('click', handleOutsideClick); - return () => { - window.removeEventListener('click', handleOutsideClick); - }; - }, [isCardOpen]); - - const handleClickCard = (e) => { - e.preventDefault(); - setIsCardOpen(!isCardOpen); - console.log(isCardOpen); - }; - return ( - - {isCardOpen && ( - - - - )} + );