CEOS-Developers · moong23 · Mar 21, 2023 · Mar 21, 2023 · Mar 21, 2023 · Mar 21, 2023
diff --git a/.DS_Store b/.DS_Store
diff --git a/.gitignore b/.gitignore
@@ -1 +1,3 @@
 node_modules
+
+.env
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -9,6 +9,8 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-scripts": "5.0.1",
+    "recoil": "^0.7.7",
+    "styled-components": "^5.3.9",
     "web-vitals": "^2.1.4"
   },
   "scripts": {

diff --git a/public/Link.cur b/public/Link.cur
diff --git a/public/Text.cur b/public/Text.cur
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/icon_100.png b/public/icon_100.png
diff --git a/public/index.html b/public/index.html
@@ -9,7 +9,7 @@
       name="description"
       content="Web site created using create-react-app"
     />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+    <link rel="apple-touch-icon" href="%PUBLIC_URL%/icon_100.png" />
     <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
@@ -24,7 +24,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>React App</title>
+    <title>MY_TODO</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/public/logo192.png b/public/logo192.png
diff --git a/public/logo512.png b/public/logo512.png
diff --git a/public/manifest.json b/public/manifest.json
@@ -1,21 +1,11 @@
 {
-  "short_name": "React App",
-  "name": "Create React App Sample",
+  "short_name": "MY_TODO",
+  "name": "Simple Todo Planner",
   "icons": [
     {
       "src": "favicon.ico",
       "sizes": "64x64 32x32 24x24 16x16",
       "type": "image/x-icon"
-    },
-    {
-      "src": "logo192.png",
-      "type": "image/png",
-      "sizes": "192x192"
-    },
-    {
-      "src": "logo512.png",
-      "type": "image/png",
-      "sizes": "512x512"
     }
   ],
   "start_url": ".",

diff --git a/src/.DS_Store b/src/.DS_Store
diff --git a/src/App.js b/src/App.js
@@ -1,9 +1,38 @@
+import { useEffect, useState } from "react";
+import Mainpage from "./pages/Mainpage/Mainpage";
+
 function App() {
-  return (
-    <div>
-      <h1>17기 프론트 화이팅~ 우하하</h1>
-    </div>
+  const [clickedIcon, setClickedIcon] = useState("");
+  const [mainIconPosition, setMainIconPosition] = useState(
+    JSON.parse(localStorage.getItem("mainIconPosition")) ?? {
+      top: 30,
+      left: 30,
+    }
+  );
+  const [textIconPosition, setTextIconPosition] = useState(
+    JSON.parse(localStorage.getItem("textIconPosition")) ?? {
+      top: 160,
+      left: 30,
+    }
   );
+
+  useEffect(() => {
+    if (!localStorage.getItem("mainIconPosition")) {
+      localStorage.setItem(
+        "mainIconPosition",
+        JSON.stringify(mainIconPosition)
+      );
+    }
+    if (!localStorage.getItem("textIconPosition")) {
+      localStorage.setItem(
+        "textIconPosition",
+        JSON.stringify(textIconPosition)
+      );
+    }
+  }, [mainIconPosition, textIconPosition]);
+
+  useEffect(() => {});
+  return <Mainpage clickedIcon={clickedIcon} setClickedIcon={setClickedIcon} />;
 }
 
-export default App;
+export default App;
diff --git a/src/assets/.DS_Store b/src/assets/.DS_Store
diff --git a/src/assets/Link.cur b/src/assets/Link.cur
diff --git a/src/assets/Normal.cur b/src/assets/Normal.cur
diff --git a/src/assets/background_image.jpg b/src/assets/background_image.jpg
diff --git a/src/assets/icon_main.png b/src/assets/icon_main.png
diff --git a/src/assets/icon_text.png b/src/assets/icon_text.png
diff --git a/src/components/card/Card.element.js b/src/components/card/Card.element.js
@@ -0,0 +1,92 @@
+import styled from "styled-components";
+
+export const CardContainer = styled.div`
+  width: ${(props) => (props.display ? "max(300px, 30vw)" : "0")};
+  height: ${(props) => (props.display ? "max(500px, 50vw)" : "0")};
+  position: ${(props) => (props.display ? "initial" : "fixed")};
+  top: ${(props) => props.position.top};
+  left: ${(props) => props.position.left};
+  margin: 0 auto;
+  background-color: #1e1e1e;
+  border-radius: 12px;
+  z-index: 2;
+  visibility: ${(props) => (props.display ? "visible" : "hidden")};
+  box-shadow: 0 0 10px 0px #000000;
+  transition: width 0.2s, height 0.2s, visibility 0.05s linear 0.15s;
+`;
+
+export const CardToolBar = styled.div`
+  display: flex;
+  align-items: center;
+  height: 40px;
+  padding: 12px;
+  background-color: #312f34;
+  border-radius: 12px 12px 0 0;
+  box-sizing: border-box;
+  position: relative;
+  visibility: ${(props) => (props.display ? "visible" : "hidden")};
+`;
+
+export const CardPlusBtn = styled.div`
+  width: 20px;
+  height: 20px;
+  color: white;
+  display: flex;
+  justify-content: center;
+  font-size: 24px;
+  border-radius: 4px;
+  position: absolute;
+  right: 12px;
+  padding: 2px;
+  &:hover {
+    background-color: #656565;
+    cursor: url(Link.cur) 0 0, pointer;
+    /* cursor: url(../../assets/Link.cur) 0 0, pointer; */
+  }
+  &::before {
+    content: "+";
+  }
+`;
+
+export const NotHoverDiv = styled.div`
+  opacity: ${(props) => (props.hoverRender ? 0 : 1)};
+  display: ${(props) => (props.render ? "flex" : "none")};
+  flex-direction: column;
+  height: 100%;
+  transition: opacity 0.1s;
+`;
+
+export const CardMainDiv = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: calc(100% - 40px);
+  border-radius: 0 0 12px 12px;
+  position: relative;
+`;
+
+export const CardTodoText = styled.h1`
+  color: white;
+  font-weight: 800;
+  font-size: 20px;
+  display: flex;
+  width: 100%;
+  text-align: left;
+  box-sizing: border-box;
+  padding: 8px 0 0 12px;
+  margin-bottom: 8px;
+`;
+
+export const CardTodoDiv = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  height: 100%;
+  flex-direction: row;
+  justify-content: center;
+  overflow-y: auto;
+  position: relative;
+  align-content: flex-start;
+  overflow-x: hidden;
+  width: 100%;
+`;
diff --git a/src/components/card/Card.js b/src/components/card/Card.js
@@ -0,0 +1,95 @@
+import { useEffect, useState } from "react";
+import CircleBtn from "../circleBtn/CircleBtn";
+
+import HoverDiv from "../hoverDiv/HoverDiv";
+import Todo from "../todo/Todo";
+import {
+  CardContainer,
+  CardToolBar,
+  CardPlusBtn,
+  CardMainDiv,
+  CardTodoDiv,
+  CardTodoText,
+  NotHoverDiv,
+} from "./Card.element";
+
+const Card = ({ render, setRender }) => {
+  useEffect(() => {
+    setHoverDivRender(false);
+  }, [render]);
+  const [hoverDivRender, setHoverDivRender] = useState(false);
+
+  const [allList, setAllList] = useState([]);
+  const todoList = allList ? allList.filter((item) => item.done === false) : [];
+  const doneList = allList ? allList.filter((item) => item.done === true) : [];
+
+  useEffect(() => {
+    setAllList(JSON.parse(localStorage.getItem("todoList")) || []);
+  }, [hoverDivRender]);
+  return (
+    <CardContainer
+      display={render}
+      position={{
+        top: "50px",
+        left: "50px",
+      }}
+    >
+      <CardToolBar display={render}>
+        <CircleBtn
+          color="red"
+          type="button"
+          render={render}
+          setRender={setRender}
+        />
+        <CircleBtn color="yellow" type="button" />
+        <CircleBtn color="green" type="button" />
+        <CardPlusBtn onClick={() => setHoverDivRender(!hoverDivRender)} />
+      </CardToolBar>
+      <CardMainDiv>
+        <HoverDiv
+          hoverDivRender={hoverDivRender && render}
+          setHoverDivRender={setHoverDivRender}
+        />
+        <NotHoverDiv render={render} hoverRender={hoverDivRender}>
+          <CardTodoText>TODO [{todoList.length}개]</CardTodoText>
+          <CardTodoDiv>
+            {todoList.length > 0 &&
+              todoList.map((item) => {
+                return (
+                  <Todo
+                    key={item.id}
+                    id={item.id}
+                    content={item.content}
+                    tag={item.tag}
+                    done={item.done}
+                    setAllList={setAllList}
+                    allList={allList}
+                  />
+                );
+              })}
+            {todoList.length === 0 && <Todo tag={-1} />}
+          </CardTodoDiv>
+          <CardTodoText>DONE [{doneList.length}개]</CardTodoText>
+          <CardTodoDiv>
+            {doneList.length > 0 &&
+              doneList.map((item) => {
+                return (
+                  <Todo
+                    key={item.id}
+                    id={item.id}
+                    content={item.content}
+                    tag={item.tag}
+                    done={item.done}
+                    setAllList={setAllList}
+                  />
+                );
+              })}
+            {doneList.length === 0 && <Todo tag={-2} />}
+          </CardTodoDiv>
+        </NotHoverDiv>
+      </CardMainDiv>
+    </CardContainer>
+  );
+};
+
+export default Card;
diff --git a/src/components/circleBtn/CircleBtn.element.js b/src/components/circleBtn/CircleBtn.element.js
@@ -0,0 +1,33 @@
+import styled from "styled-components";
+
+export const CardCircle = styled.div`
+  display: inline-block;
+  margin: 0 4px;
+  align-items: center;
+  width: 10px;
+  height: 10px;
+  padding: 1px;
+  border-radius: 50%;
+  background-color: ${(props) => `var(--${props.color}-${props.type})`};
+  &:hover {
+    cursor: url(Link.cur) 0 0, pointer;
+  }
+`;
+
+export const InputCircle = styled.input`
+  appearance: none;
+  display: inline-block;
+  margin: 0 4px;
+  align-items: center;
+  width: max(12px, 1.2vw);
+  height: max(12px, 1.2vw);
+  padding: 1px;
+  border-radius: 50%;
+  background-color: ${(props) => `var(--${props.color}-${props._type})`};
+  &:hover {
+    cursor: url(Link.cur) 0 0, pointer;
+  }
+  border: ${(props) =>
+    props.selectedTag === props.value ? "1px solid white" : "none"};
+  transition: border 0.3s ease-in-out;
+`;
diff --git a/src/components/circleBtn/CircleBtn.js b/src/components/circleBtn/CircleBtn.js
@@ -0,0 +1,39 @@
+import { CardCircle, InputCircle } from "./CircleBtn.element";
+
+const CircleBtn = ({
+  color,
+  type,
+  render,
+  setRender,
+  name,
+  value,
+  selectedTag,
+  handleTagChange,
+}) => {
+  if (type === "tag") {
+    // using type as _type since 'type' is reserved word in input
+    return (
+      <InputCircle
+        type="radio"
+        color={color}
+        _type={type}
+        name={name}
+        value={value}
+        selectedTag={selectedTag}
+        onClick={handleTagChange}
+      />
+    );
+  } else if (color === "red" && type === "button") {
+    return (
+      <CardCircle
+        color={color}
+        type={type}
+        onClick={() => setRender(!render)}
+      />
+    );
+  } else {
+    return <CardCircle color={color} type={type} />;
+  }
+};
+
+export default CircleBtn;