[TIL/React] 2023/06/26

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;

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;

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>
    </>
  );
}