feat: Add dynamic-routing (#34)

Author: jee-in

src/App.tsx

@@ -1,7 +1,8 @@
 import "./App.css";
+import Router from "./shared/Router";
 
 function App() {
-  return <h1 className="text-3xl font-bold underline">Hello world!</h1>;
+  return <Router />;
 }
 
 export default App;

src/components/molecules/event-card/EventCard.tsx

@@ -1,8 +1,17 @@
 import Image from "../../atoms/images/Image";
 
-const EventCard = ({ image, title }: { image: string; title: string }) => {
+interface EventCardProps {
+  image: string;
+  title: string;
+  onClick?: () => void; // 클릭 시 실행될 함수 정의
+}
+
+const EventCard = ({ image, title, onClick }: EventCardProps) => {
   return (
-    <div className="group relative overflow-hidden rounded-lg transition-all duration-300 hover:shadow-xl">
+    <div
+      onClick={onClick}
+      className="group relative overflow-hidden rounded-lg transition-all duration-300 hover:shadow-xl"
+    >
       <div className="relative h-32 w-full overflow-hidden">
         <Image src={image} alt={title} variant="rounded" />
         <div className="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent opacity-0 transition-opacity duration-300 group-hover:opacity-100" />

src/components/organisms/event-lists/EventList.tsx

@@ -1,5 +1,6 @@
 import EventCard from "../../molecules/event-card/EventCard";
 import Grid from "../../layout/Grid";
+import { useNavigate } from "react-router-dom";
 
 interface Event {
   image: string;
@@ -11,11 +12,19 @@ interface EventListProps {
 }
 
 const EventList = ({ events }: EventListProps) => {
+  const navigate = useNavigate();
+
   return (
     <Grid orientation="vertical">
       {events.map((event, index) => (
         <div key={index} className="w-full sm:w-1/2 md:w-1/3">
-          <EventCard image={event.image} title={event.title} />
+          <EventCard
+            image={event.image}
+            title={event.title}
+            onClick={() => {
+              navigate("/reservation");
+            }}
+          />
         </div>
       ))}
     </Grid>

src/components/pages/ReservationConfirmationPage.tsx

@@ -1,7 +1,11 @@
 import ReservationOverviewTemplate from "../templates/reservation-overview/ReservationOverviewTemplate";
 import Header from "../templates/header/Header";
 
-const ReservationConfirmationPage = () => {
+interface ReservConfirmProps {
+  title: string;
+}
+
+const ReservationConfirmationPage = ({ title }: ReservConfirmProps) => {
   const reservation = {
     eventName: "콜드플레이 내한공연",
     dateTime: "2024/12/01 19:00 PM",
@@ -13,7 +17,7 @@ const ReservationConfirmationPage = () => {
     <>
       <Header></Header>
       <ReservationOverviewTemplate
-        title="예매가 완료되었습니다."
+        title={title}
         reservation={reservation}
       ></ReservationOverviewTemplate>
     </>

src/components/templates/header/Header.tsx

@@ -4,6 +4,8 @@ import styled from "@emotion/styled";
 import React from "react";
 import Button from "../../atoms/buttons/Button";
 import Image from "../../atoms/images/Image";
+import { Link } from "react-router-dom";
+import { useNavigate } from "react-router-dom";
 
 export interface HeaderProps {
   children?: React.ReactNode;
@@ -29,25 +31,43 @@ const UserAccountGroup = styled.div<HeaderProps>``;
 const UserAccountGroupWrapper = styled.div<HeaderProps>``;
 
 const Header = ({ className, style }: HeaderProps) => {
+  const navigate = useNavigate();
+
   return (
     <StyledHeader className={className} style={style}>
       <HeaderWrapper className="flex justify-center items-center px-30 py-0 box-border w-full h-20 gap-5">
-        <Logo className="flex justify-center items-center h-full w-1/12 p-1">
-          <Image
-            width=""
-            height="100%"
-            src="https://cdn.iconscout.com/icon/free/png-256/free-ticket-113-452641.png?f=webp"
-            alt="소켓팅 로고"
-          ></Image>
+        <Logo className="flex justify-center items-center h-full w-1/12 p-3">
+          <Link to="/">
+            <Image
+              width=""
+              height=""
+              src="https://cdn.iconscout.com/icon/free/png-256/free-ticket-113-452641.png?f=webp"
+              alt="소켓팅 로고"
+            ></Image>
+          </Link>
         </Logo>
         <Menu className="flex justify-center items-center w-7/12 h-full p-3">
           <MenuWrapper className="w-full h-full"></MenuWrapper>
         </Menu>
         <UserAccountGroup className="flex justify-end items-center w-4/12 h-full p-3">
           <UserAccountGroupWrapper className="flex justify-end items-center gap-1 w-full h-full">
             <Button bgColor="brown">공연 등록</Button>
-            <Button bgColor="orange">로그인</Button>
-            <Button bgColor="orange">회원 가입</Button>
+            <Button
+              bgColor="orange"
+              onClick={() => {
+                navigate("/login");
+              }}
+            >
+              로그인
+            </Button>
+            <Button
+              bgColor="orange"
+              onClick={() => {
+                navigate("/join");
+              }}
+            >
+              회원가입
+            </Button>
           </UserAccountGroupWrapper>
         </UserAccountGroup>
       </HeaderWrapper>

src/shared/Router.tsx

@@ -0,0 +1,33 @@
+import { BrowserRouter, Route, Routes } from "react-router-dom";
+import MainPage from "../components/pages/MainPage";
+import LoginPage from "../components/pages/LoginPage";
+import JoinPage from "../components/pages/JoinPage";
+import Mypage from "../components/pages/MyPage";
+import ReservationPage from "../components/pages/ReservationPage";
+import ReservationConfirmationPage from "../components/pages/ReservationConfirmationPage";
+
+const Router = () => {
+  return (
+    <BrowserRouter>
+      <Routes>
+        <Route path="/" element={<MainPage />} />
+        <Route path="login" element={<LoginPage />} />
+        <Route path="join" element={<JoinPage />} />
+        <Route path="mypage" element={<Mypage />} />
+        <Route path="reservation" element={<ReservationPage />} />
+        <Route
+          path="reservation-confirmation"
+          element={
+            <ReservationConfirmationPage title="예매가 완료되었습니다." />
+          }
+        />
+        <Route
+          path="reservation-info"
+          element={<ReservationConfirmationPage title="예매 정보" />}
+        />
+      </Routes>
+    </BrowserRouter>
+  );
+};
+
+export default Router;