From 71b00fe7c855770a30a7f9de95bb20c1cd2a078f Mon Sep 17 00:00:00 2001
From: khw2002 <hannahkhw@snu.ac.kr>
Date: Mon, 30 Sep 2024 17:53:55 +0900
Subject: [PATCH] #115 feat : make InfoPage UI

---
 src/components/Home/Market/InfoPage.tsx | 59 ++++++++++++++++++-------
 1 file changed, 42 insertions(+), 17 deletions(-)

diff --git a/src/components/Home/Market/InfoPage.tsx b/src/components/Home/Market/InfoPage.tsx
index 0651445..f4ece29 100644
--- a/src/components/Home/Market/InfoPage.tsx
+++ b/src/components/Home/Market/InfoPage.tsx
@@ -1,42 +1,67 @@
-import { useState, useEffect } from 'react';
-import { View, SafeAreaView, FlatList, Text } from 'react-native';
+import { View, StyleSheet } from 'react-native';
 import { Tabs } from 'react-native-collapsible-tab-view';
 import styled from 'styled-components/native';
 import { Body14R, Body16B } from '../../../styles/GlobalText';
 
-
 const InfoPage = () => {
   const data = [
-    { label: '학교/학과', data: '업씨대학교 패션디자인학과'},
-    { label: '실력/경력', data: '한국패션디자인공모전 동상\n업씨패션회사 인턴 6개월'}, 
-    { label: '특수소재', data: '비즈, 퍼'},
-    { label: '주요 활동지역', data: '서울 서대문구'},
-    { label: '포트폴리오', data: ''}
-  ]
+    {
+      label: '소개글',
+      data: '안녕하세요 데님 전문 리폼러 하느리퐁퐁입니다!\n 어쩌구 저쩌구',
+    },
+    { label: '오픈채팅 링크', data: 'https://www.naver.com' },
+    { label: '주요 활동지역', data: '서울 서대문구' },
+    {
+      label: '경력',
+      data: [
+        '업씨대학교 패션디자인학과 졸업',
+        '한국패션디자인공모전 동상',
+        '업씨패션회사 인턴 6개월',
+      ],
+    },
+  ];
 
   return (
     <Tabs.FlatList
       data={data}
-      renderItem={({item}:any) => {
+      renderItem={({ item }: any) => {
         return (
           <InfoSection>
             <Body16B>{item.label}</Body16B>
-            <Body14R style={{textAlign: 'right'}}>{item.data}</Body14R>
+            {item.label === '경력' ? (
+              // item.data가 list인 경우
+              <View style={styles.flexColumn}>
+                {item.data.map((itemData: string, index: number) => (
+                  <Body14R key={index}>{itemData}</Body14R>
+                ))}
+              </View>
+            ) : (
+              <Body14R style={{ textAlign: 'right' }}>{item.data}</Body14R>
+            )}
           </InfoSection>
-        )
+        );
       }}
       keyExtractor={(item, index) => index.toString()}
     />
-  )
-}
+  );
+};
+
+const styles = StyleSheet.create({
+  flexColumn: {
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'flex-end',
+  },
+});
 
 const InfoSection = styled.View`
   display: flex;
   flex-direction: row;
   justify-content: space-between;
+  align-items: flex-start;
   padding: 16px;
   border-bottom-width: 1px;
-  border-color: #DFDFDF;
-`
+  border-color: #dfdfdf;
+`;
 
-export default InfoPage;
\ No newline at end of file
+export default InfoPage;