App.js
import React from "react";
import Layout from "./components/Layout";
import Home from "./components/Home";
import AddTask from "./components/AddTask";
import RecentTodo from "./components/RecentTodo";
import MyTodo from "./components/MyTodo";
function App() {
return (
<Layout>
<Home />
<AddTask />
<RecentTodo />
<MyTodo />
</Layout>
);
}
export default App;
Layout.js
import React from "react";
import { styled } from "styled-components";
const Header = styled.div`
background-color: #c07848;
display: flex;
width: 100%;
height: 10vh;
position: sticky;
top: 0;
z-index: 999;
justify-content: space-around;
`;
const LogoContainer = styled.div`
width: 100px;
background-color: gray;
display: flex;
justify-content: center;
align-items: center;
`;
const NavButtonContainer = styled.div`
display: flex;
align-items: center;
column-gap: 40px;
`;
const NavButton = styled.button``;
const HamburgerIconContainer = styled.div`
width: 100px;
background-color: gray;
display: flex;
justify-content: center;
align-items: center;
`;
const Content = styled.div`
height: 100vh;
overflow-y: scroll;
`;
const Footer = styled.div`
background-color: gray;
display: flex;
height: 20vh;
width: 100%;
justify-content: space-around;
margin: 0 auto;
`;
const FooterTextContainer = styled.div`
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
`;
const DETAIL_NAV = [
{ idx: 0, name: "Home" },
{ idx: 1, name: "ADD Task" },
{ idx: 2, name: "Recent Todo" },
{ idx: 3, name: "My Todo" },
];
const Layout = ({ children }) => {
return (
<div>
{/* header area */}
<Header>
{/* logo */}
<LogoContainer>
<p>로고 자리</p>
</LogoContainer>
{/* nav button */}
<NavButtonContainer>
{DETAIL_NAV?.map((elem, idx) => {
return (
<div key={idx}>
<NavButton>{elem?.name}</NavButton>
</div>
);
})}
</NavButtonContainer>
{/* hamburger icon */}
<HamburgerIconContainer>
<p>햄버거</p>
</HamburgerIconContainer>
</Header>
{/* content area */}
<Content>{children}</Content>
{/* footer area */}
<Footer>
<FooterTextContainer>
<p>My task</p>
<p>Copyright © 2023 All rights reserved</p>
<p>Powered By SITE123 - Create your own website</p>
</FooterTextContainer>
<NavButtonContainer>
{DETAIL_NAV?.map((elem, idx) => {
return (
<div key={idx}>
<button>{elem?.name}</button>
</div>
);
})}
</NavButtonContainer>
</Footer>
</div>
);
};
export default Layout;
오늘 한 일
기본적인 레이아웃 잡음. 무지성 gpt 복붙 스크롤 코드 제거.
import { useRef } from "react";
export default function CatFriends() {
const listRef = useRef(null);
function scrollToIndex(index) {
const listNode = listRef.current;
// This line assumes a particular DOM structure:
const imgNode = listNode.querySelectorAll("li > img")[index];
imgNode.scrollIntoView({
behavior: "smooth",
block: "nearest",
inline: "center",
});
}
return (
<>
<nav>
<button onClick={() => scrollToIndex(0)}>Tom</button>
<button onClick={() => scrollToIndex(1)}>Maru</button>
<button onClick={() => scrollToIndex(2)}>Jellylorum</button>
</nav>
<div>
<ul ref={listRef}>
<li>
<img src="https://placekitten.com/g/200/200" alt="Tom" />
</li>
<li>
<img src="https://placekitten.com/g/300/200" alt="Maru" />
</li>
<li>
<img src="https://placekitten.com/g/250/200" alt="Jellylorum" />
</li>
</ul>
</div>
</>
);
}
위 코드는 공식문서에서 찾은, 내가 구현하고자 하는 내용과 가장 비슷한 코드.
reference: https://react.dev/reference/react/useRef
이상한 짓 하지 말고 내일은 위 코드를 프로젝트에 적용하도록