feat: ItemList 컴포넌트 추가 및 적용

kangju2000 · Oct 22, 2023 · c1742bc · c1742bc
1 parent d69fd1a
commit c1742bc
Show file tree

Hide file tree

Showing 2 changed files with 77 additions and 22 deletions.
diff --git a/src/components/ContentModal.tsx b/src/components/ContentModal.tsx
@@ -15,7 +15,6 @@ import {
  TabPanels,
  Tabs,
  Text,
- useColorMode,
 } from '@chakra-ui/react'
 import { ko } from 'date-fns/locale'
 import { AnimatePresence } from 'framer-motion'
@@ -24,6 +23,7 @@ import { useState } from 'react'
 import ActivityItem from './ActivityItem'
 import ChakraMotion from './ChakraMotion'
 import { RefreshIcon } from './Icons'
+import ItemList from './ItemList'
 import LoadingProgress from './LoadingProgress'
 
 import useGetContents from '@/hooks/useGetContents'
@@ -36,8 +36,6 @@ type Props = {
 }
 
 const ContentModal = ({ isOpen, onClose }: Props) => {
- const { colorMode, toggleColorMode } = useColorMode()
-
  const [selectedCourseId, setSelectedCourseId] = useState('-1')
  const {
  data: { courseList, activityList, updateAt },
@@ -56,16 +54,15 @@ const ContentModal = ({ isOpen, onClose }: Props) => {
  <Text fontSize="18px" fontWeight="700">
  Gachon Tools
  </Text>
- <button onClick={toggleColorMode}>{colorMode === 'light' ? '🌙' : '🌞'}</button>
  <ModalCloseButton
  size="lg"
  top="16px"
  right="16px"
  border="none"
- _focus={{
-  outline: 'none',
-  bg: 'none',
- }}
+ outline="none !important"
+ _hover={{ bg: 'none', color: 'inherit' }}
+ _focus={{ bg: 'none', color: 'inherit' }}
+ _active={{ bg: 'none' }}
  _focusVisible={{
  boxShadow: 'none',
  }}
@@ -108,6 +105,9 @@ const ContentModal = ({ isOpen, onClose }: Props) => {
  borderRadius="none"
  border="none"
  outline="none !important"
+ _hover={{
+ _dark: { bg: 'blue.800', color: 'white' },
+ }}
  _focus={{ outline: 'none', bg: 'none', border: 'none' }}
  _active={{ outline: 'none', bg: 'none' }}
  _selected={{ color: 'blue.600', borderBottom: '2px solid' }}
@@ -119,6 +119,9 @@ const ContentModal = ({ isOpen, onClose }: Props) => {
  borderRadius="none"
  border="none"
  outline="none !important"
+ _hover={{
+ _dark: { bg: 'blue.800', color: 'white' },
+ }}
  _focus={{ outline: 'none', bg: 'none', border: 'none' }}
  _active={{ outline: 'none', bg: 'none' }}
  _selected={{ color: 'blue.600', borderBottom: '2px solid' }}
@@ -133,22 +136,29 @@ const ContentModal = ({ isOpen, onClose }: Props) => {
  <LoadingProgress pos={pos} />
  ) : (
  <ChakraMotion
- as={Stack}
  initial={{ opacity: 0 }}
  animate={{ opacity: 1 }}
  transition={{
  delay: 0.2,
  }}
- spacing="16px"
  >
- {filteredActivities(
- activityList,
- selectedCourseId,
- '진행중인 과제',
- false,
- ).map(activity => (
- <ActivityItem key={activity.id} activity={activity} />
- ))}
+ <ItemList
+ data={filteredActivities(
+ activityList,
+ selectedCourseId,
+ '진행중인 과제',
+ false,
+ )}
+ renderItem={activity => (
+ <ActivityItem key={activity.id} activity={activity} />
+ )}
+ renderEmpty={() => (
+ <Text fontSize="14px" color="gray.500" textAlign="center">
+ 진행중인 과제가 없습니다.
+ </Text>
+ )}
+ spacing="16px"
+ />
  </ChakraMotion>
  )}
  </TabPanel>
@@ -165,11 +175,23 @@ const ContentModal = ({ isOpen, onClose }: Props) => {
  }}
  spacing="16px"
  >
- {filteredActivities(activityList, selectedCourseId, '모든 과제', false).map(
- activity => (
+ <ItemList
+ data={filteredActivities(
+ activityList,
+ selectedCourseId,
+ '모든 과제',
+ false,
+ )}
+ renderItem={activity => (
  <ActivityItem key={activity.id} activity={activity} />
- ),
- )}
+ )}
+ renderEmpty={() => (
+ <Text fontSize="14px" color="gray.500" textAlign="center">
+ 과제가 없습니다.
+ </Text>
+ )}
+ spacing="16px"
+ />
  </ChakraMotion>
  )}
  </TabPanel>
@@ -184,6 +206,7 @@ const ContentModal = ({ isOpen, onClose }: Props) => {
  _light={{ color: 'gray.500' }}
  _dark={{ color: 'gray.400' }}
  mr="4px"
+ cursor="pointer"
  >
  {isLoading ? '불러오는 중...' : `${foramtDate(ko, updateAt)} 업데이트`}
  </Text>

diff --git a/src/components/ItemList.tsx b/src/components/ItemList.tsx
@@ -0,0 +1,32 @@
+import { Divider, Stack } from '@chakra-ui/react'
+import { ComponentProps, Fragment } from 'react'
+
+interface ItemListProps<T> extends Omit<ComponentProps<typeof Stack>, 'children'> {
+ data: T[]
+ renderItem: (data: T) => JSX.Element | boolean | null | undefined
+ renderEmpty?: () => JSX.Element | boolean | null | undefined
+ hasDivider?: boolean
+}
+
+export default function ItemList<T>({
+ data,
+ renderItem,
+ renderEmpty,
+ hasDivider = false,
+ ...props
+}: ItemListProps<T>) {
+ return (
+ <Stack {...props}>
+ {data?.length === 0
+ ? renderEmpty?.()
+ : data.map((item, index) => {
+ return (
+ <Fragment key={index}>
+ {renderItem(item)}
+ {renderItem(item) && hasDivider && index !== data.length - 1 && <Divider />}
+ </Fragment>
+ )
+ })}
+ </Stack>
+ )
+}