[task 관리 앱] 일정 관리 앱 만들기 1

 

 

기존에는 

npm create-react-app 으로 만들었는데, 

 

속도가 느려서 

 

vite@latest를 사용하기로 함 

 

npm create vite@latest

 

 

 

 

 

npm start와 같은 기능

 

 

 

 

 

vsCode로 열어보면 이전에 create-react-app으로 설치한 파일들과 살짝 다르다

 

 

public : 정적 파일들만 넣음 (이미지 .. 바뀌지 않는 파일들)

index.html 은 그대로 사용하면됨

 

src 폴더안에 파일들도 크게 바꿀것없음

 

index.js와 동일한 기능을 하는 것이  main.jsx임

 

App.js 가 App.jsx임

 

index.css

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

 

 

 

App.css

.app {
  display: grid;
  grid-template-rows: 150px auto;
}

.app_main {
  display: flex;
  justify-content: space-evenly;
  padding: 20px 8%;
}

.task_column {
  width: 33.33%;
  background-color: tomato;
  margin: 20px;
}

 

 

 

App.jsx

import "./App.css";

function App() {
  return (
    <>
      <div className="app">
        <header className="app_header">Header Section</header>
        <main className="app_main">
          <section className="task_column">section1</section>
          <section className="task_column">section2</section>
          <section className="task_column">section3</section>
        </main>
      </div>
    </>
  );
}

export default App;

 

 

 

 

 

 

import React from "react";

const TaskForm = () => {
  return (
    <header>
      <form>
        <input
          type="text"
          className="task_input"
          placeholder="Enter your task"
        />

        <div className="task_form_bottom_line">
          <button className="tag">HTML</button>
          <button className="tag">CSS</button>
          <button className="tag">JavaScript</button>
          <button className="tag">React</button>

          <select className="task_status">
            <option value="todo">할일</option>
            <option value="todo">진행중</option>
            <option value="todo">완료</option>
          </select>
          <button type="submit" className="task_submit">
            +추가
          </button>
        </div>
      </form>
    </header>
  );
};

export default TaskForm;

 

 

 

 

 

 

/* TaskForm.css */
.app_header {
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid #dcdcdc;
}

.app_header > form {
  width: 40%;
}

.task_input {
  font-size: 20px;
  font-weight: 500;
  background-color: #f9f9f9;
  color: #000;
  border: 1px solid #dfe3e6;
  border-radius: 5px;
  padding: 8px 12px;
  margin-bottom: 15px;
  width: 100%;
}

.task_input::placeholder {
  color: #686868;
}

.task_form_bottom_line {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.tag {
  font-size: 14px;
  font-weight: 500;
  background-color: #f9f9f9;
  border: 1px solid #dfe3e6;
  border-radius: 5px;
  margin-right: 10px;
  cursor: pointer;
}

.task_status {
  font-size: 16px;
  font-weight: 500;
  border: 1px solid #999;
  border-radius: 5px;
  width: 120px;
  height: 40px;
  padding: 0 5px;
}

.task_submit {
  font-size: 16px;
  font-weight: 500;
  background-color: #6457f9;
  color: #fff;
  border-radius: 5px;
  height: 40px;
  padding: 3px 13px;
  margin-left: 10px;
  border: none;
  cursor: pointer;
}

 

 

import "./TaskForm.css";

const TaskForm = () => {
  return (
    <header className="app_header">
      <form>
        <input
          type="text"
          className="task_input"
          placeholder="Enter your task"
        />

        <div className="task_form_bottom_line">
          <div>
            <button className="tag">HTML</button>
            <button className="tag">CSS</button>
            <button className="tag">JavaScript</button>
            <button className="tag">React</button>
          </div>
          <div>
            <select className="task_status">
              <option value="todo">할일</option>
              <option value="todo">진행중</option>
              <option value="todo">완료</option>
            </select>
            <button type="submit" className="task_submit">
              + 추가
            </button>
          </div>
        </div>
      </form>
    </header>
  );
};

export default TaskForm;

 

 

 

 

.

 

 

 

 

태그 부분은 컴포넌트로 만들어서 관리 

 

.tag {
  font-size: 14px;
  font-weight: 500;
  background-color: #f9f9f9;
  border: 1px solid #dfe3e6;
  border-radius: 5px;
  padding: 2px 10px;
  margin-right: 10px;
  cursor: pointer;
}

 

 

 

 

 

 

 

 

.task_column_heading {
  display: flex;
  align-items: center;
}

.task_column_icon {
  width: 30px;
  margin-right: 10px;
}

 

 

TaskColum.jsx

import "./TaskColumn.css";

export default function TaskColumn({ title, icon }) {
  return (
    <section className="task_column">
      <h2 className="task_column_heading">
        <img className="task_column_icon" src={icon} alt="" />
        {title}
      </h2>
    </section>
  );
}

 

 

 

 

아이콘 다운로드 받아서 assets 폴더에 넣어주고 App.js에서 import함

 

 

App.jsx

 

import "./App.css";
import TaskColumn from "./components/TaskColumn";
import TaskForm from "./components/TaskForm";
import todoIcon from "./assets/direct-hit.png";
import doingIcon from "./assets/glowing-star.png";
import doneIcon from "./assets/check-mark-button.png";

function App() {
  return (
    <>
      <div className="app">
        <TaskForm />
        <main className="app_main">
          <TaskColumn title="할 일" icon={todoIcon} />
          <TaskColumn title="진행중" icon={doingIcon} />
          <TaskColumn title="완 료" icon={doneIcon} />
        </main>
      </div>
    </>
  );
}

export default App;

 

 

 

 

 

 

 

 

 

 

 

TaskCard.jsx

import Tag from "./Tag";
import delete_icon from "../assets/delete.png";
import "./TaskCard.css";

const TaskCard = () => {
  return (
    <article className="task_card">
      <p className="task_text">샘플 내용입니다.</p>

      <div className="task_card_bottom_line">
        <div className="task_card_tags">
          <Tag tagName="HTML" />
          <Tag tagName="CSS" />
        </div>
        <div className="task_delete">
          <img className="delete_icon" src={delete_icon} alt="" />
        </div>
      </div>
    </article>
  );
};

export default TaskCard;

..

 

 

 

 

TaskCard.css

.task_card {
  width: 100%;
  min-height: 100px;
  border: 1px solid #dcdcdc;
  border-radius: 10px;
  padding: 10px;
  margin: 15px 0;
}

.task_text {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 15px;
}

.task_card_bottom_line {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.task_delete {
  width: 35px;
  height: 35px;
  border-radius: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
}

.task_delete:hover {
  background-color: #ebebeb;
}

.delete_icon {
  width: 20px;
  opacity: 50%;
  transition: all 0.3s ease-in-out;
}

.task_delete:hover .delete_icon {
  opacity: 80%;
}