From 8bb74ce9c8990922dc830cb07ad267d8956779e7 Mon Sep 17 00:00:00 2001 From: ramongEE Date: Wed, 19 Mar 2025 19:07:44 +0900 Subject: [PATCH 1/3] =?UTF-8?q?list=20=ED=8E=98=EC=9D=B4=EC=A7=80=20?= =?UTF-8?q?=ED=99=94=EB=A9=B4=20=EA=B5=AC=EC=A1=B0=20=EC=9E=AC=EC=88=98?= =?UTF-8?q?=EC=A0=95=EA=B3=BC=20=EB=B2=84=ED=8A=BC=20=EC=8A=A4=ED=81=AC?= =?UTF-8?q?=EB=A1=A4=20+=20=ED=95=9C=20=EC=A4=84=20=EC=8A=A4=ED=81=AC?= =?UTF-8?q?=EB=A1=A4=20=EC=99=84=EB=A3=8C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../rollingpaper/Card/CreateAtCardList.jsx | 158 +++++++------ .../rollingpaper/Card/PopularCardList.jsx | 222 +++++++----------- src/pages/RollingPaper/RollingPaperPage.jsx | 39 ++- .../RollingPaperList/RollingPaperListPage.jsx | 117 +++------ 4 files changed, 215 insertions(+), 321 deletions(-) diff --git a/src/components/domain/rollingpaper/Card/CreateAtCardList.jsx b/src/components/domain/rollingpaper/Card/CreateAtCardList.jsx index d7edd21..b1efa78 100644 --- a/src/components/domain/rollingpaper/Card/CreateAtCardList.jsx +++ b/src/components/domain/rollingpaper/Card/CreateAtCardList.jsx @@ -8,7 +8,10 @@ import { useNavigate } from "react-router-dom"; const BoneWrap = styled.div` width: 1160px; position: relative; - overflow: hidden; + overflow: visible; + @media (max-width: 1199px) { + width: 100% ; + } `; const BoneContainer = styled.div` @@ -17,6 +20,15 @@ const BoneContainer = styled.div` position: relative; width: 100%; overflow: hidden; + margin-bottom: 50px; + @media (max-width: 1199px) { + overflow: auto; + scrollbar-width: none; + -ms-overflow-style: none; + &::-webkit-scrollbar { + display: none; + } + } `; const Bone = styled.div` @@ -26,6 +38,7 @@ const Bone = styled.div` transition: transform 0.5s ease; transform: translateX(${(props) => props.scrollPosition}px); position: relative; + `; const BackgroundWrap = styled.div.withConfig({ @@ -34,9 +47,7 @@ const BackgroundWrap = styled.div.withConfig({ })` background-color: ${({ bgColor }) => bgColor || "#FFFFFF"}; background-image: ${({ backgroundImageURL }) => - backgroundImageURL - ? `linear-gradient(180deg, rgba(0, 0, 0, 0.54) 0%, rgba(0, 0, 0, 0.54) 100%), url(${backgroundImageURL})` - : "none"}; + backgroundImageURL ? `url(${backgroundImageURL})` : "none"}; background-size: cover; background-position: center; background-repeat: no-repeat; @@ -45,7 +56,7 @@ const BackgroundWrap = styled.div.withConfig({ padding: 30px 24px; border-radius: 1rem; color: ${({ backgroundImageURL }) => - backgroundImageURL ? "#ffffff" : "#000000"}; + backgroundImageURL ? "#ffffff;" : "#000000"}; position: relative; transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease; @@ -60,11 +71,10 @@ const BackgroundWrap = styled.div.withConfig({ transform: scale(0.98); box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.3); } - - @media (max-width: 767px) { - width:208px; - height:232px; - } + @media (max-width: 359px) { + width: 208px; + height: 232px; + } `; const TextDisplay = styled.div` display: flex; @@ -76,15 +86,8 @@ const ToText = styled.div` ${(props) => textStyle(24, 700)(props)} margin-bottom: 0.75rem; height: 2.625rem; - word-break: keep-all; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - - @media (max-width: 767px) { + @media (max-width: 359px) { ${(props) => textStyle(18, 700)(props)} - font-family: Pretendard; - line-height:28px; } `; @@ -121,14 +124,8 @@ const Avatar = styled.div` `; const WriteCount = styled.div` - ${(props) => textStyle(14, 700)(props)} - font-weight: 700; - - @media (max-width: 767px) { - ${(props) => textStyle(14, 700)(props)} - font-family: Pretendard; - line-height:20px; - } + font-size: 16px; + font-weight: 600; `; const WriteCountDisplay = styled.div` @@ -138,37 +135,43 @@ const WriteCountDisplay = styled.div` `; const WritedText = styled.div` - font-size: 16px; - font-weight: 600; - - @media (max-width: 767px) { - ${(props) => textStyle(14, 400)(props)} - font-family: Pretendard; - line-height:20px; + font-size: 14px; + @media (max-width: 359px) { + ${(props) => textStyle(14, 700)(props)} } `; const ArrowButtonDisplay = styled.div` - align-items: center; - z-index: 1; +align-items: center; + + transform: translateY(40%); + z-index: 2; + transform: matrix(1, 0, 0, 1, 0, 108); transition: opacity 0.3s ease; } `; const LeftArrowButtonDisplay = styled(ArrowButtonDisplay)` display: ${({ show }) => (show ? "block" : "none")}; position: absolute; - left: 22.5rem; - top: 64%; - transform: translateY(0%); + left: -24px; + top: 30%; + transform: translateY(42%); z-index: 1; + @media (max-width: 1199px) { + display: none; + } `; + const RightArrowButtonDisplay = styled(ArrowButtonDisplay)` - display: ${({ show }) => (show ? "block" : "none")}; + display: ${({ show }) => (show ? "block" : "none")}; position: absolute; - right: 22.5rem; - top: 64%; - transform: translateY(0%); + right: -24px; + top: 30%; + transform: translateY(42%); z-index: 1; + @media (max-width: 1199px) { + display: none; + } `; const TopEmojisContainer = styled.div` @@ -248,20 +251,17 @@ function CreateAtCardList() { "/14-8/recipients/" ); const sortedRecipients = response.data.results.sort( - (a, b) => b.createdAt - a.createdAt + (a, b) => b.createAt - a.createAt ); const updatedRecipients = sortedRecipients.map((recipient) => { - const topReactions = recipient.topReactions.slice(0, 3); const images = recipient.recentMessages?.slice(0, 3) || []; const imageUrls = images .map((msg) => msg.profileImageURL) .filter(Boolean); - return { ...recipient, - topReactions, - profileImages: imageUrls, // topReactions 3개만 가져오기 + profileImages: imageUrls, }; }); @@ -287,6 +287,7 @@ function CreateAtCardList() { }; const handleCardClick = (id) => { + // 클릭 시 해당 id로 페이지 이동 navigate(`/post/${id}`); }; @@ -298,14 +299,15 @@ function CreateAtCardList() { return ( <> - + + + - {selectedRecipients.map((recipient, index) => ( @@ -313,30 +315,32 @@ function CreateAtCardList() { key={index} bgColor={colorMap[recipient.backgroundColor] || "#FFFFFF"} backgroundImageURL={recipient.backgroundImageURL || null} - onClick={() => handleCardClick(recipient.id)} + onClick={() => handleCardClick(recipient.id)} // 클릭 시 해당 id로 이동 > - - - To. - {recipient.name === "Unknown" - ? "이름 없음" - : recipient.name} - - - - {recipient.profileImages?.slice(0, 3).map((url, i) => ( - - {`프로필 - - ))} - {recipient.messageCount > 3 && ( - +{recipient.messageCount - 3} - )} - - - {recipient.messageCount} - 명이 작성했어요! - + + + To. + + {recipient.name === "Unknown" + ? "이름 없음" + : recipient.name} + + + + {recipient.profileImages?.slice(0, 3).map((url, i) => ( + + {`프로필 + + ))} + {recipient.messageCount > 3 && ( + +{recipient.messageCount - 3} + )} + + + {recipient.messageCount} + 명이 작성했어요! + +
{/* 이모티콘 상위 3개 표시 */} @@ -349,13 +353,13 @@ function CreateAtCardList() { ))} - + +
))} - - + + + ); } -export default CreateAtCardList; +export default CreateAtCardList; \ No newline at end of file diff --git a/src/components/domain/rollingpaper/Card/PopularCardList.jsx b/src/components/domain/rollingpaper/Card/PopularCardList.jsx index fe60f9a..a1e3c2c 100644 --- a/src/components/domain/rollingpaper/Card/PopularCardList.jsx +++ b/src/components/domain/rollingpaper/Card/PopularCardList.jsx @@ -5,24 +5,33 @@ import { useEffect, useState } from "react"; import recipientsService from "../../../../api/services/recipientsService"; import ArrowButton from "../../../common/Button/ArrowButton"; import { useNavigate } from "react-router-dom"; - const BoneWrap = styled.div` width: 1160px; position: relative; - overflow: hidden; - + overflow: visible; + @media (max-width: 1199px) { + width: 100% ; + } + @media (max-width: 359px) { + padding-bottom: 50px; } `; const BoneContainer = styled.div` display: flex; - align-items: flex-start; - flex-direction: column; + align-items: center; position: relative; width: 100%; overflow: hidden; - - + margin-bottom: 50px; + @media (max-width: 1199px) { + overflow: auto; + scrollbar-width: none; + -ms-overflow-style: none; + &::-webkit-scrollbar { + display: none; + } + } `; const Bone = styled.div` @@ -32,7 +41,6 @@ const Bone = styled.div` transition: transform 0.5s ease; transform: translateX(${(props) => props.scrollPosition}px); position: relative; - `; @@ -42,9 +50,7 @@ const BackgroundWrap = styled.div.withConfig({ })` background-color: ${({ bgColor }) => bgColor || "#FFFFFF"}; background-image: ${({ backgroundImageURL }) => - backgroundImageURL - ? `linear-gradient(180deg, rgba(0, 0, 0, 0.54) 0%, rgba(0, 0, 0, 0.54) 100%), url(${backgroundImageURL})` - : "none"}; + backgroundImageURL ? `url(${backgroundImageURL})` : "none"}; background-size: cover; background-position: center; background-repeat: no-repeat; @@ -53,7 +59,7 @@ const BackgroundWrap = styled.div.withConfig({ padding: 30px 24px; border-radius: 1rem; color: ${({ backgroundImageURL }) => - backgroundImageURL ? "#ffffff" : "#000000"}; + backgroundImageURL ? "#ffffff;" : "#000000"}; position: relative; transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease; @@ -68,13 +74,11 @@ const BackgroundWrap = styled.div.withConfig({ transform: scale(0.98); box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.3); } - @media (max-width: 767px) { - width:208px; - height:232px; - } - + @media (max-width: 359px) { + width: 208px; + height: 232px; + } `; - const TextDisplay = styled.div` display: flex; height: 36px; @@ -85,15 +89,8 @@ const ToText = styled.div` ${(props) => textStyle(24, 700)(props)} margin-bottom: 0.75rem; height: 2.625rem; - word-break: keep-all; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - - @media (max-width: 767px) { + @media (max-width: 359px) { ${(props) => textStyle(18, 700)(props)} - font-family: Pretendard; - line-height:28px; } `; @@ -130,14 +127,8 @@ const Avatar = styled.div` `; const WriteCount = styled.div` - ${(props) => textStyle(14, 700)(props)} - font-weight: 700; - - @media (max-width: 767px) { - ${(props) => textStyle(14, 700)(props)} - font-family: Pretendard; - line-height:20px; - } + font-size: 16px; + font-weight: 600; `; const WriteCountDisplay = styled.div` @@ -147,39 +138,45 @@ const WriteCountDisplay = styled.div` `; const WritedText = styled.div` - font-size: 16px; - font-weight: 600; - - @media (max-width: 767px) { - ${(props) => textStyle(14, 400)(props)} - font-family: Pretendard; - line-height:20px; + font-size: 14px; + @media (max-width: 359px) { + ${(props) => textStyle(14, 700)(props)} } `; const ArrowButtonDisplay = styled.div` - align-items: center; - z-index: 1; +align-items: center; + + transform: translateY(40%); + z-index: 2; + transform: matrix(1, 0, 0, 1, 0, 108); transition: opacity 0.3s ease; } `; const LeftArrowButtonDisplay = styled(ArrowButtonDisplay)` display: ${({ show }) => (show ? "block" : "none")}; position: absolute; - left: 22.5rem; - top: 28%; - transform: translateY(0%); + left: -24px; + top: 30%; + transform: translateY(42%); z-index: 1; + @media (max-width: 1199px) { + display: none; + } `; const RightArrowButtonDisplay = styled(ArrowButtonDisplay)` - display: ${({ show }) => (show ? "block" : "none")}; + display: ${({ show }) => (show ? "block" : "none")}; position: absolute; - right: 22.5rem; - top: 28%; - transform: translateY(0%); + right: -24px; + top: 30%; + transform: translateY(42%); z-index: 1; + @media (max-width: 1199px) { + display: none; + } `; + const TopEmojisContainer = styled.div` display: flex; gap: 8px; @@ -206,7 +203,6 @@ const TopEmojiItem = styled.div` @media (max-width: 767px) { width: 46px; height: 32px; - } `; const EmojiWrapper = styled.div` @@ -242,9 +238,6 @@ const EmojiCount = styled.span` function PopularCardList() { const [selectedRecipients, setSelectedRecipients] = useState([]); const [scrollPosition, setScrollPosition] = useState(0); - const [isDragging, setIsDragging] = useState(false); - const [startPosition, setStartPosition] = useState(0); - const [dragOffset, setDragOffset] = useState(0); const cardWidth = 295; const navigate = useNavigate(); const colorMap = { @@ -254,8 +247,6 @@ function PopularCardList() { green: "#D0F5C3", }; - const isMobile = window.innerWidth <= 1199; // 1199px 이하인지 확인 - useEffect(() => { const loadRecipients = async () => { try { @@ -267,19 +258,17 @@ function PopularCardList() { ); const updatedRecipients = sortedRecipients.map((recipient) => { - const topReactions = recipient.topReactions.slice(0, 3); const images = recipient.recentMessages?.slice(0, 3) || []; const imageUrls = images .map((msg) => msg.profileImageURL) .filter(Boolean); - return { ...recipient, - topReactions, profileImages: imageUrls, }; }); + console.log(updatedRecipients); setSelectedRecipients(updatedRecipients); } catch (error) { console.error("받는 사람 데이터를 가져오지 못했습니다:", error); @@ -301,98 +290,63 @@ function PopularCardList() { }; const handleCardClick = (id) => { + // 클릭 시 해당 id로 페이지 이동 navigate(`/post/${id}`); }; + // 좌측 버튼 숨기기 조건 const showLeftButton = scrollPosition !== 0; + // 우측 버튼 숨기기 조건 const showRightButton = scrollPosition > -(selectedRecipients.length * cardWidth - 1160); - const handleMouseDown = (e) => { - if (!isMobile) return; // 모바일 화면에서만 드래그 시작 - - setIsDragging(true); - setStartPosition(e.clientX); - }; - - const handleMouseMove = (e) => { - if (!isDragging || !isMobile) return; - - const offset = e.clientX - startPosition; - setDragOffset(offset); // 드래그 이동 값 계산 - }; - - const handleMouseUp = () => { - if (!isDragging || !isMobile) return; - - setIsDragging(false); - setScrollPosition((prev) => prev + dragOffset); // 드래그 후 새로운 scrollPosition 설정 - setDragOffset(0); - }; - - useEffect(() => { - if (isMobile) { - document.addEventListener("mousedown", handleMouseDown); - document.addEventListener("mousemove", handleMouseMove); - document.addEventListener("mouseup", handleMouseUp); - - return () => { - document.removeEventListener("mousedown", handleMouseDown); - document.removeEventListener("mousemove", handleMouseMove); - document.removeEventListener("mouseup", handleMouseUp); - }; - } - }, [isMobile, isDragging, dragOffset, startPosition]); - return ( <> - + + + - - + {selectedRecipients.map((recipient, index) => ( handleCardClick(recipient.id)} + onClick={() => handleCardClick(recipient.id)} // 클릭 시 해당 id로 이동 > - - - To. - {recipient.name === "Unknown" - ? "이름 없음" - : recipient.name} - - - - {recipient.profileImages?.slice(0, 3).map((url, i) => ( - - {`프로필 - - ))} - {recipient.messageCount > 3 && ( - +{recipient.messageCount - 3} - )} - - - {recipient.messageCount} - 명이 작성했어요! - - + + + To. + + {recipient.name === "Unknown" + ? "이름 없음" + : recipient.name} + + + + {recipient.profileImages?.slice(0, 3).map((url, i) => ( + + {`프로필 + + ))} + {recipient.messageCount > 3 && ( + +{recipient.messageCount - 3} + )} + + + {recipient.messageCount} + 명이 작성했어요! + +
+ {/* 이모티콘 상위 3개 표시 */} {recipient.topReactions.map(({ emoji, count }, i) => ( @@ -402,21 +356,25 @@ function PopularCardList() { ))} - + +
))} - - + + + ); } -export default PopularCardList; +export default PopularCardList; \ No newline at end of file diff --git a/src/pages/RollingPaper/RollingPaperPage.jsx b/src/pages/RollingPaper/RollingPaperPage.jsx index daf85a6..45216fb 100644 --- a/src/pages/RollingPaper/RollingPaperPage.jsx +++ b/src/pages/RollingPaper/RollingPaperPage.jsx @@ -4,19 +4,18 @@ import InformationBar from "../../components/common/InformationBar/InformationBa import CardWrite from "../../components/domain/rollingpaper/Card/CardWrite"; import Card from "../../components/domain/rollingpaper/Card/Card"; import styled from "styled-components"; +import recipientsService from "../../api/services/recipientsService"; +import axios from "axios"; -import recipientsService from "../../api/services/recipientsService"; // get 요청 const CardContainer = styled.div` margin: auto; display: flex; - align-items: center; justify-content: center; - padding: 100px 24px; width: 100%; box-sizing: border-box; - @media (max-width: 768px) { + @media (max-width: 767px) { background-attachment: scroll; } `; @@ -25,17 +24,18 @@ const DivWrap = styled.div` display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; - - @media (max-width: 1248px) { - grid-template-columns: repeat(2, 1fr); - } - opacity: ${({ isLoaded }) => (isLoaded ? 1 : 0)}; transition: opacity 0.5s ease-in-out; + @media (max-width: 1199px) { + grid-template-columns: repeat(2, 1fr); + } + @media (max-width: 767px) { + grid-template-columns: 1fr; + } `; const BackgroundWrap = styled.div` - background-image: ${({ backgroundImageURL }) => + background-image: ${({ backgroundImageURL }) => backgroundImageURL ? `linear-gradient(180deg, rgba(0, 0, 0, 0.54) 0%, rgba(0, 0, 0, 0.54) 100%), url(${backgroundImageURL})` : "ffffff"}; @@ -45,8 +45,8 @@ const BackgroundWrap = styled.div` background-repeat: no-repeat; background-position: center top; background-attachment: fixed; - - @media (max-width: 768px) { + @media (max-width: 767px) { + background-attachment: scroll; grid-template-columns: 1fr; } `; @@ -58,12 +58,10 @@ const colorMap = { green: "#D0F5C3", }; - function RollingPaperDetailPage() { const { id } = useParams(); const [loading, setLoading] = useState(true); const [recipientData, setRecipientData] = useState({}); - const [messages, setMessages] = useState([]); const [nextUrl, setNextUrl] = useState(null); const [isLoaded, setIsLoaded] = useState(false); @@ -89,10 +87,7 @@ function RollingPaperDetailPage() { if (id) fetchInitialData(); }, [id]); - - - // 메시지 로드 함수 -const loadMoreMessages = async () => { + const loadMoreMessages = async () => { if (!nextUrl || isFetchingRef.current) return; isFetchingRef.current = true; try { @@ -116,7 +111,6 @@ const loadMoreMessages = async () => { return () => observer.disconnect(); }, [messages]); - useEffect(() => { setTimeout(() => setIsLoaded(true), 100); }, []); @@ -129,9 +123,7 @@ const loadMoreMessages = async () => { profileImageURL - )} + profileImages={recipientData?.recentMessages?.map(({ profileImageURL }) => profileImageURL) || []} topReactions={recipientData?.topReactions ?? []} setRecipientData={setRecipientData} /> @@ -143,11 +135,10 @@ const loadMoreMessages = async () => { ))} - {messages?.length > 0 &&
} ); } -export default RollingPaperDetailPage; +export default RollingPaperDetailPage; \ No newline at end of file diff --git a/src/pages/RollingPaperList/RollingPaperListPage.jsx b/src/pages/RollingPaperList/RollingPaperListPage.jsx index 5eeaaab..f8bc871 100644 --- a/src/pages/RollingPaperList/RollingPaperListPage.jsx +++ b/src/pages/RollingPaperList/RollingPaperListPage.jsx @@ -3,107 +3,57 @@ import CreateAtCardList from "../../components/domain/rollingpaper/Card/CreateAt import styled from "styled-components"; import PopularCardList from "../../components/domain/rollingpaper/Card/PopularCardList"; import Button from "../../components/common/Button/Button"; - -// Container 스타일 수정 +import { textStyle } from "../../styles/textStyle"; const Container = styled.div` background-color: #ffffff; - width: 100%; - padding: 0 20px; - - @media (max-width: 1199px) { - padding: 0 10px; - } - - @media (max-width: 767px) { - padding: 0 5px; - } `; - -// PageWrapper 스타일 수정 const PageWrapper = styled.div` - padding: 40px; + padding: 50px; display: flex; flex-direction: column; - align-items: center; justify-content: start; min-height: calc(100vh - 65px); - width: 100%; + width: max-content; margin: auto; - @media (max-width: 1199px) { - padding: 30px; + padding: 0; + padding-top: 50px; + margin: 0; + width: 100%; } - - @media (max-width: 767px) { - padding: 20px; - } -`; - -// Title 스타일 수정 (텍스트와 카드 리스트가 같이 고정되도록 sticky 적용) -const TitleWrapper = styled.div` - width: 100%; - position: sticky; - top: 0; - background-color: #ffffff; - z-index: 10; - padding: 10px 0; + @media (max-width: 359px) { + padding-top: 40px; + } + `; const Title = styled.div` + ${(props) => textStyle(24, 700)(props)} display: flex; - align-items: flex-start; - justify-content: flex-start; - width: 100%; -`; - -const TitleText = styled.div` - text-align: left; - width: 100%; - font-family: Pretendard; - font-size: 1.5rem; - font-weight: 700; - margin-bottom: 10px; - - @media (max-width: 767px) { - font-size:20px; - font-weight: 600; - line-height:30px; + width: -webkit-fill-available; + justify-content: left; + @media (max-width: 366px) { + ${(props) => textStyle(20, 600)(props)} } `; -// ButtonWrapper 스타일 수정 const ButtonWrapper = styled.div` - margin-top: 20px; + margin-top: 156px; display: flex; justify-content: center; - - @media (max-width: 1199px) { - margin-top: 15px; - } - - @media (max-width: 767px) { - margin-top: 10px; - } `; -// StyledCardList 수정 (카드 리스트가 오른쪽에서 사라지도록 설정) const StyledCardList = styled.div` display: flex; gap: 20px; - margin-bottom: 50px; - width: 100%; - flex-direction: row-reverse; /* 카드 리스트가 오른쪽에서 왼쪽으로 정렬되도록 설정 */ - overflow: hidden; /* 왼쪽에서 안 보이도록 처리 */ - + margin-bottom: 16px; + width: max-content; + flex-direction: column; @media (max-width: 1199px) { - gap: 15px; + padding: 0; + padding-left: 20px; } - @media (max-width: 767px) { - gap: 10px; - flex-direction: column; - align-items: center; - } `; function RollingPaperListPage() { @@ -111,27 +61,16 @@ function RollingPaperListPage() { return ( + - - - <TitleText>인기 롤링 페이퍼🔥</TitleText> - - - - + 인기 롤링 페이퍼🔥 - - - - <TitleText>최근에 만든 롤링 페이퍼⭐</TitleText> - - - + - + 최근에 만든 롤링 페이퍼⭐ - + + From 8906b7902d380d645869273c353367174fc6e4a1 Mon Sep 17 00:00:00 2001 From: ramongEE Date: Wed, 19 Mar 2025 22:45:57 +0900 Subject: [PATCH 3/3] =?UTF-8?q?=EB=B0=98=EC=9D=91=ED=98=95=20=EB=AA=A8?= =?UTF-8?q?=EB=8B=AC=20=EC=88=98=EC=A0=95=EA=B3=BC=20input=20and=20profile?= =?UTF-8?q?Input=20=EB=B0=98=EC=9D=91=ED=98=95=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/common/Input/Input/Input.jsx | 9 +++---- .../common/Input/Picker/ColorPicker.jsx | 8 +++--- .../common/Input/Picker/ImgPicker.jsx | 6 +++-- .../ProfileInput/ProfileInputChoiceImage.jsx | 14 ++++++---- .../domain/rollingpaper/Card/CardWrite.jsx | 27 +++++++++++++++++-- .../domain/rollingpaper/Card/Modal.jsx | 4 +-- .../CreateRollingPaperPage.jsx | 4 +-- src/pages/Message/MessagePage.jsx | 6 ++--- 8 files changed, 54 insertions(+), 24 deletions(-) diff --git a/src/components/common/Input/Input/Input.jsx b/src/components/common/Input/Input/Input.jsx index 51f6d4b..0d0e007 100644 --- a/src/components/common/Input/Input/Input.jsx +++ b/src/components/common/Input/Input/Input.jsx @@ -16,11 +16,7 @@ export const Bone = styled.div` width: 100%; max-width: 720px; - @media (max-width: 768px) { - padding: 0; - } - - @media (max-width: 360px) { + @media (max-width: 767px) { padding: 0; } `; @@ -32,6 +28,9 @@ const Picker = styled.div` const ButtonWrapper = styled.div` display: flex; justify-content: center; + @media (max-width: 767px) { + margin-top: auto; + } ` // To 전체적인 컴포넌 diff --git a/src/components/common/Input/Picker/ColorPicker.jsx b/src/components/common/Input/Picker/ColorPicker.jsx index cabddc7..77156b1 100644 --- a/src/components/common/Input/Picker/ColorPicker.jsx +++ b/src/components/common/Input/Picker/ColorPicker.jsx @@ -8,8 +8,10 @@ const Bone = styled.div` gap: 12px; flex-wrap: wrap; margin: 45px 0; - @media (max-width: 768px) { - justify-content: flex-start; + @media (max-width: 767px) { + display: grid; + grid-template: 1fr 1fr / 1fr 1fr; + width: fit-content; } `; @@ -24,7 +26,7 @@ const Color = styled.div` justify-content: center; position: relative; background-color: ${(props) => props.color}; - @media (max-width: 768px) { + @media (max-width: 767px) { width: 154px; height: 154px; } diff --git a/src/components/common/Input/Picker/ImgPicker.jsx b/src/components/common/Input/Picker/ImgPicker.jsx index 81241ae..c68a415 100644 --- a/src/components/common/Input/Picker/ImgPicker.jsx +++ b/src/components/common/Input/Picker/ImgPicker.jsx @@ -9,8 +9,10 @@ const Bone = styled.div` gap: 12px; flex-wrap: wrap; margin: 45px 0; - @media (max-width: 768px) { - justify-content: flex-start; + @media (max-width: 767px) { + display: grid; + grid-template: 1fr 1fr / 1fr 1fr; + width: fit-content; } `; diff --git a/src/components/common/Input/ProfileInput/ProfileInputChoiceImage.jsx b/src/components/common/Input/ProfileInput/ProfileInputChoiceImage.jsx index e1e80b9..6051ce5 100644 --- a/src/components/common/Input/ProfileInput/ProfileInputChoiceImage.jsx +++ b/src/components/common/Input/ProfileInput/ProfileInputChoiceImage.jsx @@ -10,7 +10,7 @@ const Bone = styled.div` margin: 3.125rem auto 3.125rem auto; width: 44.813rem; height: auto; - @media (max-width: 768px) { + @media (max-width: 1199px) { width: auto; } `; @@ -34,10 +34,10 @@ const ProfileImg = styled.img` height: 5rem; margin-right: 2rem; border-radius: 50%; - @media (max-width: 768px) { + @media (max-width: 1199px) { margin-right: 1.76rem; } - @media (max-width: 360px) { + @media (max-width: 767px) { margin-right: 1.5rem; } `; @@ -53,7 +53,7 @@ const ProfileImgChoice = styled.div` width: 37.813rem; height: 3.5rem; margin: 0.75rem 0 0 0; - @media (max-width: 768px) { + @media (max-width: 1199px) { display: flex; align-items: center; margin: 0.75rem 0 0 0; @@ -63,6 +63,10 @@ const ProfileImgChoice = styled.div` width: auto; height: auto; } + @media (max-width: 767px) { + display: grid; + grid-template: 1fr 1fr / 1fr 1fr 1fr 1fr 1fr; + } `; const Image = styled.div.withConfig({ @@ -83,7 +87,7 @@ const Image = styled.div.withConfig({ props.selected ? "0 0 5px rgba(0, 162, 254, 0.5)" : "none"}; /* 선택 시 box-shadow 추가 */ - @media (max-width: 360px) { + @media (max-width: 767px) { width: 40px; height: 40px; } diff --git a/src/components/domain/rollingpaper/Card/CardWrite.jsx b/src/components/domain/rollingpaper/Card/CardWrite.jsx index 445df8b..ff3aad6 100644 --- a/src/components/domain/rollingpaper/Card/CardWrite.jsx +++ b/src/components/domain/rollingpaper/Card/CardWrite.jsx @@ -1,4 +1,4 @@ -import React, { useState } from "react"; +import React, { useState, useEffect } from "react"; import styled from "styled-components"; import IconButton from "../../../common/Button/IconButton"; import { textStyle } from "../../../../styles/textStyle"; @@ -85,6 +85,16 @@ const CardContainer = styled.div` transform: scale(0.97); box-shadow: 0px 1px 8px rgba(0, 0, 0, 0.1); } + @media (max-width: 767px) { + &:hover { + transform: none; + box-shadow: none; + } + &:active { + transform: none; + box-shadow: none; + } + } `; const Header = styled.div` @@ -146,9 +156,22 @@ const ProfileWrap = styled.div` const CardWrite = ({ message, onDelete }) => { const [isModalOpen, setIsModalOpen] = useState(false); + const [isMobile, setIsMobile] = useState(window.innerWidth <= 767); + + useEffect(() => { + const handleResize = () => { + setIsMobile(window.innerWidth <= 768); + }; + + window.addEventListener("resize", handleResize); + return () => window.removeEventListener("resize", handleResize); + }, []); + const handleCardClick = () => { + if (!isMobile) { // 모바일이 아닐 때만 모달 실행 setIsModalOpen(true); - }; + } +}; const handleCloseModal = () => { setIsModalOpen(false); diff --git a/src/components/domain/rollingpaper/Card/Modal.jsx b/src/components/domain/rollingpaper/Card/Modal.jsx index 08dc993..ce1b707 100644 --- a/src/components/domain/rollingpaper/Card/Modal.jsx +++ b/src/components/domain/rollingpaper/Card/Modal.jsx @@ -27,7 +27,7 @@ const EditorWrapper = styled.div.withConfig({ position: relative; top: 120px; background: #fff; - font-family: ${(props) => `'${props.$fontFamily || "Noto Sans KR"}'`} !important; + font-family: ${(props) => `'${props.$fontFamily || "Noto Sans KR"}'`} !important; text-align: ${(props) => props.$textAlign || "left"}; overflow: auto; white-space: pre-wrap; @@ -75,7 +75,7 @@ const Background = styled.div` display: flex; align-items: center; justify-content: center; - z-index: 1000; /* z-index를 높게 설정 */ + z-index: 1000; `; const ModalContainer = styled.div` diff --git a/src/pages/CreateRollingPaper/CreateRollingPaperPage.jsx b/src/pages/CreateRollingPaper/CreateRollingPaperPage.jsx index bfb44d1..bc2529b 100644 --- a/src/pages/CreateRollingPaper/CreateRollingPaperPage.jsx +++ b/src/pages/CreateRollingPaper/CreateRollingPaperPage.jsx @@ -17,7 +17,7 @@ const Bone = styled.div` width: 100%; min-height: calc(100vh - 65px); padding: 49px 24px; - @media (max-width: 368px) { - padding: 50px 20px; + @media (max-width: 767px) { + padding: 0 20px; } `; diff --git a/src/pages/Message/MessagePage.jsx b/src/pages/Message/MessagePage.jsx index 7c70d53..be3f748 100644 --- a/src/pages/Message/MessagePage.jsx +++ b/src/pages/Message/MessagePage.jsx @@ -8,12 +8,12 @@ const Bone = styled.div` min-height: calc(100vh - 65px); width: 100%; padding: 47px 24px; - @media (max-width: 768px) { + @media (max-width: 1199px) { padding: 49px 24px; } - @media (max-width: 360px) { - padding: 50px 20px; + @media (max-width: 768px) { + padding: 0 20px; } `;