From 1479e2c175d873ef51817f902884dc58c888caed Mon Sep 17 00:00:00 2001 From: wani Date: Tue, 20 Feb 2024 16:08:01 +0900 Subject: [PATCH 1/3] Day5_ Webtoon List LargeView - title text shadow. --- App.tsx | 27 +++++++++++++++++++++++ Card/LargeView.tsx | 48 +++++++++++++++++++++++++++++++++++++++++ Card/MediumCard.tsx | 44 +++++++++++++++++++++++++++++++++++++ CardList.tsx | 31 ++++++++++++++++++++++++++ components/MySwiper.tsx | 31 ++++++++++++++++++++++++++ tsconfig.json | 4 ++++ types.ts | 7 ++++++ 7 files changed, 192 insertions(+) create mode 100644 App.tsx create mode 100644 Card/LargeView.tsx create mode 100644 Card/MediumCard.tsx create mode 100644 CardList.tsx create mode 100644 components/MySwiper.tsx create mode 100644 tsconfig.json create mode 100644 types.ts diff --git a/App.tsx b/App.tsx new file mode 100644 index 0000000..877e16b --- /dev/null +++ b/App.tsx @@ -0,0 +1,27 @@ +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 ( + + + +
+ +
+ + + + + + + ); +} diff --git a/Card/LargeView.tsx b/Card/LargeView.tsx new file mode 100644 index 0000000..f18e8e7 --- /dev/null +++ b/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 ( + + + + + + webtoon + + + + {webtoon.title} + {webtoon.author} + + + + + ); +} diff --git a/Card/MediumCard.tsx b/Card/MediumCard.tsx new file mode 100644 index 0000000..5f096f2 --- /dev/null +++ b/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 ( + + webtoon + + + + {webtoon.title} + + + {webtoon.author} + + + + + {webtoon.fanCount} + + + + + + + ); +} diff --git a/CardList.tsx b/CardList.tsx new file mode 100644 index 0000000..711e62e --- /dev/null +++ b/CardList.tsx @@ -0,0 +1,31 @@ +import { useQuery } from "@tanstack/react-query"; +import { VStack } from "@gluestack-ui/themed" +import MediumCard from "./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({ + queryKey: ['korea-webtoon-api.herokuapp.com'], + queryFn: fetchWebtoons, + }); + + return ( + + {data + ? data.webtoons.map((webtoon) => + + ) + : []} + + ); +} \ No newline at end of file diff --git a/components/MySwiper.tsx b/components/MySwiper.tsx new file mode 100644 index 0000000..110c3a2 --- /dev/null +++ b/components/MySwiper.tsx @@ -0,0 +1,31 @@ +import Swiper from "react-native-swiper"; +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({ + queryKey: ['korea-webtoon-api.herokuapp.com'], + queryFn: fetchWebtoons, + }); + + return ( + + {data + ? data.webtoons.map((webtoon) => + + ) + : []} + + ); +} \ No newline at end of file diff --git a/tsconfig.json b/tsconfig.json new file mode 100644 index 0000000..0e6371f --- /dev/null +++ b/tsconfig.json @@ -0,0 +1,4 @@ +{ + "compilerOptions": {}, + "extends": "expo/tsconfig.base" +} diff --git a/types.ts b/types.ts new file mode 100644 index 0000000..26d71f3 --- /dev/null +++ b/types.ts @@ -0,0 +1,7 @@ +export interface Webtoon{ + webtoonId: number; + title: string; + author: string; + img: string; + fanCount : number; +} \ No newline at end of file From f3e95953b2091d8d26c6274c89d719c86ad9e22c Mon Sep 17 00:00:00 2001 From: wani Date: Tue, 20 Feb 2024 16:23:24 +0900 Subject: [PATCH 2/3] Day5-WebtoonList MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 최종 수정 --- CardList.tsx | 2 +- {Card => components/Card}/LargeView.tsx | 2 +- {Card => components/Card}/MediumCard.tsx | 2 +- components/MySwiper.tsx | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) rename {Card => components/Card}/LargeView.tsx (97%) rename {Card => components/Card}/MediumCard.tsx (97%) diff --git a/CardList.tsx b/CardList.tsx index 711e62e..88e0829 100644 --- a/CardList.tsx +++ b/CardList.tsx @@ -1,6 +1,6 @@ import { useQuery } from "@tanstack/react-query"; import { VStack } from "@gluestack-ui/themed" -import MediumCard from "./Card/MediumCard"; +import MediumCard from "./components/Card/MediumCard"; import { Webtoon } from "./types"; import React from "react"; diff --git a/Card/LargeView.tsx b/components/Card/LargeView.tsx similarity index 97% rename from Card/LargeView.tsx rename to components/Card/LargeView.tsx index f18e8e7..ad0ce5e 100644 --- a/Card/LargeView.tsx +++ b/components/Card/LargeView.tsx @@ -2,7 +2,7 @@ import { GluestackUIProvider, Text, Box, Center, Image, VStack } from "@gluestac import { config } from "@gluestack-ui/config" import Swiper from "react-native-swiper"; import { Dimensions } from "react-native"; //폰의 넓이 -import { Webtoon } from "../types"; +import { Webtoon } from "../../types"; import React from "react"; interface LargeViewProp { diff --git a/Card/MediumCard.tsx b/components/Card/MediumCard.tsx similarity index 97% rename from Card/MediumCard.tsx rename to components/Card/MediumCard.tsx index 5f096f2..ce8edbc 100644 --- a/Card/MediumCard.tsx +++ b/components/Card/MediumCard.tsx @@ -2,7 +2,7 @@ import { GluestackUIProvider, Text, Box, Center, Image, VStack, HStack, Icon, St import { config } from "@gluestack-ui/config" import Swiper from "react-native-swiper"; import { Dimensions } from "react-native"; //폰의 넓이 -import { Webtoon } from "../types"; +import { Webtoon } from "../../types"; import React from "react"; diff --git a/components/MySwiper.tsx b/components/MySwiper.tsx index 110c3a2..48340f6 100644 --- a/components/MySwiper.tsx +++ b/components/MySwiper.tsx @@ -2,7 +2,7 @@ import Swiper from "react-native-swiper"; import { useQuery } from "@tanstack/react-query"; import { Webtoon } from "../types"; import React from "react"; -import LargeView from "../Card/LargeView"; +import LargeView from "./Card/LargeView"; interface WebtoonResponse{ webtoons: Webtoon[]; From f5c23abc9f0b255fd1acf276d812ab93a145c0cb Mon Sep 17 00:00:00 2001 From: wani Date: Tue, 20 Feb 2024 16:26:06 +0900 Subject: [PATCH 3/3] Day5-WebtoonList --- App.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/App.tsx b/App.tsx index 41da0a1..621350d 100644 --- a/App.tsx +++ b/App.tsx @@ -1,4 +1,4 @@ -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"; //폰의 넓이만큼