chore: change boardlist ui - #44

BaedalMate · Jan 20, 2023 · a8f5072 · a8f5072
1 parent ec9a35b
commit a8f5072
Show file tree

Hide file tree

Showing 13 changed files with 44 additions and 127 deletions.
diff --git a/baedalmate/src/components/atoms/BoardList/BoardItem.tsx b/baedalmate/src/components/atoms/BoardList/BoardItem.tsx
@@ -2,7 +2,7 @@ import {useNavigation} from '@react-navigation/native';
 import {url} from '../../../../App';
 import {BoardListProps} from 'components/molecules/BoardList/BoardList';
 import React, {useState} from 'react';
-import {Image, StyleSheet, Text, TouchableHighlight, View} from 'react-native';
+import {Image, StyleSheet, TouchableHighlight, View} from 'react-native';
 import {TextKRBold, TextKRReg} from 'themes/text';
 import {
   DARK_GRAY_COLOR,
@@ -43,36 +43,38 @@ const BoardItem = ({item}: {item: BoardListProps}) => {
           }}
           style={[styles.storeImg]}
         />
-        <View
-          style={{
-            position: 'absolute',
-            left: 15,
-            top: 18,
-            width: 75,
-            height: 75,
-            borderRadius: 75 / 2,
-            flexDirection: 'row',
-            backgroundColor: 'rgba(33, 33, 35, 0.7)',
-            zIndex: 1,
-          }}>
-          <TextKRBold
+        {!item.active && (
+          <View
             style={{
-              color: 'white',
-              display: 'flex',
+              position: 'absolute',
+              left: 15,
+              top: 18,
               width: 75,
               height: 75,
-              textAlign: 'center',
-              lineHeight: 75,
-              fontSize: 14,
+              borderRadius: 75 / 2,
+              flexDirection: 'row',
+              backgroundColor: 'rgba(33, 33, 35, 0.7)',
+              zIndex: 1,
             }}>
-            모집완료
-          </TextKRBold>
-        </View>
+            <TextKRBold
+              style={{
+                color: 'white',
+                display: 'flex',
+                width: 75,
+                height: 75,
+                textAlign: 'center',
+                lineHeight: 75,
+                fontSize: 14,
+              }}>
+              모집완료
+            </TextKRBold>
+          </View>
+        )}
         {/* <Image
-          source={{
-            uri: item.image !== null ? item.image : '',
-          }}
-          style={styles.storeImg}
+        source={{
+          uri: item.image !== null ? item.image : '',
+        }}
+        style={styles.storeImg}
         /> */}
         <View
           style={{

diff --git a/baedalmate/src/components/atoms/BoardList/CategoryItem.tsx b/baedalmate/src/components/atoms/BoardList/CategoryItem.tsx
@@ -1,5 +1,5 @@
 import React, {useEffect, useState} from 'react';
-import {FlatList, Text, Touchable, View} from 'react-native';
+import {FlatList, Text, View} from 'react-native';
 import {TouchableOpacity} from 'react-native-gesture-handler';
 import {LINE_GRAY_COLOR, PRIMARY_COLOR} from 'themes/theme';
 
@@ -120,7 +120,6 @@ const CategoryList = ({categoryId, setCategoryId}) => {
   const [selectedId, setSelectedId] = useState<number>(categoryId);
   useEffect(() => {
     setSelectedId(categoryId);
-    console.log('asdf', categoryId, selectedId);
   }, [categoryId]);
   const renderItem = ({item}: {item: CategoryProps}) => {
     const borderBottomWidth = item.id === selectedId ? 4 : 0;

diff --git a/baedalmate/src/components/atoms/BoardList/SortItem.tsx b/baedalmate/src/components/atoms/BoardList/SortItem.tsx
@@ -1,7 +1,6 @@
 import React from 'react';
-import {View} from 'react-native';
 import {TouchableOpacity} from 'react-native-gesture-handler';
-import {TextKRBold, TextKRReg} from 'themes/text';
+import {TextKRReg} from 'themes/text';
 import {
   DARK_GRAY_COLOR,
   LINE_GRAY_COLOR,

diff --git a/baedalmate/src/components/atoms/BoardList/Tags.tsx b/baedalmate/src/components/atoms/BoardList/Tags.tsx
@@ -2,11 +2,10 @@ import {BoardListProps} from 'components/molecules/BoardList/BoardList';
 import {recruitI} from 'components/utils/api/Chat';
 import {formPrice} from 'components/utils/api/Recruit';
 import React from 'react';
-import {StyleSheet, View} from 'react-native';
+import {View} from 'react-native';
 import {TextKRBold, TextKRReg} from 'themes/text';
 import {
   DARK_GRAY_COLOR,
-  LINE_GRAY_COLOR,
   LINE_ORANGE_COLOR,
   MAIN_GRAY_COLOR,
   WHITE_COLOR,
@@ -108,9 +107,9 @@ const OrangeMainTag = ({item}: {item: BoardListProps | recruitI}) => {
           color: LINE_ORANGE_COLOR,
         }}>
         {item.criteria === 'PRICE'
-          ? '현재 ' + formPrice(item.minPrice) + '원'
+          ? '현재 ' + formPrice(item.currentPrice) + '원'
           : item.criteria === 'NUMBER'
-          ? '현재인원' + item.minPeople + '인'
+          ? '현재인원' + item.currentPeople + '인'
           : timeText.includes('마감')
           ? timeText
           : timeText + ' 남음'}
@@ -174,26 +173,5 @@ const WhiteTag = () => {
     </View>
   );
 };
-const styles = StyleSheet.create({
-  boardItemWrapper: {
-    display: 'flex',
-    flexDirection: 'row',
-    paddingVertical: 18,
-    paddingHorizontal: 15,
-    width: '100%',
-    height: 120,
-    borderWidth: 1,
-    borderColor: LINE_GRAY_COLOR,
-    alignItems: 'stretch',
-    backgroundColor: 'white',
-    marginBottom: 10,
-  },
-  storeImg: {
-    width: 75,
-    height: 75,
-    borderRadius: 75 / 2,
-    marginRight: 15,
-  },
-});
 
 export {GrayTag, OrangeMainTag, OrangeChatTag, WhiteTag};
diff --git a/baedalmate/src/components/atoms/Button/BtnHorizontalGray.tsx b/baedalmate/src/components/atoms/Button/BtnHorizontalGray.tsx
@@ -11,12 +11,6 @@ import React from 'react';
 import {StyleSheet, Text, TouchableOpacity} from 'react-native';
 import {Fonts} from '../../../assets/Fonts';
 
-// export type BtnWithTextProps = {
-//   navigation: any;
-//   onPress(): void;
-//   text: string;
-// };
-
 const BtnHorizontalGray = (props: BtnWithTextProps) => {
   return (
     <TouchableOpacity

diff --git a/baedalmate/src/components/atoms/Button/BtnKakaoLogin.tsx b/baedalmate/src/components/atoms/Button/BtnKakaoLogin.tsx
@@ -22,6 +22,4 @@ const BtnKakaoLoginWrapper = (props: BtnWithoutTextProps) => {
   );
 };
 
-const styles = StyleSheet.create({});
-
 export default BtnKakaoLoginWrapper;
diff --git a/baedalmate/src/components/atoms/Button/BtnMap.tsx b/baedalmate/src/components/atoms/Button/BtnMap.tsx
@@ -7,29 +7,10 @@
  */
 
 import {useNavigation} from '@react-navigation/native';
-import {BoardListProps} from 'components/molecules/BoardList/BoardList';
 import {RecruitItemProps} from 'components/pages/Detail';
-import React, {useState} from 'react';
-import {useController} from 'react-hook-form';
-import {
-  Image,
-  Pressable,
-  StyleSheet,
-  Text,
-  TouchableOpacity,
-  View,
-} from 'react-native';
-import {
-  BAEMIN_ICON,
-  COUPANGEATS_ICON,
-  DARK_GRAY_COLOR,
-  DDANGYO_ICON,
-  ETC_ICON,
-  MAP_ORANGE,
-  WHITE_COLOR,
-  YOGIYO_ICON,
-} from 'themes/theme';
-import BtnRadio from './BtnRadio';
+import React from 'react';
+import {Image, TouchableOpacity} from 'react-native';
+import {MAP_ORANGE} from 'themes/theme';
 
 export type BtnPlatformProps = {
   onPress(): void;
@@ -41,7 +22,6 @@ export type BtnPlatformProps = {
 const BtnMap = ({item}: {item: RecruitItemProps | undefined}) => {
   const navigation = useNavigation();
   return (
-    // <View>
     <TouchableOpacity
       style={{
         width: 36,
@@ -63,25 +43,7 @@ const BtnMap = ({item}: {item: RecruitItemProps | undefined}) => {
       }}>
       <Image source={MAP_ORANGE} />
     </TouchableOpacity>
-    // </View>
   );
 };
 
-const styles = StyleSheet.create({
-  selected: {
-    backgroundColor: '',
-    opacity: 1,
-    width: 60,
-    height: 60,
-    borderRadius: 30,
-  },
-  unselected: {
-    backgroundColor: 'gray',
-    opacity: 0.3,
-    width: 60,
-    height: 60,
-    borderRadius: 30,
-  },
-});
-
 export default BtnMap;
diff --git a/baedalmate/src/components/atoms/Button/BtnPlatform.tsx b/baedalmate/src/components/atoms/Button/BtnPlatform.tsx
@@ -67,7 +67,7 @@ const PlatformSelect = ({setPlatform, control, name, rules, setValue}) => {
   const data = [
     {value: 'BAEMIN', url: BAEMIN_ICON},
     {value: 'YOGIYO', url: YOGIYO_ICON},
-    {value: 'COUPANGEATS', url: COUPANGEATS_ICON},
+    {value: 'COUPANG', url: COUPANGEATS_ICON},
     {value: 'DDANGYO', url: DDANGYO_ICON},
     {value: 'ETC', url: ETC_ICON},
   ];

diff --git a/baedalmate/src/components/atoms/Button/BtnRadio.tsx b/baedalmate/src/components/atoms/Button/BtnRadio.tsx
@@ -1,15 +1,6 @@
 import React, {useState} from 'react';
-import {
-  GestureResponderEvent,
-  Pressable,
-  StyleSheet,
-  Text,
-  TouchableOpacity,
-  View,
-} from 'react-native';
-import {LINE_ORANGE_COLOR, PRIMARY_COLOR, WHITE_COLOR} from 'themes/theme';
-import {Fonts} from '../../../assets/Fonts';
-import {TextKRBold, TextKRReg} from 'themes/text';
+import {Pressable, StyleSheet, Text, View} from 'react-native';
+import {LINE_ORANGE_COLOR, WHITE_COLOR} from 'themes/theme';
 export type TagProps = {
   text: string;
   active: boolean;

diff --git a/baedalmate/src/components/atoms/Button/BtnRemoveDeliveryFee.tsx b/baedalmate/src/components/atoms/Button/BtnRemoveDeliveryFee.tsx
@@ -6,7 +6,6 @@
  * @flow strict-local
  */
 
-import {BtnWithTextProps} from 'components/molecules/Button/BtnHorizontal2';
 import React from 'react';
 import {StyleSheet, Text, TouchableOpacity} from 'react-native';
 import {DARK_GRAY_COLOR, LINE_GRAY_COLOR} from 'themes/theme';

diff --git a/baedalmate/src/components/atoms/Button/BtnTag.tsx b/baedalmate/src/components/atoms/Button/BtnTag.tsx
@@ -9,13 +9,7 @@
 import {BtnWithTextProps} from 'components/molecules/Button/BtnHorizontal2';
 import React from 'react';
 import {StyleSheet, Text, TouchableOpacity} from 'react-native';
-import {
-  LINE_GRAY_COLOR,
-  LINE_ORANGE_COLOR,
-  MAIN_GRAY_COLOR,
-  PRIMARY_COLOR,
-  WHITE_COLOR,
-} from 'themes/theme';
+import {LINE_ORANGE_COLOR, WHITE_COLOR} from 'themes/theme';
 import {Fonts} from '../../../assets/Fonts';
 const BtnTag = (props: BtnWithTextProps) => {
   return (

diff --git a/baedalmate/src/components/molecules/BoardList/Sort.tsx b/baedalmate/src/components/molecules/BoardList/Sort.tsx
@@ -1,6 +1,6 @@
-import {SortActive, SortDefault} from 'components/atoms/BoardList/SortItem';
+import {SortDefault} from 'components/atoms/BoardList/SortItem';
 import {sortData} from 'components/pages/BoardListPage';
-import React, {useState} from 'react';
+import React from 'react';
 import {View} from 'react-native';
 
 const Sort = ({selectedSort, setSelectedSort}) => {

diff --git a/baedalmate/src/components/pages/BoardListPage.tsx b/baedalmate/src/components/pages/BoardListPage.tsx
@@ -10,6 +10,7 @@ import {recruitListURL} from './Main';
 import {getJWTToken} from 'components/utils/api/Recruit';
 
 export const sortData = [
+  {name: '최신순', value: 'createDate'},
   {name: '마감순', value: 'deadlineDate'},
   {name: '평점순', value: 'score'},
   {name: '인기순', value: 'view'},
@@ -102,7 +103,7 @@ const BoardListPage = ({route, navigation}) => {
       <BoardList categoryId={categoryId} boardList={recruitList} />
       <BtnFloating
         onPress={() => {
-          navigation.navigate('상세 설정');
+          navigation.navigate('상세 설정', {type: 'CREATE'});
           // 임시 값. 변경 필요
         }}
       />
-Original file line number
+Diff line change
@@ Expand Up @@
       );
     };
-    const styles = StyleSheet.create({});
     export default BtnKakaoLoginWrapper;