Merge pull request #108 from next-petree/modify_edit_owndog

Modify edit owndog
next-petree · Feb 4, 2024 · fd45182 · fd45182
2 parents 502ee74 + 31f463d
commit fd45182
Show file tree

Hide file tree

Showing 34 changed files with 1,583 additions and 396 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -23,6 +23,7 @@
     "@types/react-router-dom": "^5.3.3",
     "@types/styled-components": "^5.1.29",
     "axios": "^1.6.0",
+    "http-proxy-middleware": "^2.0.6",
     "react": "^18.2.0",
     "react-datepicker": "^4.25.0",
     "react-daum-postcode": "^3.1.3",

diff --git a/src/App.tsx b/src/App.tsx
@@ -34,6 +34,7 @@ import ManageOwnDogs from "./pages/ManageOwnDogs/ManageOwnDogs";
 import CreateReview from "./pages/ManageReview/create/CreateReview";
 import EditReview from "./pages/ManageReview/edit/EditReview";
 import EditOwnDogs from "./pages/ManageOwnDogs/edit/EditOwnDogs";
+import CreateOwnDogs from "./pages/ManageOwnDogs/create/CreateOwnDogs";
 
 function App() {
     return (
@@ -97,6 +98,10 @@ function App() {
                         path="/mypage/owndogs/edit/:id"
                         element={<EditOwnDogs />}
                     />
+                     <Route
+                        path="/mypage/owndogs/create"
+                        element={<CreateOwnDogs />}
+                    ></Route>
                 </Route>
                 <Route path="/breeder/:id" element={<BreederDetails />} />
                 <Route path="/customer-details" element={<CustomerDetails />} />

diff --git a/src/component/CollectCOMP1/AutoDogtypeCompleteInput1/Styles1.ts b/src/component/CollectCOMP1/AutoDogtypeCompleteInput1/Styles1.ts
@@ -1,7 +1,7 @@
 import { styled } from "styled-components";
 
 export const SearchContainer = styled.div`
-  width: 400px;
+  width: 50rem;
   height: 45px;
   position: relative;
   border: 0;
@@ -12,7 +12,11 @@ export const Search = styled.input<{$width: number | null}>`
   display: flex;
   align-items: center;
   border: none;
-  width: ${props => props.$width ? props.$width.toString() + "px" : "314px"};
+  width: ${props => props.$width ? props.$width.toString() + "px" : "40rem"};
+  @media (max-width: 1120px) {
+    width: ${props => props.$width ? props.$width.toString() + "px" : "80%"};
+  } ;
+  
   height: 48px;
   border-radius: 12px;
   background-color: #f5f5f5;

diff --git a/src/component/CollectCOMP1/BreederCollect1/BreederBox1.tsx b/src/component/CollectCOMP1/BreederCollect1/BreederBox1.tsx
@@ -34,8 +34,8 @@ export default function BreederBox({
         {verified ? (
           <Badge>
             <svg
-              width="2vw"
-              height="2vw"
+              width="100%"
+              height="100%"
               viewBox="0 0 33 38"
               fill="none"
               xmlns="http://www.w3.org/2000/svg"

diff --git a/src/component/CollectCOMP1/BreederCollect1/BreederForm1/BreederForm1.tsx b/src/component/CollectCOMP1/BreederCollect1/BreederForm1/BreederForm1.tsx
@@ -6,7 +6,7 @@ import {
   selectBreeder_search,
   set_breedersearchkeyword,
 } from "../../../../redux/Collect1/BreederSearchSlice1";
-import { Btn, Container, Form, State } from "./Styles1";
+import { Btn, Container, Form, State, ToggleContainer } from "./Styles1";
 import React from "react";
 import { useAppDispatch, useAppSelector } from "../../../../redux/hooks";
 
@@ -29,15 +29,18 @@ export default function BreederForm() {
   };
   return (
     <Container>
-      <BreederAuthToggle />
-      <State>{searchs.auth ? "인증 브리더만 보기" : "모든 브리더 보기"}</State>
+      <ToggleContainer>
+        <BreederAuthToggle />
+        <State>
+          {searchs.auth ? "인증 브리더만 보기" : "모든 브리더 보기"}
+        </State>
+      </ToggleContainer>
       <Form onSubmit={handleSubmit(onValid)}>
         <AutoInput
           register={register("keyword")}
           type="text"
           setValue={setValue}
           watch={watch}
-          width={314}
         />
         <Btn>검색</Btn>
       </Form>

diff --git a/src/component/CollectCOMP1/BreederCollect1/BreederForm1/Styles1.ts b/src/component/CollectCOMP1/BreederCollect1/BreederForm1/Styles1.ts
@@ -2,14 +2,25 @@ import { styled } from "styled-components";
 
 export const Container = styled.div`
   display: flex;
+  @media (max-width: 768px) {
+    flex-direction: column;
+    align-items: center;
+  }
   justify-content: center;
   align-items: center;
-  gap: 17px;
-  height: 52px;
+  gap: 1.7rem;
+  height: 5.2rem;
   margin: 0 auto;
   margin-bottom: -2vh;
 `;
 
+export const ToggleContainer = styled.div`
+  display: flex;
+  @media (max-width: 768px) {
+    margin-top: 8rem;
+  }
+`
+
 export const State = styled.span`
   width: 20rem;
   display: flex;
@@ -22,7 +33,11 @@ export const State = styled.span`
 `;
 export const Form = styled.form`
   display: flex;
-  gap: 17px;
+  gap: 1.5rem;
+  @media (max-width: 1120px) {
+    gap: 0.5rem;
+    width: 70%;
+  } ;
   justify-content: center;
   align-items: center;
 `;
@@ -31,7 +46,7 @@ export const Btn = styled.button`
   display: flex;
   justify-content: center;
   align-items: center;
-  width: 120px;
+  width: 12rem;
   height: 52px;
   border: none;
   border-radius: 12px;

diff --git a/src/component/CollectCOMP1/DogyCollect1/DogyBox1.tsx b/src/component/CollectCOMP1/DogyCollect1/DogyBox1.tsx
@@ -63,8 +63,8 @@ export default function DogyBox({
         {isBreederVerified ? (
           <LitteBadge>
             <svg
-              width="1.2vw"
-              height="1.2vw"
+              width="100%"
+              height="100%"
               viewBox="0 0 33 38"
               fill="none"
               xmlns="http://www.w3.org/2000/svg"

diff --git a/src/component/CollectCOMP1/DogyCollect1/DogySearchFilter1/Styles1.ts b/src/component/CollectCOMP1/DogyCollect1/DogySearchFilter1/Styles1.ts
@@ -8,18 +8,21 @@ export const Overlay = styled.div`
   height: 100%;
   background-color: rgba(0, 0, 0, 0.25);
   opacity: 1;
+  z-index: 99999;
 `;
 
 export const FilterContainer = styled.div`
   position: absolute;
   width: 50vw;
+  @media (max-width: 768px) {
+    width: 70vw;
+  }
   height: 82vh;
   border-radius: 50px;
   top: 20px;
   left: 0;
   right: 0;
   margin: 0 auto;
-  z-index: 99999;
   background-color: white;
   padding: 3vw 6vw;
 `;
@@ -31,15 +34,23 @@ export const Form = styled.form`
   gap: 2vw;
 `;
 export const Title = styled.h1`
+  width: 100%;
   font-size: 3.5rem;
   display: flex;
   align-items: center;
+  @media (max-width: 800px) {
+    flex-direction: column;
+    gap: 1rem;
+  }
 `;
 
 export const Checks = styled.div`
   display: flex;
   flex-direction: column;
   gap: 1.1vw;
+  @media (max-width: 800px) {
+    gap: 2rem;
+  }
 `;
 export const Check = styled.div`
   display: flex;
@@ -49,9 +60,13 @@ export const Check = styled.div`
 export const Buttons = styled.div`
   display: flex;
   gap: 0.8vw;
+  width: 100%;
 `;
 export const Btn = styled.div<{ $isCheck: boolean | undefined; $isLong: boolean }>`
   width: ${(props) => (props.$isLong ? "17vw" : "7.5vw")};
+  @media (max-width: 768px) {
+    width: 100%;
+  }
   height: 7vh;
   display: flex;
   justify-content: center;

diff --git a/src/component/CollectCOMP1/StylesCollect1/CollectBoxStyled1.ts b/src/component/CollectCOMP1/StylesCollect1/CollectBoxStyled1.ts
@@ -9,7 +9,10 @@ export const BoxWrapper = styled.div`
   padding-top: 15px;
   padding-bottom: 20px;
   width: 80%;
-  height: 90%;
+  height: 85%;
+  @media (max-width: 392px) {
+    height: 80%;
+  } ;
   border-radius: 12px;
   box-shadow: 0px 4px 20px 0px #00000017;
   &:hover {
@@ -18,19 +21,32 @@ export const BoxWrapper = styled.div`
 `;
 export const ImgBox = styled.div`
   position: relative;
+  margin: 0 3rem;
 `;
 export const Img = styled.img`
-  width: 12vw;
-  height: 7.2vw;
+  width: 21.7rem;
+  height: 13.7rem;
+  @media (max-width: 768px) {
+    width: 17rem;
+  } ;
+  @media (max-width: 392px) {
+    width: 15rem;
+  } ;
   border-radius: 12px;
   background-color: aliceblue;
   object-fit: cover;
 `;
 
 export const AlreadyImg = styled.img`
   position: relative;
-  width: 12vw;
-  height: 7.2vw;
+  width: 21.7rem;
+  @media (max-width: 768px) {
+    width: 17rem;
+  } ;
+  @media (max-width: 392px) {
+    width: 15rem;
+  } ;
+  height: 13.7rem;
   border-radius: 12px;
   object-fit: cover;
 `;
@@ -54,20 +70,39 @@ export const Availtext = styled.div`
 `;
 
 export const Dermyimg = styled.div`
-  width: 12vw;
-  height: 7.2vw;
+  width: 21.7rem;
+  @media (max-width: 768px) {
+    width: 17rem;
+  } ;
+  @media (max-width: 392px) {
+    width: 15rem;
+  } ;
+  
+  height: 13.7rem;
   border-radius: 12px;
   background-color: slategray;
 `;
 export const Badge = styled.span`
   position: absolute;
   bottom: 5px;
   right: 5px;
+  width: 3.5rem;
+  height: 3.5rem;
+  @media (max-width:392px)  {
+    width: 3rem;
+    height: 3rem;
+  }
 `;
 export const Nameline = styled.div`
   display: flex;
   align-items: center;
-  width: 12vw;
+  width: 21.7rem;
+  @media (max-width: 768px) {
+    width: 17rem;
+  } ;
+  @media (max-width: 392px) {
+    width: 15rem;
+  } ;
 `;
 export const Name = styled.span`
   /* width: 220px; */
@@ -82,11 +117,20 @@ export const Distance = styled.span`
   margin-top: 2px;
   margin-left: 0.7vw;
   font-size: 2rem;
+  @media (max-width: 392px) {
+    font-size: 1.5rem;
+  } ;
   color: #333333;
   font-weight: 600;
 `;
 export const MajorDog = styled.div`
-  width: 12vw;
+  width: 21.7rem;
+  @media (max-width: 768px) {
+    width: 17rem;
+  } ;
+  @media (max-width: 392px) {
+    width: 15rem;
+  } ;
   font-family: "Noto Sans KR", sans-serif;
   font-weight: 600;
   font-size: 1.5rem;
@@ -97,12 +141,20 @@ export const LitteBadge = styled.span`
   display: flex;
   justify-content: center;
   align-items: center;
+  width: 2rem;
+  height: 2rem;
 `;
 
 export const Doginfo = styled.div`
   display: flex;
   flex-direction: column;
-  width: 12vw;
+  width: 21.7rem;
+  @media (max-width: 768px) {
+    width: 17rem;
+  } ;
+  @media (max-width: 392px) {
+    width: 15rem;
+  } ;
   gap: 2px;
 `;