GDSC-Hongik · KAITOKIDDA · Aug 16, 2024 · Aug 16, 2024 · Aug 16, 2024 · Aug 16, 2024
diff --git a/assets/Logo.png b/assets/Logo.png
diff --git a/screens/MajorGradeScreen.tsx b/screens/MajorGradeScreen.tsx
@@ -1,5 +1,5 @@
-import React, { useEffect, useState } from 'react';
-import { View, Text, ScrollView, TouchableOpacity, Image, Alert, Modal, Button } from 'react-native';
+import React, { useState } from 'react';
+import { View, Text, ScrollView, TouchableOpacity, Image, Alert, Modal, StyleSheet } from 'react-native';
 import { useNavigation, useRoute, useFocusEffect } from '@react-navigation/native';
 import { NativeStackNavigationProp } from '@react-navigation/native-stack';
 import axios from 'axios';
@@ -50,60 +50,182 @@ const MajorGradeScreen: React.FC = () => {
   };
 
   return (
-    <ScrollView>
-      <View>
-        <View style={{ flexDirection: 'row', justifyContent: 'space-between', padding: 10 }}>
-          <Text>{grade}학년</Text>
-          <TouchableOpacity onPress={handleCreatePostPress}>
-            <Image source={require('../assets/Pencil.png')} style={{ width: 24, height: 24 }} />
-          </TouchableOpacity>
-        </View>
+    <View style={styles.container}>
+      {/* Header Section */}
+      <View style={styles.header}>
+        <Image source={require('../assets/Logo.png')} style={styles.logo} />
+        <Text style={styles.headerText}>전공과목 게시판</Text>
+        <TouchableOpacity onPress={handleCreatePostPress}>
+          <Image source={require('../assets/Pencil.png')} style={styles.writeIcon} />
+        </TouchableOpacity>
+      </View>
 
-        <Modal
-          animationType="slide"
-          transparent={true}
-          visible={modalVisible}
-          onRequestClose={() => setModalVisible(false)}
-        >
-          <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: 'rgba(0,0,0,0.5)' }}>
-            <View style={{ width: 300, backgroundColor: 'white', padding: 20, borderRadius: 10 }}>
-              <ScrollView style={{ maxHeight: 400 }}>
-                <Text style={{ fontWeight: 'bold', marginBottom: 10 }}>과목 선택</Text>
-                {Object.keys(subMap).map((subjectKey) => (
-                  <TouchableOpacity key={subjectKey} onPress={() => setSelectedSub(subjectKey)}>
-                    <Text style={{ marginVertical: 5 }}>{subjectKey}</Text>
-                  </TouchableOpacity>
-                ))}
+      {/* Scrollable Content */}
+      <ScrollView contentContainerStyle={styles.content}>
+        <View>
+          <Modal
+            animationType="slide"
+            transparent={true}
+            visible={modalVisible}
+            onRequestClose={() => setModalVisible(false)}
+          >
+            <View style={styles.modalBackground}>
+              <View style={styles.modalContent}>
+                <ScrollView style={{ maxHeight: 400 }}>
+                  <Text style={styles.modalTitle}>과목 선택</Text>
+                  {Object.keys(subMap).map((subjectKey) => (
+                    <TouchableOpacity key={subjectKey} onPress={() => setSelectedSub(subjectKey)}>
+                      <Text style={styles.modalItem}>{subjectKey}</Text>
+                    </TouchableOpacity>
+                  ))}
 
