Merge pull request #114 from next-petree/boilerPlate

Boiler plate
next-petree · Feb 5, 2024 · 45fc6dd · 45fc6dd
2 parents f0533b7 + 1a9736e
commit 45fc6dd
Show file tree

Hide file tree

Showing 10 changed files with 286 additions and 45 deletions.
diff --git a/src/component/ChangePasswordContent/ChangePasswordContentStyle.ts b/src/component/ChangePasswordContent/ChangePasswordContentStyle.ts
@@ -33,6 +33,11 @@ export const PasswordInputArea = styled.div`
   display: flex;
   flex-direction: column;
   margin: 20px 150px 0 0;
+  @media (max-width: 768px) {
+    margin: 0;
+  }
+  @media (max-width: 390px) {
+  }
 `;
 
 export const NewPasswordArea = styled.div`
@@ -69,6 +74,11 @@ const Input = styled.input`
   background-color: #f5f5f5;
   border: 0px;
   border-radius: 10px;
+  @media (max-width: 768px) {
+  }
+  @media (max-width: 390px) {
+    width: 60%;
+  }
 `;
 
 export const NewPasswordInput = styled(Input)``;

diff --git a/src/component/FindEmailOrPasswordContent/FindEmailOrPasswordContent.tsx b/src/component/FindEmailOrPasswordContent/FindEmailOrPasswordContent.tsx
@@ -95,6 +95,7 @@ const FindEmailOrPasswordContent = ({ pageType }: Props) => {
         response.data.status === "FAIL" &&
         typeof response.data.data !== "string"
       ) {
+        console.log(response.data.data);
         await Swal.fire(alertList.errorMessage(`${response.data.data.code}`));
       }
     } catch (error) {
@@ -119,6 +120,7 @@ const FindEmailOrPasswordContent = ({ pageType }: Props) => {
         response.data.status === "FAIL" &&
         typeof response.data.data !== "string"
       ) {
+        console.log(response.data);
         await Swal.fire(alertList.errorMessage(`${response.data.data.code}`));
       }
     } catch (error) {
@@ -162,7 +164,9 @@ const FindEmailOrPasswordContent = ({ pageType }: Props) => {
         <CharacterImage />
         <InnerContentArea>
           <NameInputArea>
-            <NameText>{pageType === "findemail" ? "이름" : "이메일"}</NameText>
+            <NameText>
+              {pageType === "findemail" ? "닉네임" : "이메일"}
+            </NameText>
 
             <NameInput
               value={nickname}

diff --git a/...nt/FindEmailOrPasswordContent/FindEmailOrPasswordResult/FindEmailOrPasswordResultStyle.ts b/...nt/FindEmailOrPasswordContent/FindEmailOrPasswordResult/FindEmailOrPasswordResultStyle.ts
@@ -49,6 +49,12 @@ export const ResultInput = styled.input`
   background-color: #f5f5f5;
   border: 0px;
   border-radius: 10px;
+  @media (max-width: 768px) {
+    width: 70%;
+    height: 25px;
+  }
+  @media (max-width: 390px) {
+  }
 `;
 
 export const ButtonArea = styled.div`
@@ -57,6 +63,11 @@ export const ButtonArea = styled.div`
   margin-top: 20px;
   gap: 28px;
   margin-top: 100px;
+  @media (max-width: 768px) {
+  }
+  @media (max-width: 390px) {
+    flex-direction: column;
+  }
 `;
 
 const Button = `
@@ -74,7 +85,8 @@ font-size: 15px;
 text-decoration: none;
 cursor: pointer;
 justify-content: center;
-align-items: center;`;
+align-items: center;
+`;
 
 export const LoginPageButton = styled(Link)`
   ${Button}

diff --git a/src/component/FindEmailOrPasswordContent/FindEmailOrPasswordStyle.ts b/src/component/FindEmailOrPasswordContent/FindEmailOrPasswordStyle.ts
@@ -7,6 +7,11 @@ export const Container = styled.div`
   margin: 300px auto 0 auto;
   flex-direction: column;
   align-items: center;
+  @media (max-width: 768px) {
+    margin: 150px auto 0 auto;
+  }
+  @media (max-width: 390px) {
+  }
 `;
 
 export const FindEmailOrPasswordTitle = styled.div`
@@ -24,6 +29,16 @@ export const ContentArea = styled.div`
   height: 300px;
   display: flex;
   margin-right: 180px;
+  width: 100%;
+  justify-content: center;
+  @media (max-width: 768px) {
+    margin-right: 0px;
+    height: 500px;
+    flex-direction: column;
+    align-items: center;
+  }
+  @media (max-width: 390px) {
+  }
 `;
 
 export const CharacterImage = styled.div`
@@ -37,6 +52,9 @@ export const CharacterImage = styled.div`
 
 export const InnerContentArea = styled.div`
   margin-top: 30px;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
 `;
 
 const InputArea = styled.div`
@@ -75,6 +93,11 @@ const Input = styled.input`
   background-color: #f5f5f5;
   border: 0px;
   border-radius: 10px;
+  @media (max-width: 768px) {
+  }
+  @media (max-width: 390px) {
+    width: 180px;
+  }
 `;
 
 export const NameInput = styled(Input)``;
