Merge pull request #6 from InSeong-So/main

✒️Feat: 팀원 폴더 구성

packages/console/assets/index.css

@@ -0,0 +1,289 @@
+@import url('./module/nav.css');
+@import url('./module/loading.css');
+
+*,
+*:before,
+*:after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: "Montserrat", Sans-Serif;
+  color: var(--text-color);
+  display: grid;
+  justify-content: center;
+}
+
+svg {
+  pointer-events: none;
+}
+
+.app {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+main {
+  display: flex;
+  width: auto;
+  margin-top: 2em;
+}
+
+.saved {
+  width: 1000px;
+  justify-content: space-between;
+}
+
+.pin {
+  display: flex;
+  flex-direction: column;
+  margin-top: 1em;
+  border: 2px solid #e6e6e6;
+  border-radius: 15px;
+  padding: 20px;
+}
+
+.button-wrapper {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
+}
+
+.heart label {
+  box-shadow: 0px 0px 0px 0px rgba(226, 32, 44, 0.5);
+}
+
+.heart label:after {
+  content: "\f004";
+}
+
+.heart input:checked+label {
+  background-color: #e2202c;
+  border-color: #e2202c;
+  box-shadow: 0px 0px 0px 0.5em rgba(226, 32, 44, 0);
+}
+
+.heart input:checked+label:after {
+  color: #e2202c;
+}
+
+.anim-icon {
+  width: 1.9em;
+  height: 1.9em;
+  margin: 10px;
+  font-size: 13px;
+  display: inline-block;
+  position: relative;
+  vertical-align: middle;
+}
+
+.anim-icon input {
+  display: none;
+}
+
+.anim-icon label {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  border: 0.1em solid #ccc;
+  border-radius: 100%;
+  display: block;
+  font: normal normal normal 13px/1 FontAwesome;
+  color: #ccc;
+  font-size: inherit;
+  text-rendering: auto;
+  -webkit-font-smoothing: antialiased;
+}
+
+.anim-icon label:after {
+  left: 0;
+  top: 50%;
+  margin-top: -0.5em;
+  display: block;
+  position: relative;
+  text-align: center;
+}
+
+.anim-icon input:checked+label {
+  -webkit-animation: check-in 0.3s forwards;
+  animation: check-in 0.3s forwards;
+  transition: background-color 0.1s 0.2s, box-shadow 1s;
+  border-width: 0.1em;
+  border-style: solid;
+}
+
+.anim-icon input:checked+label:after {
+  -webkit-animation: icon 0.3s forwards;
+  animation: icon 0.3s forwards;
+}
+
+.anim-icon-md {
+  font-size: 20px;
+}
+
+.anim-icon-lg {
+  font-size: 30px;
+}
+
+@-webkit-keyframes icon {
+  0% {
+    margin-top: -0.5em;
+    font-size: 1.5em;
+  }
+
+  100% {
+    font-size: 1em;
+    opacity: 1;
+    color: white;
+  }
+}
+
+@keyframes icon {
+  0% {
+    margin-top: -0.5em;
+    font-size: 1.5em;
+  }
+
+  100% {
+    font-size: 1em;
+    opacity: 1;
+    color: white;
+  }
+}
+
+@-webkit-keyframes check-in {
+  0% {
+    left: 20%;
+    top: 20%;
+    width: 60%;
+    height: 60%;
+  }
+
+  80% {
+    left: -5%;
+    top: -5%;
+    width: 110%;
+    height: 110%;
+  }
+
+  100% {
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+  }
+}
+
+@keyframes check-in {
+  0% {
+    left: 20%;
+    top: 20%;
+    width: 60%;
+    height: 60%;
+  }
+
+  80% {
+    left: -5%;
+    top: -5%;
+    width: 110%;
+    height: 110%;
+  }
+
+  100% {
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+  }
+}
+
+@-webkit-keyframes check {
+  0% {
+    left: 5%;
+    top: 5%;
+    width: 90%;
+    height: 90%;
+  }
+
+  10% {
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+  }
+
+  80% {
+    left: -5%;
+    top: -5%;
+    width: 110%;
+    height: 110%;
+  }
+
+  90% {
+    left: 5%;
+    top: 5%;
+    width: 90%;
+    height: 90%;
+  }
+
+  100% {
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+  }
+}
+
+@keyframes check {
+  0% {
+    left: 5%;
+    top: 5%;
+    width: 90%;
+    height: 90%;
+  }
+
+  10% {
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+  }
+
+  80% {
+    left: -5%;
+    top: -5%;
+    width: 110%;
+    height: 110%;
+  }
+
+  90% {
+    left: 5%;
+    top: 5%;
+    width: 90%;
+    height: 90%;
+  }
+
+  100% {
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+  }
+}
+
+img {
+  width: 460px;
+  height: 460px;
+  object-fit: cover;
+}
+
+.saved .container {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 40px;
+}

packages/console/assets/module/loading.css

@@ -0,0 +1,23 @@
+.loading {
+  transition: all ease-in-out .2s;
+  opacity: 1;
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  background: rgb(255, 255, 255, 0.8);
+  z-index: 10;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  margin: auto;
+  overflow: hidden !important;
+  touch-action: none;
+}
+
+.hidden {
+  opacity: 0;
+  visibility: hidden;
+}