[Add] Side component

+import { useContext } from "react";
+import { CalendarStateContext } from "../pages/Calendar";
+import "../styles/Side.css";
+import SideSubject from "./SideSubject";
+
+const Side = () => {
+  const { subs, setSubs } = useContext(CalendarStateContext);
+
+  const renderSubs = () => {
+    const sideSubjects = [];
+
+    for (let i = 0; i < subs.length; i++) {
+      sideSubjects.push(
+        <SideSubject key={i} subject={subs[i]} setSubs={setSubs} />
+      );
+    }
+
+    return sideSubjects;
+  };
+
+  return <aside>{renderSubs()}</aside>;
+};
+
+export default Side;

+const SideSubject = ({ subject }) => {
+  let isChecked = false;
+  const defaultColor = "#EFEFEF";
+  const bgc = "background-color";
+
+  const check = (e) => {
+    if (isChecked) e.target.style["background-color"] = defaultColor;
+    else e.target.style["background-color"] = subject.color;
+    isChecked = !isChecked;
+  };
+
+  return (
+    <div className="SideSubject">
+      <div
+        className="ssc"
+        onClick={check}
+        style={{
+          [bgc]: isChecked ? subject.color : defaultColor,
+        }}
+      ></div>
+
+      <span>{subject.name}</span>
+    </div>
+  );
+};
+
+export default SideSubject;

@@ -2,3 +2,19 @@ h1,
 h2 {
   margin: 0;
 }
+
+.App {
+  margin: 12px;
+}
+
+/* Calendar */
+
+.Calendar {
+  display: flex;
+  flex-direction: column;
+}
+
+.content {
+  flex: 1;
+  display: flex;
+}

 header {
   background-color: rgba(255, 255, 255, 1);
   display: flex;
-  padding: 8px;
+  margin-bottom: 12px;
   justify-content: space-between;
   align-items: center;
 }
 
 .hl {
-  padding-right: 50px;
+  padding-right: 100px;
 }
 
 .hls {
@@ -42,8 +42,8 @@ header {
 }
 
 .hrd {
-  margin-right: 10px;
-  margin-left: 10px;
+  margin-right: 12px;
+  margin-left: 12px;
 }
 
 .hrd > button {

+aside {
+  width: 250px;
+  margin-right: 8px;
+  padding-top: 50px;
+}
+
+.SideSubject {
+  height: 25px;
+  padding: 5px;
+  display: flex;
+}
+
+.ssc {
+  height: 15px;
+  width: 15px;
+  margin: 5px 10px 5px 5px;
+  border: solid thin grey;
+  border-radius: 3px;
+}

+html,
 body {
+  width: 100%;
+  height: 100%;
   margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+  padding: 0;
+}
+
+body {
+  overflow: hidden;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
+    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
     sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
 
 code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
     monospace;
 }

+class Subject {
+  constructor(name, color, selected) {
+    this.name = name;
+    this.color = color;
+    this.selected = selected;
+  }
+}
+
+export default Subject;