From ad989f098270b904637e914af88cf7ffde879909 Mon Sep 17 00:00:00 2001 From: woo-hyun Date: Wed, 30 Apr 2025 23:55:10 +0900 Subject: [PATCH 1/5] fix: 1 --- longkathon/src/pages/Land.js | 74 +++++++++++++++++++++++++++++------- 1 file changed, 61 insertions(+), 13 deletions(-) diff --git a/longkathon/src/pages/Land.js b/longkathon/src/pages/Land.js index ca558b6..1bb77dd 100644 --- a/longkathon/src/pages/Land.js +++ b/longkathon/src/pages/Land.js @@ -135,23 +135,52 @@ function LenderPage() { const AppContainer = styled.div` text-align: center; min-height: 100px; - height: 745vh; + height: 1045vh; font-family: "Arial", sans-serif; color: #333; background: linear-gradient( to bottom, #3597ff 5%, - /* 위쪽 파란색이 5%까지만 표시 */ #ffffff 15%, - /* 흰색 시작 */ #ffffff 90%, - /* 흰색이 대부분 차지 */ #5ba8fb 100% + #ffffff 15%, + #ffffff 90%, + #5ba8fb 100% ); -`; + /* 반응형 배경 그라디언트 조정 */ + @media (max-width: 1024px) { + background: linear-gradient( + to bottom, + #3597ff 3%, + #ffffff 10%, + #ffffff 61%, + #5ba8fb 66% + ); + } + + @media (max-width: 768px) { + background: linear-gradient( + to bottom, + #3597ff 2%, + #ffffff 8%, + #ffffff 48%, + #5ba8fb 55% + ); + } -const Container = styled.div` + @media (max-width: 480px) { + background: linear-gradient( + to bottom, + #3597ff 1%, + #ffffff 6%, + #ffffff 47%, + #5ba8fb 55% + ); + } `; +const Container = styled.div``; + const Header = styled.div` display: flex; justify-content: center; @@ -217,10 +246,22 @@ const CustomImage = styled.img` margin-bottom: ${(props) => props.marginBottom || "0px"}; cursor: pointer; + @media (max-width: 1024px) { + width: 85%; + margin-top: 8vh; + margin-bottom: 5vh; + } + @media (max-width: 768px) { - width: ${(props) => - `calc(${props.width} / 1.5)`}; /* 작은 화면에서 이미지 크기 축소 */ - height: ${(props) => `calc(${props.height} / 1.5)`}; + width: 95vw; /* 화면 전체 가로 */ + max-width: none; /* 제한 해제 */ + margin-top: 6vh; + margin-bottom: 4vh; + } + + @media (max-width: 480px) { + width: 100%; + margin-top: 4vh; } `; @@ -234,22 +275,29 @@ const BelowButton = styled.div` const Div = styled.div` width: auto; - background: transparent + background: transparent; `; const BelowLogoImage = styled.img` - width: 182px; + width: 172px; height: 183px; `; const Button = styled.img` - width: 380px; height: 80px; margin-top: 50px; + height: auto; + cursor: pointer; + transition: transform 0.2s; + &:hover { + transform: scale(1.1); + } + } + `; const Below = styled.div` width: 100%; - height: 20vh + height: 20vh; `; export default LenderPage; From d0b935cfa6c2bd26fd68c39faca7ae4d2f047b77 Mon Sep 17 00:00:00 2001 From: woo-hyun Date: Thu, 1 May 2025 20:08:39 +0900 Subject: [PATCH 2/5] [woohyun] fix: landing page - response design --- longkathon/src/pages/Land.js | 55 ++++++------------------------------ 1 file changed, 8 insertions(+), 47 deletions(-) diff --git a/longkathon/src/pages/Land.js b/longkathon/src/pages/Land.js index 1bb77dd..9da0af9 100644 --- a/longkathon/src/pages/Land.js +++ b/longkathon/src/pages/Land.js @@ -147,35 +147,16 @@ const AppContainer = styled.div` #5ba8fb 100% ); - /* 반응형 배경 그라디언트 조정 */ @media (max-width: 1024px) { - background: linear-gradient( - to bottom, - #3597ff 3%, - #ffffff 10%, - #ffffff 61%, - #5ba8fb 66% - ); + height: 1030vh; } @media (max-width: 768px) { - background: linear-gradient( - to bottom, - #3597ff 2%, - #ffffff 8%, - #ffffff 48%, - #5ba8fb 55% - ); + height: 790vh; } @media (max-width: 480px) { - background: linear-gradient( - to bottom, - #3597ff 1%, - #ffffff 6%, - #ffffff 47%, - #5ba8fb 55% - ); + height: 500vh; } `; @@ -193,7 +174,7 @@ const LogoImage = styled.img` height: auto; margin-top: 190px; - @media (max-width: 864px) { + @media (max-width: 768px) { max-width: 200px; margin-top: 50px; } @@ -246,22 +227,10 @@ const CustomImage = styled.img` margin-bottom: ${(props) => props.marginBottom || "0px"}; cursor: pointer; - @media (max-width: 1024px) { - width: 85%; - margin-top: 8vh; - margin-bottom: 5vh; - } - @media (max-width: 768px) { - width: 95vw; /* 화면 전체 가로 */ - max-width: none; /* 제한 해제 */ - margin-top: 6vh; - margin-bottom: 4vh; - } - - @media (max-width: 480px) { - width: 100%; - margin-top: 4vh; + width: ${(props) => + `calc(${props.width} / 1.5)`}; /* 작은 화면에서 이미지 크기 축소 */ + height: ${(props) => `calc(${props.height} / 1.5)`}; } `; @@ -278,7 +247,7 @@ const Div = styled.div` background: transparent; `; const BelowLogoImage = styled.img` - width: 172px; + width: 182px; height: 183px; `; @@ -286,14 +255,6 @@ const Button = styled.img` width: 380px; height: 80px; margin-top: 50px; - height: auto; - cursor: pointer; - transition: transform 0.2s; - &:hover { - transform: scale(1.1); - } - } - `; const Below = styled.div` From edbcc30c483e5796a56816e6650436a342a52933 Mon Sep 17 00:00:00 2001 From: woo-hyun Date: Thu, 8 May 2025 19:19:18 +0900 Subject: [PATCH 3/5] [woohyun] fix: hamburgerBar redesign --- longkathon/src/components/HamburgerButton.js | 27 ++++++++++++++++---- 1 file changed, 22 insertions(+), 5 deletions(-) diff --git a/longkathon/src/components/HamburgerButton.js b/longkathon/src/components/HamburgerButton.js index d262ff1..8715304 100644 --- a/longkathon/src/components/HamburgerButton.js +++ b/longkathon/src/components/HamburgerButton.js @@ -51,6 +51,16 @@ export const HamburgerIcon = () => { onClick={handleIconClick} > + + + {["마이 페이지", "진행 중 링크", "로그아웃"].map((category, index) => ( ({ as: "lord-icon", style: { @@ -95,10 +110,11 @@ const LordIcon = styled.div.attrs((props) => ({ const BannersContainer = styled.div` font-family: "Product Sans", sans-serif; font-size: 16px; - width: 300px; - height: 162px; + width: 322px; + height: 864px; border: ${(props) => (props.show ? "1px solid #AFB8C1" : "none")}; - border-radius: 20px; + border-top-right-radius: 20px; + border-bottom-right-radius: 20px; background-color: #ffffff; display: ${(props) => props.show ? "flex" : "none"}; /* 드롭박스 표시 여부 */ @@ -106,8 +122,8 @@ const BannersContainer = styled.div` overflow: hidden; box-shadow: 2px 2px 4px 0px rgba(217, 217, 217, 1), -2px -2px 4px 0px rgba(217, 217, 217, 1); - position: absolute; - top: 45px; + position: fixed; + top: 0px; left: 0px; z-index: 999; `; @@ -121,6 +137,7 @@ const Banner = styled.div` display: flex; align-items: center; cursor: pointer; + margin-left: 80px; &:hover { border: 0.5px solid #afb8c1; From 6ea60206aca0c4d9d5deab6177d694a4b35eca30 Mon Sep 17 00:00:00 2001 From: woo-hyun Date: Thu, 8 May 2025 19:29:47 +0900 Subject: [PATCH 4/5] =?UTF-8?q?[woohyun]=20fix:=20mainpage=20-=20=EC=B9=B4?= =?UTF-8?q?=ED=85=8C=EA=B3=A0=EB=A6=AC=20=EC=97=86=EC=9D=84=EB=95=8C=20?= =?UTF-8?q?=ED=8E=B8=EC=A7=91=EB=B2=84=ED=8A=BC=EC=9D=B4=20=EB=B3=B4?= =?UTF-8?q?=EC=9D=B4=EC=A7=80=20=EC=95=8A=EA=B2=8C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- longkathon/src/pages/MainPage.js | 22 +++++++++++++--------- 1 file changed, 13 insertions(+), 9 deletions(-) diff --git a/longkathon/src/pages/MainPage.js b/longkathon/src/pages/MainPage.js index 3f9d706..5419e1e 100644 --- a/longkathon/src/pages/MainPage.js +++ b/longkathon/src/pages/MainPage.js @@ -230,15 +230,19 @@ const MainPage = () => { 다가올  링크를 확인 해보세요! - L:nk - pages - - delete - + {categories.length > 0 && ( + <> + L:nk + pages + + delete + + + )} {isButtonClicked && ( From cd764ca8271e09696d61bf2d3358fa85523c350f Mon Sep 17 00:00:00 2001 From: woo-hyun Date: Thu, 8 May 2025 20:04:28 +0900 Subject: [PATCH 5/5] =?UTF-8?q?[woohyun]=20fix:=20landpage=20-=20=EB=8B=A4?= =?UTF-8?q?=EC=8B=9C=20=EB=B0=98=EC=9D=91=ED=98=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- longkathon/src/components/ColorPalette.js | 192 +++++++++++----------- longkathon/src/pages/AddCategory.js | 102 +++++++----- longkathon/src/pages/Land.js | 15 +- 3 files changed, 172 insertions(+), 137 deletions(-) diff --git a/longkathon/src/components/ColorPalette.js b/longkathon/src/components/ColorPalette.js index 2f02f6d..9804a55 100644 --- a/longkathon/src/components/ColorPalette.js +++ b/longkathon/src/components/ColorPalette.js @@ -12,134 +12,138 @@ import XGray from "../Image/X_gray.png"; import XBlack from "../Image/X_black.png"; const colors = [ - { color: "#EA7E7A", image: XRed }, - { color: "#FBA96F", image: XOrange }, - { color: "#9ED4B6", image: XGreen }, - { color: "#5BA8FB", image: XSkyblue }, - { color: "#002ED1", image: XBlue }, - { color: "#D9A9ED", image: XPink }, - { color: "#927CFF", image: XPurple }, - { color: "#BDBDBD", image: XGray }, - { color: "#424242", image: XBlack }, + { color: "#EA7E7A", image: XRed }, + { color: "#FBA96F", image: XOrange }, + { color: "#9ED4B6", image: XGreen }, + { color: "#5BA8FB", image: XSkyblue }, + { color: "#002ED1", image: XBlue }, + { color: "#D9A9ED", image: XPink }, + { color: "#927CFF", image: XPurple }, + { color: "#BDBDBD", image: XGray }, + { color: "#424242", image: XBlack }, ]; //타 페이지에서 사용할 수 있도록 컬러 props로 저장 function ColorPalette({ onColorSelect }) { - const [selectedColor, setSelectedColor] = useState(null); - const [selectedImage, setSelectedImage] = useState(XBlue); - - const handleColorClick = (index) => { - setSelectedColor(index); - setSelectedImage(colors[index].image); - onColorSelect(colors[index].color); - }; - - return ( - - 링크 조각: - - - - - - - {colors.slice(0, 5).map((item, index) => ( - handleColorClick(index)} - > - {selectedColor === index && } - - - ))} - - - {colors.slice(5).map((item, index) => ( - handleColorClick(index + 5)} - > - {selectedColor === index + 5 && } - - - ))} - - - - - ); + const [selectedColor, setSelectedColor] = useState(null); + const [selectedImage, setSelectedImage] = useState(XBlue); + + const handleColorClick = (index) => { + setSelectedColor(index); + setSelectedImage(colors[index].image); + onColorSelect(colors[index].color); + }; + + return ( + + 링크 조각: + + + + + + + {colors.slice(0, 5).map((item, index) => ( + handleColorClick(index)} + > + {selectedColor === index && ( + + )} + + + ))} + + + {colors.slice(5).map((item, index) => ( + handleColorClick(index + 5)} + > + {selectedColor === index + 5 && ( + + )} + + + ))} + + + + + ); } const Container = styled.div` - width: 100%; - max-width: 1060px; - // margin: 0 auto; + width: 100%; + max-width: 1060px; + // margin: 0 auto; `; const Title = styled.h1` - font-size: 24px; - font-weight: bold; - margin-bottom: 16px; - font-family: "Product Sans", sans-serif; + font-size: 24px; + font-weight: bold; + margin-bottom: 16px; + font-family: "Product Sans", sans-serif; `; const Content = styled.div` - display: flex; - gap: 28px; - align-items: center; + display: flex; + gap: 28px; + align-items: center; `; const LeftBox = styled.div` - width: 153px; - height: 124px; - border: 1px solid #dcdcdc; - border-radius: 20px; - display: flex; - align-items: center; - justify-content: center; - background-color: #ffffff; + width: 153px; + height: 124px; + border: 1px solid #dcdcdc; + border-radius: 20px; + display: flex; + align-items: center; + justify-content: center; + background-color: #ffffff; `; const XShape = styled.img` - width: 304px; //크기 수정 필요!!!// - height: 170px; - object-fit: contain; - border-radius: 20%; + width: 304px; //크기 수정 필요!!!// + height: 170px; + object-fit: contain; + border-radius: 20%; `; const ColorWrapper = styled.div` - display: flex; - flex-direction: column; - gap: 28px; + display: flex; + flex-direction: column; + gap: 28px; `; const ColorRow = styled.div` - display: flex; - gap: 28px; + display: flex; + gap: 28px; `; const ColorContainer = styled.div` - position: relative; - display: flex; - align-items: center; - justify-content: center; + position: relative; + display: flex; + align-items: center; + justify-content: center; `; const ColorOuterCircle = styled.div` - width: 56px; - height: 56px; - position: absolute; - border-radius: 50%; - border: 2px solid ${(props) => props.color}; - box-sizing: border-box; + width: 56px; + height: 56px; + position: absolute; + border-radius: 50%; + border: 2px solid ${(props) => props.color}; + box-sizing: border-box; `; const ColorCircle = styled.div` - width: 48px; - height: 48px; - border-radius: 50%; - background-color: ${(props) => props.color}; - cursor: pointer; + width: 48px; + height: 48px; + border-radius: 50%; + background-color: ${(props) => props.color}; + cursor: pointer; `; export default ColorPalette; diff --git a/longkathon/src/pages/AddCategory.js b/longkathon/src/pages/AddCategory.js index 243deaa..257161a 100644 --- a/longkathon/src/pages/AddCategory.js +++ b/longkathon/src/pages/AddCategory.js @@ -7,8 +7,7 @@ import AddContentBox from "../components/AddContentBox"; import { postCategoryAPI } from "../API/Category"; import { useParams } from "react-router-dom"; - -function AddCategory({ clicked, onClose, findPieceId ,pieceTitle }) { +function AddCategory({ clicked, onClose, findPieceId, pieceTitle }) { // const {findPieceId} = useParams(); const buttonsArray = ["숙소", "식당", "카페", "교통", "장소", "준비물"]; @@ -34,7 +33,9 @@ function AddCategory({ clicked, onClose, findPieceId ,pieceTitle }) { // 첫 번째 인포박스는 삭제하지 않도록 조건 추가 if (infoCards.length > 1) { setInfoCards(infoCards.filter((card) => card.id !== id)); - infoCardRefs.current = infoCardRefs.current.filter((ref) => ref?.id !== id); + infoCardRefs.current = infoCardRefs.current.filter( + (ref) => ref?.id !== id + ); } }; @@ -47,25 +48,27 @@ function AddCategory({ clicked, onClose, findPieceId ,pieceTitle }) { alert("색상과 제목을 입력해주세요."); return; } - - const allValues = infoCardRefs.current.map(ref => + + const allValues = infoCardRefs.current.map((ref) => ref?.getValues ? ref.getValues() : { url: "", description: "" } ); - - if (allValues.some(value => !value.url.trim() || !value.description.trim())) { + + if ( + allValues.some((value) => !value.url.trim() || !value.description.trim()) + ) { alert("모든 URL과 설명을 입력해주세요."); return; } - + const PostArray = { color: selectedColor, name: title, - listups: allValues.map(value => ({ + listups: allValues.map((value) => ({ url: value.url.trim(), - description: value.description.trim() - })) + description: value.description.trim(), + })), }; - + try { const response = await postCategoryAPI(findPieceId, PostArray); // 지금 userId 하드 코딩 되어 있음 바꿔야함;; console.log("findPieceId", findPieceId); @@ -80,7 +83,6 @@ function AddCategory({ clicked, onClose, findPieceId ,pieceTitle }) { alert("저장 중 오류가 발생했습니다."); } }; - const handleCancel = () => { if (onClose) { @@ -107,14 +109,17 @@ function AddCategory({ clicked, onClose, findPieceId ,pieceTitle }) { ))} - handleClick(buttonsArray.length)} - > - - setTitle(e.target.value)} /> - - + handleClick(buttonsArray.length)} + > + + setTitle(e.target.value)} + /> + + @@ -152,23 +157,23 @@ function AddCategory({ clicked, onClose, findPieceId ,pieceTitle }) { ); } -const TopSection=styled.div` -width: 412px; -height: 88px; -border-radius: 20px; -opacity: 1; -background: linear-gradient(149deg, #F0F8FF 0.77%, #F2F1F8 99.23%); -margin-top:116px; -color: #040404; -font-family: Inter; -font-size: 26px; -font-style: normal; -font-weight: 700; -line-height: 26px; /* 100% */ -display: flex; -align-items: center; -justify-content: center; -text-align: center; +const TopSection = styled.div` + width: 412px; + height: 88px; + border-radius: 20px; + opacity: 1; + background: linear-gradient(149deg, #f0f8ff 0.77%, #f2f1f8 99.23%); + margin-top: 116px; + color: #040404; + font-family: Inter; + font-size: 26px; + font-style: normal; + font-weight: 700; + line-height: 26px; /* 100% */ + display: flex; + align-items: center; + justify-content: center; + text-align: center; `; const BaseContainer = styled.div` @@ -179,11 +184,11 @@ const BaseContainer = styled.div` width: 100%; min-height: 100vh; background-color: none; - z-index:${(props) => (props.clicked ? "1000" : "100")}; + z-index: ${(props) => (props.clicked ? "1000" : "100")}; `; const ModalContainer = styled.div` -margin-top: 32px; + margin-top: 32px; width: 1280px; padding-top: 26px; padding-bottom: 42px; @@ -193,6 +198,20 @@ margin-top: 32px; position: relative; max-height: 90vh; /* 화면 크기 제한 */ overflow-y: auto; /* 콘텐츠가 넘치면 수직 스크롤 가능 */ + + /* 반응형 스타일 */ + @media (max-width: 768px) { + width: 90%; + height: auto; + padding: 20px; + } + + /* 모바일 (480px 이하) */ + @media (max-width: 480px) { + width: 70%; + height: auto; + padding: 20px; + } `; const Content = styled.div` @@ -275,7 +294,8 @@ const Button = styled.button` &:hover { background-color: ${(props) => (props.isActive ? "#5ba8fb" : "#e6f7ff")}; - }`; + } +`; const InfoCardContainer = styled.div` gap: 24px; diff --git a/longkathon/src/pages/Land.js b/longkathon/src/pages/Land.js index 9da0af9..2067da2 100644 --- a/longkathon/src/pages/Land.js +++ b/longkathon/src/pages/Land.js @@ -152,11 +152,11 @@ const AppContainer = styled.div` } @media (max-width: 768px) { - height: 790vh; + height: 600vh; } @media (max-width: 480px) { - height: 500vh; + height: 630vh; } `; @@ -178,6 +178,11 @@ const LogoImage = styled.img` max-width: 200px; margin-top: 50px; } + + @media (max-width: 480px) { + max-width: 150px; + margin-top: 20px; + } `; const ConnectButton = styled.div` @@ -232,6 +237,12 @@ const CustomImage = styled.img` `calc(${props.width} / 1.5)`}; /* 작은 화면에서 이미지 크기 축소 */ height: ${(props) => `calc(${props.height} / 1.5)`}; } + + @media (max-width: 480px) { + width: ${(props) => + `calc(${props.width} / 3)`}; /* 작은 화면에서 이미지 크기 축소 */ + height: ${(props) => `calc(${props.height} / 1.5)`}; + } `; const BelowButton = styled.div`