Test

src/@components/@common/GeneralNav.jsx

@@ -6,22 +6,12 @@ import Logo from '../../assets/header/purplelogo.svg';
 import MypageIcon from '../../assets/header/ic_my_black.svg';
 import HouseIcon from '../../assets/header/ic_home.svg';
 import GrayCramp from '../../assets/header/icn_cramp_gray.svg';
-import { useNavigate } from 'react-router-dom';
 
-export default function GeneralNav() {
-  const [hideElement, setHideElement] = useState(false);
+export default function GeneralNav({ footprint1, footprint2 }) {
+  const [hideElement, setHideElement] = useState(false); //true 이면 요소가 천장에 닿았다는 것.
   const scrollRef = useRef(null);
-  const navigate = useNavigate();
-
-  function goMain() {
-    navigate('/');
-  }
-
-  function yScrollEvent() {
-    const scroll = scrollRef.current.getBoundingClientRect();
-
-    scroll.top <= 0 ? setHideElement(true) : setHideElement(false); //코드리뷰 반영!
-  }
+  const fprint1 = footprint1;
+  const fprint2 = footprint2;
 
   useEffect(() => {
     if (!scrollRef.current) return;
@@ -31,9 +21,17 @@ export default function GeneralNav() {
     };
   }, [scrollRef.current]);
 
+  const yScrollEvent = () => {
+    const scroll = scrollRef.current.getBoundingClientRect();
+    console.log(scroll);
+    //setHideElement(scroll.top <= 0);
+    scroll.top <= 0 ? setHideElement(true) : setHideElement(false); //코드리뷰 반영!
+  };
+
   return (
     <WrapperWrapper>
       <Wrapper>
+        {/*로그인 회원가입 있는 nav*/}
         <VipMenu>VIP LOUNGE</VipMenu>
         <MembershipMenu>멤버십</MembershipMenu>
         <CustomerCenterMenu>고객센터</CustomerCenterMenu>
@@ -50,7 +48,7 @@ export default function GeneralNav() {
         <Ticketing>예매</Ticketing>
         <Theater>극장</Theater>
         <LogoWrapper>
-          <img src={Logo} onClick={goMain} />
+          <img src={Logo} />
         </LogoWrapper>
         <Event>이벤트</Event>
         <Store>스토어</Store>
@@ -63,13 +61,27 @@ export default function GeneralNav() {
             <WhiteMiniNav>
               <HouseIconWrapper></HouseIconWrapper>
               <GrayCrampWrapper></GrayCrampWrapper>
+              <FootprintTextWrapper>
+                <FootprintText>{fprint1}</FootprintText>
+              </FootprintTextWrapper>
+              <GrayCrampWrapper></GrayCrampWrapper>
+              <FootprintTextWrapper>
+                <FootprintText>{fprint2}</FootprintText>
+              </FootprintTextWrapper>
             </WhiteMiniNav>
           ) : (
             <BlackMiniNavWrapper>
-              <MiniNav background="#444" position="fixed" top="0rem">
+              <BlackMiniNav>
                 <HouseIconWrapper></HouseIconWrapper>
                 <GrayCrampWrapper></GrayCrampWrapper>
-              </MiniNav>
+                <FootprintTextWrapper>
+                  <WhiteFootprintText>{fprint1}</WhiteFootprintText>
+                </FootprintTextWrapper>
+                <GrayCrampWrapper></GrayCrampWrapper>
+                <FootprintTextWrapper>
+                  <WhiteFootprintText>{fprint2}</WhiteFootprintText>
+                </FootprintTextWrapper>
+              </BlackMiniNav>
             </BlackMiniNavWrapper>
           )}
         </MiniNav>
@@ -132,6 +144,8 @@ const TopMiniNavBlank = styled.div`
   height: 2.4rem;
 `;
 
+////////////////// from here nav
+
 const LogoWrapper = styled.div`
   position: relative;
   bottom: 1rem;
@@ -198,6 +212,8 @@ const Benefit = styled.p`
 
 const MypageWrapper = styled.div``;
 
+////////////////////////////////////// from here mini nav
+
 const MiniNav = styled.div`
   display: flex;
   justify-content: flex-start;
@@ -208,6 +224,17 @@ const MiniNav = styled.div`
   border-top: 0.1rem solid #351f66;
 `;
 
+//////////////////// 시간 남으면 하기
+const MiniMovie = styled.p`
+  color: ${({ theme }) => theme.colors.gray3};
+`;
+
+const MiniWholeMovie = styled.p`
+  color: ${({ theme }) => theme.colors.gray3};
+`;
+
+////////////////
+
 const HouseIconWrapper = styled.div`
   margin: 1.3rem 1rem 1.25rem 9.6rem;
   background-image: url(${HouseIcon});
@@ -224,11 +251,44 @@ const GrayCrampWrapper = styled.div`
   height: 0.8rem;
 `;
 
+const ScrollHelp = styled.div`
+  height: 200rem;
+`;
+
 const WhiteMiniNav = styled.div`
   display: flex;
 `;
 
 const BlackMiniNavWrapper = styled.div`
-  display: flex;
   background: #444;
+  width: 128rem;
+  height: 3.5rem;
+  position: fixed;
+  top: 0rem;
+  z-index: 6;
+`;
+
+const BlackMiniNav = styled.div`
+  display: flex;
+  background-color: #444;
+  position: fixed;
+  top: 0rem;
+  z-index: 6;
+`;
+
+const FootprintTextWrapper = styled.div`
+  display: flex;
+  align-items: center;
+`;
+
+const FootprintText = styled.p`
+  color: ${({ theme }) => theme.colors.gray3};
+  font: ${({ theme }) => theme.fonts.body2};
+  margin-right: 1rem;
+`;
+
+const WhiteFootprintText = styled.p`
+  color: ${({ theme }) => theme.colors.white};
+  font: ${({ theme }) => theme.fonts.body2};
+  margin-right: 1rem;
 `;

src/@components/BookingPage/QuickReserve.jsx

@@ -16,7 +16,6 @@ export default function QuickReserve() {
         seoulAreaSelect={seoulAreaSelect}
         setSeoulAreaSelect={setSeoulAreaSelect}
       />
-      {/* 1. theater에 따라 시간 보이게 하기* */}
       <TimeSelection seoulAreaSelect={seoulAreaSelect} />
     </Root>
   );

src/@components/BookingPage/SpecialType.jsx

@@ -10,12 +10,13 @@ export default function SpecialType() {
         <SpecialTypeIcon src={SpecialTheaterSvg} alt="특별관" />
         <Special>특별관</Special>
       </SpecialTypeWrapper>
+
       <TimeTypeBox>
         {timeTypeArr.map((timeType) => {
           return (
             <SpecialTypeWrapper key={timeType.name}>
               <SpecialTypeIcon src={timeType.icon} alt={timeType.name} />
-              <SpecialType>{timeType.name}</SpecialType>
+              <Special>{timeType.name}</Special>
             </SpecialTypeWrapper>
           );
         })}

src/@components/BookingPage/index.jsx

@@ -7,7 +7,8 @@ import QuickReserve from './QuickReserve';
 export default function BookingPage() {
   return (
     <Root>
-      <GeneralNav />
+      <GeneralNav footprint1="예매" footprint2="빠른 예매" />
+      <Blank></Blank>
       <Title>빠른 예매</Title>
       <SubTitleWrapper>
         <SubTitle>날짜</SubTitle>
@@ -50,3 +51,8 @@ const Month = styled.h3`
   ${({ theme }) => theme.fonts.body1}
   color: ${({ theme }) => theme.colors.gray1}
 `;
+
+const Blank = styled.div`
+  height: 3.6rem;
+  width: 128rem;
+`;

src/@components/BoxofficePage/MovieCard.jsx

@@ -4,10 +4,17 @@ import { useState } from 'react';
 import Hover from './Hover';
 import twelveAge from '../../assets/AgeLimit12.png';
 import fiftinAge from '../../assets/AgeLimit15.png';
+import { Navigate } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom';
 
 function MovieCard(props) {
   const { movieData, movie } = props;
   const [isHover, setIsHover] = useState(false);
+  const navigate = useNavigate();
+
+  function goBooking() {
+    navigate('/booking');
+  }
 
   return (
     movie && (
@@ -26,7 +33,12 @@ function MovieCard(props) {
           <Rate>예매율 {movie.advanceRate}%</Rate>
         </ContentsBody>
         <ContentsFooter>
-          <BtnImg src={movieData.ticketingBtn} />
+          <BtnImg
+            src={movieData.ticketingBtn}
+            onClick={() => {
+              goBooking();
+            }}
+          />
           <HeartBtnImg src={movieData.heartBtn} />
         </ContentsFooter>
         {isHover ? (

src/@components/BoxofficePage/index.jsx

@@ -4,11 +4,14 @@ import MovieSelect from './MovieSelect';
 import Nav from './Nav';
 import GeneralNav from '../@common/GeneralNav';
 import Footer from '../@common/Footer';
+import { useNavigate } from 'react-router-dom';
 
 function Index() {
+  const navigate = useNavigate();
+
   return (
     <Wrapper>
-      <GeneralNav />
+      <GeneralNav footprint1="영화" footprint2="전체영화" />
       <Nav />
       <MovieSelect />
       <Footer />
@@ -25,3 +28,9 @@ const Wrapper = styled.div`
   justify-content: center;
   align-items: center;
 `;
+
+const Hello = styled.button`
+  width: 30rem;
+  height: 30rem;
+  background-color: red;
+`;

src/@components/SeatSelectingPage/PersonnelSelecting.jsx

@@ -19,11 +19,12 @@ export default function PersonnelSelecting() {
   const [briefs, setBriefs] = useState(0);
 
   const location = useLocation();
-  const { seoulAera } = location.state;
-  const { time } = location.state;
+  const { seoulArea } = location.state.seoulArea;
+  const { time } = location.state.time;
 
   return (
     <Wrapper>
+      {console.log('state', location.state.seoulArea)}
       <div>
         <PersonnelSelect>1. 관람인원 선택</PersonnelSelect>
         <MovieInfo>
@@ -35,11 +36,11 @@ export default function PersonnelSelecting() {
         <MovieTimePlace>
           <MovieTime>
             <Bolded>관람일시</Bolded>
-            2022. 11. 06 (수) {time}
+            2022. 11. 06 (수) {location.state.time}
           </MovieTime>
           <MoviePlace>
             <Bolded>관람장소</Bolded>
-            {seoulAera} 4관 (11층 4관)
+            {location.state.seoulArea} 4관 (11층 4관)
           </MoviePlace>
         </MovieTimePlace>
         <PersonnelWrapper>

src/@components/SeatSelectingPage/index.jsx

@@ -7,7 +7,7 @@ import Footer from '../@common/Footer';
 export default function SeatSelectingPage() {
   return (
     <>
-      <GeneralNav></GeneralNav>
+      <GeneralNav footprint1="예매" footprint2="빠른 예매"></GeneralNav>
       <WrapperWrapper>
         <Wrapper>
           <FastTicketing>빠른예매</FastTicketing>

src/Router.jsx

@@ -1,17 +1,17 @@
 import { BrowserRouter, Route, Routes } from 'react-router-dom';
 
 import BoxOffice from './@components/BoxofficePage/index';
-import BookingPage from '../src/@components/BookingPage/index';
+import BookingPage from './@components/BookingPage/index';
 import Landingpage from '../src/@components/LandingPage/index';
-import SeatSelectingPage from './@components/SeatSelectingPage/index';
+import SeatSelectingPage from '../src/@components/SeatSelectingPage/index';
 
 export default function Router() {
   return (
     <BrowserRouter>
       <Routes>
         <Route path="/" element={<Landingpage />} />
         <Route path="/boxoffice" element={<BoxOffice />} />
-        <Route path="/booking" element={<BookingPage />} />
+        <Route path="/booking" element={<BookingPage />} /> {/*라우터는 문제 없다*/}
         <Route path="/select" element={<SeatSelectingPage />} />
       </Routes>
     </BrowserRouter>