Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Kaitokidda2 #6

Open
wants to merge 7 commits into
base: develop
Choose a base branch
from
Open
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Next Next commit
구인게시판 디자인
KAITOKIDDA committed Aug 16, 2024
commit 92a8eae963852cd673b23b0d1590f2113f7d2c9d
7 changes: 2 additions & 5 deletions screens/RecruitScreen.tsx
Original file line number Diff line number Diff line change
@@ -143,7 +143,6 @@ const RecruitScreen: React.FC<RecruitScreenProps> = ({ route, navigation }) => {

return (
<ScrollView contentContainerStyle={styles.container}>
{/* 최상단 중앙에 "구인게시판" 텍스트 추가 */}
<Text style={styles.header}>구인게시판</Text>
{post ? (
<>
@@ -162,7 +161,6 @@ const RecruitScreen: React.FC<RecruitScreenProps> = ({ route, navigation }) => {
</View>
<Text style={styles.content}>{post.content}</Text>

{/* 버튼을 post 하단에 배치 */}
<View style={styles.buttonRow}>
<TouchableOpacity style={styles.deleteButton} onPress={deletePost}>
<Text style={styles.deleteButtonText}>게시물 삭제</Text>
@@ -180,7 +178,6 @@ const RecruitScreen: React.FC<RecruitScreenProps> = ({ route, navigation }) => {
</TouchableOpacity>
</View>

{/* 구분선 추가 */}
<View style={styles.sectionDivider} />

{comments.length > 0 ? (
@@ -202,7 +199,7 @@ const RecruitScreen: React.FC<RecruitScreenProps> = ({ route, navigation }) => {
</View>
{openCommentIds.includes(comment.id) && resumes[comment.resume_id] && (
<View style={styles.resumeContainer}>
<Text style={styles.resumeTitle}>이력 세부사항</Text>
<Text style={styles.resumeTitle}>이력</Text>
<Text>Project: {resumes[comment.resume_id]?.[0]?.project || 'N/A'}</Text>
<Text>Contest: {resumes[comment.resume_id]?.[0]?.contest || 'N/A'}</Text>
<Text>Etc: {resumes[comment.resume_id]?.[0]?.etc || 'N/A'}</Text>
@@ -230,7 +227,7 @@ const styles = StyleSheet.create({
alignItems: 'center',
paddingTop: 40, // 최상단 40px 여백
paddingHorizontal: 10, // 좌우 10px 여백
paddingBottom: 33, // 하단 33px 여백
paddingBottom: 43, // 하단 43px 여백
justifyContent: 'flex-start', // 모든 내용을 위로 정렬
backgroundColor: '#FFF', // 전체 배경색 설정
},
159 changes: 96 additions & 63 deletions screens/RecruitSelectScreen.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import React, { useState, useCallback } from 'react';
import { View, Text, FlatList, TouchableOpacity, ActivityIndicator, StyleSheet, Image } from 'react-native';
import { View, Text, FlatList, TouchableOpacity, ActivityIndicator, StyleSheet, Image, Dimensions } from 'react-native';
import axios from 'axios';
import { NativeStackNavigationProp } from '@react-navigation/native-stack';
import { RootStackParamList } from '../types/navigation';
@@ -12,7 +12,7 @@ interface RecruitSelectScreenProps {
interface Post {
id: number;
title: string;
content: string | null; // content가 null일 수 있으므로 null 허용
content: string | null;
participants_num: number;
current_num: number;
}
@@ -27,11 +27,10 @@ const RecruitSelectScreen: React.FC<RecruitSelectScreenProps> = ({ navigation })
setLoading(true);
const response = await axios.get('https://comong-jennie-server.onrender.com/main/join/');

// 응답 데이터 구조 확인을 위해 로그 추가
console.log('API Response:', response.data);

setPosts(response.data);
setError(null); // Clear previous errors
setError(null);
} catch (err) {
setError('Failed to load posts.');
} finally {
@@ -50,7 +49,7 @@ const RecruitSelectScreen: React.FC<RecruitSelectScreenProps> = ({ navigation })
};

const goToPostCreation = () => {
navigation.navigate('RecruitPost'); // RecruitPostScreen으로 이동
navigation.navigate('RecruitPost');
};

if (loading) {
@@ -71,118 +70,152 @@ const RecruitSelectScreen: React.FC<RecruitSelectScreenProps> = ({ navigation })

return (
<View style={styles.container}>
<View style={styles.headerContainer}>
<Image source={require('../assets/Logo.png')} style={styles.logo} />
<Text style={styles.headerText}>구인게시판</Text>
<TouchableOpacity style={styles.floatingButton} onPress={goToPostCreation}>
<Image source={require('../assets/Pencil.png')} style={styles.pencilIcon} />
</TouchableOpacity>
</View>
<FlatList
data={posts}
keyExtractor={(item) => item.id.toString()}
renderItem={({ item, index }) => (
<>
<View>
<TouchableOpacity
onPress={() => goToPostDetail(item.id)}
style={[
styles.postItem,
index === 0 && { marginTop: 62 }, // 최상단 여백
index === posts.length - 1 && { marginBottom: 42 }, // 최하단 여백
index === 0 && { marginTop: 20 }, // 게시물 컨테이너 상단 여백 조정
index === posts.length - 1 && { marginBottom: 20 }, // 게시물 컨테이너 하단 여백 조정
]}
>
<View style={styles.postHeader}>
<Text style={styles.postTitle}>{item.title}</Text>
<Text
style={[
styles.participants,
item.participants_num - item.current_num === 1 && { color: 'red' },
item.participants_num - item.current_num === 0 && { color: '#D3D3D3' }, // Light gray color
]}
>
{item.current_num} / {item.participants_num}
</Text>
<View style={styles.participantsContainer}>
<Text
style={[
styles.participants,
item.participants_num - item.current_num === 1 && { color: 'red' },
item.participants_num - item.current_num === 0 && { color: '#D3D3D3' },
]}
>
{item.current_num} / {item.participants_num}
</Text>
</View>
</View>
{/* content가 null이 아닌 경우에만 표시 */}
{item.content ? (
<Text style={styles.content}>{item.content}</Text>
) : (
<Text style={styles.content}>No content available</Text>
)}
<Text style={styles.content}>{item.content ? item.content : 'No content available'}</Text>
</TouchableOpacity>
{index !== posts.length - 1 && (
<View style={styles.divider} />
)}
</>
</View>
)}
contentContainerStyle={styles.listContentContainer}
/>
<TouchableOpacity style={styles.floatingButton} onPress={goToPostCreation}>
<Image source={require('../assets/Pencil.png')} style={styles.pencilIcon} />
</TouchableOpacity>
</View>
);
};

const { width: screenWidth } = Dimensions.get('window');

const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
backgroundColor: '#FFF',
paddingHorizontal: 10, // 화면 좌우 여백 설정
paddingTop: 20, // 화면 상단 여백
},
headerContainer: {
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-between',
paddingBottom: 0,
paddingTop: 20,
paddingHorizontal: 10,
},
logo: {
width: 50,
height: 50,
},
headerText: {
fontSize: 16,
fontWeight: 'bold',
color: '#050360',
flex: 1,
textAlign: 'left',
},
floatingButton: {
position: 'absolute',
right: 20,
top: 30, // 최상단 여백을 30px로 설정
},
pencilIcon: {
width: 30,
height: 30,
tintColor: '#050360',
},
listContentContainer: {
paddingHorizontal: 10, // 좌우측 여백
paddingBottom: 20, // 리스트 하단 여백
},
postItem: {
width: 340, // 너비 설정
height: 93, // 높이 설정 (필요에 따라 수정)
width: 316, // 너비 설정
height: 95, // 높이 설정
backgroundColor: '#fff', // 배경색
borderRadius: 8, // 테두리 둥글기
shadowColor: '#000', // 그림자 색상
shadowOffset: { width: 0, height: 1 }, // 그림자 위치
shadowOpacity: 0.2, // 그림자 투명도
shadowRadius: 2, // 그림자 반경
paddingHorizontal: 12, // 좌우 패딩 12px로 설정
paddingVertical: 10, // 상하 패딩
marginBottom: 20, // 게시물 간 간격
alignSelf: 'center', // 중앙 정렬
flexDirection: 'column', // 세로 배치
justifyContent: 'flex-start', // 상단 정렬
alignItems: 'center', // 중앙 정렬 (내부 컨텐츠 기준)
flexShrink: 0, // 축소 방지
paddingVertical: 10, // 내용과 테두리 간 여백 추가
justifyContent: 'flex-start', // 내용 상단 정렬
},
postHeader: {
flexDirection: 'row',
justifyContent: 'space-between', // 좌우 끝에 배치
alignItems: 'flex-start', // 상단 정렬
width: '100%',
paddingHorizontal: 16, // 좌우 패딩
paddingTop: 10, // 상단 패딩
justifyContent: 'space-between', // 제목과 인원 컨테이너가 좌우 끝에 배치
alignItems: 'center',
marginTop: 3, // 게시물 상단에서 3px 떨어지게 설정
},
postTitle: {
fontSize: 16,
fontWeight: '700',
color: '#0080DD',
textAlign: 'left', // 제목 좌측 정렬
color: '#050360',
},
participantsContainer: {
borderRadius: 10,
backgroundColor: '#F0F0F0', // 회색 배경
paddingHorizontal: 10,
paddingVertical: 5,
justifyContent: 'center',
alignItems: 'center',
flexShrink: 0,
marginRight: 10, // 우측 여백 유지
},
participants: {
fontSize: 16,
fontWeight: '700',
color: '#0080DD',
textAlign: 'right', // 인원 우측 정렬
color: '#050360', // 기본 색상
},
content: {
fontSize: 14,
color: '#333', // 내용 텍스트 색상 설정
marginTop: 8, // 제목과 내용 간의 간격 설정
paddingHorizontal: 16, // 내용 좌우 패딩
textAlign: 'left', // 내용 좌측 정렬
alignSelf: 'stretch', // 내용이 좌우로 늘어나게 설정
fontSize: 12,
color: '#050360',
marginTop: 2, // 제목과 내용 간의 간격 설정
},
divider: {
height: 1,
width: '100%',
width: screenWidth - 20, // 화면 좌우 여백을 고려한 길이 (10px 좌우 여백 x 2)
backgroundColor: '#D3D3D3', // 회색 구분선
marginVertical: 12, // 게시물 간 간격
marginVertical: 10, // 게시물 간 간격과 맞추기 위한 여백
alignSelf: 'center', // 구분선을 중앙에 배치
},
error: {
color: 'red',
fontSize: 16,
},
floatingButton: {
position: 'absolute',
right: 20, // 우측 상단으로 이동
top: 20, // 상단으로 이동
},
pencilIcon: {
width: 30,
height: 30,
tintColor: '#0080DD', // 아이콘 색상을 원래 색상으로 복원
},
});

export default RecruitSelectScreen;
export default RecruitSelectScreen;