Skip to content

Commit

Permalink
sdp-tech#116 fix : fix minor bugs by specifying types, etc
Browse files Browse the repository at this point in the history
  • Loading branch information
@kimheonningg
kimheonningg committed Sep 22, 2024
1 parent dc1e146 commit 9ce2109
Show file tree
Hide file tree
Showing 4 changed files with 106 additions and 94 deletions.
85 changes: 43 additions & 42 deletions src/components/Home/HomeMain.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,25 +1,9 @@
import { useCallback, useMemo, useRef, useEffect, useState } from 'react';
import { useState } from 'react';
import { Filter14M } from '../../styles/GlobalText';
import {
Text,
View,
StyleSheet,
TouchableOpacity,
Dimensions,
ScrollView,
SafeAreaView,
} from 'react-native';
import BottomSheet, { BottomSheetView } from '@gorhom/bottom-sheet';
import CustomHeader from '../../common/CustomHeader';
import { Tabs, MaterialTabBar } from 'react-native-collapsible-tab-view';
import { StackScreenProps } from '@react-navigation/stack';
import { HomeStackParams } from '../../pages/Home';
import TabViewSpot from '../../assets/common/TabViewSpot.svg';
import { Text, View, StyleSheet, TouchableOpacity } from 'react-native';
import CategoryDownButton from '../../assets/common/CategoryDownButton.svg';
import styled from 'styled-components/native';
import { PURPLE } from '../../styles/GlobalColor';
import DetailModal from './Market/GoodsDetailOptionsModal';
import CategoryDropDown from './Market/SortingOptionModal';
import DropDown from '../../assets/common/DropDown.svg';