-                <Text style={{ fontWeight: 'bold', marginVertical: 10 }}>교수 선택</Text>
-                {Object.keys(profMap).map((professorKey) => (
-                  <TouchableOpacity key={professorKey} onPress={() => setSelectedProf(professorKey)}>
-                    <Text style={{ marginVertical: 5 }}>{professorKey}</Text>
+                  <Text style={styles.modalTitle}>교수 선택</Text>
+                  {Object.keys(profMap).map((professorKey) => (
+                    <TouchableOpacity key={professorKey} onPress={() => setSelectedProf(professorKey)}>
+                      <Text style={styles.modalItem}>{professorKey}</Text>
+                    </TouchableOpacity>
+                  ))}
+                </ScrollView>
+                <View style={styles.buttonContainer}>
+                  <TouchableOpacity style={styles.confirmButton} onPress={handleConfirmSelection}>
+                    <Text style={styles.buttonText}>확인</Text>
+                  </TouchableOpacity>
+                  <TouchableOpacity style={styles.cancelButton} onPress={() => setModalVisible(false)}>
+                    <Text style={styles.buttonText}>취소</Text>
                   </TouchableOpacity>
-                ))}
-              </ScrollView>
-              <Button title="확인" onPress={handleConfirmSelection} />
-              <Button title="취소" onPress={() => setModalVisible(false)} color="red" />
+                </View>
+              </View>
             </View>
-          </View>
-        </Modal>
+          </Modal>
 
-        {info.length > 0 ? (
-          info.map((post, index) => (
-            <TouchableOpacity key={index} onPress={() => navigation.navigate('Major', { grade, sub: post.sub, profs: post.profs, postId: post.id })}>
-              <View style={{ marginVertical: 10 }}>
-                <Text style={{ fontWeight: 'bold' }}>{post.title}</Text>
-                <Text>{post.content}</Text>
-                <Text>{new Date(post.dt_created).toLocaleDateString()}</Text>
+          {info.length > 0 ? (
+            info.map((post, index) => (
+              <View key={index}>
+                <TouchableOpacity
+                  style={styles.postContainer}
+                  onPress={() => navigation.navigate('Major', { grade, sub: post.sub, profs: post.profs, postId: post.id })}
+                >
+                  <Text style={styles.postTitle}>{post.title}</Text>
+                  <Text style={styles.postContent}>{post.content}</Text>
+                  <Text style={styles.postDate}>{new Date(post.dt_created).toLocaleDateString()}</Text>
+                </TouchableOpacity>
+                {index < info.length - 1 && <View style={styles.divider} />}
               </View>
-            </TouchableOpacity>
-          ))
-        ) : (
-          <Text>게시글이 없습니다.</Text>
-        )}
-      </View>
-    </ScrollView>
+            ))
+          ) : (
+            <Text style={styles.noPostsText}>게시글이 없습니다.</Text>
+          )}
+        </View>
+      </ScrollView>
+    </View>
   );
 };
 
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#ffffff',
+    paddingTop: 20,
+    paddingHorizontal: 22, // 좌우 간격 설정
+  },
+  header: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    padding: 10,
+    backgroundColor: '#ffffff',
+  },
+  logo: {
+    width: 40,
+    height: 40,
+    resizeMode: 'contain',
+  },
+  headerText: {
+    fontSize: 18,
+    fontWeight: 'bold',
+    textAlign: 'center',
+    flex: 1,
+    color: '#050360', // 글자색 설정
+  },
+  writeIcon: {
+    width: 24,
+    height: 24,
+  },
+  content: {
+    paddingTop: 17, // 첫 번째 게시글과 헤더 간격 설정
+  },
+  postContainer: {
+    width: 316, // 게시글 컨테이너 폭 설정
+    height: 95, // 게시글 컨테이너 높이 설정
+    flexShrink: 0,
+    marginBottom: 17, // 게시글 컨테이너 간의 간격 설정
+    justifyContent: 'center', // 상하 중앙 정렬
+    paddingLeft: 10, // 좌측 패딩을 추가하여 텍스트가 너무 붙지 않도록 설정
+  },
+  divider: {
+    height: 1,
+    backgroundColor: '#cccccc', // 회색 구분선
+    marginHorizontal: 10, // 구분선 좌우 간격 설정
+  },
+  modalBackground: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: 'rgba(0,0,0,0.5)',
+  },
+  modalContent: {
+    width: 300,
+    backgroundColor: 'white',
+    padding: 20,
+    borderRadius: 10,
+  },
+  modalTitle: {
+    fontWeight: 'bold',
+    marginBottom: 10,
+    color: '#050360', // 글자색 설정
+  },
+  modalItem: {
+    marginVertical: 5,
+    color: '#050360', // 글자색 설정
+  },
+  buttonContainer: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    marginTop: 10,
+  },
+  confirmButton: {
+    backgroundColor: '#050360',
+    padding: 10,
+    borderRadius: 5,
+    flex: 1,
+    marginRight: 5,
+    alignItems: 'center',
+  },
+  cancelButton: {
+    backgroundColor: '#050360',
+    padding: 10,
+    borderRadius: 5,
+    flex: 1,
+    marginLeft: 5,
+    alignItems: 'center',
+  },
+  buttonText: {
+    color: '#ffffff',
+    fontWeight: 'bold',
+  },
+  postTitle: {
+    fontWeight: 'bold',
+    color: '#050360', // 글자색 설정
+  },
+  postContent: {
+    color: '#050360', // 글자색 설정
+  },
+  postDate: {
+    color: '#050360', // 글자색 설정
+  },
+  noPostsText: {
+    color: '#050360', // 글자색 설정
+  },
+});
+
 export default MajorGradeScreen;
