feat: create new page when there is no recruit list data - #44

BaedalMate · Jan 2, 2023 · cf2bf77 · cf2bf77
1 parent 2f9a2f0
commit cf2bf77
Showing 1 changed file with 106 additions and 4 deletions.
diff --git a/baedalmate/src/components/molecules/BoardList/BoardList.tsx b/baedalmate/src/components/molecules/BoardList/BoardList.tsx
@@ -3,6 +3,8 @@ import BoardItem from 'components/atoms/BoardList/BoardItem';
 import {ScrollView, Text, View} from 'react-native';
 import axios from 'axios';
 import {recruitListURL} from 'components/pages/Main';
+import {DARK_GRAY_COLOR, PRIMARY_COLOR} from 'themes/theme';
+import {TextKRBold, TextKRReg} from 'themes/text';
 
 export interface BoardListProps {
   id: number;
@@ -20,8 +22,73 @@ export interface BoardListProps {
   // username?: string;
   image: string | null;
 }
-
-const renderItem = boardList => {
+const categoryData = [
+  {
+    id: 0,
+    text: '전체',
+    key: '0',
+  },
+  {
+    id: 1,
+    text: '한식',
+    key: '1',
+  },
+  {
+    id: 2,
+    text: '중식',
+    key: '2',
+  },
+  {
+    id: 3,
+    text: '일식',
+    key: '3',
+  },
+  {
+    id: 4,
+    text: '양식',
+    isActive: false,
+    key: '4',
+  },
+  {
+    id: 5,
+    text: '패스트푸드',
+    key: '5',
+  },
+  {
+    id: 6,
+    text: '분식',
+    key: '6',
+  },
+  {
+    id: 7,
+    text: '카페디저트',
+    key: '7',
+  },
+  {
+    id: 8,
+    text: '치킨',
+    key: '8',
+  },
+  {
+    id: 9,
+    text: '피자',
+    key: '9',
+  },
+  {
+    id: 10,
+    text: '아시안',
+    key: '10',
+  },
+  {
+    id: 11,
+    text: '도시락',
+    key: '11',
+  },
+];
+const changeCategoryIdToString = categoryId => {
+  return categoryData[categoryId].text;
+};
+const renderItem = (boardList, categoryId) => {
   // const [boardList, setBoardList] = useState<BoardListProps[]>(boardList);
   const date = new Date().getDate();
   const time = new Date().getTime();
@@ -61,7 +128,7 @@ const renderItem = boardList => {
 
   return (
     <View>
-      {boardList === undefined ? (
+      {boardList === undefined || boardList.length === 0 ? (
         <View></View>
       ) : (
         boardList.map((item, i) => {
@@ -105,7 +172,42 @@ const BoardList = ({
   categoryId?: number;
   boardList;
 }) => {
-  return <ScrollView>{renderItem(boardList)}</ScrollView>;
+  return boardList.length === 0 ? (
+    <View
+      style={{
+        justifyContent: 'center',
+        alignItems: 'center',
+        width: '100%',
+        height: '100%',
+        flex: 1,
+      }}>
+      <TextKRBold
+        style={{
+          fontSize: 18,
+          lineHeight: 22,
+          textAlign: 'center',
+          color: DARK_GRAY_COLOR,
+        }}>
+        현재
+        <Text style={{color: PRIMARY_COLOR}}>
+          {' '}
+          '{changeCategoryIdToString(categoryId)}'
+        </Text>
+        에 대한{'\n'} 모집글이 없어요
+      </TextKRBold>
+      <TextKRReg
+        style={{
+          fontSize: 12,
+          lineHeight: 18,
+          textAlign: 'center',
+          color: DARK_GRAY_COLOR,
+        }}>
+        함께 먹고 싶은 음식을 지금 한번 모집 해보세요!
+      </TextKRReg>
+    </View>
+  ) : (
+    <ScrollView>{renderItem(boardList, categoryId)}</ScrollView>
+  );
 };
 
 export default BoardList;