Skip to content

Commit

Permalink
Merge pull request #53 from dnd-side-project/feature/20
Browse files Browse the repository at this point in the history
[#20] ์ถ”์ฒœ ๋ฉ”์ธ ํŽ˜์ด์ง€ ์ œ์ž‘ (๋ฏธ์™„)
  • Loading branch information
vgihan authored Jul 31, 2022
2 parents bbbca42 + 01683c0 commit a928a8b
Show file tree
Hide file tree
Showing 15 changed files with 209 additions and 31 deletions.
22 changes: 22 additions & 0 deletions src/TestData.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
export const TestData = [
{
title: '๋‚ด ์‚ฌ์ง„ 1',
url: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTEX7G8-sgp2THgvgbzQIU_bZUfD17tCnPkXQ&usqp=CAU',
id: '1',
},
{
title: '๋‚ด ์‚ฌ์ง„ 2',
url: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT_NHQH8W9koZ55iRPtxTaRnbNdQPk8sW1qfQ&usqp=CAU',
id: '2',
},
{
title: '๋‚ด ์‚ฌ์ง„ 3',
url: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS1WiqMjj0m-M2oAso4DSt_fJTCIg789uDnQQ&usqp=CAU',
id: '3',
},
{
title: '๋‚ด ์‚ฌ์ง„ 4',
url: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRKwYVEk9ka6g5S3pg6vA3pj7M9lNVV0e73Wg&usqp=CAU',
id: '4',
},
];
9 changes: 9 additions & 0 deletions src/components/DefaultScrollView/DefaultScrollView.styles.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
import styled from '@emotion/native';

import theme from 'src/styles/Theme';

export const DefaultScroll = styled.ScrollView({
backgroundColor: theme.colors.grayscale[1],
width: '100%',
height: '100%',
});
9 changes: 9 additions & 0 deletions src/components/DefaultScrollView/DefaultScrollView.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
import React, {PropsWithChildren} from 'react';

import {DefaultScroll} from './DefaultScrollView.styles';

const DefaultScrollView = ({children}: PropsWithChildren) => {
return <DefaultScroll bounces={false}>{children}</DefaultScroll>;
};

export default DefaultScrollView;
3 changes: 3 additions & 0 deletions src/components/DefaultScrollView/index.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
import DefaultScrollView from './DefaultScrollView';

export default DefaultScrollView;
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
import styled from '@emotion/native';

import {heightPercentage, widthPercentage} from 'src/styles/ScreenResponse';

export const TitleWrapper = styled.View({
marginLeft: widthPercentage(16),
});

export const OrganismView = styled.View({
marginTop: heightPercentage(8),
});

export const ButtonWrapper = styled.View({
marginTop: heightPercentage(32),
paddingLeft: widthPercentage(16),
});
37 changes: 37 additions & 0 deletions src/components/FrameRecommendOrganism/FrameRecommendOrganism.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
import React, {PropsWithChildren} from 'react';

import PressableAddition from '../PressableAddition';
import RecommendPreviewFourCard from '../RecommendPreviewFourCard';
import {SubHeadline2} from '../utils/Text';
import {ButtonWrapper, OrganismView, TitleWrapper} from './FrameRecommendOrganism.styles';

import {TestData} from 'src/TestData';

export interface Props {
data: ReadonlyArray<renderItemList['item']>;
}

export type renderItemList = {
item: {
url: string;
id: string;
title: string;
};
};

const FrameRecommendOrganism = ({children}: PropsWithChildren) => {
//TO-DO data fetching
return (
<OrganismView>
<TitleWrapper>
<SubHeadline2>{children}</SubHeadline2>
</TitleWrapper>
<RecommendPreviewFourCard data={TestData} />
<ButtonWrapper>
<PressableAddition>์‚ฌ์ง„ ๋”๋ณด๊ธฐ</PressableAddition>
</ButtonWrapper>
</OrganismView>
);
};

export default FrameRecommendOrganism;
3 changes: 3 additions & 0 deletions src/components/FrameRecommendOrganism/index.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
import FrameRecommendOrganism from './FrameRecommendOrganism';

export default FrameRecommendOrganism;
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
import styled from '@emotion/native';

import {heightPercentage, widthPercentage} from 'src/styles/ScreenResponse';

export const TitleWrapper = styled.View({
marginLeft: widthPercentage(16),
});

export const OrganismView = styled.View({
marginTop: heightPercentage(8),
});

export const ButtonWrapper = styled.View({
marginTop: heightPercentage(32),
paddingLeft: widthPercentage(16),
});
37 changes: 37 additions & 0 deletions src/components/PoseRecommendOrganism/PoseRecommendOrganism.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
import React, {PropsWithChildren} from 'react';

import PressableAddition from '../PressableAddition';
import RecommendPreviewFourCard from '../RecommendPreviewFourCard';
import {SubHeadline2} from '../utils/Text';
import {ButtonWrapper, OrganismView, TitleWrapper} from './PoseRecommendOrganism.styles';

import {TestData} from 'src/TestData';

export interface Props {
data: ReadonlyArray<renderItemList['item']>;
}

export type renderItemList = {
item: {
url: string;
id: string;
title: string;
};
};

const PoseRecommendOrganism = ({children}: PropsWithChildren) => {
//TO-DO data fetching
return (
<OrganismView>
<TitleWrapper>
<SubHeadline2>{children}</SubHeadline2>
</TitleWrapper>
<RecommendPreviewFourCard data={TestData} />
<ButtonWrapper>
<PressableAddition>์‚ฌ์ง„ ๋”๋ณด๊ธฐ</PressableAddition>
</ButtonWrapper>
</OrganismView>
);
};

export default PoseRecommendOrganism;
3 changes: 3 additions & 0 deletions src/components/PoseRecommendOrganism/index.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
import PoseRecommendOrganism from './PoseRecommendOrganism';

export default PoseRecommendOrganism;
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ export const FeedCardContainer = styled.View({
height: heightPercentage(220),
backgroundColor: '#F6F6F6',
marginHorizontal: widthPercentage(5.5),
borderRadius: 12,
marginVertical: heightPercentage(16),
});

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,9 @@ import styled from '@emotion/native';
import {heightPercentage} from 'src/styles/ScreenResponse';

export const PreviewFourCardView = styled.View({
alignSelf: 'center',
justifyContent: 'center',
flex: 1,
flexWrap: 'wrap',
flexDirection: 'row',
height: heightPercentage(472),
});
Original file line number Diff line number Diff line change
@@ -1,34 +1,15 @@
import React, {useCallback} from 'react';
import {FlatList} from 'react-native';
import React from 'react';

import {Props} from '../PoseRecommendOrganism/PoseRecommendOrganism';
import RecommendFeedCard from '../RecommendFeedCard';
import {PreviewFourCardView} from './RecommendPreviewFourCard.styles';

interface Props {
data: ReadonlyArray<renderItemList['item']>;
}

type renderItemList = {
item: {
url: string;
id: string;
title: string;
};
};

const RecommendPreviewFourCard = ({data}: Props) => {
const renderItem = useCallback(({item}: renderItemList) => {
return <RecommendFeedCard imgUrl={item.url} />;
}, []);
return (
<PreviewFourCardView>
<FlatList
data={data}
numColumns={2}
keyExtractor={o => o.url}
renderItem={renderItem}
scrollEnabled={false}
/>
{data.map(({url, id}) => (
<RecommendFeedCard imgUrl={url} key={id} />
))}
</PreviewFourCardView>
);
};
Expand Down
28 changes: 28 additions & 0 deletions src/screens/RecommendScreen/RecommendScreen.header.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
import styled from '@emotion/native';
import * as React from 'react';

import {RecommendScreenProps} from './RecommendScreen';

import {Headline2} from 'src/components/utils/Text';
import {widthPercentage} from 'src/styles/ScreenResponse';

export const RecommendHeaderStyle = ({navigation}: RecommendScreenProps) => {
navigation.setOptions({
headerShown: true,
headerTitle: RecommendHeaderTitle,
headerShadowVisible: false,
});
};

const RecommendHeaderTitle = () => {
return (
<HeaderHeadlineView>
<Headline2>์ถ”์ฒœ</Headline2>
</HeaderHeadlineView>
);
};

const HeaderHeadlineView = styled.View({
flex: 1,
marginLeft: -8 + widthPercentage(16), //Native Issue ๋ฐœ์ƒ
});
22 changes: 16 additions & 6 deletions src/screens/RecommendScreen/RecommendScreen.tsx
Original file line number Diff line number Diff line change
@@ -1,16 +1,26 @@
import {NativeStackScreenProps} from '@react-navigation/native-stack';
import * as React from 'react';
import {Text, View} from 'react-native';
import {useLayoutEffect} from 'react';

import {RecommendHeaderStyle} from './RecommendScreen.header';

import {RecommendParamList} from '.';

type RecommendScreenProps = NativeStackScreenProps<RecommendParamList, 'RecommendScreen'>;
import DefaultScrollView from 'src/components/DefaultScrollView';
import FrameRecommendOrganism from 'src/components/FrameRecommendOrganism';
import PoseRecommendOrganism from 'src/components/PoseRecommendOrganism';

export type RecommendScreenProps = NativeStackScreenProps<RecommendParamList, 'RecommendScreen'>;

const RecommendScreen = ({navigation}: RecommendScreenProps) => {
const RecommendScreen = ({navigation, route}: RecommendScreenProps) => {
useLayoutEffect(() => {
RecommendHeaderStyle({navigation, route});
});
return (
<View>
<Text onPress={() => navigation.push('RecommendDetail')}>Main</Text>
</View>
<DefaultScrollView>
<PoseRecommendOrganism>์ธ๊ธฐ ์žˆ๋Š” ํฌ์ฆˆ</PoseRecommendOrganism>
<FrameRecommendOrganism>ํ”„๋ ˆ์ž„ ์ถ”์ฒœ</FrameRecommendOrganism>
</DefaultScrollView>
);
};

Expand Down

0 comments on commit a928a8b

Please sign in to comment.