Merge pull request #343 from Chaem03/feature/#310

✅ Test: 전체 디자인 test
LikeLion-at-DGU · Aug 5, 2024 · d382a39 · d382a39
2 parents 4507d31 + 6a31fc9
commit d382a39
Show file tree

Hide file tree

Showing 9 changed files with 53 additions and 41 deletions.
diff --git 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 (
     <>
-      <S.Container>
+      <S.Container onClick={onClick}>
         <S.StarImg src={src} />
         <S.info>
           <div>{star}</div>

diff --git 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 (
     <>
-      <S.Container onClick={handleClick}>
+      <S.Container onClick={onClick}>
         <S.StarImg src={src} />
         <S.info>
           <div>{name}</div>

diff --git 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/MyPage/MyPage.jsx b/src/pages/MyPage/MyPage.jsx
@@ -8,15 +8,16 @@ 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);
   const [isSubscribeVisible, setIsSubscribeVisible] = useState(false);
   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
@@ -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
@@ -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
@@ -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,34 +75,34 @@ export const Container = styled.div`
   .buttons {
     display: flex;
     flex-direction: column;
-    width: 70%;
+    width: 80%;
     justify-content: center;
     align-items: center;
 
     gap: 1rem;
   }
   .Add {
     display: flex;
-    width: 180px;
+    width: 100%;
     height: 32px;
-    padding: 6px 108px;
+    padding: 5px;
+
     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;
   }
 
   .Again {
     display: flex;
-    width: 180px;
+    width: 100%;
     height: 32px;
-    padding: 6px 108px;
+    padding: 5px;
     justify-content: center;
     align-items: center;
-    gap: 10px;
+
     flex-shrink: 0;
     border-radius: 15px;
     border: 1px solid #c4d9e2;

diff --git 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 (
     <S.LayoutResult>
       <Header $margin={"1rem 0 0 0"} $padding={"1rem 1rem 0 1rem"}>
@@ -50,6 +64,7 @@ export const SearchResultP = () => {
                 name={item.title}
                 profession={item.profession}
                 type={key}
+                onClick={handleClick}
               />
             ))}
           </S.CategoryWrapper>

diff --git 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;