Merge pull request #92 from LikeLionHGU/hwan_#83/Schedule_View

Hwan #83/schedule view
LikeLionHGU · Feb 22, 2024 · f84e6bc · f84e6bc
2 parents d4149c7 + 6486b6d
commit f84e6bc
Show file tree

Hide file tree

Showing 9 changed files with 647 additions and 56 deletions.
diff --git a/src/components/Schedule.jsx b/src/components/Schedule.jsx
@@ -3,12 +3,12 @@ import InAirport from "./SchedulePage/InAirport";
 import ToggleBtn from "./SchedulePage/Changing/ToggleBtn";
 // import Header from "./layout/Header";
 import ScheduleHeader from "./SchedulePage/NoChanging/Schedule_Header";
-import About_Header from "./AboutPage/About_Header"; //흰색 header
+import About_Header from "./AboutPage/About_Header"; //��� header
 
 function Schedule() {
-  // header 색상 바뀌게 하는 함수
+  // header ���� �ٲ�� �ϴ� �Լ�
   const [scrollPosition, setScrollPosition] =
-    useState(0); /*scroll 위치에 따라서 저장 함수*/
+    useState(0); /*scroll ��ġ�� ���� ���� �Լ�*/
 
   useEffect(() => {
     const handleScroll = () => {
@@ -24,15 +24,22 @@ function Schedule() {
   }, []); // Empty dependency array to ensure effect runs only once
 
   const id =
-    scrollPosition > 420 /* header 바뀌는 높이 */
+    scrollPosition > 420 /* header �ٲ�� ���� */
       ? "second"
-      : "first"; /*scroll 높이에 따라서 조건이 바뀌도록*/
+      : "first"; /*scroll ���̿� ���� ������ �ٲ��*/
+
+  const [isOn, setisOn] = useState(false);
+
+  const toggleHandler = () => {
+    // isOn의 상태를 변경하는 메소드를 구현
+    setisOn(!isOn);
+  };
 
   return (
     <>
       {id === "first" ? <ScheduleHeader /> : <About_Header />}
-      <ToggleBtn />
-      <InAirport />
+      <ToggleBtn isOn={isOn} toggleHandler={toggleHandler} />
+      {isOn ? "out" : <InAirport />}
     </>
   );
 }

diff --git a/src/components/SchedulePage/Changing/InView.jsx b/src/components/SchedulePage/Changing/InView.jsx
@@ -1,14 +1,18 @@
 import { useState } from "react";
 import styled from "styled-components";
 import InViewFood from "./View/InViewFood";
+import InViewRest from "./View/InViewRest";
+import InViewShopping from "./View/InViewShopping";
 
 const StyleContainer = styled.div`
   font-size: 20px;
+  margin: 0 3%;
 `;
 const TitleCover = styled.div`
   border-bottom: 1px solid white;
   padding-top: 130px;
-  /* margin: 0 3%; */
+=======
+  
 
   font-family: EsaManru;
   font-size: 135px;
@@ -19,25 +23,56 @@ const Title = styled.div`
   margin: 0 30px;
   text-align: center;
 `;
-const Food = styled.div``;
-const Rest = styled.div``;
-const Shopping = styled.div``;
+
+const ViewContainer = styled.div`
+  padding: 80px 0;
+`;
+
+const ViewTitle = styled.div``;
+
+const ViewBtnContainer = styled.div`
+  padding: 30px 0;
+  padding-top: 40px;
+`;
+
+const CategoryTitle = styled.div`
+  padding-top: 30px;
+`;
+
+const ViewBtn = styled.button`
+  background-color: rgba(44, 110, 73, 1);
+  border: 1px solid rgba(244, 240, 231, 1);
+  border-radius: 5px;
+  padding: 15px 15px;
+  margin-right: 20px;
+  color: rgba(244, 240, 231, 1);
+
+  font-size: 15px;
+
+  &:hover {
+    background-color: #b8b8b8;
+  }
+`;
 
 export default function View() {
   //   const [category, setCategory] = useState("0");
+  const [inFood, setInFood] = useState(true);
   const [inRest, setInRest] = useState(false);
   const [inShopping, setInShopping] = useState(false);
 
   const handleFood = () => {
+    setInFood(true);
     setInRest(false);
     setInShopping(false);
   };
 
   const handleRest = () => {
+    setInFood(false);
     setInRest(true);
     setInShopping(false);
   };
   const handleShopping = () => {
+    setInFood(false);
     setInRest(false);
     setInShopping(true);
   };
@@ -47,21 +82,59 @@ export default function View() {
       <TitleCover>
         <Title>EXPERIENCE IN AIRPORT</Title>
       </TitleCover>
-      <div>Choose a Category to View</div>
-      <div>
-        <Food onClick={() => handleFood()}>Food & Beverages</Food>
-        <Rest onClick={() => handleRest()}>Rest facilities</Rest>
-        <Shopping onClick={() => handleShopping()}>Shopping</Shopping>
-      </div>
-      <div style={{ color: " red" }}>
-        {inShopping ? (
-          <div>Shopping</div>
-        ) : inRest ? (
-          <div>Rest facilities</div>
-        ) : (
-          <InViewFood />
-        )}
-      </div>
+      <ViewContainer>
+        <ViewTitle>Choose a Category to View</ViewTitle>
+        <ViewBtnContainer>
+          <ViewBtn
+            style={
+              inFood
+                ? {
+                    background: "rgba(244, 240, 231, 1)",
+                    color: "rgba(44, 110, 73, 1)",
+                  }
+                : {}
+            }
+            onClick={() => handleFood()}
+          >
+            Food & Beverages
+          </ViewBtn>
+          <ViewBtn
+            style={
+              inRest
+                ? {
+                    background: "rgba(244, 240, 231, 1)",
+                    color: "rgba(44, 110, 73, 1)",
+                  }
+                : {}
+            }
+            onClick={() => handleRest()}
+          >
+            Rest facilities
+          </ViewBtn>
+          <ViewBtn
+            style={
+              inShopping
+                ? {
+                    background: "rgba(244, 240, 231, 1)",
+                    color: "rgba(44, 110, 73, 1)",
+                  }
+                : {}
+            }
+            onClick={() => handleShopping()}
+          >
+            Shopping
+          </ViewBtn>
+        </ViewBtnContainer>
+        <CategoryTitle>
+          {inShopping ? (
+            <InViewShopping />
+          ) : inRest ? (
+            <InViewRest />
+          ) : (
+            <InViewFood />
+          )}
+        </CategoryTitle>
+      </ViewContainer>
     </StyleContainer>
   );
 }
diff --git a/src/components/SchedulePage/Changing/ToggleBtn.jsx b/src/components/SchedulePage/Changing/ToggleBtn.jsx
@@ -90,14 +90,7 @@ const InCircle = styled.img`
   padding-bottom: 6px;
 `;
 
-export default function ToggleBtn() {
-  const [isOn, setisOn] = useState(false);
-
-  const toggleHandler = () => {
-    // isOn의 상태를 변경하는 메소드를 구현
-    setisOn(!isOn);
-  };
-
+export default function ToggleBtn({ isOn, toggleHandler }) {
   return (
     <Main>
       <ToggleContainer onClick={toggleHandler}>

diff --git a/src/components/SchedulePage/Changing/View/InViewCard.jsx b/src/components/SchedulePage/Changing/View/InViewCard.jsx
@@ -0,0 +1,105 @@
+import styled from "styled-components";
+import "../../../../font/font.css";
+
+const StyleContainer = styled.div``;
+
+const Card = styled.div`
+  display: flex;
+  padding: 50px 0;
+
+  font-family: Pretendard-Regular;
+`;
+
+const ImageCard = styled.img`
+  width: 40%;
+  height: 500px;
+  border-radius: 5px;
+
+  object-fit: cover;
+`;
+
+const InfoBox = styled.div`
+  padding: 0 80px;
+`;
+
+const Name = styled.div`
+  font-family: EsaManru;
+  font-weight: 200;
+  font-size: 50px;
+`;
+
+const Hours = styled.div`
+  font-weight: 300;
+  font-size: 24px;
+`;
+
+const Location = styled.div`
+  font-size: 22px;
+`;
+
+const Info = styled.div`
+  width: 700px;
+
+  font-size: 20px;
+`;
+
+const BlogBtn = styled.button`
+  border: 1px solid #f4f0e7;
+  padding: 20px 50px;
+  border-radius: 5px;
+
+  background-color: #f4f0e7;
+  color: #2c6e49;
+`;
+
+function InViewCard({
+  key,
+  imageURL,
+  name,
+  businessHours,
+  location,
+  information,
+  blog,
+  index,
+}) {
+  const ToBlog = () => {
+    window.open(blog);
+  };
+  return (
+    <StyleContainer>
+      <Card style={index % 2 === 1 ? { flexDirection: "row-reverse" } : null}>
+        <ImageCard src={imageURL} />
+        <InfoBox
+          style={
+            index % 2 === 1
+              ? {
+                  display: "flex",
+                  flexDirection: "column",
+                  alignItems: "flex-end",
+                }
+              : null
+          }
+        >
+          <Name>{name}</Name>
+          <Hours>{businessHours}</Hours>
+          <Location>{location}</Location>
+          <Info style={index % 2 === 1 ? { textAlign: "right" } : null}>
+            {information}
+          </Info>
+          {blog ? <BlogBtn onClick={ToBlog}>DISCOVER</BlogBtn> : ""}
+        </InfoBox>
+      </Card>
+    </StyleContainer>
+  );
+}
+
+// InViewCard.propTypes = {
+//   key: PropTypes.number.isRequired,
+//   coverImg: PropTypes.string.isRequired,
+//   title: PropTypes.string.isRequired,
+//   summary: PropTypes.string.isRequired,
+//   rating: PropTypes.number.isRequired,
+//   genres: PropTypes.arrayOf(PropTypes.string).isRequired,
+// };
+
+export default InViewCard;