Merge pull request #30 from abyss-s/main

Refactor, Design: #29 반응형으로 Layout 수정
likelion-inha-hackathon-2 · Jul 4, 2024 · 4dc7eb2 · 4dc7eb2
2 parents 93a37a6 + 3c3790c
commit 4dc7eb2
Show file tree

Hide file tree

Showing 26 changed files with 423 additions and 291 deletions.
diff --git a/my-app/public/index.html b/my-app/public/index.html
@@ -2,14 +2,17 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <link
+      rel="icon"
+      href="https://noticon-static.tammolo.com/dgggcrkxq/image/upload/v1675619408/noticon/xvubx518cxd9uv8svlxi.png"
+    />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
     <meta
       name="description"
       content="Web site created using create-react-app"
     />
-    <title>React App</title>
+    <title>SAFE-T</title>
     <script src="https://t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js"></script>
     <script
       type="text/javascript"

diff --git a/my-app/src/App.jsx b/my-app/src/App.jsx
@@ -10,21 +10,24 @@ import MoreMyInfo from "./pages/MoreMyInfo";
 import ArriveLocation from "./pages/ArriveLocation"; // QR 스캔1 (주소지 목록 불러오기)
 import Scan from "./pages/Scan"; // QR 스캔2
 import EmerCall from "./pages/EmerCall"; // 긴급 호출
