Merge pull request #104 from Dindb-dong/feat/91/API

#91 fix: dependency problem(ViewProp), UI
sdp-tech · Sep 6, 2024 · 5473cf8 · 5473cf8
2 parents 9cada6b + f8e058e
commit 5473cf8
Show file tree

Hide file tree

Showing 9 changed files with 562 additions and 667 deletions.
diff --git a/node_modules/react-native/index.js b/node_modules/react-native/index.js
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/components/Home/Market/DetailBox.tsx b/src/components/Home/Market/DetailBox.tsx
@@ -29,8 +29,6 @@ const DetailBox = forwardRef<DetailBoxHandle, DetailBoxProps>(({ flatListRef },
     }
   }));
   const data = [
-    // { label: '카테고리', data: '아우터', end: 'no' },
-    { label: '스타일', data: '빈티지', end: 'no' },
     { label: '제작 기간', data: '3주', end: 'no' },
     {
       label: '서비스 상세', data: `1958년에는 원예시험장을 설립하여 연구를 본격화하기 시작하였고, 1991년 말, 원예시험장에서 과수연구소를 분리하고 대구사과연구소를 신설하여 사과연구를 전담하도록 하였다.사과는 수확시기에 따라 조생종, 중생종, 만생종으로 나뉜다. 8월 하순 이전이 최성수확기인 조생종에는 미광, 조홍, 서홍, 쓰가루(아오리) 등이 있고, 최성수확기가 9월 상순에서 10월 중순까지인 중생종에는 홍로, 홍월, 양광, 추광, 골든딜리셔스, 세계일, 조나골드, 시나노스위트 등이 있다. 10월 하순 이후가 최성수확기인 만생종에는 후지(부사), 홍옥, 감홍, 화홍 등이 있다.
@@ -73,11 +71,11 @@ const DetailBox = forwardRef<DetailBoxHandle, DetailBoxProps>(({ flatListRef },
 const styles = StyleSheet.create({
   service: {
     display: 'flex',
-    borderTopWidth: 5,
+    borderTopWidth: 1,
     borderTopColor: '#dcdcdc',
     justifyContent: 'space-between',
     padding: 16,
-    borderBottomWidth: 5,
+    borderBottomWidth: 1,
     borderBlockColor: "#dcdcdc"
   },
   information: {

diff --git a/src/components/Home/Market/OptionBox.tsx b/src/components/Home/Market/OptionBox.tsx
@@ -64,7 +64,7 @@ const OptionPage: React.FC<OptionBoxProps> = ({ flatListRef }) => {
             <NoticeBox key={index}>
               <Body16B>{item.label}</Body16B>
               {item.data.map((item: any, idx: number) => (
-                <Body14R style={{ padding: 8 }}>
+                <Body14R key={idx} style={{ padding: 8 }}>
                   {idx + 1}: {item}
                 </Body14R>
               )

diff --git a/src/components/Home/Market/ServiceDetailPage.tsx b/src/components/Home/Market/ServiceDetailPage.tsx
@@ -76,17 +76,25 @@ const ProfileSection: React.FC<ProfileSectionProps> = ({ navigation, onScrollToR
       {/* 컴포넌트로 변경 예정 */}
       <SafeAreaView >
         <ImageBackground // 임시 이미지 
-          style={{ width: '100%', height: height * 0.3 }}
-          imageStyle={{ height: height * 0.3 }}
+          style={{ width: '100%', height: width * 0.5 }}
+          imageStyle={{ height: width * 0.5 }}
           source={{ uri: 'https://image.made-in-china.com/2f0j00efRbSJMtHgqG/Denim-Bag-Youth-Fashion-Casual-Small-Mini-Square-Ladies-Shoulder-Bag-Women-Wash-Bags.webp' }}>
-          <View style={{ width: '100%', height: height * 0.3, backgroundColor: '#00000066', opacity: 0.7 }} />
+          <View style={{ width: '100%', height: width * 0.5, backgroundColor: '#00000066', opacity: 0.7 }} />
         </ImageBackground>
+        <View style={styles.tagContainer}>
+          <View style={styles.tag}>
+            <Text style={styles.tagText}>미니멀</Text>
+          </View>
+          <View style={styles.tag}>
+            <Text style={styles.tagText}>빈티지</Text>
+          </View>
+        </View>
       </SafeAreaView>
       <View style={TextStyles.borderBottom1}>
         <View style={{ flex: 1, flexDirection: 'column' }}>
           <Text style={TextStyles.Title}>서비스 이름</Text>
-          <Text style={TextStyles.PriceInfo}>기본 <Text style={TextStyles.Price}>20,000 원</Text></Text>
-          <Text style={TextStyles.PriceInfo}>최대 <Text style={TextStyles.Price}>20,000 원</Text></Text>
+          <Text style={TextStyles.PriceInfo}>기본 <Text style={TextStyles.Price}>  20,000 원</Text></Text>
+          <Text style={TextStyles.PriceInfo}>최대 <Text style={TextStyles.Price}>  24,000 원</Text></Text>
         </View>
         <View style={{ flex: 1, alignItems: 'flex-end', justifyContent: 'flex-end' }}>
           <View style={{
@@ -100,19 +108,18 @@ const ProfileSection: React.FC<ProfileSectionProps> = ({ navigation, onScrollToR
           </View>
         </View>
       </View>
-      {/* 컴포넌트로 변경 예정 */}
       <View style={{ ...TextStyles.borderBottom2, justifyContent: 'space-between' }}>
         <View style={{ padding: 15, flexDirection: 'row' }}>
           <View style={{ backgroundColor: "gray", width: 50, height: 50, borderRadius: 25 }}></View>
           <View style={{ marginLeft: 20, justifyContent: 'center' }}>
             <TouchableOpacity style={{ flexDirection: 'row', alignItems: 'center' }} onPress={() => navigation.navigate('Market')}>
-              <Text style={{ fontSize: 14, padding: 3, fontWeight: '700', color: '#222222' }}>마켓명 </Text>
+              <Text style={{ fontSize: 14, padding: 3, fontWeight: '700', color: '#222222' }}>이하늘의 마켓</Text>
               <Arrow // Arrow at the right side of 'marketname'
-                style={{ marginLeft: -7, transform: [{ scaleX: -1 }] }}
+                style={{ marginLeft: -4, transform: [{ scaleX: -1 }] }}
                 color={BLACK}>
               </Arrow>
             </TouchableOpacity>
-            <Text style={{ fontSize: 14, padding: 3, fontWeight: '700', color: '#222222' }}>리폼러닉네임</Text>
+            <Text style={{ fontSize: 14, padding: 3, fontWeight: '700', color: '#222222' }}>이하늘</Text>
           </View>
         </View>
       </View>
@@ -135,7 +142,7 @@ const ServiceDetailPageMainScreen = ({ navigation }: StackScreenProps<DetailPage
   };
   const [routes] = useState([
     { key: 'detail', title: '상세설명' },
-    { key: 'option', title: '필독사항' }
+    { key: 'option', title: '후기' }
   ]);
   const scrollRef = useRef<ScrollView>(null);
   const flatListRef = useRef<FlatList>(null);
@@ -162,13 +169,11 @@ const ServiceDetailPageMainScreen = ({ navigation }: StackScreenProps<DetailPage
           <DetailBox ref={detailBoxRef} flatListRef={flatListRef} />
           <ScrollToTopButton flatListRef={flatListRef} />
         </Tabs.Tab>
-        <Tabs.Tab name="필독사항">
+        <Tabs.Tab name="후기(5)">
+          {/*5는 임시 숫자임. 실제 데이터 넣어야 함.*/}
           <OptionBox flatListRef={optionPageRef} />
         </Tabs.Tab>
       </Tabs.Container>
-      {/* <TouchableOpacity style={TextStyles.scrollToHeaderButton} onPress={handleScrollToHeader}>
-        <Text style={TextStyles.scrollToHeaderText}>Top</Text>
-      </TouchableOpacity> */}
       <Footer />
     </SafeAreaView>
   )
@@ -245,5 +250,36 @@ const TextStyles = StyleSheet.create({
   },
 });
 
+const styles = StyleSheet.create({
+  tagContainer: {
+    position: 'absolute',
+    top: 16,
+    right: 16,
+    flexDirection: 'row',
+    gap: 8,
+  },
+  tag: {
+    paddingLeft: 16,
+    paddingRight: 16,
+    paddingTop: 3,
+    paddingBottom: 3,
+    backgroundColor: '#612FEF',
+    borderRadius: 4,
+    overflow: 'hidden',
+    borderWidth: 1,
+    borderColor: '#612FEF',
+    justifyContent: 'center',
+    alignItems: 'center',
+    display: 'flex',
+  },
+  tagText: {
+    color: 'white',
+    fontSize: 14,
+    fontFamily: 'Pretendard Variable',
+    fontWeight: '400',
+    lineHeight: 24,
+  }
+});
+
 export default ServiceDetailPageScreen;
 
diff --git a/src/components/Home/components/ReviewItem.tsx b/src/components/Home/components/ReviewItem.tsx
@@ -25,27 +25,26 @@ const ReviewItem = ({ onPress }: ReviewItemProps) => {
   const splitItems = splitArrayIntoPairs(items, 2);
   return (
     <View style={{ borderBottomWidth: 1, borderBottomColor: LIGHTGRAY }}>
-      <ItemContainer style={{marginVertical: 10}}>
-        <View style={{width: 40, height: 40, backgroundColor: GRAY, borderRadius: 180, marginRight: 10}} />
+      <ItemContainer style={{ marginVertical: 10 }}>
+        <View style={{ width: 40, height: 40, backgroundColor: GRAY, borderRadius: 180, marginRight: 10 }} />
         <View>
-          <View style={{flexDirection: 'row', justifyContent: 'center', alignItems: 'center'}}>
+          <View style={{ flexDirection: 'row', justifyContent: 'center', alignItems: 'center' }}>
             <Body16M>닉네임</Body16M>
-            <Caption11M style={{color: BLACK2, marginLeft: 5}}>2024-01-01</Caption11M>
+            <Caption11M style={{ color: BLACK2, marginLeft: 5 }}>2024-01-01</Caption11M>
           </View>
           <StarRating />
         </View>
       </ItemContainer>
       <Carousel
         data={splitItems}
-        renderItem={({item}: any) => {
+        renderItem={({ item }: any) => {
           return (
             <View style={{ flexDirection: 'row' }}>
-              {item.map((subItem: any) => (
-                <View style={{width: '50%', paddingHorizontal: 20}}>
+              {item.map((index: number) => (
+                <View key={index} style={{ width: '50%', paddingHorizontal: 20 }}>
                   <ImageBackground
-                    key={subItem.id} 
-                    source={{uri:'https://image.made-in-china.com/2f0j00efRbSJMtHgqG/Denim-Bag-Youth-Fashion-Casual-Small-Mini-Square-Ladies-Shoulder-Bag-Women-Wash-Bags.webp'}}
-                    style={{width: '100%', height: 170 }}
+                    source={{ uri: 'https://image.made-in-china.com/2f0j00efRbSJMtHgqG/Denim-Bag-Youth-Fashion-Casual-Small-Mini-Square-Ladies-Shoulder-Bag-Women-Wash-Bags.webp' }}
+                    style={{ width: '100%', height: 170 }}
                   />
                 </View>
               ))}
@@ -54,15 +53,15 @@ const ReviewItem = ({ onPress }: ReviewItemProps) => {
         }}
         slider
       />
-      <ItemContainer style={{marginTop: 10}}>
+      <ItemContainer style={{ marginTop: 10 }}>
         <Body14B>거래</Body14B>
         <ReviewComment value='약속을 잘 지켜요' />
       </ItemContainer>
-      <ItemContainer style={{marginTop: 5}}>
+      <ItemContainer style={{ marginTop: 5 }}>
         <Body14B>디자인</Body14B>
         <ReviewComment value='마무리가 꼼꼼해요' />
       </ItemContainer>
-      <Body14R style={{paddingHorizontal: 20, paddingVertical: 10}}>후기 내용이 들어가는 칸입니다 옷이 친절하고 사장님이 멋있어요 어쩌고저쩌고</Body14R>
+      <Body14R style={{ paddingHorizontal: 20, paddingVertical: 10 }}>후기 내용이 들어가는 칸입니다 옷이 친절하고 사장님이 멋있어요 어쩌고저쩌고</Body14R>
     </View>
   )
 }

diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx
@@ -1,4 +1,4 @@
-import React, { Fragment, useEffect, useState,useRef,forwardRef } from 'react';
+import React, { Fragment, useEffect, useState, useRef, forwardRef } from 'react';
 
 import { SafeAreaView, Text, View, StyleSheet, Alert, FlatList } from 'react-native';
 import styled from 'styled-components/native';
@@ -186,55 +186,55 @@ const HomeMainScreen = ({
               onTabChange={handleTabChange}
             />
           </View>
-          
-          {selectedTab === 'Goods' &&(
-            <Service/>
+
+          {selectedTab === 'Goods' && (
+            <Service navigation={navigation} />
           )}
-          {selectedTab === 'Market' &&(
-            <ReformerMarket />
+          {selectedTab === 'Market' && (
+            <ReformerMarket navigation={navigation} />
           )}
-          {selectedTab === 'temp' &&(
-          <ScrollView>
-            <Button onPress={handlePopupButtonPress}>
-              <ButtonText>팝업 표시</ButtonText>
-            </Button>
-            <Button onPress={() => navigation.navigate('Market')}>
-              <Text>마켓</Text>
-            </Button>
-            <Button onPress={() => navigation.navigate('QuotationForm')}>
-              <Text>견적서</Text>
-            </Button>
-            <Button onPress={() => navigation.navigate('QuotationPage')}>
-              <Text>견적서 확인</Text>
-            </Button>
-            <Button
-              onPress={() => navigation.navigate('ServiceDetailPage', {})}>
-              <Text>서비스 디테일</Text>
-            </Button>
-            <Button
-              onPress={() =>
-                navigation.navigate('ServiceRegistrationPage', {})
-              }>
-              <Text>서비스등록</Text>
-            </Button>
-            <Button onPress={() => navigation.navigate('GoodsDetailPage')}>
-              <Text>상품 디테일</Text>
-            </Button>
-            <Button
-              onPress={() => navigation.navigate('GoodsRegistrationPage')}>
-              <Text>상품등록</Text>
-            </Button>
-            <Button onPress={() => navigation.navigate('AddPortfolio')}>
-              <Text>포트폴리오 등록</Text>
-            </Button>
+          {selectedTab === 'temp' && (
+            <ScrollView>
+              <Button onPress={handlePopupButtonPress}>
+                <ButtonText>팝업 표시</ButtonText>
+              </Button>
+              <Button onPress={() => navigation.navigate('Market')}>
+                <Text>마켓</Text>
+              </Button>
+              <Button onPress={() => navigation.navigate('QuotationForm')}>
+                <Text>견적서</Text>
+              </Button>
+              <Button onPress={() => navigation.navigate('QuotationPage')}>
+                <Text>견적서 확인</Text>
+              </Button>
+              <Button
+                onPress={() => navigation.navigate('ServiceDetailPage', {})}>
+                <Text>서비스 디테일</Text>
+              </Button>
+              <Button
+                onPress={() =>
+                  navigation.navigate('ServiceRegistrationPage', {})
+                }>
+                <Text>서비스등록</Text>
+              </Button>
+              <Button onPress={() => navigation.navigate('GoodsDetailPage')}>
+                <Text>상품 디테일</Text>
+              </Button>
+              <Button
+                onPress={() => navigation.navigate('GoodsRegistrationPage')}>
+                <Text>상품등록</Text>
+              </Button>
+              <Button onPress={() => navigation.navigate('AddPortfolio')}>
+                <Text>포트폴리오 등록</Text>
+              </Button>
 
-            <Button onPress={() => navigation.navigate('WriteReviewPage')}>
-              <Text>후기 작성 페이지</Text>
-            </Button>
-            <Button onPress={() => navigation.navigate('TestComponents')}>
-              <Text>공통 컴포넌트 테스트</Text>
-            </Button>
-          </ScrollView>
+              <Button onPress={() => navigation.navigate('WriteReviewPage')}>
+                <Text>후기 작성 페이지</Text>
+              </Button>
+              <Button onPress={() => navigation.navigate('TestComponents')}>
+                <Text>공통 컴포넌트 테스트</Text>
+              </Button>
+            </ScrollView>
           )}
         </BottomSheetModalProvider>
       </SafeAreaView>

diff --git a/src/pages/OrderPage.tsx b/src/pages/OrderPage.tsx
@@ -44,7 +44,7 @@ const OrderPage = ({ navigation }: { navigation: any }) => {
     ]);
 
     return (
-        <Tabs.ScrollView style={{ overflow: "hidden" }}>
+        <Tabs.ScrollView style={{ overflow: "hidden" }} bounces={false} overScrollMode="never">
             <OrderInfoBox>
                 <View style={{ flexDirection: "row", justifyContent: "space-between", alignItems: "center", marginBottom: width * 0.05 }}>
                     <Text style={{ color: 'black', fontSize: 14, fontWeight: "500" }}>{orderDate}</Text>