diff --git a/public/index.html b/public/index.html index 68d10d9..c66f4ba 100644 --- a/public/index.html +++ b/public/index.html @@ -3,16 +3,32 @@ - - - - + + + + - + INSERT
+ + diff --git a/src/App.tsx b/src/App.tsx index cc6587e..04f32f6 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,5 +1,5 @@ import { BrowserRouter as Router, Route, Routes } from "react-router-dom"; -import Home from "./pages/home"; +import Home from "./pages"; function App() { return ( diff --git a/src/pages/home/index.tsx b/src/pages/home/index.tsx deleted file mode 100644 index ed38c8e..0000000 --- a/src/pages/home/index.tsx +++ /dev/null @@ -1,23 +0,0 @@ -import Header from "components/Header"; -import Footer from "components/Footer"; -import History from "pages/home/layouts/History"; -import HomePage from "pages/home/layouts/HomePage"; -import Service from "pages/service"; -import TimeLine from "pages/home/layouts/TimeLine"; -import Member from "pages/home/layouts/Member"; - -function Home() { - return ( -
-
- - - - - -
- ); -} - -export default Home; diff --git a/src/pages/home/layouts/TimeLine/data.json b/src/pages/home/layouts/TimeLine/data.json deleted file mode 100644 index 6e3b6bc..0000000 --- a/src/pages/home/layouts/TimeLine/data.json +++ /dev/null @@ -1,22 +0,0 @@ -[ - { - "year": "2023", - "contents": ["03 - 인서트 결성", "07 - 인서트 3기"] - }, - { - "year": "2024", - "contents": ["텅"] - }, - { - "year": "2025", - "contents": ["텅"] - }, - { - "year": "2026", - "contents": ["텅"] - }, - { - "year": "2027", - "contents": ["텅"] - } -] diff --git a/src/pages/home/layouts/TimeLine/index.tsx b/src/pages/home/layouts/TimeLine/index.tsx deleted file mode 100644 index 478b4bb..0000000 --- a/src/pages/home/layouts/TimeLine/index.tsx +++ /dev/null @@ -1,48 +0,0 @@ -import { useState } from "react"; -import * as S from "./style"; -import dates from "./data.json"; - -function TimeLine() { - const [clickedDate, setClickedDate] = useState(null); - - const handleDateClick = (date: string) => { - setClickedDate(date === clickedDate ? null : date); - }; - - return ( - - TimeLine - INSERT가 함께한 멋진 시간들을 소개합니다. - - - {dates.map((dateData) => ( - - handleDateClick(dateData.year)} - isActive={clickedDate === dateData.year} - > - {dateData.year} - - - - ))} - - - {dates.map( - (dateData) => - clickedDate === dateData.year && ( - - {dateData.year} - {dateData.contents.map((content, index) => ( - {content} - ))} - - ), - )} - - - - ); -} - -export default TimeLine; diff --git a/src/pages/home/layouts/TimeLine/style.ts b/src/pages/home/layouts/TimeLine/style.ts deleted file mode 100644 index f6d2e89..0000000 --- a/src/pages/home/layouts/TimeLine/style.ts +++ /dev/null @@ -1,115 +0,0 @@ -import styled, { css } from "styled-components"; -import { font } from "styles/font"; -import theme from "theme"; -import color from "styles/color"; - -export const Container = styled.div` - color: white; - max-width: 100%; - box-sizing: border-box; - display: flex; - flex-direction: column; - margin: 0 0 0 20%; -`; - -export const Title = styled.p` - ${font.D2}; - color: ${color.black}; -`; - -export const SubTitle = styled.p` - ${font.H2}; - color: ${color.text}; -`; - -export const TimeLineBox = styled.div` - display: flex; -`; - -export const TimeLine = styled.div` - display: flex; - flex-direction: column; - cursor: pointer; - position: relative; - - &::before { - content: ""; - position: absolute; - inset: 11% 0 8% 150%; - border-right: 4px solid black; - } -`; - -export const TimeLineO = styled.div` - position: absolute; - width: 18px; - height: 18px; - background: black; - border-radius: 50%; - margin: 100% 0 0 142%; - @media ${theme.device.mobile} { - margin: 90% 0 0 130%; - } - @media ${theme.device.tablit} { - margin: 100% 0 0 138%; - } - @media ${theme.device.fold} { - margin: 80% 0 0 128%; - width: 14px; - height: 14px; - } -`; - -export const TimeLineItem = styled.div` - display: flex; -`; - -export const TimeLineDate = styled.div<{ isActive: boolean }>` - display: flex; - flex-direction: column; - ${font.H1} - color: ${color.black}; - margin: 80% 0 50% 0; - - &:hover { - cursor: pointer; - transform: scale(1.2); - background-color: #dedede; - } - ${(props) => - props.isActive && - css` - background-color: #dedede; - cursor: pointer; - transform: scale(1.2); - `} -`; - -export const TimeLineText = styled.div` - display: flex; - margin: 4% 0 0 10%; - @media ${theme.device.mobile} { - margin: 4% 0 0 12%; - } - @media ${theme.device.fold} { - margin: 2% 0 0 12%; - } -`; - -export const TimeLineYear = styled.div` - margin-top: 8%; -`; - -export const TimeLineContentDate = styled.p` - ${font.H1} - color: ${color.text}; -`; - -export const TimeLineContent = styled.p` - ${font.H2} - font-weight: 700; - width: 100%; - color: ${color.black}; - margin: 10% 0 5% 0; - white-space: pre-line; -`; diff --git a/src/pages/home/layouts/index.tsx b/src/pages/home/layouts/index.tsx deleted file mode 100644 index e69de29..0000000 diff --git a/src/pages/index.tsx b/src/pages/index.tsx new file mode 100644 index 0000000..62ed6d9 --- /dev/null +++ b/src/pages/index.tsx @@ -0,0 +1,21 @@ +import Header from "components/Header"; +import Footer from "components/Footer"; +import History from "pages/layouts/History"; +import HomePage from "pages/layouts/HomePage"; +import Member from "pages/layouts/Member"; +import Service from "pages/layouts/Service"; + +function Home() { + return ( + <> +
+ + + + +