Merge : props-drilling

[Design/#1] 홈 화면 디자인

acoountbook/eslint.config.js

@@ -1,38 +1,40 @@
-import js from '@eslint/js'
-import globals from 'globals'
-import react from 'eslint-plugin-react'
-import reactHooks from 'eslint-plugin-react-hooks'
-import reactRefresh from 'eslint-plugin-react-refresh'
+import js from "@eslint/js";
+import globals from "globals";
+import react from "eslint-plugin-react";
+import reactHooks from "eslint-plugin-react-hooks";
+import reactRefresh from "eslint-plugin-react-refresh";
 
 export default [
-  { ignores: ['dist'] },
+  { ignores: ["dist"] },
   {
-    files: ['**/*.{js,jsx}'],
+    files: ["**/*.{js,jsx}"],
     languageOptions: {
       ecmaVersion: 2020,
       globals: globals.browser,
       parserOptions: {
-        ecmaVersion: 'latest',
+        ecmaVersion: "latest",
         ecmaFeatures: { jsx: true },
-        sourceType: 'module',
+        sourceType: "module",
       },
     },
-    settings: { react: { version: '18.3' } },
+    settings: { react: { version: "18.3" } },
     plugins: {
       react,
-      'react-hooks': reactHooks,
-      'react-refresh': reactRefresh,
+      "react-hooks": reactHooks,
+      "react-refresh": reactRefresh,
     },
     rules: {
       ...js.configs.recommended.rules,
       ...react.configs.recommended.rules,
-      ...react.configs['jsx-runtime'].rules,
+      ...react.configs["jsx-runtime"].rules,
       ...reactHooks.configs.recommended.rules,
-      'react/jsx-no-target-blank': 'off',
-      'react-refresh/only-export-components': [
-        'warn',
+      "react/jsx-no-target-blank": "off",
+      "react-refresh/only-export-components": [
+        "warn",
         { allowConstantExport: true },
       ],
+      "no-unused-vars": "off",
+      "react/prop-types": "off",
     },
   },
-]
+];

acoountbook/src/components/home/chart/Chart.jsx

@@ -0,0 +1,11 @@
+import * as C from "./Chart.style";
+import Graph from "./Graph";
+
+export default function Chart({ month, total }) {
+  return (
+    <C.Container>
+      {month}월 총 지출: {total} 원
+      <Graph />
+    </C.Container>
+  );
+}

acoountbook/src/components/home/chart/Chart.style.js

@@ -0,0 +1,12 @@
+import styled from "styled-components";
+
+export const Container = styled.div`
+  padding: 20px;
+
+  background-color: white;
+  border-radius: 16px;
+
+  text-align: center;
+  font-size: 18px;
+  font-weight: bold;
+`;

acoountbook/src/components/home/chart/Graph.jsx

@@ -0,0 +1,5 @@
+import * as G from "./Graph.style";
+
+export default function Graph() {
+  return <G.Container></G.Container>;
+}

acoountbook/src/components/home/chart/Graph.style.js

@@ -0,0 +1,8 @@
+import styled from "styled-components";
+
+export const Container = styled.div`
+  margin-top: 20px;
+  height: 40px;
+  background-color: rgb(233, 236, 239);
+  border-radius: 8px;
+`;

acoountbook/src/components/home/menu/Input.jsx

@@ -0,0 +1,10 @@
+import * as I from "./Input.style";
+
+export default function Input({ name, title, type, placeholder, value }) {
+  return (
+    <I.Container>
+      <I.Title for={name}>{title}</I.Title>
+      <I.Input type={type} id={name} placeholder={placeholder} value={value} />
+    </I.Container>
+  );
+}

acoountbook/src/components/home/menu/Input.style.js

@@ -0,0 +1,22 @@
+import styled from "styled-components";
+
+export const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  flex: 1 1 0%;
+  gap: 5px;
+
+  min-width: 120px;
+`;
+
+export const Title = styled.label`
+  font-size: 14px;
+  color: rgb(51, 51, 51);
+`;
+
+export const Input = styled.input`
+  padding: 8px;
+  border: 1px solid rgb(221, 221, 221);
+  border-radius: 4px;
+  font-size: 14px;
+`;

acoountbook/src/components/home/menu/Menu.jsx

@@ -0,0 +1,34 @@
+import { useState } from "react";
+import Input from "./Input";
+import * as M from "./Menu.style";
+
+export default function Menu() {
+  const today = new Date();
+  const year = today.getFullYear();
+  const month = ("0" + (today.getMonth() + 1)).slice(-2);
+  const day = ("0" + today.getDate()).slice(-2);
+  const dateString = `${year}-${month}-${day}`;
+
+  const [date, setDate] = useState(dateString);
+
+  return (
+    <M.Container>
+      <Input
+        name="date"
+        title="날짜"
+        type="text"
+        placeholder="YYYY-MM-DD"
+        value={date}
+      />
+      <Input name="item" title="항목" type="text" placeholder="지출 항목" />
+      <Input name="amount" title="금액" type="number" placeholder="지출 금액" />
+      <Input
+        name="description"
+        title="내용"
+        type="text"
+        placeholder="지출 내용"
+      />
+      <M.Button type="button">저장</M.Button>
+    </M.Container>
+  );
+}

acoountbook/src/components/home/menu/Menu.style.js

@@ -0,0 +1,32 @@
+import styled from "styled-components";
+
+export const Container = styled.div`
+  display: flex;
+  gap: 10px;
+
+  padding: 20px;
+
+  background-color: white;
+  border-radius: 16px;
+`;
+
+export const Button = styled.button`
+  height: 34px;
+
+  padding: 8px 20px;
+  margin-top: 19px;
+
+  border: none;
+  border-radius: 4px;
+
+  background-color: #92b1d4;
+  color: white;
+  font-size: 14px;
+
+  cursor: pointer;
+  transition: background-color 0.2s ease-in-out;
+
+  &:hover {
+    background-color: #6888ad;
+  }
+`;

acoountbook/src/components/home/month/Month.jsx

@@ -0,0 +1,21 @@
+import * as M from "./Month.style";
+import MonthItem from "./MonthItem";
+
+export default function Month() {
+  return (
+    <M.Container>
+      <MonthItem month="1" />
+      <MonthItem month="2" />
+      <MonthItem month="3" />
+      <MonthItem month="4" />
+      <MonthItem month="5" />
+      <MonthItem month="6" />
+      <MonthItem month="7" />
+      <MonthItem month="8" />
+      <MonthItem month="9" />
+      <MonthItem month="10" />
+      <MonthItem month="11" />
+      <MonthItem month="12" />
+    </M.Container>
+  );
+}

acoountbook/src/components/home/month/Month.style.js

@@ -0,0 +1,13 @@
+import styled from "styled-components";
+
+export const Container = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 20px;
+
+  padding: 20px;
+
+  background-color: white;
+  border-radius: 16px;
+`;

acoountbook/src/components/home/month/MonthItem.jsx

@@ -0,0 +1,5 @@
+import * as M from "./MonthItem.style";
+
+export default function MonthItem({ month }) {
+  return <M.Button>{month}월</M.Button>;
+}

acoountbook/src/components/home/month/MonthItem.style.js

@@ -0,0 +1,19 @@
+import styled from "styled-components";
+
+export const Button = styled.button`
+  width: 104px;
+  height: 60px;
+
+  border: none;
+  border-radius: 10px;
+
+  font-size: 18px;
+  font-weight: 600;
+
+  background-color: #f5f5f5;
+
+  &:hover {
+    color: white;
+    background-color: #92b1d4;
+  }
+`;

acoountbook/src/pages/Home.jsx

@@ -1,3 +1,14 @@
+import * as H from "./Home.style";
+import Menu from "../components/home/menu/Menu";
+import Month from "../components/home/month/Month";
+import Chart from "../components/home/chart/Chart";
+
 export default function Home() {
-  return <h1>Home</h1>;
+  return (
+    <H.Container>
+      <Menu />
+      <Month />
+      <Chart />
+    </H.Container>
+  );
 }

acoountbook/src/pages/Home.style.js

@@ -0,0 +1,11 @@
+import styled from "styled-components";
+
+export const Container = styled.div`
+  width: 800px;
+
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+
+  margin: 0 auto;
+`;

acoountbook/src/reset.css

@@ -122,3 +122,8 @@ table {
   border-collapse: collapse;
   border-spacing: 0;
 }
+
+body {
+  background-color: #f7d8d4;
+  padding: 32px;
+}