Skip to content

Commit eb00b94

Browse files
peanudgepeanudge
committed
[geobukmok#4] feat: 대화 화면 레이아웃 구성
1 parent a4f6668 commit eb00b94

File tree

6 files changed

+231
-16
lines changed

6 files changed

+231
-16
lines changed

‎src/App.tsx

Lines changed: 20 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React from "react";
2-
import { SafeAreaView, StyleSheet } from "react-native";
2+
import { Button, SafeAreaView, StyleSheet, Text, View } from "react-native";
33
import { createNativeStackNavigator } from "@react-navigation/native-stack";
44

55
import Home from "./screens/Home";
@@ -15,7 +15,15 @@ const SafeAreaViewContainer = styled(SafeAreaView)`
1515
flex: 1;
1616
`;
1717

18-
const Stack = createNativeStackNavigator();
18+
export type RootStackParamList = {
19+
Home: undefined;
20+
Matching: undefined;
21+
Chat: undefined;
22+
Feedback: undefined;
23+
History: undefined;
24+
};
25+
26+
const Stack = createNativeStackNavigator<RootStackParamList>();
1927

2028
export default function App() {
2129
return (
@@ -29,7 +37,16 @@ export default function App() {
2937
>
3038
<Stack.Screen name="Home" component={Home} />
3139
<Stack.Screen name="Matching" component={Matching} />
32-
<Stack.Screen name="Chat" component={Chat} />
40+
<Stack.Screen
41+
name="Chat"
42+
component={Chat}
43+
options={{
44+
headerShown: true,
45+
headerBackVisible: false,
46+
headerBackTitleVisible: false,
47+
title: "", // TODO: Chat Header Hide하는 방법찾기
48+
}}
49+
/>
3350
<Stack.Screen name="Feedback" component={Feedback} />
3451
<Stack.Screen name="History" component={History} />
3552
</Stack.Navigator>

‎src/img/chat_bubble.svg

Lines changed: 3 additions & 0 deletions
Loading

‎src/img/smile_1.png

2.08 KB
Loading

‎src/screens/Chat.tsx

Lines changed: 0 additions & 13 deletions
This file was deleted.

‎src/screens/Chat/UserCard.tsx

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
import React from "react";
2+
import styled from "styled-components/native";
3+
import ProfileImage from "../../components/ProfileImage";
4+
5+
const TestSmileImg = require("../../img/smile_1.png");
6+
7+
interface ContainerProps {
8+
on: boolean;
9+
}
10+
11+
const Container = styled.View<ContainerProps>`
12+
width: 45%;
13+
margin: 2.5%;
14+
height: 45%;
15+
border-radius: 20px;
16+
border-width: 5px;
17+
background-color: #f6f6f6;
18+
border-color: ${({ on }) => (on ? "#5073cd" : "#f6f6f6")};
19+
flex-direction: column;
20+
justify-content: center;
21+
align-items: center;
22+
`;
23+
24+
const UserNameText = styled.Text`
25+
margin-top: 20px;
26+
font-size: 20px;
27+
font-weight: 500;
28+
`;
29+
30+
interface Props {
31+
voiceOn?: boolean;
32+
}
33+
34+
const UserCard: React.FC<Props> = ({ voiceOn = false }) => {
35+
return (
36+
<Container on={voiceOn}>
37+
<ProfileImage size="md" image={TestSmileImg} />
38+
<UserNameText>안녕하세요.</UserNameText>
39+
</Container>
40+
);
41+
};
42+
43+
export default UserCard;

‎src/screens/Chat/index.tsx

Lines changed: 165 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,165 @@
1+
import React from "react";
2+
import { Button, View, Dimensions, Text } from "react-native";
3+
import { NativeStackScreenProps } from "@react-navigation/native-stack";
4+
import { RootStackParamList } from "../../App";
5+
import styled from "styled-components/native";
6+
import UserCard from "./UserCard";
7+
8+
const ChatContainer = styled.View`
9+
flex: 1;
10+
background-color: #ffffff;
11+
`;
12+
13+
const TopSection = styled.View`
14+
flex-direction: row;
15+
flex: 1;
16+
padding-left: 20px;
17+
padding-right: 20px;
18+
`;
19+
20+
const TopSectionLabelZone = styled.View`
21+
flex: 2;
22+
justify-content: center;
23+
`;
24+
25+
const GeneralLabel = styled.Text`
26+
font-weight: 600;
27+
width: 65%;
28+
font-size: 20px;
29+
`;
30+
31+
const TopSectionTimerZone = styled.View`
32+
flex: 1;
33+
justify-content: center;
34+
align-items: center;
35+
`;
36+
37+
const Timer = styled.View`
38+
padding: 10px 20px;
39+
border-radius: 50px;
40+
align-items: center;
41+
/* TODO: Change Color Constant */
42+
background-color: #f6f6f6;
43+
`;
44+
45+
const TimeLabel = styled.Text`
46+
font-size: 12px;
47+
font-weight: 500;
48+
color: #9e9db5;
49+
`;
50+
51+
const TimeText = styled.Text`
52+
margin-top: 5px;
53+
font-weight: 800;
54+
font-size: 18px;
55+
color: #5073cd;
56+
`;
57+
58+
const MiddleSection = styled.View`
59+
flex: 4;
60+
padding: 10px;
61+
`;
62+
63+
const UserCardList = styled.View`
64+
flex: 1;
65+
flex-direction: row;
66+
justify-content: flex-start;
67+
flex-wrap: wrap;
68+
`;
69+
70+
const BottomSection = styled.View`
71+
flex: 1;
72+
padding: 20px;
73+
justify-content: flex-start;
74+
`;
75+
76+
const TooltipLabel = styled.Text`
77+
font-weight: 600;
78+
font-size: 20px;
79+
`;
80+
81+
const TooltipContainer = styled.View`
82+
margin-top: 10px;
83+
height: 80%;
84+
width: 95%;
85+
align-self: flex-end;
86+
border-radius: 20px;
87+
background-color: #f6f6f6;
88+
justify-content: center;
89+
align-items: flex-start;
90+
padding: 20px;
91+
`;
92+
93+
const TooltipTitle = styled.Text`
94+
width: 100%;
95+
font-size: 12px;
96+
font-weight: 500;
97+
`;
98+
99+
const TooltipContent = styled.View`
100+
width: 100%;
101+
margin-top: 10px;
102+
flex-direction: row;
103+
justify-content: space-between;
104+
`;
105+
const TooltipContentText = styled.Text`
106+
font-size: 15px;
107+
font-weight: 500;
108+
`;
109+
110+
const TooltipBubble = styled.Image`
111+
position: absolute;
112+
width: 100px;
113+
height: 100px;
114+
`;
115+
116+
const Chat: React.FC<NativeStackScreenProps<RootStackParamList, "Chat">> = ({
117+
navigation,
118+
}) => {
119+
React.useLayoutEffect(() => {
120+
navigation.setOptions({
121+
headerRight: () => (
122+
<Button onPress={() => navigation.goBack()} title="방 나가기" />
123+
),
124+
});
125+
}, [navigation]);
126+
127+
return (
128+
<ChatContainer>
129+
<TopSection>
130+
{/* TODO: 조건적으로 타이머, 투표 타이머 */}
131+
<TopSectionLabelZone>
132+
<GeneralLabel>자유롭게 이야기를 나누어 보세요.</GeneralLabel>
133+
</TopSectionLabelZone>
134+
<TopSectionTimerZone>
135+
<Timer>
136+
<TimeLabel>남은대화시간</TimeLabel>
137+
<TimeText>10:00</TimeText>
138+
</Timer>
139+
</TopSectionTimerZone>
140+
</TopSection>
141+
<MiddleSection>
142+
<UserCardList>
143+
<UserCard voiceOn={true} />
144+
<UserCard voiceOn={true} />
145+
<UserCard />
146+
<UserCard />
147+
</UserCardList>
148+
</MiddleSection>
149+
<BottomSection>
150+
<TooltipLabel>대화가 잘 이어지지 않나요?</TooltipLabel>
151+
<TooltipContainer>
152+
<TooltipTitle>지금 핫한 주제로 이야기해보세요.🔥</TooltipTitle>
153+
<TooltipContent>
154+
<TooltipContentText>오징어 게임</TooltipContentText>
155+
<TooltipContentText>스우파</TooltipContentText>
156+
<TooltipContentText>스파이더맨</TooltipContentText>
157+
<TooltipContentText></TooltipContentText>
158+
</TooltipContent>
159+
</TooltipContainer>
160+
</BottomSection>
161+
</ChatContainer>
162+
);
163+
};
164+
165+
export default Chat;

0 commit comments

Comments
 (0)