diff --git a/package.json b/package.json
index 22d10be..5d3f029 100644
--- a/package.json
+++ b/package.json
@@ -17,12 +17,14 @@
"axios": "^1.6.3",
"react": "18.2.0",
"react-native": "0.73.2",
+ "react-native-collapsible-tab-view": "^6.2.1",
"react-native-dotenv": "^3.4.9",
"react-native-gesture-handler": "^2.14.0",
"react-native-keychain": "^8.1.2",
"react-native-pager-view": "^6.2.3",
"react-native-reanimated": "^3.6.2",
"react-native-safe-area-context": "^4.8.2",
+ "react-native-safearea-height": "^1.0.6",
"react-native-screens": "^3.29.0",
"react-native-snap-carousel": "git+https://github.com/SJ-Kwak/react-native-snap-carousel.git",
"react-native-svg": "^14.1.0",
diff --git a/src/assets/common/Arrow.svg b/src/assets/common/Arrow.svg
index aa938a0..b9bd8b7 100644
--- a/src/assets/common/Arrow.svg
+++ b/src/assets/common/Arrow.svg
@@ -1,3 +1,3 @@
\ No newline at end of file
diff --git a/src/components/Home/Market/DetailPage.tsx b/src/components/Home/Market/DetailPage.tsx
index 18c1bc5..24af30b 100644
--- a/src/components/Home/Market/DetailPage.tsx
+++ b/src/components/Home/Market/DetailPage.tsx
@@ -57,7 +57,7 @@ const DetailPageMainScreen = ({ navigation }: StackScreenProps {
navigation.goBack();
}}>
-
+
{
]
return (
- {
return (
@@ -23,7 +24,8 @@ const InfoPage = () => {
{item.data}
)
- } }
+ }}
+ keyExtractor={(item, index) => index.toString()}
/>
)
}
diff --git a/src/components/Home/Market/MarketTabView.tsx b/src/components/Home/Market/MarketTabView.tsx
index f09aa51..4f1d022 100644
--- a/src/components/Home/Market/MarketTabView.tsx
+++ b/src/components/Home/Market/MarketTabView.tsx
@@ -1,7 +1,8 @@
-import { useState } from 'react';
-import { SafeAreaView, ScrollView, View, FlatList, Text, TouchableOpacity, useWindowDimensions } from 'react-native';
+import React, { useState } from 'react';
+import { SafeAreaView, ScrollView, View, FlatList, Text, TouchableOpacity, Image, ImageBackground } from 'react-native';
import styled from 'styled-components/native';
-import { TabView, TabBar, SceneMap } from "react-native-tab-view";
+import { Tabs, MaterialTabBar } from 'react-native-collapsible-tab-view';
+import { getStatusBarHeight } from 'react-native-safearea-height';
import { Title20B, Body14R, Caption11M } from '../../../styles/GlobalText.tsx';
import { StackScreenProps } from '@react-navigation/stack';
@@ -14,11 +15,23 @@ import Footer from '../../../common/Footer.tsx';
import Arrow from '../../../assets/common/Arrow.svg';
import Hashtag from '../../../common/Hashtag.tsx';
-const ProfileSection = () => {
+const ProfileSection = ({ navigation }: {navigation: any}) => {
const filter = ['스포티', '영캐주얼', '깔끔']
return (
-
+ navigation.goBack()}>
+
+
+
+
+
+
이하늘의 마켓
안녕하세요 리폼러 이하늘입니다!
@@ -48,44 +61,27 @@ const ReviewPage = () => {
)
}
+const statusBarHeight = getStatusBarHeight(true);
+
const MarketTabView = ({ navigation, route } : StackScreenProps) => {
- const layout = useWindowDimensions();
- const [index, setIndex] = useState(0);
const [routes] = useState([
{ key: 'info', title: '정보'},
{ key: 'product', title: '상품' },
{ key: 'review', title: '리뷰' }
]);
- const renderScene = ({ route }: any) => {
- switch (route.key) {
- case 'info':
- return ;
- case 'product':
- return ;
- case 'review':
- return ;
- }
- }
-
return (
-
- navigation.goBack()}>
-
-
-
-
+ }
+ headerContainerStyle={{
+ shadowOpacity: 0,
+ borderBottomWidth: 1,
+ borderColor: '#D9D9D9'
+ }}
renderTabBar={props => (
-
)}
- />
+ >
+ {routes.map(route =>
+ (
+ {route.key === 'info' && }
+ {route.key === 'product' && }
+ {route.key === 'review' && }
+ )
+ )}
+
-
+
)
}
const BackButton = styled.TouchableOpacity`
padding: 10px;
+ position: absolute;
+ left: 0px;
+ top: ${statusBarHeight-10}px;
+ z-index: 1;
`
export default MarketTabView;
\ No newline at end of file
diff --git a/src/components/Home/Market/ProductPage.tsx b/src/components/Home/Market/ProductPage.tsx
index 95021df..2d7e747 100644
--- a/src/components/Home/Market/ProductPage.tsx
+++ b/src/components/Home/Market/ProductPage.tsx
@@ -1,5 +1,6 @@
import { useState } from 'react';
import { View, TouchableOpacity, ScrollView, FlatList, Dimensions } from 'react-native';
+import { Tabs } from 'react-native-collapsible-tab-view';
import styled from 'styled-components/native';
import { Subtitle18B } from '../../../styles/GlobalText';
import Carousel from '../../../common/Carousel';
@@ -8,7 +9,7 @@ import ServiceItem from '../components/ServiceItem';
import ProductItem from '../components/ProductItem';
import Arrow from '../../../assets/common/Arrow.svg';
-import { LIGHTGRAY } from '../../../styles/GlobalColor';
+import { BLACK, LIGHTGRAY } from '../../../styles/GlobalColor';
const ProductPage = () => {
// 한 줄에 2개씩 상품 아이템 배치
@@ -25,39 +26,41 @@ const ProductPage = () => {
const splitProduct = splitArrayIntoPairs(product, 2);
return (
-
-
- 리폼러의 서비스
-
-
- {
- return (
- {}} />
- )
- }}
- slider
- />
-
-
- 리폼러의 판매상품
-
-
- {
- return (
-
- {item.map((subItem: any) => (
- {}} />
- ))}
-
- )
- }}
- dot
- />
-
+
+
+
+ 리폼러의 서비스
+
+
+ {
+ return (
+ {}} />
+ )
+ }}
+ slider
+ />
+
+
+ 리폼러의 판매상품
+
+
+ {
+ return (
+
+ {item.map((subItem: any) => (
+ {}} />
+ ))}
+
+ )
+ }}
+ dot
+ />
+
+
)
}
diff --git a/yarn.lock b/yarn.lock
index 64c6161..813fe55 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3341,7 +3341,7 @@ deprecated-react-native-prop-types@^5.0.0:
invariant "^2.2.4"
prop-types "^15.8.1"
-dequal@^2.0.3:
+dequal@2.0.3, dequal@^2.0.3:
version "2.0.3"
resolved "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz"
integrity sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==
@@ -6197,7 +6197,7 @@ prompts@^2.0.1, prompts@^2.4.2:
kleur "^3.0.3"
sisteransi "^1.0.5"
-prop-types@^15.6.1, prop-types@^15.7.2, prop-types@^15.8.1:
+prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2, prop-types@^15.8.1:
version "15.8.1"
resolved "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz"
integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
@@ -6284,6 +6284,13 @@ react-is@^18.0.0, react-is@^18.2.0:
resolved "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz"
integrity sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==
+react-native-collapsible-tab-view@^6.2.1:
+ version "6.2.1"
+ resolved "https://registry.yarnpkg.com/react-native-collapsible-tab-view/-/react-native-collapsible-tab-view-6.2.1.tgz#b48760cd98c0156bc89300516ae10ff55f7df298"
+ integrity sha512-pgmpZYSg6TPYmhv3Dw/czFJHk4AzcYN2df3EMlKwFqbu1ifmlA866hBUVDX3mlbRaros75U5S1wpGCwlqqXLTQ==
+ dependencies:
+ use-deep-compare "^1.1.0"
+
react-native-dotenv@^3.4.9:
version "3.4.9"
resolved "https://registry.npmjs.org/react-native-dotenv/-/react-native-dotenv-3.4.9.tgz"
@@ -6327,6 +6334,13 @@ react-native-safe-area-context@^4.8.2:
resolved "https://registry.npmjs.org/react-native-safe-area-context/-/react-native-safe-area-context-4.8.2.tgz"
integrity sha512-ffUOv8BJQ6RqO3nLml5gxJ6ab3EestPiyWekxdzO/1MQ7NF8fW1Mzh1C5QE9yq573Xefnc7FuzGXjtesZGv7cQ==
+react-native-safearea-height@^1.0.6:
+ version "1.0.6"
+ resolved "https://registry.yarnpkg.com/react-native-safearea-height/-/react-native-safearea-height-1.0.6.tgz#ece54ae953ff08efe9eee7aa96581a3a9e76c930"
+ integrity sha512-cO58Ew/NG7XcxwcSMNc0PxKiPEXYt3Fzql9UshXWXmPZ+XFXWEifYwKKqwaKExHvep8mk8wCbY0qy00pmfciIg==
+ dependencies:
+ react "^16.9.0"
+
react-native-screens@^3.29.0:
version "3.29.0"
resolved "https://registry.npmjs.org/react-native-screens/-/react-native-screens-3.29.0.tgz"
@@ -6439,6 +6453,15 @@ react@18.2.0:
dependencies:
loose-envify "^1.1.0"
+react@^16.9.0:
+ version "16.14.0"
+ resolved "https://registry.yarnpkg.com/react/-/react-16.14.0.tgz#94d776ddd0aaa37da3eda8fc5b6b18a4c9a3114d"
+ integrity sha512-0X2CImDkJGApiAlcf0ODKIneSwBPhqJawOa5wCtKbu7ZECrmS26NvtSILynQ66cgkT/RJ4LidJOc3bUESwmU8g==
+ dependencies:
+ loose-envify "^1.1.0"
+ object-assign "^4.1.1"
+ prop-types "^15.6.2"
+
readable-stream@^3.4.0:
version "3.6.2"
resolved "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz"
@@ -7365,6 +7388,13 @@ uri-js@^4.2.2:
dependencies:
punycode "^2.1.0"
+use-deep-compare@^1.1.0:
+ version "1.2.1"
+ resolved "https://registry.yarnpkg.com/use-deep-compare/-/use-deep-compare-1.2.1.tgz#076c9865868d98509e619206e27bc8eff0b8ed7c"
+ integrity sha512-JTnOZAr0fq1ix6CQ4XANoWIh03xAiMFlP/lVAYDdAOZwur6nqBSdATn1/Q9PLIGIW+C7xmFZBCcaA4KLDcQJtg==
+ dependencies:
+ dequal "2.0.3"
+
use-latest-callback@^0.1.5, use-latest-callback@^0.1.7:
version "0.1.9"
resolved "https://registry.npmjs.org/use-latest-callback/-/use-latest-callback-0.1.9.tgz"