Add Skeleton

frontend/src/components/Header.tsx

@@ -5,6 +5,7 @@ import {
   HStack,
   IconButton,
   useDisclosure,
+  Stack,
   LightMode,
   useColorMode,
   useColorModeValue,
@@ -31,10 +32,19 @@ export default function Header() {
   const Icon = useColorModeValue(FaMoon, FaSun);
 
   return (
-    <HStack
+    <Stack
       justifyContent={"space-between"}
+      alignItems="center"
       py={5}
-      px={10}
+      px={40}
+      direction={{
+        sm: "column",
+        md: "row",
+      }}
+      spacing={{
+        sm: 4,
+        md: 0,
+      }}
       borderBottomWidth={1}
     >
       <Box color={logoColor}>
@@ -58,6 +68,6 @@ export default function Header() {
       </HStack>
       <LoginModal isOpen={isLoginOpen} onClose={onLoginClose} />
       <SignUpModal isOpen={isSignUpOpen} onClose={onSignUpClose} />
-    </HStack>
+    </Stack>
   );
 }

frontend/src/components/Room.tsx

@@ -0,0 +1,51 @@
+import { FaRegHeart, FaStar } from "react-icons/fa";
+import {
+  Box,
+  Button,
+  Grid,
+  HStack,
+  Image,
+  Text,
+  useColorModeValue,
+  VStack,
+} from "@chakra-ui/react";
+
+export default function Room() {
+  const gray = useColorModeValue("gray.600", "gray.300");
+  return (
+    <VStack alignItems={"flex-start"}>
+      <Box position="relative" overflow={"hidden"} mb={3} rounded="2xl">
+        <Image
+          minH="280"
+          src="https://a0.muscache.com/im/pictures/miso/Hosting-47181423/original/39c9d4e7-78d0-4807-9f0d-3029d987d02a.jpeg?im_w=720"
+        />
+        <Button
+          variant={"unstyled"}
+          position="absolute"
+          top={0}
+          right={0}
+          color="white"
+        >
+          <FaRegHeart size="20px" />
+        </Button>
+      </Box>
+      <Box>
+        <Grid gap={2} templateColumns={"6fr 1fr"}>
+          <Text display={"block"} as="b" noOfLines={1} fontSize="md">
+            Cheomdangwahak-ro,Jeongeup-si, North Jeolla Province, South Korea
+          </Text>
+          <HStack spacing={1} alignItems="center">
+            <FaStar size={12} />
+            <Text fontSize={"sm"}>5.0</Text>
+          </HStack>
+        </Grid>
+        <Text fontSize={"sm"} color={gray}>
+          Seoul, S. Korea
+        </Text>
+      </Box>
+      <Text fontSize={"sm"} color={gray}>
+        <Text as="b">$72</Text> / night
+      </Text>
+    </VStack>
+  );
+}

frontend/src/routes/Home.tsx

@@ -1,3 +1,42 @@
+import { FaStar, FaRegHeart } from "react-icons/fa";
+import {
+  Box,
+  Grid,
+  Heading,
+  Button,
+  HStack,
+  Image,
+  Text,
+  VStack,
+  Skeleton,
+  SkeletonText,
+} from "@chakra-ui/react";
+import Room from "../components/Room";
+
 export default function Home() {
-  return <span>homeeee</span>;
+  return (
+    <Grid
+      mt={10}
+      px={{
+        base: 10,
+        lg: 40,
+      }}
+      columnGap={4}
+      rowGap={8}
+      templateColumns={{
+        sm: "1fr",
+        md: "1fr 1fr",
+        lg: "repeat(3, 1fr)",
+        xl: "repeat(4, 1fr)",
+        "2xl": "repeat(5, 1fr)",
+      }}
+    >
+      <Box>
+        <Skeleton height={280} rounded="2xl" mb={7} />
+        <SkeletonText w="70%" noOfLines={2} mb={5} />
+        <SkeletonText w="30%" noOfLines={1} />
+      </Box>
+      <Room />
+    </Grid>
+  );
 }