+import Layout from "./components/Layout/Layout"; // 레이아웃 컴포넌트 추가
 
 function App() {
   return (
     <BrowserRouter>
       <Routes>
-        <Route path="/" element={<Home />} />
-        <Route path="/login" element={<Login />} />
-        <Route path="/signup" element={<SignUp />} />
-        <Route path="/main" element={<Main />} />
-        <Route path="/call" element={<Call />} />
-        <Route path="/me" element={<MyInfo />} />
-        <Route path="/more-me" element={<MoreMyInfo />} />
-        <Route path="/arrive-location" element={<ArriveLocation />} />
-        <Route path="/scan" element={<Scan />} />
-        <Route path="/emercall" element={<EmerCall />} />
+        <Route element={<Layout />}>
+          <Route path="/" element={<Home />} />
+          <Route path="/login" element={<Login />} />
+          <Route path="/signup" element={<SignUp />} />
+          <Route path="/main" element={<Main />} />
+          <Route path="/call" element={<Call />} />
+          <Route path="/me" element={<MyInfo />} />
+          <Route path="/more-me" element={<MoreMyInfo />} />
+          <Route path="/arrive-location" element={<ArriveLocation />} />
+          <Route path="/scan" element={<Scan />} />
+          <Route path="/emercall" element={<EmerCall />} />
+        </Route>
       </Routes>
     </BrowserRouter>
   );

diff --git a/my-app/src/assets/image.js b/my-app/src/assets/image.js
@@ -1,6 +1,9 @@
 // 택시 이미지
 export { default as ImageTaxi } from "./images/taxi.png";
 
+// 로고 이미지
+export { default as ImageLogo } from "./images/logo.png";
+
 // 프로필 용 유저 이미지
 export { default as ImageUser } from "./images/user.png";
 

diff --git a/my-app/src/assets/images/logo.png b/my-app/src/assets/images/logo.png
diff --git a/my-app/src/components/Button/AddButton.jsx b/my-app/src/components/Button/AddButton.jsx
@@ -7,7 +7,7 @@ const StyledAddButton = styled.div`
 `;
 
 // 수정 가능하도록 ...rest 추가
-const AddButton = ({ onClick, text, fontSize = "14px", width = "150px", ...rest }) => {
+const AddButton = ({ onClick, text, fontSize = "14px", width = "auto", ...rest }) => {
   return (
     <StyledAddButton>
       <Button text={text} fontSize={fontSize} width={width} onClick={onClick} {...rest} />

diff --git a/my-app/src/components/Button/Button.jsx b/my-app/src/components/Button/Button.jsx
@@ -30,8 +30,9 @@ const Button = ({
 
 const StyledButton = styled.button`
   font-size: ${(props) => props.fontSize || "24px"};
-  width: ${(props) => props.width || "360px"};
-  height: ${(props) => props.height || "54px"};
+  width: ${(props) => props.width || "auto"};
+  height: ${(props) => props.height || "auto"};
+  padding: ${(props) => props.padding || "10px 10px"};
   background-color: ${(props) => props.backgroundColor || "#0d99ff;"};
   color: ${(props) => props.color || "white"};
   border: none;

diff --git a/my-app/src/components/Button/CancleButton.jsx b/my-app/src/components/Button/CancleButton.jsx
@@ -6,9 +6,7 @@ import { ButtonCancle } from "../../assets/image";
 
 const CancleButton = ({ onClick }) => {
   return (
-    <div onClick={onClick} style={{ cursor: "pointer" }}>
-      {/* 지도 */}
-
+    <div onClick={onClick} style={{ cursor: "pointer", margin: "20px" }}>
       <Image src={ButtonCancle} />
     </div>
   );

diff --git a/my-app/src/components/Container/Container.jsx b/my-app/src/components/Container/Container.jsx
@@ -1,5 +1,3 @@
-// ../components/Container/Container.js
-
 import React from "react";
 import styled from "styled-components";
 
@@ -18,13 +16,13 @@ const ContainerWrapper = styled.div`
   background-color: #fff;
   border: 3px solid #e6e6e6;
   border-radius: 10px;
-  width: 430px;
+  width: 320px; /* iPhone SE */
+  height: 568px; /* iPhone SE */
   max-width: 100%;
-  height: 932px;
   padding: 0 20px;
   margin: 0 auto;
-  
-  @media (max-width: 430px) {
+
+  @media (max-width: 320px) {
     width: 100%;
     height: auto;
   }

diff --git a/my-app/src/components/Flex/Flex.jsx b/my-app/src/components/Flex/Flex.jsx
@@ -1,5 +1,3 @@
-// ../components/Flex/Flex
-
 import React from "react";
 import styled from "styled-components";
 
@@ -8,15 +6,29 @@ const StyledFlex = styled.div`
   justify-content: ${(props) => props.justify || "center"};
   align-items: ${(props) => props.align || "center"};
   flex-direction: ${(props) => props.direction || "column"};
+  padding-top: ${(props) => props.paddingTop || "0"};
 `;
 
-const Flex = ({ direction, justify, align, ...props }) => {
+const Flex = ({
+  direction,
+  justify,
+  align,
+  paddingTop,
+  mobilePaddingTop,
+  tabletPaddingTop,
+  desktopPaddingTop,
+  ...props
+}) => {
   return (
     <StyledFlex
       direction={direction}
       justify={justify}
       align={align}
-      {...props/* Flex 속성을 간편하게 적용하기 위한 컴포넌트입니다. */}
+      paddingTop={paddingTop}
+      mobilePaddingTop={mobilePaddingTop}
+      tabletPaddingTop={tabletPaddingTop}
+      desktopPaddingTop={desktopPaddingTop}
+      {...props}
     />
   );
 };

diff --git a/my-app/src/components/Header/Header1.jsx b/my-app/src/components/Header/Header1.jsx
@@ -1,3 +1,5 @@
+// src/components/Header/Header1.jsx
+
 import React from "react";
 import styled from "styled-components";
 import Image from "../Image/Image";
@@ -9,19 +11,31 @@ const Wrapper = styled.div`
   top: 0;
   width: 100%;
   z-index: 100;
+  background: #0d99ff;
 `;
 
 const Container = styled.div`
   display: flex;
-  width: 473px;
-  height: 64px;
   justify-content: space-between;
   align-items: center;
-  border-bottom: 1px solid #dee5ed;
+  height: 56px;
   margin: 0 auto;
   background: #0d99ff;
+  border-bottom: 1px solid #dee5ed;
   border-top-right-radius: 10px;
   border-top-left-radius: 10px;
+
+  /* 모바일 설정 (iPhone SE) */
+  @media (max-width: 320px) {
+    width: 320px;
+ 
+  }
+
+  /* 데스크톱 설정 (1440x1024) */
+  @media (min-width: 1440px) {
+    width: 1440px;
+ 
+  }
 `;
 
 const IconContainer = styled.div`
@@ -36,7 +50,7 @@ const TextContainer = styled.div`
   align-items: center;
   padding-right: 20px;
   cursor: pointer;
-  color: #ffffff; 
+  color: #ffffff;
   font-size: 20px;
 `;
 

diff --git a/my-app/src/components/Header/Header2.jsx b/my-app/src/components/Header/Header2.jsx
@@ -7,27 +7,49 @@ import { useNavigate } from "react-router-dom";
 const Wrapper = styled.div`
   position: fixed;
   top: 0;
+  width: 100%;
   z-index: 100;
+  background: #0d99ff;
 `;
 
 const Container = styled.div`
   display: flex;
-  width: 473px;
-  height: 64px;
   justify-content: space-between;
   align-items: center;
-  border-bottom: 1px solid #dee5ed;
+  height: 56px;
   margin: 0 auto;
   background: #0d99ff;
+  border-bottom: 1px solid #dee5ed;
   border-top-right-radius: 10px;
   border-top-left-radius: 10px;
+
+  /* 모바일 설정 (iPhone SE) */
+  @media (max-width: 320px) {
+    width: 320px;
+    padding: 0 20px;
+  }
+
+  /* 데스크톱 설정 (1440x1024) */
+  @media (min-width: 1440px) {
+    width: 1440px;
+    padding: 0 20px;
+  }
 `;
 
 const IconContainer = styled.div`
   display: flex;
   align-items: center;
-  cursor: pointer;
   padding-left: 20px;
+  cursor: pointer;
+`;
+
+const TextContainer = styled.div`
+  display: flex;
+  align-items: center;
+  padding-right: 20px;
+  cursor: pointer;
+  color: #ffffff;
+  font-size: 20px;
 `;
 
 const Header2 = () => {
@@ -43,6 +65,7 @@ const Header2 = () => {
         <IconContainer onClick={goToBackPage}>
           <Image src={IconArrow} />
         </IconContainer>
+        <TextContainer>{/* 내 정보가 없는 헤더입니다. */}</TextContainer>
       </Container>
     </Wrapper>
   );

diff --git a/my-app/src/components/Input/Input.jsx b/my-app/src/components/Input/Input.jsx
@@ -7,6 +7,7 @@ const InputWrapper = styled.div`
   flex-direction: row;
   align-items: center;
   justify-content: space-between;
+  margin: 3px;
 `;
 
 // 레이블

diff --git a/my-app/src/components/Layout/Layout.jsx b/my-app/src/components/Layout/Layout.jsx
@@ -0,0 +1,55 @@
+import React from "react";
+import styled from "styled-components";
+import { Outlet } from "react-router-dom"; // 중첩 라우터 설정
+
+const Layout = () => {
+  return (
+    <LayoutWrapper>
+      <ContainerWrapper>
+        <Outlet /> {/* 자식 컴포넌트를 렌더링 */}
+      </ContainerWrapper>
+    </LayoutWrapper>
+  );
+};
+
+const LayoutWrapper = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh; /* 부모 요소의 높이를 100%로 설정 */
+  width: 100vw; /* 부모 요소의 너비를 100%로 설정 */
+
+  /* 데스크톱 설정 */
+  @media (min-width: 768px) {
+  }
+`;
+
+const ContainerWrapper = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: #fff;
+
+  border-radius: 10px;
+  width: 320px;
+  height: 568px;
+  max-width: 100%;
+  padding: 0 20px;
+  margin: 0 auto;
+
+  /* 모바일 설정 */
+  @media (max-width: 767px) {
+    width: 100%;
+    height: auto;
+    padding-top: 100px;
+    padding-bottom: 100px;
+  }
+
+  /* 데스크톱 설정 */
+  @media (min-width: 768px) {
+    width: 90%; // 너비 설정
+    height: auto;
+  }
+`;
+
+export default Layout;
diff --git a/my-app/src/components/Map/Map.jsx b/my-app/src/components/Map/Map.jsx
@@ -4,6 +4,7 @@ import styled from "styled-components";
 const StyledMap = styled.div`
   width: 100%;
   height: 300px;
+  margin-top: 10px;
 `;
 
 const Map = ({ route, taxi }) => {