diff --git a/screens/MajorPostScreen.tsx b/screens/MajorPostScreen.tsx
@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
-import { View, Text, TextInput, Button, Alert } from 'react-native';
-import { useNavigation, useRoute, RouteProp } from '@react-navigation/native';
+import { View, Text, TextInput, Button, StyleSheet, Alert, Image } from 'react-native';
 import axios from 'axios';
+import { useNavigation, useRoute, RouteProp } from '@react-navigation/native';
 import { NativeStackNavigationProp } from '@react-navigation/native-stack';
 import { RootStackParamList } from '../types/navigation';
 
@@ -23,8 +23,6 @@ const MajorPostScreen: React.FC = () => {
       user: 1  // 임시로 user ID를 하드코딩
     };
 
-    console.log("Sending POST request with data:", requestData);
-
     try {
       const response = await axios.post(
         `https://comong-jennie-server.onrender.com/main/major/${grade}/${sub}/${profs}/create/`,
@@ -40,23 +38,69 @@ const MajorPostScreen: React.FC = () => {
   };
 
   return (
-    <View style={{ padding: 10 }}>
+    <View style={styles.container}>
+      <View style={styles.header}>
+        <Image source={require('../assets/Logo.png')} style={styles.logo} />
+        <View style={styles.titleContainer}>
+          <Text style={styles.title}>전공 게시글 작성</Text>
+        </View>
+      </View>
       <TextInput
         value={title}
         onChangeText={setTitle}
         placeholder="제목"
-        style={{ borderWidth: 1, marginBottom: 10, padding: 5 }}
+        placeholderTextColor="#050360"
+        style={styles.input}
       />
       <TextInput
         value={content}
         onChangeText={setContent}
         placeholder="내용"
-        style={{ borderWidth: 1, marginBottom: 10, padding: 5, height: 150 }}
+        placeholderTextColor="#050360"
+        style={[styles.input, styles.contentInput]}
         multiline
       />
-      <Button title="작성하기" onPress={handleSubmit} />
+      <Button title="작성하기" onPress={handleSubmit} color="#050360" />
     </View>
   );
 };
 
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    padding: 16,
+  },
+  header: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginBottom: 20,
+    marginTop: 30,
+  },
+  logo: {
+    width: 50,
+    height: 50,
+    marginRight: 10, // 로고와 텍스트 간격 조정
+  },
+  titleContainer: {
+    flex: 1,
+    alignItems: 'center',
+  },
+  title: {
+    fontSize: 16,
+    fontWeight: 'bold',
+    color: '#050360',
+  },
+  input: {
+    height: 40,
+    borderColor: '#050360',
+    borderWidth: 1,
+    marginBottom: 10,
+    paddingHorizontal: 10,
+    color: '#050360',
+  },
+  contentInput: {
+    height: 150,
+  },
+});
+
 export default MajorPostScreen;