@@ -92,6 +115,14 @@ const Button = styled.button`
   padding: 0 16px;
   margin-left: 10px;
   color: #fff;
+  @media (max-width: 768px) {
+    padding: 0 8px;
+    font-size: 14px;
+  }
+  @media (max-width: 390px) {
+    padding: 0 8px;
+    font-size: 13px;
+  }
 `;
 
 export const PhoneNumberSendButton = styled(Button)`

diff --git a/src/component/Footer/FooterStyle.ts b/src/component/Footer/FooterStyle.ts
@@ -6,12 +6,13 @@ import petTreeTextImage from "../../assets/images/PetreeTitleBig.png";
 import copyRightLogo from "../../assets/images/Copyright.png";
 
 export const Container = styled.footer`
-  height: 325px;
+  min-height: 325px;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: flex-end;
   background: #507375;
+  max-width: 100%;
 `;
 
 export const InnerContent = styled.div`
@@ -20,19 +21,30 @@ export const InnerContent = styled.div`
   width: 70%;
   padding-bottom: 40px;
   border-bottom: 1px solid rgba(255, 255, 255, 0.53);
+  @media (max-width: 800px) {
+    margin-top: 20px;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+  }
 `;
 
 export const LeftArea = styled.div`
   display: flex;
   flex-direction: column;
   align-items: flex-start;
+  @media (max-width: 800px) {
+    justify-content: center;
+    align-items: center;
+  }
 `;
 
 export const TitleArea = styled.div`
   display: flex;
   justify-content: center;
   align-items: center;
   gap: 11px;
+  flex-direction: column;
 `;
 
 export const TitleLogo = styled.div`
@@ -55,6 +67,9 @@ export const InnerTextArea = styled.div`
   width: 200px;
   heigth: 100px;
   color: #fff;
+  @media (max-width: 800px) {
+    text-align: center;
+  }
 `;
 
 export const InnerText = styled.p`
@@ -81,7 +96,12 @@ export const CategoriesMenu = styled.ul`
   font-size: 16px;
   font-style: normal;
   font-weight: 900;
+  padding: 0;
   line-height: 26px;
+  @media (max-width: 800px) {
+    margin-left: 0px;
+    text-align: center;
+  }
 `;
 
 export const CategoriesLink = styled(Link)`
@@ -103,6 +123,10 @@ export const PagesMenu = styled.ul`
   font-weight: 900;
   line-height: 26px;
   margin-left: 10px;
+  @media (max-width: 800px) {
+    margin-left: 0px;
+    text-align: center;
+  }
 `;
 
 export const PagesLink = styled(Link)`

diff --git a/src/component/Header/Header.tsx b/src/component/Header/Header.tsx
@@ -11,6 +11,7 @@ import {
   TitleLogo,
   TitleText,
   HeaderContent,
+  HamburgerIcon,
   NavigationMenu,
   NavigationLink,
   UserProfileImage,
@@ -23,10 +24,31 @@ import alertList from "../../utils/Swal1";
 
 const Header = () => {
   const [isLoggedIn, setIsLoggedIn] = useState<boolean>(false);
+  const [isDropdownVisible, setIsDropdownVisible] = useState(false);
+  const [windowWidth, setWindowWidth] = useState(window.innerWidth);
+
   const navigate = useNavigate();
   const profileImg = useAppSelector(selectBreederProfile);
   const dispath = useAppDispatch();
 
+  useEffect(() => {
+    const handleResize = () => {
+      setWindowWidth(window.innerWidth);
+      if (window.innerWidth > 1300) {
+        setIsDropdownVisible(false);
+      }
+    };
+
+    window.addEventListener("resize", handleResize);
+    return () => window.removeEventListener("resize", handleResize);
+  }, []);
+
+  const toggleDropdown = () => {
+    if (window.innerWidth <= 1300) {
+      setIsDropdownVisible(!isDropdownVisible);
+    }
+  };
+
   const handleClick = async () => {
     if (isLoggedIn) {
       navigate("/mypage/modifyauth");
@@ -57,17 +79,28 @@ const Header = () => {
         <TitleText />
       </TitleArea>
       <HeaderContent>
-        {decodedData?.role === "BREEDER" ? (
-          <NavigationMenu>
-            <NavigationLink to="/certify">브리더 인증받기</NavigationLink>
-            <NavigationLink to="/dogys/1">강아지 모아보기</NavigationLink>
-            <NavigationLink to="/breeders/1">브리더 모아보기</NavigationLink>
-          </NavigationMenu>
-        ) : (
-          <NavigationMenu>
-            <NavigationLink to="/test-description">인증 테스트</NavigationLink>
-            <NavigationLink to="/dogys/1">강아지 모아보기</NavigationLink>
-            <NavigationLink to="/breeders/1">브리더 모아보기</NavigationLink>
+        {windowWidth <= 1300 && <HamburgerIcon onClick={toggleDropdown} />}
+        {(windowWidth > 1300 || isDropdownVisible) && (
+          <NavigationMenu className={isDropdownVisible ? "visible" : ""}>
+            {decodedData?.role === "BREEDER" ? (
+              <>
+                <NavigationLink to="/certify">브리더 인증받기</NavigationLink>
+                <NavigationLink to="/dogys/1">강아지 모아보기</NavigationLink>
+                <NavigationLink to="/breeders/1">
+                  브리더 모아보기
+                </NavigationLink>
+              </>
+            ) : (
+              <>
+                <NavigationLink to="/test-description">
+                  인증 테스트
+                </NavigationLink>
+                <NavigationLink to="/dogys/1">강아지 모아보기</NavigationLink>
+                <NavigationLink to="/breeders/1">
+                  브리더 모아보기
+                </NavigationLink>
+              </>
+            )}
           </NavigationMenu>
         )}