CEOS-Developers · rmdnps10 · Sep 21, 2023 · Sep 22, 2023 · Sep 22, 2023 · Sep 22, 2023
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -3,12 +3,19 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@react-three/cannon": "^6.6.0",
+    "@react-three/drei": "^9.84.2",
+    "@react-three/fiber": "^8.14.2",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-scripts": "5.0.1",
+    "recoil": "^0.7.7",
+    "styled-components": "^6.0.8",
+    "styled-reset": "^4.5.1",
+    "three": "^0.156.1",
     "web-vitals": "^2.1.4"
   },
   "scripts": {

diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/index.html b/public/index.html
@@ -9,35 +9,20 @@
       name="description"
       content="Web site created using create-react-app"
     />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.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/
-    -->
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-    <!--
-      Notice the use of %PUBLIC_URL% in the tags above.
-      It will be replaced with the URL of the `public` folder during the build.
-      Only files inside the `public` folder can be referenced from the HTML.
-
-      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
-      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>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <!--구글 Noto sans Korean 폰트 사용 -->
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;700&display=swap"
+      rel="stylesheet"
+    />
+    <title>Universe-Todo</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
-    <!--
-      This HTML file is a template.
-      If you open it directly in the browser, you will see an empty page.
-
-      You can add webfonts, meta tags, or analytics to this file.
-      The build step will place the bundled scripts into the <body> tag.
-
-      To begin the development, run `npm start` or `yarn start`.
-      To create a production bundle, use `npm run build` or `yarn build`.
-    -->
   </body>
 </html>
diff --git a/public/logo192.png b/public/logo192.png
diff --git a/public/logo512.png b/public/logo512.png
diff --git a/public/robots.txt b/public/robots.txt
diff --git a/src/App.js b/src/App.js
@@ -1,9 +1,19 @@
+import { GlobalStyle } from "./style/GlobalStyle";
+import Template from "./components/template/Template";
+import Background from "./components/organism/Background";
+import { RecoilRoot } from "recoil";
+
 function App() {
-	return (
-		<div>
-			<h1>18기 프론트 화이팅~ 푸하항ㅋ</h1>
-		</div>
-	);
+  return (
+    <RecoilRoot>
+      <GlobalStyle />
+      <>
+        {/* three.js 을 사용한 우주 배경 */}
+        <Background />
+        <Template />
+      </>
+    </RecoilRoot>
+  );
 }
 
 export default App;
diff --git a/src/components/atoms/Button.js b/src/components/atoms/Button.js
@@ -0,0 +1,14 @@
+import { styled } from "styled-components";
+
+export const Button = styled.div`
+  display: flex;
+  width: 67px;
+  height: 27px;
+  align-items: center;
+  justify-content: center;
+  background-color: var(--lightGray);
+  border: 2px solid var(--black);
+  border-radius: 10px;
+  font-weight: 600;
+  font-size: 13px;
+`;
diff --git a/src/components/atoms/H1.js b/src/components/atoms/H1.js
@@ -0,0 +1,5 @@
+import { styled } from "styled-components";
+export const H1 = styled.h1`
+  font-size: 24px;
+  color: ${(props) => props.color || "var(--white)"};
+`;
diff --git a/src/components/atoms/ImageButton.js b/src/components/atoms/ImageButton.js
@@ -0,0 +1,5 @@
+import { styled } from "styled-components";
+
+export const ImageButton = styled.img`
+  height: 70%;
+`;
diff --git a/src/components/atoms/Input.js b/src/components/atoms/Input.js
@@ -0,0 +1,9 @@
+import { styled } from "styled-components";
+
+export const Input = styled.input`
+  width: 70%;
+  background-color: var(--white);
+  font-size: 12px;
+  border: none;
+  outline: none;
+`;
diff --git a/src/components/atoms/Span.js b/src/components/atoms/Span.js
@@ -0,0 +1,6 @@
+import { styled } from "styled-components";
+export const Span = styled.div`
+  font-size: 15px;
+  padding: 5px;
+  color: ${(props) => props.color || "var(--white)"};
+`;
diff --git a/src/components/molecules/TextInput.js b/src/components/molecules/TextInput.js
@@ -0,0 +1,50 @@
+import React from "react";
+import { styled } from "styled-components";
+import { ImageButton } from "../atoms/ImageButton";
+import { Button } from "../atoms/Button";
+import { Input } from "../atoms/Input";
+import logo from "../../image/galaxy-icon.svg";
+import { useRecoilState } from "recoil";
+import { nowTodoList } from "../../recoil/atom.ts";
+import useInput from "../../hooks/useTextInput";
+
+function TextInput() {
+  const { input, handleChange, handleKeyPress, setInput } = useInput(""); // 키 입력 할 때를 따로 커스텀 훅으로 분리함
+  const [nowTodo, setNowTodoList] = useRecoilState(nowTodoList);
+
+  const buttonClick = () => {
+    if (input.length < 5 || input.length > 30) {
+      alert("할 일은 5자 이상 30자 이하로 작성해주세요.");
+      return;
+    }
+    setNowTodoList([...nowTodo, input]);
+    setInput("");
+  };
+
+  return (
+    <StyledInput>
+      <ImageButton src={logo} alt="로고" />
+      <Input
+        type="text"
+        placeholder="화면 중앙을 드래그하거나 포커스 한 후 마우스 휠을 움직여보세요."
+        value={input}
+        onChange={handleChange}
+        onKeyPress={(e) => handleKeyPress(e, buttonClick)}
+      />
+      <Button onClick={buttonClick}>Submit</Button>
+    </StyledInput>
+  );
+}
+
+const StyledInput = styled.div`
+  display: flex;
+  gap: 20px;
+  align-items: center;
+  justify-content: center;
+  height: 45px;
+  width: 45%;
+  border-radius: 20px;
+  background-color: var(--white);
+`;
+
+export default TextInput;
diff --git a/src/components/molecules/ToDoItem.js b/src/components/molecules/ToDoItem.js
@@ -0,0 +1,81 @@
+import React from "react";
+import { Span } from "../atoms/Span";
+import { styled } from "styled-components";
+import { ImageButton } from "../atoms/ImageButton";
+import deleteButton from "../../image/delete.png";
+import backButton from "../../image/restore.png";
+import { useRecoilState } from "recoil";
+import { nowTodoList, solvedTodoList } from "../../recoil/atom.ts";
+function ToDoItem({ todo, isSolved }) {
+  const [nowTodo, setNowTodo] = useRecoilState(nowTodoList);
+  const [solvedTodo, setSolvedTodo] = useRecoilState(solvedTodoList);
+  const deleteButtonClick = () => {
+    const newSolvedList = solvedTodo.filter((item) => item !== todo);
+    setSolvedTodo(newSolvedList);
+  };
+  const backButtonClick = () => {
+    const newSolvedList = solvedTodo.filter((item) => item !== todo);
+    setSolvedTodo(newSolvedList);
+    setNowTodo([...nowTodo, todo]);
+  };
+  const clickNowToDo = (e) => {
+    // SolvedToDo 아이템 클릭했을 경우, 아무 일도 발생하지 않기하기
+    if (isSolved) {
+      return;
+    } else {
+      const targetTodo = e.target.innerText;
+      const newNowTodoList = nowTodo.filter((item) => item !== targetTodo);
+      setNowTodo(newNowTodoList);
+      setSolvedTodo([...solvedTodo, targetTodo]);
+    }
+  };
+  return (
+    <>
+      <StyledItem isSolved={isSolved}>
+        <Span onClick={clickNowToDo}>{todo}</Span>
+
+        {isSolved ? (
+          <ButtonWrapper>
+            <ImageButton src={deleteButton} onClick={deleteButtonClick} />
+            <ImageButton src={backButton} onClick={backButtonClick} />
+          </ButtonWrapper>
+        ) : (
+          ""
+        )}
+      </StyledItem>
+    </>
+  );
+}
+
+const StyledItem = styled.div`
+  display: flex;
+  justify-content: center;
+  gap: 20px;
+  align-items: center;
+  border-radius: 20px;
+  padding: 20px 14px;
+  height: 45px;
+  background: var(--gradient);
+  cursor: pointer;
+  transition: 1s;
+  // 그림자 잘리는 것 방지를 위한 margin 설정
+  margin: 10px;
+  ${(props) =>
+    props.isSolved
+      ? ""
+      : `
+        box-shadow: 0px 0px 20px white;
+        &:hover {
+          background: yellow;
+          > ${Span} {
+            color: black; /* 호버 시 Span의 텍스트 색상을 검은색으로 변경 */
+          }
+        }`}
+`;
+const ButtonWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  height: 40px;
+`;
+
+export default ToDoItem;
diff --git a/src/components/organism/Background.js b/src/components/organism/Background.js
@@ -0,0 +1,24 @@
+import { Canvas } from "@react-three/fiber";
+import { OrbitControls, Stars } from "@react-three/drei";
+
+export default function Background() {
+  return (
+    <div
+      style={{
+        width: "100%",
+        height: "100vh",
+        position: "absolute",
+        top: "0px",
+        zIndex: "-999",
+      }}
+    >
+      {/* three.js 라이브러리에서 가져온 컴포넌트 */}
+      <Canvas resize={{ polyfill: false }}>
+        <OrbitControls />
+        <Stars />
+        <ambientLight intensity={0.5} />
+        <spotLight position={[10, 15, 10]} angle={0.3} />
+      </Canvas>
+    </div>
+  );
+}
diff --git a/src/components/organism/Header.js b/src/components/organism/Header.js
@@ -0,0 +1,24 @@
+import React, { useEffect, useRef } from "react";
+import { styled } from "styled-components";
+import TextInput from "../molecules/TextInput";
+import { Span } from "../atoms/Span";
+
+function Header({}) {
+  return (
+    <StyledHeader>
+      <TextInput />
+      <Span>"Carl Seagan - 소멸은 법칙이다."</Span>
+    </StyledHeader>
+  );
+}
+
+const StyledHeader = styled.header`
+  display: flex;
+  height: 250px;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  gap: 26px;
+`;
+
+export default Header;
diff --git a/src/components/organism/NowTodo.js b/src/components/organism/NowTodo.js
@@ -0,0 +1,48 @@
+import React from "react";
+import { H1 } from "../atoms/H1";
+import { Span } from "../atoms/Span";
+import ToDoItem from "../molecules/ToDoItem";
+import { styled } from "styled-components";
+import { useRecoilValue, useRecoilState } from "recoil";
+import { nowTodoList, solvedTodoList } from "../../recoil/atom.ts";
+
+function NowTodo() {
+  const nowTodo = useRecoilValue(nowTodoList);
+  const [solvedToDo, setSolvedTodo] = useRecoilState(solvedTodoList);
+  return (
+    <StyledNowTodo>
+      <H1>✔ 지금 당장 해결하세요.</H1>
+      <Span color="var(--lightWhite)">
+        총 {nowTodo.length} 개의 할 일이 있어요.
+      </Span>
+      <StyledList>
+        {nowTodo.map((todo, idx) => (
+          <ToDoItem
+            isSolved={false}
+            todo={todo}
+            setSolvedTodo={setSolvedTodo}
+            key={idx}
+          />
-        {nowTodo.map((todo, idx) => (
-          <ToDoItem
-            isSolved={false}
-            todo={todo}
-            setSolvedTodo={setSolvedTodo}
-            key={idx}
-          />
+{nowTodo.map((todo, idx) => (
+          <ToDoItem
+            isSolved={false}
+            todo={todo}
+            setSolvedTodo={setSolvedTodo}
+            key={todo+idx}
+          />
-        {nowTodo.map((todo, idx) => (
-          <ToDoItem
-            isSolved={false}
-            todo={todo}
-            setSolvedTodo={setSolvedTodo}
-            key={idx}
-          />
+{nowTodo.map((todo, idx) => (
+          <ToDoItem
+            isSolved={false}
+            todo={todo}
+            setSolvedTodo={setSolvedTodo}
+            key={todo+idx}
+          />
+        ))}
+      </StyledList>
+    </StyledNowTodo>
+  );
+}
+
+// SolvedTodo.js에서 사용하기 위함
+export const StyledList = styled.div`
+  display: flex;
+  margin-top: 20px;
+  overflow: scroll;
+  flex-direction: column;
+  align-items: start;
+  gap: 15px;
+  height: 500px;
+`;
+
+const StyledNowTodo = styled.div`
+  position: absolute;
+  top: 170px;
+  left: 50px;
+`;
+export default NowTodo;