페이지 디자인 수정

src/components/NewPost.js

@@ -2,105 +2,162 @@ import React, { useState } from "react";
 import { View, Text, StyleSheet, TextInput, TouchableOpacity, Image } from "react-native";
 import {launchCamera, launchImageLibrary, CameraOptions, ImagePickerResponse, ImageLibraryOptions, Asset} from 'react-native-image-picker';
 import axios from "axios";
+import PhotoUploadIcon from '../assets/images/svg/PhotoUploadIcon.svg';
 
 const NewPost = () => {
+  const [photo, setPhoto] = useState(null);
+  const [text, setText] = useState('');
+  const userId = 'user1';
 
-    const [photo, setPhoto] = useState(null);
-    const [text, setText] = useState('');
-    const userId = 'user1';
+  const onSelectImage = () => {
+    launchImageLibrary(
+      {
+        mediaType: 'photo',
+        maxWidth: 512,
+        maxHeight: 512,
+        includeBase64: Platform.OS === 'android',
+      },
+      (res) => {
+        console.log(res);
+        if (res.didCancel) return;
+        setPhoto(res);
+      }
+    );
+  };
+  const handleUploadPhoto = () => {
+    const formData = new FormData();
 
-    const onSelectImage = () => {
-        launchImageLibrary(
-            {
-                mediaType: "photo",
-                maxWidth: 512,
-                maxHeight: 512,
-                includeBase64: Platform.OS === 'android',
-            },
-            (res) => {
-                console.log(res);
-                if (res.didCancel) return;
-                setPhoto(res);
-            },
-        )
-    }
-    const handleUploadPhoto = () => {
-        const formData = new FormData();
+    formData.append('img', {
+      name: photo.assets[0].fileName,
+      type: photo.assets[0].type,
+      uri: photo.assets[0].uri,
+    });
 
-        formData.append("img", {
-            name: photo.assets[0].fileName,
-            type: photo.assets[0].type,
-            uri: photo.assets[0].uri,
-        });
+    formData.append('writeTxt', text);
 
-        formData.append('writeTxt', text);
+    axios
+      .post(`http://52.79.97.196:8080/photobook/write/${userId}`, formData, {
+        headers: {
+          'Content-Type': 'multipart/form-data',
+        },
+      })
+      .then((response) => {
+        console.log('upload success', response);
+        alert('Upload success!');
+        setPhoto(null);
+        setText('');
+      })
+      .catch((error) => {
+        console.log('upload error', error);
+        alert('Upload failed!');
+      });
+  };
 
-        axios.post(`http://52.79.97.196:8080/photobook/write/${userId}`, formData, {
-            headers: {
-                'Content-Type': 'multipart/form-data'
-            }
-        })
-            .then(response => {
-                console.log("upload success", response);
-                alert("Upload success!");
-                setPhoto(null);
-                setText('');
-            })
-            .catch(error => {
-                console.log("upload error", error);
-                alert("Upload failed!");
-            });
-    };
-    return (
-        <View style={styles.container}>
-            {photo && (
-                <Image
-                    source={{uri: photo?.assets[0]?.uri}}
-                    style={{ width: 300, height: 300 }}
-                />
-            )}
-            <TouchableOpacity style={styles.button} onPress={onSelectImage}>
-                <Text style={styles.buttonText}>Choose Photo</Text>
-            </TouchableOpacity>
-            <TextInput
-                style={styles.input}
-                placeholder="Write a caption..."
-                onChangeText={text => setText(text)}
-                value={text}
-            />
-            <TouchableOpacity style={styles.button} onPress={handleUploadPhoto}>
-                <Text style={styles.buttonText}>Upload Photo</Text>
-            </TouchableOpacity>
-        </View>
-    );
+  return (
+    <View style={styles.container}>
+      {photo && (
+        <Image source={{ uri: photo?.assets[0]?.uri }} style={styles.photo} />
+      )}
+      {!photo && (
+        <TouchableOpacity style={styles.selectPhotoButton} onPress={onSelectImage}>
+          <PhotoUploadIcon style={styles.photoUploadIcon}/>
+          <Text style={styles.selectPhotoButtonText}>터치해서 사진을 선택해주세요!</Text>
+        </TouchableOpacity>
+      )}
+        <TextInput
+            style={styles.input}
+            placeholder="사진에 대한 설명을 해주세요!"
+            multiline={true}
+            onChangeText={(text) => setText(text)}
+            value={text}
+        />
+        <TouchableOpacity style={styles.button} onPress={handleUploadPhoto}>
+          <Text style={styles.buttonText}>업로드</Text>
+        </TouchableOpacity>
+    </View>
+  );
 };
 
 const styles = StyleSheet.create({
-    container: {
-        flex: 1,
-        justifyContent: 'center',
-        alignItems: 'center',
-        backgroundColor: '#F5FCFF',
-    },
-    button: {
-        backgroundColor: '#ff6200',
-        padding: 10,
-        borderRadius: 5,
-        alignItems: 'center',
-        marginTop: 10,
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    // backgroundColor: '#F5FCFF',
+  },
+  photo: {
+    width: 300,
+    height: 300,
+    borderRadius: 30,
+  },
+  selectPhotoButton: {
+    flexDirecion: 'row',
+    justifyContent: 'center',
+    alignItems: 'center',
+    width: 300,
+    height: 300,
+    borderRadius: 30,
+    backgroundColor: 'white',
+    shadowColor: '#000',
+    shadowOffset: {
+      width: 0,
+      height: 2,
     },
-    buttonText: {
-        color: '#fff',
-        fontSize: 16,
+    shadowOpacity: 0.25,
+    shadowRadius: 3.84,
+    elevation: 5,
+  },
+  photoUploadIcon: {
+    width: 50,
+    height: 50,
+    fill: 'gray',
+    marginBottom: 30,
+  },
+  selectPhotoButtonText: {
+    fontSize: 18,
+    fontWeight: '600',
+    color: 'gray'
+  },
+  input: {
+    width: '90%',
+    height: 150,
+    borderRadius: 15,
+    marginTop: 30,
+    paddingHorizontal: 15,
+    paddingVertical: 5,
+    backgroundColor: '#FFF',
+    shadowColor: '#000',
+    shadowOffset: {
+      width: 0,
+      height: 2,
     },
-    input: {
-        height: 50,
-        width: 300,
-        borderColor: '#ddd',
-        borderWidth: 1,
-        marginTop: 10,
-        padding: 10,
+    shadowOpacity: 0.25,
+    shadowRadius: 3.84,
+    elevation: 5,
+  },
+  button: {
+    width: 85,
+    backgroundColor: '#F7B599',
+    paddingHorizontal: 10,
+    paddingVertical: 7,
+    borderRadius: 10,
+    alignItems: 'center',
+    marginTop: 30,
+
+    shadowColor: '#000', // 그림자 색상
+    shadowOffset: {
+      width: 0, // 좌우 그림자 위치
+      height: 2, // 상하 그림자 위치
     },
+    shadowOpacity: 0.25, // 그림자 투명도
+    shadowRadius: 3.84, // 그림자 반경
+
+    elevation: 3, // Android에만 적용되는 그림자 깊이
+  },
+  buttonText: {
+    color: '#fff',
+    fontSize: 14,
+  },
 });
 
-export default NewPost;
+export default NewPost;

src/page/AlbumDedetailPage.js

@@ -163,15 +163,15 @@ const styles = StyleSheet.create({
     height: 40,
     borderWidth: 1,
     borderColor: '#ccc',
-    borderRadius: 4,
+    borderRadius: 10,
     paddingHorizontal: 10,
     marginRight: 10,
   },
   commentButton: {
     backgroundColor: '#F7B599',
     paddingHorizontal: 15,
     paddingVertical: 8,
-    borderRadius: 4,
+    borderRadius: 10,
   },
   commentButtonText: {
     color: 'white',