const HomeTabViewBox = styled.View`
Expand Down Expand Up @@ -61,19 +45,23 @@ const CategoryButton = styled.TouchableOpacity<{ pressed: boolean }>`
border-radius: 12px;
border-width: 1px;
border-color: #612fef;
background-color: ${(props) => (props.pressed ? '#612FEF' : '#FFFFFF')};
background-color: ${(
{ props }: { props: any }, // TODO: 나중에 props의 type specify 필요
) => (props.pressed ? '#612FEF' : '#FFFFFF')};
`;

const CategoryButtonText = styled.Text<{ pressed: boolean }>`
color: ${(props) => (props.pressed ? '#FFFFFF' : '#222222')};
color: ${(
{ props }: { props: any }, // TODO: 나중에 props의 type specify 필요
) => (props.pressed ? '#FFFFFF' : '#222222')};
`;

interface SignupProps {
mail: string;
domain: string;
password: string;
region: string;
}// 의미 없음
} // 의미 없음

interface HomeTabViewProps {
onSearch: () => void;
Expand Down Expand Up @@ -127,29 +115,42 @@ const HomeTabView = ({
<>
<CategoryBox>
<View>
<CategoryButton pressed={isStyleSelected} onPress={() => setModalOpen(true)}>
<CategoryButton
pressed={isStyleSelected}
onPress={() => setModalOpen(true)}>
<CategoryButtonText pressed={isStyleSelected}>
스타일
</CategoryButtonText>
<CategoryDownButton />
</CategoryButton>
</View>
<View style={{ flex: 1 }}>
</View>
<View style={{ flex: 1 }}></View>
<View style={styles.dropdownContainer}>
<TouchableOpacity onPress={toggleDropdown} style={styles.dropdownButton}>
<TouchableOpacity
onPress={toggleDropdown}
style={styles.dropdownButton}>
<Text style={styles.dropdownButtonText}>{selectedOption}</Text>
<DropDown/>
<DropDown />
</TouchableOpacity>
{dropdownOpen && (
<View style={styles.dropdownMenu}>
{['추천순', '인기순', '가격순', '최신순', '판매순'].map(option => (
<TouchableOpacity key={option} onPress={() => selectOption(option)} style={styles.dropdownOption}>
<Text style={selectedOption === option ? styles.dropdownSelectedOptionText : styles.dropdownOptionText}>
{option}
</Text>
</TouchableOpacity>
))}
{['추천순', '인기순', '가격순', '최신순', '판매순'].map(
option => (
<TouchableOpacity
key={option}
onPress={() => selectOption(option)}
style={styles.dropdownOption}>
<Text
style={
selectedOption === option
? styles.dropdownSelectedOptionText
: styles.dropdownOptionText
}>
{option}
</Text>
</TouchableOpacity>
),
)}
</View>
)}
</View>
Expand Down Expand Up @@ -196,8 +197,8 @@ const styles = StyleSheet.create({
},
dropdownButtonText: {
fontSize: 14,
fontStyle: "normal",
fontWeight: "400",
fontStyle: 'normal',
fontWeight: '400',
lineHeight: 24,
marginRight: 5,
color: '#000',
Expand All @@ -213,24 +214,24 @@ const styles = StyleSheet.create({
borderRadius: 4,
zIndex: 1000,
width: 100,
elevation: 5,
elevation: 5,
},
dropdownOption: {
padding: 10,
},
dropdownSelectedOptionText: {
fontFamily: "Pretendard Variable",
fontFamily: 'Pretendard Variable',
fontSize: 14,
fontStyle: "normal",
fontWeight: "400",
fontStyle: 'normal',
fontWeight: '400',
lineHeight: 24,
color: '#000',
},
dropdownOptionText: {
fontFamily: "Pretendard Variable",
fontFamily: 'Pretendard Variable',
fontSize: 14,
fontStyle: "normal",
fontWeight: "600",
fontStyle: 'normal',
fontWeight: '600',
lineHeight: 16,
},
});
39 changes: 18 additions & 21 deletions src/components/Home/Market/GoodsDetailOptionsModal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,15 +7,10 @@ import React, {
useRef,
useState,
} from 'react';
import { View, Text, StyleSheet, TouchableOpacity, Dimensions } from 'react-native';
import { View, StyleSheet, Dimensions } from 'react-native';
import styled from 'styled-components/native';
import {
BottomSheetModal,
BottomSheetBackdrop,
} from '@gorhom/bottom-sheet';
import { Body16M, Subtitle16B, Filter11B, Filter14B } from '../../../styles/GlobalText';
import Select from '../../../assets/common/Select.svg';
import Unselect from '../../../assets/common/Unselect.svg';
import { BottomSheetModal, BottomSheetBackdrop } from '@gorhom/bottom-sheet';
import { Subtitle16B, Filter11B } from '../../../styles/GlobalText';
import Dot from '../../../assets/common/Dot.svg';
import { PURPLE } from '../../../styles/GlobalColor';

Expand All @@ -39,12 +34,16 @@ const StyleButton = styled.TouchableOpacity<{ pressed: boolean }>`
align-items: center;
gap: 10px;
border-radius: 12px;
border: 1px solid #612FEF;
background-color: ${(props) => (props.pressed ? '#612FEF' : '#FFFFFF')};
border: 1px solid #612fef;
background-color: ${(
{ props }: { props: any }, // TODO: 나중에 props의 type specify 필요
) => (props.pressed ? '#612FEF' : '#FFFFFF')};
`;

const StyleButtonText = styled.Text<{ pressed: boolean }>`
color: ${(props) => (props.pressed ? '#FFFFFF' : '#222222')};
color: ${(
{ props }: { props: any }, // TODO: 나중에 props의 type specify 필요
) => (props.pressed ? '#FFFFFF' : '#222222')};
`;

interface ModalProps {
Expand All @@ -62,7 +61,7 @@ export default function DetailModal({
value,
setValue,
selectedStyles,
setSelectedStyles
setSelectedStyles,
}: ModalProps) {
// ref
const bottomSheetModalRef = useRef<BottomSheetModal>(null);
Expand Down Expand Up @@ -122,8 +121,8 @@ export default function DetailModal({
};

const toggleStyleSelection = (style: string) => {
setSelectedStyles((prev) =>
prev.includes(style) ? prev.filter((s) => s !== style) : [...prev, style]
setSelectedStyles(prev =>
prev.includes(style) ? prev.filter(s => s !== style) : [...prev, style],
);
};

Expand All @@ -138,8 +137,7 @@ export default function DetailModal({
snapPoints={snapPoints}
backdropComponent={renderBackdrop}
onChange={handleSheetChanges}
containerStyle={styles.modalContainer}
>
containerStyle={styles.modalContainer}>
<View style={styles.selectItem}>
<Subtitle16B>스타일</Subtitle16B>
<View style={styles.rightSection}>
Expand All @@ -148,12 +146,11 @@ export default function DetailModal({
</View>
</View>
<StyleBox>
{styleOptions.map((style) => (
{styleOptions.map(style => (
<StyleButton
key={style}
pressed={selectedStyles.includes(style)}
onPress={() => toggleStyleSelection(style)}
>
onPress={() => toggleStyleSelection(style)}>
<StyleButtonText pressed={selectedStyles.includes(style)}>
{style}
</StyleButtonText>
Expand Down Expand Up @@ -232,7 +229,7 @@ const styles = StyleSheet.create({
modalContainer: {
zIndex: 1001,
flex: 1,
justifyContent: 'flex-end',
margin: 0,
justifyContent: 'flex-end',
margin: 0,
},
});
63 changes: 42 additions & 21 deletions src/components/Home/Market/ReformerMarket.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,44 +1,50 @@
import React, { useState } from 'react';
import { View, Text, ScrollView, TouchableOpacity, Image, StyleSheet, Dimensions } from 'react-native';
import {
View,
Text,
ScrollView,
TouchableOpacity,
Image,
StyleSheet,
Dimensions,
} from 'react-native';
import styled from 'styled-components/native';
import { Body16M, Subtitle16M } from '../../../styles/GlobalText';
import { BLACK, LIGHTGRAY } from '../../../styles/GlobalColor';
import Arrow from '../../../assets/common/Arrow.svg';
import { getStatusBarHeight } from 'react-native-safearea-height';
import HeartButton from '../../../common/HeartButton';
import CategoryDownButton from '../../../assets/common/CategoryDownButton.svg';
import DetailModal from '../Market/GoodsDetailOptionsModal';

const statusBarHeight = getStatusBarHeight(true);
const { width } = Dimensions.get('window');

const ReformerMarket = ({ navigation }) => {
const ReformerMarket = (/*{ navigation }*/) => {
const [form, setForm] = useState({
mail: '',
domain: '',
password: '',
region: '',
});

const [modalOpen, setModalOpen] = useState(false);
const [selectedStyles, setSelectedStyles] = useState([]);
const [dropdownOpen, setDropdownOpen] = useState(false);
const [selectedOption, setSelectedOption] = useState('추천순');
const [modalOpen, setModalOpen] = useState<boolean>(false);
const [selectedStyles, setSelectedStyles] = useState<string[]>([]);
const [dropdownOpen, setDropdownOpen] = useState<boolean>(false);
const [selectedOption, setSelectedOption] = useState<string>('추천순');

const isStyleSelected = selectedStyles.length > 0;

const toggleDropdown = () => {
setDropdownOpen(!dropdownOpen);
};

const selectOption = (option) => {
const selectOption = ({ option }: { option: string }) => {
setSelectedOption(option);
setDropdownOpen(false);
};

return (
<ScrollView>
<Subtitle16M style={{ marginTop: 15 }}> 내가 좋아한 리폼러</Subtitle16M>
<Subtitle16M style={{ marginTop: 15 }}> 내가 좋아한 리폼러</Subtitle16M>

<FilterSection>
<ScrollView horizontal showsHorizontalScrollIndicator={false}>
Expand All @@ -52,15 +58,11 @@ const ReformerMarket = ({ navigation }) => {

<View style={{ marginTop: 10 }} />





<DetailModal
open={modalOpen}
setOpen={setModalOpen}
value={form.region}
setValue={(text) => setForm((prev) => ({ ...prev, region: text }))}
setValue={text => setForm(prev => ({ ...prev, region: text }))}
selectedStyles={selectedStyles}
setSelectedStyles={setSelectedStyles}
/>
Expand All @@ -77,13 +79,24 @@ const ReformerMarket = ({ navigation }) => {
);
};

const ReformerCard = ({ name, rating, tag }) => {
const [like, setLike] = useState(false);
const ReformerCard = ({
name,
rating,
tag,
}: {
name: string;
rating: string;
tag: string;
}) => {
const [like, setLike] = useState<boolean>(false);

return (
<View style={styles.cardContainer}>
<View style={styles.reformerInfo}>
<Image style={styles.avatar} source={{ uri: 'https://via.placeholder.com/50' }} />
<Image
style={styles.avatar}
source={{ uri: 'https://via.placeholder.com/50' }}
/>
<View>
<Subtitle16M>{name}</Subtitle16M>
<Body16M>{rating}</Body16M>
Expand All @@ -98,7 +111,11 @@ const ReformerCard = ({ name, rating, tag }) => {
</View>
<View style={styles.portfolio}>
{[...Array(4)].map((_, idx) => (
<Image key={idx} style={styles.portfolioImage} source={{ uri: 'https://via.placeholder.com/70' }} />
<Image
key={idx}
style={styles.portfolioImage}
source={{ uri: 'https://via.placeholder.com/70' }}
/>
))}
</View>
</View>
Expand Down Expand Up @@ -129,11 +146,15 @@ const CategoryButton = styled.TouchableOpacity`
border-radius: 12px;
border-width: 1px;
border-color: #612fef;
background-color: ${(props) => (props.pressed ? '#612FEF' : '#FFFFFF')};
background-color: ${(
{ props }: { props: any }, // TODO: 나중에 props의 type specify 필요
) => (props.pressed ? '#612FEF' : '#FFFFFF')};
`;

const CategoryButtonText = styled.Text`
color: ${(props) => (props.pressed ? '#FFFFFF' : '#222222')};
color: ${(
{ props }: { props: any }, // TODO: 나중에 props의 type specify 필요
) => (props.pressed ? '#FFFFFF' : '#222222')};
`;

const CategoryBox = styled.View`
Expand Down
Loading

0 comments on commit 9ce2109

Please sign in to comment.