Day5_ Webtoon List

App.tsx

@@ -1,20 +1,29 @@
-import { GluestackUIProvider, Text, Box, Center, Image } from "@gluestack-ui/themed"
+import { GluestackUIProvider, Text, Box, Center, Image, VStack, ScrollView } from "@gluestack-ui/themed"
 import { config } from "@gluestack-ui/config"
 import Swiper from "react-native-swiper";
 import { Dimensions } from "react-native";  //폰의 넓이만큼
 import { QueryClient, QueryClientProvider, useQuery } from "@tanstack/react-query";
 import MySwiper from "./components/MySwiper";
+import React from "react";
+import CardList from "./CardList";
 
 const queryClient = new QueryClient();
 
 export default function App() {
   return (
     <QueryClientProvider client={queryClient}>
-    <GluestackUIProvider config={config}>
-      <Center width='100%' height='100%'>
-        <MySwiper/>
-      </Center>
-    </GluestackUIProvider>
-    </QueryClientProvider>
+
+      <GluestackUIProvider config={config}>
+        <ScrollView pt={30} width='100%' height='100%' bg='$backgroundDark900'>
+          <Center width='100%' height={330}>
+            <MySwiper />
+          </Center>
+          <VStack bg='$backgroundDark900'>
+            <CardList/>
+          </VStack>
+        </ScrollView>
+      </GluestackUIProvider>
+    </QueryClientProvider >
+
   );
 }

CardList.tsx

@@ -0,0 +1,31 @@
+import { useQuery } from "@tanstack/react-query";
+import { VStack } from "@gluestack-ui/themed"
+import MediumCard from "./components/Card/MediumCard";
+import { Webtoon } from "./types";
+import React from "react";
+
+interface WebtoonResponse{
+  webtoons: Webtoon[];
+}
+
+const fetchWebtoons = async () => {
+  const res = await fetch('https://korea-webtoon-api.herokuapp.com'); //await 확장자: 함수를 기다려서 api를 호출해서 완료될때까지 기다리겠다.
+  return res.json();
+};
+
+export default function CardList() {
+  const { data } = useQuery<WebtoonResponse>({
+    queryKey: ['korea-webtoon-api.herokuapp.com'],
+    queryFn: fetchWebtoons,
+  });
+
+  return (
+    <VStack>
+      {data
+        ? data.webtoons.map((webtoon) => 
+          <MediumCard webtoon={webtoon}/>
+        )
+        : []}
+    </VStack>
+  );
+}

components/Card/LargeView.tsx

@@ -0,0 +1,48 @@
+import { GluestackUIProvider, Text, Box, Center, Image, VStack } from "@gluestack-ui/themed"
+import { config } from "@gluestack-ui/config"
+import Swiper from "react-native-swiper";
+import { Dimensions } from "react-native";  //폰의 넓이
+import { Webtoon } from "../../types";
+import React from "react";
+
+interface LargeViewProp {
+    webtoon: Webtoon;
+}
+
+export default function LargeView({ webtoon }: LargeViewProp) {
+
+    return (
+        <Swiper>
+
+
+            <VStack
+                width={Dimensions.get('window').width}
+                height='100%'
+                justifyContent="flex-end"
+                alignItems="center"
+                pl={30}
+                pb={45}
+            >
+
+                <Image
+                    position='absolute'
+                    alt='webtoon'
+                    size='full'
+                    source={{
+                        uri: webtoon.img,
+                    }}
+                />
+
+
+                <Text size='xl' color='white' fontWeight='$bold'
+                textShadowColor='black' 
+                textShadowOffset={{width:2, height:2}} //외곽선 위치 radius - 두께
+                textShadowRadius={3}>
+                     {webtoon.title} </Text>
+                <Text size='md' color='white' fontWeight='$bold'> {webtoon.author}</Text>
+            </VStack>
+
+        </Swiper>
+
+    );
+}

components/Card/MediumCard.tsx

@@ -0,0 +1,44 @@
+import { GluestackUIProvider, Text, Box, Center, Image, VStack, HStack, Icon, StarIcon } from "@gluestack-ui/themed"
+import { config } from "@gluestack-ui/config"
+import Swiper from "react-native-swiper";
+import { Dimensions } from "react-native";  //폰의 넓이
+import { Webtoon } from "../../types";
+import React from "react";
+
+
+interface MediumCardProp {
+    webtoon: Webtoon;
+}
+
+export default function MediumCard({ webtoon }: MediumCardProp) {
+
+    return (
+        <HStack pt={30} borderWidth='$1' borderBlockColor="$backgroundDark800">
+            <Image
+                size='xl'
+
+                alt='webtoon'
+                source={{
+                    uri: webtoon.img,
+                }}
+            />
+
+            <VStack justifyContent="center" pl='$5'>
+                <Text size='lg' color='white' fontWeight='$bold'>
+                    {webtoon.title}
+                </Text>
+                <Text size='sm' color='white'>
+                    {webtoon.author}
+                </Text>
+                <HStack gap = '$1'>
+                    <Icon pt='$5' size = 'xs' as={StarIcon} color='$yellow600' fill='$yellow300'></Icon>
+                    <Text size='xs' color='white' >
+                        {webtoon.fanCount}
+                    </Text>
+                </HStack>
+            </VStack>
+
+        </HStack>
+
+    );
+}

components/MySwiper.tsx

@@ -1,47 +1,31 @@
-import { GluestackUIProvider, Text, Box, Center, Image } from "@gluestack-ui/themed"
-import { config } from "@gluestack-ui/config"
 import Swiper from "react-native-swiper";
-import { Dimensions } from "react-native";  //폰의 넓이
 import { useQuery } from "@tanstack/react-query";
+import { Webtoon } from "../types";
+import React from "react";
+import LargeView from "./Card/LargeView";
+
+interface WebtoonResponse{
+  webtoons: Webtoon[];
+}
 
 const fetchWebtoons = async () => {
   const res = await fetch('https://korea-webtoon-api.herokuapp.com'); //await 확장자: 함수를 기다려서 api를 호출해서 완료될때까지 기다리겠다.
   return res.json();
 };
 
 export default function MySwiper() {
-  const { data } = useQuery({
+
+  const { data } = useQuery<WebtoonResponse>({
     queryKey: ['korea-webtoon-api.herokuapp.com'],
     queryFn: fetchWebtoons,
   });
 
   return (
-    <Swiper dotColor='gray' activeDotColor="green">
+    <Swiper>
       {data
-        ? data.webtoons.map((item: any) => (
-          <Center key={item} bg='$green200' width={Dimensions.get('window').width} height='100%'>
-            <Image
-              alt='webtoon'
-              size='2xl'
-              source={{
-                uri: item.img,
-              }}
-            />
-            <Text
-            paddingTop={30}
-            fontSize={25}
-            fontWeight="bold">
-              {item.title}
-            </Text>
-            <Text
-            paddingTop={10}>
-
-              {item.author}
-            </Text>
-
-
-          </Center>
-        ))
+        ? data.webtoons.map((webtoon) => 
+          <LargeView webtoon={webtoon}/>
+        )
         : []}
     </Swiper>
   );

types.ts

@@ -0,0 +1,7 @@
+export interface Webtoon{
+    webtoonId: number;
+    title: string;
+    author: string;
+    img: string;
+    fanCount : number;
+}