feat: Add Loading components

src/components/common/Loading.tsx

@@ -0,0 +1,35 @@
+import React from "react";
+
+import styled from "styled-components";
+import tw from "twin.macro";
+
+const LoadingContainer = styled.header`
+  ${tw`
+    w-full
+    h-screen
+    flex
+    justify-center
+    content-center
+  `}
+`;
+
+const LoadingIcon = styled.div`
+  ${tw`
+    animate-spin
+    h-10
+    w-10
+    border-4
+    border-sky-500
+    rounded-full
+    border-t-transparent
+  `}
+`;
+const Loading = () => {
+  return (
+    <LoadingContainer>
+      <LoadingIcon />
+    </LoadingContainer>
+  );
+};
+
+export default Loading;

src/stories/common/Loading.stories.tsx

@@ -0,0 +1,13 @@
+import React from "react";
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+
+import Loading from "@/components/common/Loading";
+
+export default {
+  title: "components/common/Loading",
+  component: Loading,
+} as ComponentMeta<typeof Loading>;
+
+const Template: ComponentStory<typeof Loading> = () => <Loading />;
+
+export const Default = Template.bind({});