feat: 메인 견적서 요청 navigate 연결

peauty · Dec 27, 2024 · b89cd15 · b89cd15
1 parent b1b5fa0
commit b89cd15
Show file tree

Hide file tree

Showing 5 changed files with 37 additions and 25 deletions.
diff --git a/src/pages/customer/status/components/NoReceived/index.tsx b/src/pages/customer/status/components/NoReceived/index.tsx
@@ -21,7 +21,7 @@ interface NoReceivedProps {
 export default function NoReceived({ hasStatus, type }: NoReceivedProps) {
   const navigate = useNavigate();
   const handleStatus = () => {
-    navigate(ROUTE.customer.status);
+    navigate(ROUTE.customer.request.home);
   };
   return (
     <Wrapper hasStatus={hasStatus}>

diff --git a/src/pages/customer/status/components/Nosent/index.tsx b/src/pages/customer/status/components/Nosent/index.tsx
@@ -16,7 +16,7 @@ import {
 export default function Nosend() {
   const navigate = useNavigate();
   const handleStatus = () => {
-    navigate(ROUTE.customer.status);
+    navigate(ROUTE.customer.request.home);
   };
   return (
     <Wrapper>

diff --git a/src/pages/main/components/ProposalItem/index.styles.ts b/src/pages/main/components/ProposalItem/index.styles.ts
@@ -8,7 +8,7 @@ export const LocationWrapper = styled.div`
 `;
 
 export const EstimatePreviewWrap = styled.div`
-  padding: 20px 25px;
+  padding: 25px 30px;
   border-radius: 20px;
   background-color: ${colors.gray400};
 `;
diff --git a/src/pages/main/components/ProposalStatusNav/index.styles.ts b/src/pages/main/components/ProposalStatusNav/index.styles.ts
@@ -1,21 +1,22 @@
 import styled from "styled-components";
+import { colors } from "../../../../style/color";
 
 export const NavigationWrapper = styled.div`
   display: flex;
   align-items: center;
-  border-bottom: 2px solid #ddd;
+  border-bottom: 2.5px solid #ddd;
   position: relative; /* Tab의 border가 겹칠 수 있도록 부모 요소 설정 */
 `;
 
 export const Tab = styled.div<{ isActive: boolean }>`
   flex: 1;
   text-align: center;
   padding: 10px 0;
-  color: ${({ isActive }) => (isActive ? "#000" : "#aaa")};
+  color: ${({ isActive }) => (isActive ? `#000` : `#aaa`)};
   border-bottom: ${({ isActive }) =>
-    isActive ? "2px solid #000" : "none"}; /* 더 두껍게 */
+    isActive ? `2.5px solid ${colors.blue100}` : "none"};
   position: relative;
-  top: 2px;
+  top: 2.5px;
   cursor: pointer;
 `;
 
@@ -24,3 +25,22 @@ export const ContentWrapper = styled.div`
   display: flex;
   justify-content: center;
 `;
+
+export const Button = styled.div`
+  background-color: ${colors.blue300};
+  padding: 4px 10px;
+  width: 120px;
+  height: 30px;
+  text-align: center;
+  color: ${colors.blue100};
+  border-radius: 5px;
+  font-size: 12px;
+  margin-top: 10px;
+  font-weight: 500;
+  border: 1px solid ${colors.blue300};
+  cursor: pointer;
+
+  &:hover {
+    border: 1px solid ${colors.blue100};
+  }
+`;
diff --git a/src/pages/main/components/ProposalStatusNav/index.tsx b/src/pages/main/components/ProposalStatusNav/index.tsx
@@ -4,7 +4,9 @@ import { useState } from "react";
 import StylistItem from "../../../../components/stylist-Item/StylistItem";
 import PetlistItem from "../../../../components/petlist-item/PetlistItem";
 import { colors } from "../../../../style/color";
-
+import { Button } from "./index.styles";
+import { useNavigate } from "react-router-dom";
+import { ROUTE } from "../../../../constants/routes";
 interface HomeProps {
   title: string;
   firstNav: string;
@@ -17,7 +19,10 @@ export default function ProposalStautsNav({
   secendNav,
 }: HomeProps) {
   const [activeTab, setActiveTab] = useState<"received" | "waiting">("waiting");
-
+  const navigate = useNavigate();
+  const handleStatus = () => {
+    navigate(ROUTE.customer.request.home);
+  };
   return (
     <div>
       <NavigationWrapper>
@@ -117,24 +122,11 @@ export default function ProposalStautsNav({
             flexDirection: "column",
             justifyContent: "center",
             alignContent: "center",
+            textAlign: "center",
           }}
         >
-          <Text typo="body100">견적을 요청해 보세요</Text>
-          <div
-            style={{
-              backgroundColor: `${colors.blue300}`,
-              padding: "4px 10px",
-              width: "120px",
-              textAlign: "center",
-              color: `${colors.blue100}`,
-              borderRadius: "5px",
-              fontSize: "12px",
-              marginTop: "5px",
-              fontWeight: "500",
-            }}
-          >
-            견적 요청하기
-          </div>
+          <Text typo="body300">견적을 요청해 보세요</Text>
+          <Button onClick={handleStatus}>견적 요청하기</Button>
         </div>
       </ContentWrapper>
     </div>