Skip to content

Commit

Permalink
sdp-tech#115 feat : add click event to Service main page and declare …
Browse files Browse the repository at this point in the history 
…types
  • Loading branch information
@kimheonningg
kimheonningg committed Sep 22, 2024
1 parent bb5b6c3 commit 112ab97
Showing 1 changed file with 86 additions and 33 deletions.
119 changes: 86 additions & 33 deletions src/components/Home/Market/Service.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,22 @@
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, Title20B, Filter11R, Subtitle18B, Body14R } from '../../../styles/GlobalText';
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';
Expand All @@ -11,12 +26,13 @@ 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');

const ServiceMarket = ({ navigation }) => {
const ServiceMarket = (/*{ navigation }*/) => {
const [form, setForm] = useState({
mail: '',
domain: '',
Expand All @@ -25,65 +41,100 @@ const ServiceMarket = ({ navigation }) => {
});

const [modalOpen, setModalOpen] = useState(false);
const [selectedStyles, setSelectedStyles] = useState([]);
const [selectedStyles, setSelectedStyles] = useState<string[]>([]);
const [dropdownOpen, setDropdownOpen] = useState(false);
const [selectedOption, setSelectedOption] = useState('추천순');
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 contentContainerStyle={styles.container}>
<Title20B style={{ marginTop: 15, marginHorizontal: 15 }}>지금 주목해야 할 업사이클링 서비스</Title20B>
<Filter11R style={{ marginBottom: 15, marginHorizontal: 15 }}>안 입는 옷을 장마 기간에 필요한 물품으로</Filter11R>
<Title20B style={{ marginTop: 15, marginHorizontal: 15 }}>
지금 주목해야 할 업사이클링 서비스
</Title20B>
<Filter11R style={{ marginBottom: 15, marginHorizontal: 15 }}>
안 입는 옷을 장마 기간에 필요한 물품으로
</Filter11R>

<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}
/>



<View style={{ backgroundColor: LIGHTGRAY }}>
<ServiceCard name="하느리퐁퐁" price="20,000원 ~ " tag="빈티지" image={ServiceImage1}
title = "청바지 에코백 만들어 드립니다" text = "안입는 청바지를 활용한 나만의 에코백! 아주 좋은 에코백 환경에도 좋고 나에게도 좋고 어찌구저찌구한 에코백입니다 최고임 짱짱"/>
<ServiceCard name="똥구르리리" price="20,000원 ~ " tag="미니멀" image={ServiceImage2}
title = "커스텀 짐색" text = "안입는 청바지를 활용한 나만의 에코백! 아주 좋은 에코백 환경에도 좋고 나에게도 좋고 어찌구저찌구한 에코백입니다 최고임 짱짱"/>
<ServiceCard name="훌라훌라맨" price="20,000원 ~ " tag="빈티지" image={ServiceImage3}
title = "청바지 에코백 만들어 드립니다" text = "안입는 청바지를 활용한 나만의 에코백! 아주 좋은 에코백 환경에도 좋고 나에게도 좋고 어찌구저찌구한 에코백입니다 최고임 짱짱"/>
<ServiceCard
name="하느리퐁퐁"
price="20,000원 ~ "
tag="빈티지"
image={ServiceImage1}
title="청바지 에코백 만들어 드립니다"
text="안입는 청바지를 활용한 나만의 에코백! 아주 좋은 에코백 환경에도 좋고 나에게도 좋고 어찌구저찌구한 에코백입니다 최고임 짱짱"
/>
<ServiceCard
name="똥구르리리"
price="20,000원 ~ "
tag="미니멀"
image={ServiceImage2}
title="커스텀 짐색"
text="안입는 청바지를 활용한 나만의 에코백! 아주 좋은 에코백 환경에도 좋고 나에게도 좋고 어찌구저찌구한 에코백입니다 최고임 짱짱"
/>
<ServiceCard
name="훌라훌라맨"
price="20,000원 ~ "
tag="빈티지"
image={ServiceImage3}
title="청바지 에코백 만들어 드립니다"
text="안입는 청바지를 활용한 나만의 에코백! 아주 좋은 에코백 환경에도 좋고 나에게도 좋고 어찌구저찌구한 에코백입니다 최고임 짱짱"
/>
</View>
</ScrollView>
);
};

const ServiceCard = ({ name, price, tag, image: ImageComponent, title, text}) => {
const ServiceCard = ({
name,
price,
tag,
image: ImageComponent,
title,
text,
}) => {
const [like, setLike] = useState(false);
const navigation = useNavigation(); // FIXME: 나중에 함수 props로 받아오도록 수정

return (
<View style={styles.cardContainer}>
<ImageComponent />
<View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', marginTop: 10 }}>
<Subtitle18B>{title}</Subtitle18B>
<HeartButton like={like} onPress={() => setLike(!like)} />
</View>
<Body14R>
{text}
</Body14R>
</View>

<TouchableOpacity
style={styles.cardContainer}
onPress={() => {
// 각 리폼러 프로필 페이지로 이동하는 event 걸기
}}>
<ImageComponent />
<View
style={{
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
marginTop: 10,
}}>
<Subtitle18B>{title}</Subtitle18B>
<HeartButton like={like} onPress={() => setLike(!like)} />
</View>
<Body14R>{text}</Body14R>
</TouchableOpacity>
);
};

Expand Down Expand Up @@ -115,11 +166,13 @@ 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 }) =>
props.pressed ? '#612FEF' : '#FFFFFF'};
`;

const CategoryButtonText = styled.Text`
color: ${(props) => (props.pressed ? '#FFFFFF' : '#222222')};
color: ${({ props }: { props: any }) =>
props.pressed ? '#FFFFFF' : '#222222'};
`;

const CategoryBox = styled.View`
Expand Down Expand Up @@ -188,7 +241,7 @@ const styles = StyleSheet.create({
borderColor: LIGHTGRAY,
flex: 1,
borderRadius: 10,
marginHorizontal: 0,
marginHorizontal: 0,
},
avatar: {
width: 50,
Expand Down

0 comments on commit 112ab97

Please sign in to comment.