From 983e79f34b8102ec4fe3db988592aa9198bc342e Mon Sep 17 00:00:00 2001
From: miikii41 <130055803+miikii41@users.noreply.github.com>
Date: Tue, 17 Dec 2024 23:14:02 +0900
Subject: [PATCH] Update ChatDetail.tsx

---
 src/components/Chat/ChatDetail.tsx | 239 ++++++++++++++++++++++-------
 1 file changed, 183 insertions(+), 56 deletions(-)

diff --git a/src/components/Chat/ChatDetail.tsx b/src/components/Chat/ChatDetail.tsx
index bc906b7..c33c720 100644
--- a/src/components/Chat/ChatDetail.tsx
+++ b/src/components/Chat/ChatDetail.tsx
@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { View, Text, TextInput, StyleSheet, TouchableOpacity, FlatList, Image } from 'react-native';
+import { View, Text, TextInput, StyleSheet, TouchableOpacity, FlatList, Image, ScrollView, ActivityIndicator } from 'react-native';
 import { useNavigation } from '@react-navigation/native';
 
 const ChatDetail = ({ route }) => {
@@ -7,21 +7,46 @@ const ChatDetail = ({ route }) => {
   const navigation = useNavigation();
 
   const [messages, setMessages] = useState([
-    { id: '1', text: '간단한 제안서의 내용', user: 'me', expanded: true },
+    { id: '1', text: 'Dora의 요청서 확인', user: 'Dora', isRequest: true, expanded: false },
+    { id: '2', text: '간단한 제안서의 내용', user: 'me', isRequest: false },
   ]);
   const [input, setInput] = useState('');
+  const [loading, setLoading] = useState(false); // 로딩 상태
+  const [aiRecommendations, setAiRecommendations] = useState([]); // AI 추천 이미지 상태
+  const [selectedImage, setSelectedImage] = useState(null); // 선택된 이미지
+
+  // AI 추천 로딩 함수
+  const handleShowRecommendations = () => {
+    setLoading(true); // 로딩 시작
+    setAiRecommendations([]); // 이전 데이터 초기a화
+    setSelectedImage(null); // 선택 초기화
+
+    setTimeout(() => {
+      setLoading(false); // 로딩 종료
+      setAiRecommendations([
+        { id: 1, source: require('../../assets/StyleResult/ai1.jpg') },
+        { id: 2, source: require('../../assets/StyleResult/ai2.jpg') },
+        { id: 3, source: require('../../assets/StyleResult/ai3.jpg') },
+      ]); // 가라 AI 추천 이미지 설정
+    }, 5000); // 5초 로딩
+  };
+
+  // 이미지 클릭 핸들러
+  const handleImageClick = (imageId) => {
+    setSelectedImage(imageId);
+  };
 
   // 메시지 전송 함수
   const sendMessage = () => {
     if (input.trim()) {
-      const newMessage = { id: Date.now().toString(), text: input, user: 'me', expanded: false };
+      const newMessage = { id: Date.now().toString(), text: input, user: 'me', isRequest: false };
       setMessages((prevMessages) => [...prevMessages, newMessage]);
       setInput('');
     }
   };
 
-  // "자세히 보기" 클릭 이벤트
-  const toggleMessageDetails = (id) => {
+  // 요청서 클릭 이벤트
+  const toggleRequestDetails = (id) => {
     setMessages((prevMessages) =>
       prevMessages.map((msg) =>
         msg.id === id ? { ...msg, expanded: !msg.expanded } : msg
@@ -35,75 +60,120 @@ const ChatDetail = ({ route }) => {
     return (
       <View style={[styles.message, isMyMessage ? styles.myMessage : styles.otherMessage]}>
         <Text style={styles.messageText}>{item.text}</Text>
-        {/* "간단한 제안서의 내용"일 때만 "자세히 보기"와 확장 내용 표시 */}
-        {item.text === '간단한 제안서의 내용' && !item.expanded && (
-          <TouchableOpacity
-            style={styles.detailButton}
-            onPress={() => toggleMessageDetails(item.id)}
-          >
-            <Text style={styles.detailButtonText}>자세히 보기</Text>
-          </TouchableOpacity>
-        )}
-        {item.text === '간단한 제안서의 내용' && item.expanded && (
-          <View style={styles.expandedContent}>
-            <Text style={styles.detailText}>Setter's Pick</Text>
-            <Image
-              source={require('../../assets/StyleResult/Casual.jpg')}
-              style={styles.image}
-            />
-          </View>
+        {/* 요청서 메시지일 경우 */}
+        {item.isRequest && (
+          <>
+            {!item.expanded && (
+              <TouchableOpacity
+                style={styles.detailButton}
+                onPress={() => toggleRequestDetails(item.id)}
+              >
+                <Text style={styles.detailButtonText}>자세히 보기</Text>
+              </TouchableOpacity>
+            )}
+            {item.expanded && (
+              <View style={styles.expandedContent}>
+                <Image
+                  source={require('../../assets/StyleResult/img.png')}
+                  style={styles.image}
+                />
+                <Text style={styles.detailText}>장소: 학교</Text>
+                <Text style={styles.detailText}>계절: winter</Text>
+                <Text style={styles.detailText}>날씨: 눈</Text>
+                <Text style={styles.detailText}>스타일: 비즈니스</Text>
+                <Text style={styles.detailText}>동행: 비즈니스</Text>
+                <View style={styles.separator} />
+                <Text style={styles.detailText}>체형: apple</Text>
+                <Text style={styles.detailText}>컴플렉스: 하체비만</Text>
+                {/* "가장 많이 매칭된 코디 보러가기" 버튼 */}
+                <TouchableOpacity style={styles.recommendationButton} onPress={handleShowRecommendations}>
+                  <Text style={styles.recommendationButtonText}>가장 많이 매칭된 코디 보러가기</Text>
+                </TouchableOpacity>
+              </View>
+            )}
+          </>
         )}
       </View>
     );
   };
 
+
   return (
     <View style={styles.container}>
-      {/* 헤더 */}
       <View style={styles.header}>
-        <Text style={styles.headerText}>{chatId}님의 제안서</Text>
+        <Text style={styles.headerText}>{chatId}님의 채팅</Text>
       </View>
 
       {/* 메시지 리스트 */}
-      <FlatList
-        data={messages}
-        keyExtractor={(item) => item.id}
-        renderItem={renderMessage}
-        contentContainerStyle={styles.messages}
-      />
+      <ScrollView contentContainerStyle={styles.messages}>
+        {messages.map((item) => (
+          <View key={item.id}>{renderMessage({ item })}</View>
+        ))}
+      </ScrollView>
+
+      {/* AI 추천 결과 (오른쪽 채팅 스타일) */}
+      {loading && (
+        <View style={styles.loadingContainer}>
+          <ActivityIndicator size="large" color="#FF6FAF" />
+          <Text style={styles.loadingText}>AI 추천 결과를 분석 중입니다...</Text>
+        </View>
+      )}
+      {!loading && aiRecommendations.length > 0 && (
+        <ScrollView horizontal contentContainerStyle={styles.recommendationContainer}>
+          {aiRecommendations.map((image) => (
+            <TouchableOpacity
+              key={image.id}
+              onPress={() => handleImageClick(image.id)}
+              style={[
+                styles.recommendationImageWrapper,
+                selectedImage === image.id && styles.selectedImageWrapper,
+              ]}
+            >
+              <Image source={image.source} style={styles.recommendationImage} />
+            </TouchableOpacity>
+          ))}
+        </ScrollView>
+      )}
 
       {/* 입력창 */}
       <View style={styles.inputContainer}>
 
         <TouchableOpacity
         onPress={() => navigation.navigate('DoraCloset')} >
-
-
-
-
           <Image
             source={require('../../assets/Closet/hanger.png')}
             style={styles.hangerImage}
           />
-
-         </TouchableOpacity>
+        </TouchableOpacity>
         <TextInput
           style={styles.input}
           value={input}
           onChangeText={setInput}
-          placeholder="Type your message"
+          placeholder="메시지를 입력하세요"
           placeholderTextColor="#aaa"
         />
-
-
         <TouchableOpacity style={styles.sendButton} onPress={sendMessage}>
           <Text style={styles.sendButtonText}>전송</Text>
         </TouchableOpacity>
+
       </View>
+
+
+<View style={styles.mainButtonWrapper}>
+  <TouchableOpacity
+    style={styles.mainButton}
+    onPress={() => navigation.navigate('SetterMainPage')}>
+    <Text style={styles.mainButtonText}>메인 화면 가기</Text>
+  </TouchableOpacity>
+</View>
     </View>
   );
 };
 
+
+
+
+
 const styles = StyleSheet.create({
   container: {
     flex: 1,
@@ -111,16 +181,15 @@ const styles = StyleSheet.create({
   },
   header: {
     padding: 15,
-    backgroundColor: '#FF6FAF',
+    backgroundColor: '#FFDDE3', // 연핑크
     alignItems: 'center',
   },
   headerText: {
     fontSize: 18,
     fontWeight: 'bold',
-    color: '#fff',
+    color: '#333',
   },
   messages: {
-    flexGrow: 1,
     paddingHorizontal: 16,
     paddingVertical: 10,
   },
@@ -129,15 +198,16 @@ const styles = StyleSheet.create({
     marginVertical: 5,
     borderRadius: 8,
     maxWidth: '70%',
-    backgroundColor: '#fff',
-    borderColor: '#ccc',
+    borderColor: '#FFB6C1',
     borderWidth: 1,
   },
   myMessage: {
     alignSelf: 'flex-end',
+    backgroundColor: '#FFE4E9',
   },
   otherMessage: {
     alignSelf: 'flex-start',
+    backgroundColor: '#f0f0f0',
   },
   messageText: {
     fontSize: 16,
@@ -153,20 +223,67 @@ const styles = StyleSheet.create({
   },
   expandedContent: {
     marginTop: 10,
+    paddingTop: 10,
     borderTopWidth: 1,
     borderTopColor: '#ccc',
-    paddingTop: 10,
   },
   detailText: {
     fontSize: 14,
     color: '#555',
-    marginBottom: 10,
+    marginBottom: 5,
   },
   image: {
-    width: 200,
-    height: 200,
+    width: '80%',
+    height: undefined,
+    aspectRatio: 4 / 3,
+    resizeMode: 'contain',
+    marginBottom: 10,
+    alignSelf: 'center',
+  },
+  separator: {
+    marginVertical: 10,
+    height: 1,
+    backgroundColor: '#ddd',
+  },
+  recommendationButton: {
+    marginTop: 10,
+    backgroundColor: '#FFDDE3',
+    padding: 10,
+    borderRadius: 8,
+    alignItems: 'center',
+  },
+  recommendationButtonText: {
+    color: '#333',
+    fontWeight: 'bold',
+  },
+  loadingContainer: {
+    alignItems: 'center',
+    marginVertical: 20,
+  },
+  loadingText: {
+    marginTop: 10,
+    fontSize: 16,
+    color: '#555',
+  },
+  recommendationContainer: {
+    paddingHorizontal: 16,
+    paddingVertical: 10,
+    flexDirection: 'row',
+  },
+  recommendationImageWrapper: {
+    marginRight: 10,
+    borderRadius: 8,
+    borderWidth: 2,
+    borderColor: 'transparent',
+  },
+  selectedImageWrapper: {
+    borderColor: '#FF6FAF', // 선택된 이미지 강조 색상
+  },
+  recommendationImage: {
+    width: 100,
+    height: 100,
     resizeMode: 'cover',
-    borderRadius: 10,
+    borderRadius: 8,
   },
   inputContainer: {
     flexDirection: 'row',
@@ -183,26 +300,36 @@ const styles = StyleSheet.create({
     padding: 10,
     fontSize: 16,
     marginRight: 10,
-    color: '#333',
   },
   sendButton: {
-    backgroundColor: '#FF6FAF',
+    backgroundColor: '#FFDDE3',
     borderRadius: 8,
     paddingVertical: 10,
     paddingHorizontal: 20,
-    justifyContent: 'center',
-    alignItems: 'center',
   },
   sendButtonText: {
-    color: '#fff',
+    color: '#333',
     fontSize: 16,
     fontWeight: 'bold',
   },
   hangerImage: {
     width: 51,
     height: 27,
-    marginRight:10,
+    marginRight: 10,
+  },
+  mainButton: {
+    backgroundColor: '#FFDDE3',
+    padding: 10,
+    borderRadius: 8,
+    alignItems: 'center',
+    marginBottom: 10,
+    marginHorizontal: 10,
+  },
+  mainButtonText: {
+    color: '#333',
+    fontSize: 16,
+    fontWeight: 'bold',
   },
 });
 
-export default ChatDetail;
+export default ChatDetail;
\ No newline at end of file