Skip to content

Commit

Permalink
feat: 포스터 이미지 추가
Browse files Browse the repository at this point in the history
  • Loading branch information
@gogumalatte
gogumalatte committed Nov 25, 2024
1 parent f00677c commit 7722b25
Show file tree
Hide file tree
Showing 3 changed files with 156 additions and 54 deletions.
34 changes: 33 additions & 1 deletion src/Main/components/RandomContents.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import {
useBreakpointValue,
useDisclosure,
Flex,
Image,
} from "@chakra-ui/react";
import api from "../../api/interceptor";
import DetailModal from "./DetailModal";
Expand All @@ -26,6 +27,7 @@ interface Content {
duration: string;
listedIn: string;
description: string;
posterPath?: string; // 이미지 URL 추가
}

function RandomContents(): JSX.Element {
Expand Down Expand Up @@ -109,7 +111,6 @@ function RandomContents(): JSX.Element {
borderRadius="8px"
boxShadow="sm"
bg="white"
height="100px"
alignContent={"center"}
textAlign="center"
overflow="hidden"
Expand All @@ -124,6 +125,37 @@ function RandomContents(): JSX.Element {
}}
onClick={() => handleCardClick(content)}
>
{content.posterPath ? (
<Image
src={content.posterPath}
alt={`${content.title} 포스터`}
boxSize="200px"
objectFit="contain"
mx="auto"
marginBottom="0.5rem"
borderRadius="md"
/>
) : (
<Box
boxSize="200px"
display="flex"
width={"150px"}
flexDirection="column"
justifyContent="center"
borderRadius={"sm"}
alignItems="center"
background={"gray.100"}
mx={"auto"}
marginBottom="0.5rem"
>
<Text fontSize="sm" color="gray.500" textAlign="center">
해당 콘텐츠는
</Text>
<Text fontSize="sm" color="gray.500" textAlign="center">
포스터가 없습니다.
</Text>
</Box>
)}
<Text
fontSize="md"
fontWeight="bold"
Expand Down
140 changes: 87 additions & 53 deletions src/Main/components/RecommendedContents.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { useEffect, useState } from "react";
import { Box, Grid, Text, Spinner, Flex } from "@chakra-ui/react";
import { Box, Grid, Text, Spinner, Flex, Image } from "@chakra-ui/react";
import api from "../../api/interceptor";
import DetailModal from "./DetailModal"; // DetailModal 컴포넌트를 import
import DetailModal from "./DetailModal";

interface Content {
id: number;
Expand All @@ -17,6 +17,7 @@ interface Content {
duration: string;
listedIn: string;
description: string;
posterPath?: string;
}

interface CategoryContent {
Expand All @@ -27,8 +28,8 @@ interface CategoryContent {
function RecommendedContents(): JSX.Element {
const [categories, setCategories] = useState<CategoryContent[]>([]);
const [isLoading, setIsLoading] = useState<boolean>(true);
const [selectedContent, setSelectedContent] = useState<Content | null>(null); // 선택된 콘텐츠 상태
const [isModalOpen, setIsModalOpen] = useState<boolean>(false); // 모달 상태
const [selectedContent, setSelectedContent] = useState<Content | null>(null);
const [isModalOpen, setIsModalOpen] = useState<boolean>(false);

const categoryLabels: { [key: string]: string } = {
similarCastFromLikes: "🎭 좋아요한 콘텐츠와 출연진 유사한 콘텐츠 TOP 10",
Expand Down Expand Up @@ -68,13 +69,13 @@ function RecommendedContents(): JSX.Element {
}, []);

const handleCardClick = (content: Content) => {
setSelectedContent(content); // 선택된 콘텐츠 설정
setIsModalOpen(true); // 모달 열기
setSelectedContent(content);
setIsModalOpen(true);
};

const closeModal = () => {
setSelectedContent(null); // 선택된 콘텐츠 초기화
setIsModalOpen(false); // 모달 닫기
setSelectedContent(null);
setIsModalOpen(false);
};

if (isLoading) {
Expand Down Expand Up @@ -104,69 +105,102 @@ function RecommendedContents(): JSX.Element {
{categoryLabels[category]}
</Text>
{contents.length > 0 ? (
// 콘텐츠 리스트
<Flex
overflowX="auto"
paddingBottom="1rem"
alignItems="center"
height={"300px"}
css={{
"&::-webkit-scrollbar": {
height: "8px",
height: "10px",
},
"&::-webkit-scrollbar-thumb": {
backgroundColor: "#319795", // teal.500 색상
backgroundColor: "#319795",
borderRadius: "4px",
},
"&::-webkit-scrollbar-track": {
backgroundColor: "#e2e8f0",
},
}}
height="160px" // 카드 리스트 높이
>
<Grid
templateColumns={`repeat(${contents.length}, 200px)`}
gap="1rem"
>
{contents.map((content) => (
<Box
key={content.id}
padding="1rem"
border="1px solid #e2e8f0"
borderRadius="8px"
boxShadow="sm"
bg="white"
textAlign="center"
overflow="hidden"
whiteSpace="nowrap"
textOverflow="ellipsis"
cursor="pointer"
minWidth="200px"
height="100px" // 각 카드의 높이
alignContent={"center"}
onClick={() => handleCardClick(content)} // 카드 클릭 핸들러
transition="transform 0.2s, box-shadow 0.2s"
_hover={{
transform: "scale(1.05)",
boxShadow: "lg",
borderColor: "teal.500",
}}
>
<Text
fontSize="md"
fontWeight="bold"
color="teal.600"
overflow="hidden"
whiteSpace="nowrap"
textOverflow="ellipsis"
<Box paddingX="1rem" /* 그리드 앞뒤 공간 추가 */ width="100%">
<Grid
templateColumns={`repeat(${contents.length}, 200px)`}
gap="1rem"
>
{contents.map((content) => (
<Box
key={content.id}
padding="1rem"
border="1px solid #e2e8f0"
borderRadius="8px"
boxShadow="sm"
bg="white"
textAlign="center"
cursor="pointer"
width="200px"
transition="transform 0.2s, box-shadow 0.2s"
_hover={{
transform: "scale(1.05)",
boxShadow: "lg",
borderColor: "teal.500",
}}
onClick={() => handleCardClick(content)}
>
{content.title}
</Text>
</Box>
))}
</Grid>
{content.posterPath ? (
<Image
src={content.posterPath}
alt={`${content.title} 포스터`}
boxSize="150px"
objectFit="contain"
mx="auto"
marginBottom="0.5rem"
borderRadius="md"
/>
) : (
<Box
boxSize="150px"
display="flex"
flexDirection="column"
justifyContent="center"
alignItems="center"
bg="gray.100"
borderRadius="md"
marginBottom="0.5rem"
mx="auto"
>
<Text
fontSize="sm"
color="gray.500"
textAlign="center"
>
해당 콘텐츠는
</Text>
<Text
fontSize="sm"
color="gray.500"
textAlign="center"
>
포스터가 없습니다.
</Text>
</Box>
)}
<Text
fontSize="md"
fontWeight="bold"
color="teal.600"
overflow="hidden"
whiteSpace="nowrap"
textOverflow="ellipsis"
>
{content.title}
</Text>
</Box>
))}
</Grid>
</Box>
</Flex>
) : (
// 데이터가 없는 경우 안내 메시지
<Text fontSize="md" color="gray.500" textAlign="center">
충분한 데이터가 쌓이지 않았습니다.
</Text>
Expand Down
36 changes: 36 additions & 0 deletions src/Main/components/SearchContents.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import {
Box,
Grid,
Text,
Image,
Spinner,
InputGroup,
Input,
Expand Down Expand Up @@ -31,6 +32,7 @@ interface Content {
duration: string;
listedIn: string;
description: string;
posterPath?: string; // 이미지 URL 추가
}

function SearchContents(): JSX.Element {
Expand Down Expand Up @@ -86,7 +88,10 @@ function SearchContents(): JSX.Element {
>
<Select
width={["100%", "160px"]} // 드롭다운 크기 조정
height="40px" // 드롭다운 높이 조정
value={searchType}
borderRadius={"md"}
mt={["0.5rem", "1px"]} // 모바일 화면에서 위쪽 여백 추가
onChange={(e) => setSearchType(e.target.value)}
size="sm" // 드롭다운 크기 축소
>
Expand Down Expand Up @@ -136,6 +141,7 @@ function SearchContents(): JSX.Element {
borderRadius="8px"
boxShadow="sm"
bg="white"
alignContent={"center"}
textAlign="center"
overflow="hidden"
whiteSpace="nowrap"
Expand All @@ -149,6 +155,36 @@ function SearchContents(): JSX.Element {
}}
onClick={() => handleCardClick(content)}
>
{content.posterPath ? (
<Image
src={content.posterPath}
alt={`${content.title} 포스터`}
boxSize="200px"
objectFit="contain"
mx="auto"
marginBottom="0.5rem"
borderRadius="md"
/>
) : (
<Box
boxSize="200px"
display="flex"
flexDirection="column"
justifyContent="center"
alignItems="center"
bg="gray.100"
borderRadius="md"
marginBottom="0.5rem"
mx="auto"
>
<Text fontSize="sm" color="gray.500" textAlign="center">
해당 콘텐츠는
</Text>
<Text fontSize="sm" color="gray.500" textAlign="center">
포스터가 없습니다.
</Text>
</Box>
)}
<Text
fontSize="md"
fontWeight="bold"
Expand Down

0 comments on commit 7722b25

Please sign in to comment.