diff --git a/src/components/Home/HomeMain.tsx b/src/components/Home/HomeMain.tsx index 75fab39..2e3df8a 100644 --- a/src/components/Home/HomeMain.tsx +++ b/src/components/Home/HomeMain.tsx @@ -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` @@ -61,11 +45,15 @@ 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 { @@ -73,7 +61,7 @@ interface SignupProps { domain: string; password: string; region: string; -}// 의미 없음 +} // 의미 없음 interface HomeTabViewProps { onSearch: () => void; @@ -127,29 +115,42 @@ const HomeTabView = ({ <> - setModalOpen(true)}> + setModalOpen(true)}> 스타일 - - + - + {selectedOption} - + {dropdownOpen && ( - {['추천순', '인기순', '가격순', '최신순', '판매순'].map(option => ( - selectOption(option)} style={styles.dropdownOption}> - - {option} - - - ))} + {['추천순', '인기순', '가격순', '최신순', '판매순'].map( + option => ( + selectOption(option)} + style={styles.dropdownOption}> + + {option} + + + ), + )} )} @@ -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', @@ -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, }, }); diff --git a/src/components/Home/Market/GoodsDetailOptionsModal.tsx b/src/components/Home/Market/GoodsDetailOptionsModal.tsx index 482c14f..7710c84 100644 --- a/src/components/Home/Market/GoodsDetailOptionsModal.tsx +++ b/src/components/Home/Market/GoodsDetailOptionsModal.tsx @@ -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'; @@ -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 { @@ -62,7 +61,7 @@ export default function DetailModal({ value, setValue, selectedStyles, - setSelectedStyles + setSelectedStyles, }: ModalProps) { // ref const bottomSheetModalRef = useRef(null); @@ -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], ); }; @@ -138,8 +137,7 @@ export default function DetailModal({ snapPoints={snapPoints} backdropComponent={renderBackdrop} onChange={handleSheetChanges} - containerStyle={styles.modalContainer} - > + containerStyle={styles.modalContainer}> 스타일 @@ -148,12 +146,11 @@ export default function DetailModal({ - {styleOptions.map((style) => ( + {styleOptions.map(style => ( toggleStyleSelection(style)} - > + onPress={() => toggleStyleSelection(style)}> {style} @@ -232,7 +229,7 @@ const styles = StyleSheet.create({ modalContainer: { zIndex: 1001, flex: 1, - justifyContent: 'flex-end', - margin: 0, + justifyContent: 'flex-end', + margin: 0, }, }); diff --git a/src/components/Home/Market/ReformerMarket.tsx b/src/components/Home/Market/ReformerMarket.tsx index 8cab5a3..951ff54 100644 --- a/src/components/Home/Market/ReformerMarket.tsx +++ b/src/components/Home/Market/ReformerMarket.tsx @@ -1,18 +1,24 @@ 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: '', @@ -20,10 +26,10 @@ const ReformerMarket = ({ navigation }) => { region: '', }); - const [modalOpen, setModalOpen] = useState(false); - const [selectedStyles, setSelectedStyles] = useState([]); - const [dropdownOpen, setDropdownOpen] = useState(false); - const [selectedOption, setSelectedOption] = useState('추천순'); + const [modalOpen, setModalOpen] = useState(false); + const [selectedStyles, setSelectedStyles] = useState([]); + const [dropdownOpen, setDropdownOpen] = useState(false); + const [selectedOption, setSelectedOption] = useState('추천순'); const isStyleSelected = selectedStyles.length > 0; @@ -31,14 +37,14 @@ const ReformerMarket = ({ navigation }) => { setDropdownOpen(!dropdownOpen); }; - const selectOption = (option) => { + const selectOption = ({ option }: { option: string }) => { setSelectedOption(option); setDropdownOpen(false); }; return ( - 내가 좋아한 리폼러 + 내가 좋아한 리폼러 @@ -52,15 +58,11 @@ const ReformerMarket = ({ navigation }) => { - - - - setForm((prev) => ({ ...prev, region: text }))} + setValue={text => setForm(prev => ({ ...prev, region: text }))} selectedStyles={selectedStyles} setSelectedStyles={setSelectedStyles} /> @@ -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(false); return ( - + {name} {rating} @@ -98,7 +111,11 @@ const ReformerCard = ({ name, rating, tag }) => { {[...Array(4)].map((_, idx) => ( - + ))} @@ -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` diff --git a/src/components/Home/Market/Service.tsx b/src/components/Home/Market/Service.tsx index 2bf19ad..9d8cd0e 100644 --- a/src/components/Home/Market/Service.tsx +++ b/src/components/Home/Market/Service.tsx @@ -1,33 +1,26 @@ -import React, { useState } from 'react'; +import { useState } from 'react'; import { View, - Text, ScrollView, TouchableOpacity, - Image, StyleSheet, Dimensions, } from 'react-native'; import styled from 'styled-components/native'; import { - Body16M, - Subtitle16M, Title20B, Filter11R, Subtitle18B, Body14R, } from '../../../styles/GlobalText'; import { BLACK, LIGHTGRAY, PURPLE } 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'; import ServiceImage1 from '../../../assets/common/ServiceImage1.svg'; import ServiceImage2 from '../../../assets/common/ServiceImage2.svg'; import ServiceImage3 from '../../../assets/common/ServiceImage3.svg'; import { useNavigation } from '@react-navigation/native'; // FIXME: 나중에 함수 props로 받아오도록 수정 -import { StackNavigationProp } from '@react-navigation/stack'; const statusBarHeight = getStatusBarHeight(true); const { width } = Dimensions.get('window'); @@ -40,9 +33,9 @@ const ServiceMarket = (/*{ navigation }*/) => { region: '', }); - const [modalOpen, setModalOpen] = useState(false); + const [modalOpen, setModalOpen] = useState(false); const [selectedStyles, setSelectedStyles] = useState([]); - const [dropdownOpen, setDropdownOpen] = useState(false); + const [dropdownOpen, setDropdownOpen] = useState(false); const [selectedOption, setSelectedOption] = useState('추천순'); const isStyleSelected = selectedStyles.length > 0;