From 8a806c094ba97a345f05df954c1b5a7dee779b0f Mon Sep 17 00:00:00 2001 From: chaem03 Date: Tue, 6 Aug 2024 01:32:53 +0900 Subject: [PATCH 1/3] =?UTF-8?q?Fix:=20=EA=B2=80=EC=83=89=EC=99=84=EB=A3=8C?= =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=A7=80=EC=97=90=EC=84=9C=20=EC=8A=A4?= =?UTF-8?q?=ED=83=80=ED=8E=98=EC=9D=B4=EC=A7=80=EB=A1=9C=20=EC=9D=B4?= =?UTF-8?q?=EB=8F=99=20=EC=97=90=EB=9F=AC=ED=94=BD=EC=8A=A4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/MyStar/SearchResultStar.jsx | 21 ++------------------- src/components/MyStar/styled.js | 1 + src/pages/SearchPage/SearchResultP.jsx | 17 ++++++++++++++++- 3 files changed, 19 insertions(+), 20 deletions(-) diff --git a/src/components/MyStar/SearchResultStar.jsx b/src/components/MyStar/SearchResultStar.jsx index 5d729d3f..e114002a 100644 --- a/src/components/MyStar/SearchResultStar.jsx +++ b/src/components/MyStar/SearchResultStar.jsx @@ -1,27 +1,10 @@ import React from "react"; import * as S from "./styled"; import Arrow from "@/assets/Arrow.svg"; -import { useNavigate } from "react-router-dom"; -export const SearchResultStar = ({ src, name, profession, id, type }) => { - const navigate = useNavigate(); - const handleClick = () => { - let url = ""; - switch (type) { - case "celeb": - case "routine": - url = `/star/${id}`; - break; - case "theme": - url = `/theme/${id}`; - break; - default: - break; - } - navigate(url); - }; +export const SearchResultStar = ({ src, name, profession, onClick }) => { return ( <> - +
{name}
diff --git a/src/components/MyStar/styled.js b/src/components/MyStar/styled.js index 99469191..e62b81e5 100644 --- a/src/components/MyStar/styled.js +++ b/src/components/MyStar/styled.js @@ -6,6 +6,7 @@ export const Container = styled.div` width: 100%; gap: 20px; align-items: center; + cursor: pointer; .count { display: flex; margin-right: 1rem; diff --git a/src/pages/SearchPage/SearchResultP.jsx b/src/pages/SearchPage/SearchResultP.jsx index 180053eb..7557be6b 100644 --- a/src/pages/SearchPage/SearchResultP.jsx +++ b/src/pages/SearchPage/SearchResultP.jsx @@ -30,7 +30,21 @@ export const SearchResultP = () => { console.log("헤더클릭"); navigate(`/search`); }; - + const handleClick = (id, type) => { + let url = ""; + switch (type) { + case "celeb": + case "routine": + url = `/star/${id}`; + break; + case "theme": + url = `/theme/${id}`; + break; + default: + break; + } + navigate(url); + }; return (
@@ -50,6 +64,7 @@ export const SearchResultP = () => { name={item.title} profession={item.profession} type={key} + onClick={handleClick} /> ))} From a32578911eabb5159e30107a04900e19f84c6bcc Mon Sep 17 00:00:00 2001 From: chaem03 Date: Tue, 6 Aug 2024 01:54:19 +0900 Subject: [PATCH 2/3] =?UTF-8?q?Design:=20=EB=94=94=EC=9E=90=EC=9D=B8=20?= =?UTF-8?q?=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/MyStar/MyStar.jsx | 4 ++-- src/pages/MyPage/MyPage.jsx | 10 ++++++++-- src/pages/MyPage/styled.js | 15 +++++++++++---- src/pages/RandomDice/RandomDice.jsx | 1 - src/pages/RandomDice/styled.js | 8 +++----- src/pages/StarPage/styled.js | 4 ++-- 6 files changed, 26 insertions(+), 16 deletions(-) diff --git a/src/components/MyStar/MyStar.jsx b/src/components/MyStar/MyStar.jsx index ff233cd8..9971341a 100644 --- a/src/components/MyStar/MyStar.jsx +++ b/src/components/MyStar/MyStar.jsx @@ -1,10 +1,10 @@ import React from "react"; import * as S from "./styled"; -export const MyStar = ({ src, star, career, count }) => { +export const MyStar = ({ src, star, career, count, onClick }) => { return ( <> - +
{star}
diff --git a/src/pages/MyPage/MyPage.jsx b/src/pages/MyPage/MyPage.jsx index 49e8fa03..d94c2b19 100644 --- a/src/pages/MyPage/MyPage.jsx +++ b/src/pages/MyPage/MyPage.jsx @@ -8,7 +8,8 @@ import LOGO from "../../assets/images/MainLogoImg.svg"; import { useMyInfo } from "../../hooks/useMyInfo"; import WrapperContent from "../../components/PrivacyContent/PrivacyContent"; import ChangeRoutine from "../../components/RoutineChange/RoutineChange"; - +import { AgreePage } from "@/pages/AgreePage/AgreePage"; +import { useNavigate } from "react-router-dom"; const MyPage = () => { const { myinfo } = useMyInfo(); const [isLogoutVisible, setIsLogoutVisible] = useState(false); @@ -16,7 +17,7 @@ const MyPage = () => { const [isPrivacyVisible, setIsPrivacyVisible] = useState(false); const [selectedContent, setSelectedContent] = useState(null); const [routineVisible, setRoutineVisible] = useState(false); - + const navigate = useNavigate(); const myData = myinfo?.data || null; if (!myData) { @@ -44,6 +45,10 @@ const MyPage = () => { const favoriteStars = myData.celebs.filter( (item) => item.routines_added_count > 0 ); + + const moveOnstarP = (id) => { + navigate(`/star/${id}`); + }; return ( <> {isPrivacyVisible ? ( @@ -80,6 +85,7 @@ const MyPage = () => { star={item.name} career={item.profession} count={item.routines_added_count} + onClick={() => moveOnstarP(item.id)} /> )) )} diff --git a/src/pages/MyPage/styled.js b/src/pages/MyPage/styled.js index 348f56f7..81a7adf5 100644 --- a/src/pages/MyPage/styled.js +++ b/src/pages/MyPage/styled.js @@ -25,9 +25,9 @@ export const Layout = styled.div` width: 100%; font-size: 1.2rem; text-align: center; - + padding: 0.5rem 0; border-bottom: 1px solid #78a1b5; - padding-bottom: 1rem; + color: inherit; font: inherit; cursor: pointer; @@ -51,10 +51,16 @@ export const Layout = styled.div` .emptytext { display: flex; - font-size: 1.2rem; - font-weight: 600; + color: #000; + + font-family: "AppleSDGothicNeoL"; + font-size: 16px; + font-style: normal; + font-weight: 400; + line-height: normal; justify-self: center; align-self: center; + padding: 1rem; } `; @@ -65,6 +71,7 @@ export const MypageWrapper = styled.div` flex-direction: column; align-items: flex-start; padding: 0 1.5rem; + margin-bottom: 1rem; .button { background: none; diff --git a/src/pages/RandomDice/RandomDice.jsx b/src/pages/RandomDice/RandomDice.jsx index f97142d1..1db5327a 100644 --- a/src/pages/RandomDice/RandomDice.jsx +++ b/src/pages/RandomDice/RandomDice.jsx @@ -7,7 +7,6 @@ import { getRandomRoutine } from "@/apis/random"; import Modal from "@/components/Modal/Modal"; import { CheckUp } from "@/components/CheckUp/CheckUp"; import DateRangeCalendar from "@/components/DateRangeCalendar/DateRangeCalendar"; -import { useNavigate } from "react-router-dom"; import { useSetRecoilState, useRecoilState, useRecoilValue } from "recoil"; import { routineStart, diff --git a/src/pages/RandomDice/styled.js b/src/pages/RandomDice/styled.js index 3ea60629..3b5b4e1d 100644 --- a/src/pages/RandomDice/styled.js +++ b/src/pages/RandomDice/styled.js @@ -84,13 +84,12 @@ export const Container = styled.div` display: flex; width: 180px; height: 32px; - padding: 6px 108px; + justify-content: center; align-items: center; - gap: 10px; flex-shrink: 0; border-radius: 15px; - background: var(--Main-Color, #78a1b5); + background-color: #78a1b5; font-size: 1rem; } @@ -98,10 +97,9 @@ export const Container = styled.div` display: flex; width: 180px; height: 32px; - padding: 6px 108px; + justify-content: center; align-items: center; - gap: 10px; flex-shrink: 0; border-radius: 15px; border: 1px solid #c4d9e2; diff --git a/src/pages/StarPage/styled.js b/src/pages/StarPage/styled.js index e30fa465..7850fb26 100644 --- a/src/pages/StarPage/styled.js +++ b/src/pages/StarPage/styled.js @@ -94,8 +94,8 @@ export const ClearMain = styled.div` } .textOverlay { position: absolute; - top: 55%; - left: 49.5%; + top: 50%; + left: 50%; z-index: 5; font-weight: bold; text-align: center; From 6a31fc941658fbba09885a945d480a361849fb67 Mon Sep 17 00:00:00 2001 From: chaem03 Date: Tue, 6 Aug 2024 02:01:30 +0900 Subject: [PATCH 3/3] =?UTF-8?q?Design:=20=EB=94=94=EC=9E=90=EC=9D=B8=20?= =?UTF-8?q?=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/RandomDice/styled.js | 15 +++++++++------ 1 file changed, 9 insertions(+), 6 deletions(-) diff --git a/src/pages/RandomDice/styled.js b/src/pages/RandomDice/styled.js index 3b5b4e1d..5ed9621a 100644 --- a/src/pages/RandomDice/styled.js +++ b/src/pages/RandomDice/styled.js @@ -19,16 +19,17 @@ export const Layout = styled.div` export const Container = styled.div` display: flex; - min-height: 100vh; + flex-direction: column; justify-content: center; align-items: center; gap: 1.5rem; z-index: 2; - margin-bottom: 1rem; + margin-bottom: 8rem; @media (min-height: 800px) { justify-content: center; align-items: flex-start; + margin-bottom: 10rem; } .celebrity { @@ -74,7 +75,7 @@ export const Container = styled.div` .buttons { display: flex; flex-direction: column; - width: 70%; + width: 80%; justify-content: center; align-items: center; @@ -82,8 +83,9 @@ export const Container = styled.div` } .Add { display: flex; - width: 180px; + width: 100%; height: 32px; + padding: 5px; justify-content: center; align-items: center; @@ -95,11 +97,12 @@ export const Container = styled.div` .Again { display: flex; - width: 180px; + width: 100%; height: 32px; - + padding: 5px; justify-content: center; align-items: center; + flex-shrink: 0; border-radius: 15px; border: 1px solid #c4d9e2;