diff --git a/src/common/CustomHeader.tsx b/src/common/CustomHeader.tsx index 8c0f41f..bf8f110 100644 --- a/src/common/CustomHeader.tsx +++ b/src/common/CustomHeader.tsx @@ -1,6 +1,12 @@ import { useEffect, useState } from 'react'; import { Filter14M } from '../styles/GlobalText'; -import { Text, View, TouchableOpacity, Dimensions } from 'react-native'; +import { + Text, + View, + TouchableOpacity, + Dimensions, + StyleSheet, +} from 'react-native'; import Search from '../assets/common/Search.svg'; import Logo from '../assets/common/Logo.svg'; import Bell from '../assets/common/Bell.svg'; @@ -25,7 +31,7 @@ const ToggleBox = styled.View` height: 52px; padding: 12px 16px; align-items: center; - background: #612FEF; + background: #612fef; `; const ToggleButton = styled.TouchableOpacity<{ pressed: boolean }>` @@ -36,8 +42,10 @@ const ToggleButton = styled.TouchableOpacity<{ pressed: boolean }>` justify-content: center; align-items: center; gap: 8px; - border-bottom-width: ${(props : {pressed: boolean}) => (props.pressed ? '2px' : '0px')}; - border-color: ${(props : {pressed: boolean}) => (props.pressed ? '#FFFFFF' : 'transparent')}; + border-bottom-width: ${(props: { pressed: boolean }) => + props.pressed ? '2px' : '0px'}; + border-color: ${(props: { pressed: boolean }) => + props.pressed ? '#FFFFFF' : 'transparent'}; `; const BannerText = styled.View` @@ -51,14 +59,14 @@ const BannerTitle = styled.Text` color: white; font-size: 18px; font-weight: 700; - line-height:24px; + line-height: 24px; `; const BannerSubtitle = styled.Text` color: white; font-size: 14px; font-weight: 400; - line-height:24px; + line-height: 24px; `; const BannerPageNumber = styled.Text` @@ -72,7 +80,7 @@ const BannerPageNumber = styled.Text` interface CustomHeaderProps { onSearch: () => void; onAlarm?: () => void; - onTabChange: (tab: 'Goods'| 'Market' | 'temp') => void; + onTabChange: (tab: 'Goods' | 'Market' | 'temp') => void; } interface ToggleButtonParams { @@ -85,53 +93,59 @@ const Toggletag = ({ pressable }: ToggleButtonParams) => { setPressed(!pressed)} - disabled={!pressable}> - + disabled={!pressable}> ); }; -const CustomHeader = ({ onSearch, onAlarm, onTabChange }: CustomHeaderProps) => { - const [selectedTab, setSelectedTab] = useState<'Goods' | 'Market' | 'temp'>('Goods'); - - useEffect(() =>{ +const CustomHeader = ({ + onSearch, + onAlarm, + onTabChange, +}: CustomHeaderProps) => { + const [selectedTab, setSelectedTab] = useState<'Goods' | 'Market' | 'temp'>( + 'Goods', + ); + + useEffect(() => { setSelectedTab(selectedTab); - }, [selectedTab]) - + }, [selectedTab]); + //눌렀을 때 색 변경 및 font weight,size 변경 안 됨? return ( <> - - - + {setSelectedTab('Goods'); onTabChange('Goods');}}> - - 서비스 - + onPress={() => { + setSelectedTab('Goods'); + onTabChange('Goods'); + }}> + 서비스 {setSelectedTab('Market'); onTabChange('Market');}}> - - 리폼러 - + onPress={() => { + setSelectedTab('Market'); + onTabChange('Market'); + }}> + 리폼러 {setSelectedTab('temp'); onTabChange('temp');}}> - - 임시 버튼 - + onPress={() => { + setSelectedTab('temp'); + onTabChange('temp'); + }}> + 임시 버튼 - {selectedTab === 'Goods' && ( + {/* {selectedTab === 'Goods' && ( @@ -141,9 +155,18 @@ const CustomHeader = ({ onSearch, onAlarm, onTabChange }: CustomHeaderProps) => 1/10 - )} + )} */} ); }; +const TextStyles = StyleSheet.create({ + tabTitle: { + color: '#FFFFFF', + fontSize: 16, + fontWeight: '700', + marginRight: 5, + }, +}); + export default CustomHeader; diff --git a/src/components/Home/HomeMain.tsx b/src/components/Home/HomeMain.tsx index fcefeb5..94e9448 100644 --- a/src/components/Home/HomeMain.tsx +++ b/src/components/Home/HomeMain.tsx @@ -77,13 +77,15 @@ const HomeTabView = ({ const [styleFilterOpen, setStyleFilterOpen] = useState(false); const [selectedStyles, setSelectedStyles] = useState([]); const [dropdownOpen, setDropdownOpen] = useState(false); - const [selectedOption, setSelectedOption] = useState('추천순'); + const [selectedOption, setSelectedOption] = useState( + selectOptionDropdown[0], + ); const toggleDropdown = () => { setDropdownOpen(!dropdownOpen); }; - const selectOption = (option: string) => { + const selectOption = (option: SelectedOptionProps) => { setSelectedOption(option); setDropdownOpen(false); }; diff --git a/src/components/Home/Market/GoodsDetailPage.tsx b/src/components/Home/Market/GoodsDetailPage.tsx index d7621bc..074e2ed 100644 --- a/src/components/Home/Market/GoodsDetailPage.tsx +++ b/src/components/Home/Market/GoodsDetailPage.tsx @@ -1,12 +1,26 @@ -import { Dimensions, SafeAreaView, ScrollView, Text, TouchableOpacity, View, StyleSheet, useWindowDimensions, Image, ImageBackground } from 'react-native'; -import { StackScreenProps, createStackNavigator } from '@react-navigation/stack'; +import { + Dimensions, + SafeAreaView, + ScrollView, + Text, + TouchableOpacity, + View, + StyleSheet, + useWindowDimensions, + Image, + ImageBackground, +} from 'react-native'; +import { + StackScreenProps, + createStackNavigator, +} from '@react-navigation/stack'; import { HomeStackParams } from '../../../pages/Home'; import Arrow from '../../../assets/common/Arrow.svg'; import Search from '../../../assets/common/Search.svg'; -import Review from "../../../assets/common/Review.svg"; +import Review from '../../../assets/common/Review.svg'; import UnFilledLike from '../../../assets/common/UnFilledLike.svg'; import { useEffect, useRef, useState } from 'react'; -import DetailBox, { DetailBoxHandle } from './DetailBox'; +import DetailBox from './DetailBox'; import OptionBox from './OptionBox'; import CardView from '../../../common/CardView'; import Footer from '../../../common/Footer'; @@ -17,23 +31,27 @@ import { useBottomBar } from '../../../../contexts/BottomBarContext'; import { CustomBackButton } from '../components/CustomBackButton'; import DetailScreenHeader from '../components/DetailScreenHeader'; - -const { width, height } = Dimensions.get("window"); +const { width, height } = Dimensions.get('window'); export type DetailPageStackParams = { DetailPage: undefined; -} +}; const DetailPageStack = createStackNavigator(); -const GoodsDetailPageScreen = ({ navigation, route }: StackScreenProps) => { +const GoodsDetailPageScreen = ({ + navigation, + route, +}: StackScreenProps) => { return ( ({ headerShown: false, })}> - - + ); }; @@ -43,7 +61,13 @@ type ProfileSectionProps = { onScrollToReviews: () => void; }; -const ProfileSection: React.FC = ({ navigation, onScrollToReviews }: { navigation: any, onScrollToReviews: any }) => { +const ProfileSection: React.FC = ({ + navigation, + onScrollToReviews, +}: { + navigation: any; + onScrollToReviews: any; +}) => { const [data, setData] = useState([]); const { hideBottomBar, showBottomBar } = useBottomBar(); @@ -52,13 +76,14 @@ const ProfileSection: React.FC = ({ navigation, onScrollToR return () => showBottomBar(); }, []); return ( - {/* 세이프에리어로 변경 */} + + {/* 세이프에리어로 변경 */} { }} - rightButton='Search' - onPressRight={() => { }} + title="" + leftButton="CustomBack" + onPressLeft={() => {}} + rightButton="Search" + onPressRight={() => {}} /> {/* = ({ navigation, onScrollToR )} /> */} {/* 컴포넌트로 변경 예정 */} - - + - + source={{ + uri: 'https://image.made-in-china.com/2f0j00efRbSJMtHgqG/Denim-Bag-Youth-Fashion-Casual-Small-Mini-Square-Ladies-Shoulder-Bag-Women-Wash-Bags.webp', + }}> + @@ -89,11 +123,20 @@ const ProfileSection: React.FC = ({ navigation, onScrollToR 상품 이름 20,000 원 - - + @@ -102,26 +145,53 @@ const ProfileSection: React.FC = ({ navigation, onScrollToR {/* 컴포넌트로 변경 예정 */} - + - + - 마켓명 + + 마켓명{' '} + - + color={BLACK}> - 리폼러닉네임 + + 리폼러닉네임 + - ) -} + ); +}; -const GoodsDetailPageMainScreen = ({ navigation }: StackScreenProps) => { +const GoodsDetailPageMainScreen = ({ + navigation, +}: StackScreenProps) => { const layout = useWindowDimensions(); const [index, setIndex] = useState(0); const detailBoxRef = useRef(null); @@ -137,19 +207,23 @@ const GoodsDetailPageMainScreen = ({ navigation }: StackScreenProps } + renderHeader={props => ( + + )} allowHeaderOverscroll={false} - renderTabBar={(props) => ( + renderTabBar={props => ( - )} - > + )}> - + {/* */} @@ -165,23 +239,23 @@ const TextStyles = StyleSheet.create({ // fontFamily:"Inter", padding: 10, color: '#222222', - fontWeight: "700", + fontWeight: '700', fontSize: 18, lineHeight: 24, - width: "100%", + width: '100%', }, Sub: { - width: "70%", - fontWeight: "700", + width: '70%', + fontWeight: '700', paddingLeft: 10, paddingTop: 10, paddingRight: 10, fontSize: 14, lineHeight: 24, - color: "#612EFE", + color: '#612EFE', }, PriceInfo: { - fontWeight: "600", + fontWeight: '600', fontSize: 14, paddingLeft: 10, paddingTop: 5, @@ -190,7 +264,7 @@ const TextStyles = StyleSheet.create({ color: 'rgba(34, 34, 34, 0.50)', }, Price: { - fontWeight: "700", + fontWeight: '700', fontSize: 16, paddingLeft: 10, paddingTop: 5, @@ -199,24 +273,24 @@ const TextStyles = StyleSheet.create({ color: '#222222', }, recommend: { - color: "#FFFFFF", - backgroundColor: "#67D393", + color: '#FFFFFF', + backgroundColor: '#67D393', fontSize: 14, paddingHorizontal: 6, paddingVertical: 3, borderRadius: 8, - overflow: "hidden", + overflow: 'hidden', marginTop: 5, }, borderBottom1: { flexDirection: 'row', borderBottomWidth: 1, - borderBlockColor: "#dcdcdc" + borderBlockColor: '#dcdcdc', }, borderBottom2: { borderBottomWidth: 6, - borderBlockColor: "#dcdcdc" - } + borderBlockColor: '#dcdcdc', + }, }); export default GoodsDetailPageScreen; diff --git a/src/components/Home/Market/Service.tsx b/src/components/Home/Market/Service.tsx index 0021a70..00c18b2 100644 --- a/src/components/Home/Market/Service.tsx +++ b/src/components/Home/Market/Service.tsx @@ -26,6 +26,7 @@ type ServiceCardProps = { imageUri: string; title: string; description?: string; + navigation?: any; //TODO: change type later }; // TODO: replace the below dummy data @@ -65,9 +66,13 @@ const serviceCardDummyData: ServiceCardProps[] = [ type ServiceMarketProps = { selectedFilterOption?: SelectedOptionProps; + navigation: any; }; -const ServiceMarket = ({ selectedFilterOption }: ServiceMarketProps) => { +const ServiceMarket = ({ + selectedFilterOption, + navigation, +}: ServiceMarketProps) => { const [form, setForm] = useState({ mail: '', domain: '', @@ -122,6 +127,7 @@ const ServiceMarket = ({ selectedFilterOption }: ServiceMarketProps) => { imageUri={card.imageUri} title={card.title} description={card.description} + navigation={navigation} /> ); })} @@ -137,6 +143,7 @@ export const ServiceCard = ({ imageUri, title, description, + navigation, }: ServiceCardProps) => { const [like, setLike] = useState(false); @@ -145,7 +152,7 @@ export const ServiceCard = ({ key={title} style={styles.cardContainer} onPress={() => { - // 각 리폼러 프로필 페이지로 이동하는 event 걸기 + navigation.navigate('ServiceDetailPage', { navigation: navigation }); }}> (); -const ServiceDetailPageScreen = ({ navigation, route }: StackScreenProps) => { +const ServiceDetailPageScreen = ({ + navigation, + route, +}: StackScreenProps) => { return ( ({ headerShown: false, })}> - + ); }; @@ -41,8 +61,11 @@ type ProfileSectionProps = { navigation: any; }; -const ProfileSection: React.FC = ({ navigation }: { navigation: any }) => { - const [data, setData] = useState([]); +const ProfileSection: React.FC = ({ + navigation, +}: { + navigation: any; +}) => { const [like, setLike] = useState(false); const { hideBottomBar, showBottomBar } = useBottomBar(); @@ -53,86 +76,142 @@ const ProfileSection: React.FC = ({ navigation }: { navigat return ( { }} - rightButton='Search' - onPressRight={() => { }} + title="" + leftButton="CustomBack" + onPressLeft={() => {}} + rightButton="Search" + onPressRight={() => {}} /> - {/* ( - - // - )} - /> */} - {/* 컴포넌트로 변경 예정 */} - - - - - - {/* 보라색 태그 */} - - 미니멀 - - - 빈티지 - - - - - - 서비스 이름 - 기본 20,000 원 - 최대 24,000 원 + +
+ + + ); +}; + +const Banner = () => { + return ( + <> + + + + + {/* 보라색 태그 */} + + 미니멀 - - setLike(!like)} /> + + 빈티지 - - - - - navigation.navigate('Market')}> - 이하늘의 마켓 - - - - 이하늘 - - - + ); +}; + +type HeaderProps = { + like: boolean; + setLike: (like: boolean) => void; +}; +const Header = ({ like, setLike }: HeaderProps) => { + return ( + + + 서비스 이름 + + 기본 20,000 원 + + + 최대 24,000 원 + + + + setLike(!like)} /> + + + ); +}; + +const Profile = ({ navigation }: { navigation: any }) => { + return ( + + + + + navigation.navigate('Market')}> + + 이하늘의 마켓 + + + + + 이하늘 + + + + - { }}> - - - 후기(3) - + {}}> + + + 후기(3) - - ) -} + + ); +}; -const ServiceDetailPageMainScreen = ({ navigation }: StackScreenProps) => { +const ServiceDetailPageMainScreen = ({ + navigation, +}: StackScreenProps) => { const layout = useWindowDimensions(); const [index, setIndex] = useState(0); const optionPageRef = useRef>(null); @@ -143,29 +222,26 @@ const ServiceDetailPageMainScreen = ({ navigation }: StackScreenProps(null); const flatListRef = useRef(null); - const renderHeader = () => ( - - ); + const renderHeader = () => ; return ( - + ( + renderTabBar={props => ( - )} - > + )}> @@ -177,31 +253,31 @@ const ServiceDetailPageMainScreen = ({ navigation }: StackScreenProps