Skip to content

Commit

Permalink
[Kan 124] 카테고리 여러개 선택 기능 추가 (#33)
Browse files Browse the repository at this point in the history 
* Feat/category multiple select

* Fix/mapDart
  • Loading branch information
@sjsjmine129
sjsjmine129 authored Jun 1, 2024
1 parent 0c7dffb commit 9a1925d
Show file tree
Hide file tree
Showing 3 changed files with 49 additions and 30 deletions.
37 changes: 30 additions & 7 deletions src/components/CategoryButton.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@ import {astToReact} from 'react-native-svg/lib/typescript/xml';
const windowWidth = Dimensions.get('window').width;

export default function CategoryButton(props) {
const {onPress, selected} = props;
const {onPress, data} = props;

const navigation = useNavigation();
const context = useContext(AppContext);
Expand All @@ -59,9 +59,21 @@ export default function CategoryButton(props) {
<AnimatedButton
style={styles.buttonSet}
onPress={async () => {
onPress(categroy);
if (data.includes(categroy)) {
const filtered = data.filter(item => item !== categroy);
onPress(filtered);
} else {
onPress([...data, categroy]);
}
}}>
<View key={index} style={styles.categroyButton}>
<View
key={index}
style={[
styles.categroyButton,
data.includes(categroy)
? {backgroundColor: COLOR_SECONDARY, borderRadius: 20}
: null,
]}>
{n === 1 ? (
<Image
style={styles.foodIcon}
Expand Down Expand Up @@ -108,9 +120,21 @@ export default function CategoryButton(props) {
<AnimatedButton
style={styles.buttonSet}
onPress={async () => {
onPress(categroy);
if (data.includes(categroy)) {
const filtered = data.filter(item => item !== categroy);
onPress(filtered);
} else {
onPress([...data, categroy]);
}
}}>
<View key={index} style={styles.categroyButton}>
<View
key={index}
style={[
styles.categroyButton,
data.includes(categroy)
? {backgroundColor: COLOR_SECONDARY, borderRadius: 20}
: null,
]}>
{n === 1 ? (
<Image
style={styles.foodIcon}
Expand Down Expand Up @@ -182,8 +206,6 @@ const styles = StyleSheet.create({
marginBottom: 3,
width: 50,
height: 50,
backgroundColor: COLOR_SECONDARY,
borderRadius: 20,
},
categroyText2: {
fontSize: 13,
Expand All @@ -196,6 +218,7 @@ const styles = StyleSheet.create({
justifyContent: 'center',
alignItems: 'center',
marginBottom: 0,
// backgroundColor: 'red',
},
foodIcon: {
width: 30,
Expand Down
22 changes: 10 additions & 12 deletions src/screens/list/ListMainScreen.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,7 @@ export default function ListMainScreen() {
const [priceRangeModalVisible, setPriceRangeModalVisible] = useState(false);
const [sortModalVisible, setSortModalVisible] = useState(false);

const [selectedCategory, setSelectedCategory] = useState('전체');
const [selectedCategory, setSelectedCategory] = useState([]);
const [storeScore, setStoreScore] = useState('전체');
const [storeScoreNaver, setStoreScoreNaver] = useState('전체');
const [replyNum, setReplyNum] = useState('전체');
Expand All @@ -74,10 +74,10 @@ export default function ListMainScreen() {
const checkCategory = async () => {
const srcCategory = await AsyncStorage.getItem('category');
if (srcCategory) {
setSelectedCategory(srcCategory);
setSelectedCategory([srcCategory]);
await AsyncStorage.setItem('category', '');
} else {
setSelectedCategory('전체');
setSelectedCategory([]);
}
};

Expand All @@ -100,9 +100,9 @@ export default function ListMainScreen() {
params.like = true;
}

if (selectedCategory !== '전체') {
if (selectedCategory.length > 0) {
// console.log('selectedCategory:', selectedCategory, pageNumber);
params.categories = [selectedCategory];
params.categories = selectedCategory;
}

switch (storeScore) {
Expand Down Expand Up @@ -319,7 +319,7 @@ export default function ListMainScreen() {
,
{
backgroundColor:
selectedCategory !== '전체'
selectedCategory.length > 0
? COLOR_PRIMARY
: categoryModalVisible
? '#D9D9D9'
Expand All @@ -330,17 +330,15 @@ export default function ListMainScreen() {
console.log('press 카테고리');
setCategoryModalVisible(true);
}}>
{selectedCategory === '전체' ? (
{selectedCategory.length == 0 ? (
<>
<SvgXml xml={svgXml.icon.shop} width="20" height="20" />
<Text style={styles.filterText}>{'카테고리'}</Text>
</>
) : (
<>
<SvgXml xml={svgXml.icon.shopColor} width="20" height="20" />
<Text style={styles.filterTextActive}>
{selectedCategory}
</Text>
<Text style={styles.filterTextActive}>{'카테고리'}</Text>
</>
)}
</AnimatedButton>
Expand Down Expand Up @@ -680,7 +678,7 @@ export default function ListMainScreen() {
style={{padding: 4}}
onPress={() => {
console.log('새로고침');
setSelectedCategory('전체');
setSelectedCategory([]);
setCategoryModalVisible(false);
}}>
<SvgXml xml={svgXml.icon.refresh} width="24" height="24" />
Expand All @@ -691,7 +689,7 @@ export default function ListMainScreen() {
<View style={{marginTop: 12}}>
<CategoryButton
onPress={setSelectedCategory}
selected={selectedCategory}
data={selectedCategory}
/>
</View>
</View>
Expand Down
20 changes: 9 additions & 11 deletions src/screens/map/MapScreen.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -64,7 +64,7 @@ export default function MapScreen() {
const [myLocation, setMyLocation] = useState({latitude: 0, longitude: 0});
const [storeData, setStoreData] = useState({});

const [selectedCategory, setSelectedCategory] = useState('전체');
const [selectedCategory, setSelectedCategory] = useState([]);
const [storeScore, setStoreScore] = useState('전체');
const [replyNum, setReplyNum] = useState('전체');
const [priceRange, setPriceRange] = useState('전체');
Expand Down Expand Up @@ -137,9 +137,9 @@ export default function MapScreen() {
params.like = true;
}

if (selectedCategory !== '전체') {
console.log('selectedCategory:', selectedCategory);
params.categories = [selectedCategory];
if (selectedCategory.length > 0) {
// console.log('selectedCategory:', selectedCategory, pageNumber);
params.categories = selectedCategory;
}

switch (storeScore) {
Expand Down Expand Up @@ -346,7 +346,7 @@ export default function MapScreen() {
,
{
backgroundColor:
selectedCategory !== '전체'
selectedCategory.length > 0
? COLOR_PRIMARY
: categoryModalVisible
? '#D9D9D9'
Expand All @@ -357,17 +357,15 @@ export default function MapScreen() {
console.log('press 카테고리');
setCategoryModalVisible(true);
}}>
{selectedCategory === '전체' ? (
{selectedCategory.length == 0 ? (
<>
<SvgXml xml={svgXml.icon.shop} width="20" height="20" />
<Text style={styles.filterText}>{'카테고리'}</Text>
</>
) : (
<>
<SvgXml xml={svgXml.icon.shopColor} width="20" height="20" />
<Text style={styles.filterTextActive}>
{selectedCategory}
</Text>
<Text style={styles.filterTextActive}>{'카테고리'}</Text>
</>
)}
</AnimatedButton>
Expand Down Expand Up @@ -656,7 +654,7 @@ export default function MapScreen() {
style={{padding: 4}}
onPress={() => {
console.log('새로고침');
setSelectedCategory('전체');
setSelectedCategory([]);
setCategoryModalVisible(false);
}}>
<SvgXml xml={svgXml.icon.refresh} width="24" height="24" />
Expand All @@ -667,7 +665,7 @@ export default function MapScreen() {
<View style={{marginTop: 12}}>
<CategoryButton
onPress={setSelectedCategory}
selected={selectedCategory}
data={selectedCategory}
/>
</View>
</View>
Expand Down

0 comments on commit 9a1925d

Please sign in to comment.