From 2ed1d3f7f8ecccbae5f113072c46c171c81ed165 Mon Sep 17 00:00:00 2001
From: arch-spatula <shkim516@naver.com>
Date: Sun, 8 Jan 2023 23:59:39 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20ManageList=20=EC=BB=B4=ED=8F=AC?=
 =?UTF-8?q?=EB=84=8C=ED=8A=B8=20=EB=B6=84=EB=A6=AC=20#1=20#2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

ManageList를 분리하는 리팩토링 작업을 진행했습니다.
---
 src/components/ManageList.jsx | 65 +++++++++++++++++++++++++++++++++++
 src/components/index.js       |  3 ++
 2 files changed, 68 insertions(+)

diff --git a/src/components/ManageList.jsx b/src/components/ManageList.jsx
index e69de29..15f7e87 100644
--- a/src/components/ManageList.jsx
+++ b/src/components/ManageList.jsx
@@ -0,0 +1,65 @@
+import styled from '@emotion/native';
+import { COLORS } from '../shared/color';
+import { TouchableOpacity } from 'react-native';
+
+const ManageList = ({ pillName, id }) => {
+  return (
+    <ManageListContainer>
+      <ManageListTitle>{pillName}</ManageListTitle>
+      <ButtonGroupContainer>
+        <TextButton
+          // 클릭하면 페이지 이동
+          buttonColor={COLORS.BLACK}
+          buttonText="편집"
+          onPress={() => console.log('편집', id)}
+        />
+        <TextButton
+          // 클릭하면 alert()
+          buttonColor={COLORS.DANGER}
+          buttonText="삭제"
+          onPress={() => console.log('삭제', id)}
+        />
+      </ButtonGroupContainer>
+    </ManageListContainer>
+  );
+};
+
+const TextButton = ({ buttonColor, buttonText, onPress }) => {
+  return (
+    <TouchableOpacity onPress={onPress}>
+      <ManageButton buttonColor={buttonColor}>{buttonText}</ManageButton>
+    </TouchableOpacity>
+  );
+};
+
+const ManageListContainer = styled.View`
+  background-color: white;
+  margin: 8px 16px;
+  padding: 12px 16px;
+  height: 80px;
+  border-radius: 16px;
+  box-shadow: 0px 0px 8px rgba(202, 202, 202, 0.23);
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+`;
+
+const ManageListTitle = styled.Text`
+  font-size: 28px;
+  text-overflow: ellipsis;
+`;
+
+const ButtonGroupContainer = styled.View`
+  flex-direction: row;
+  justify-content: end;
+  gap: 16px;
+`;
+
+const ManageButton = styled.Text`
+  font-size: 20px;
+  line-height: 24px;
+  margin: 0 0 0 16px;
+  color: ${(props) => props.buttonColor};
+`;
+
+export default ManageList;
diff --git a/src/components/index.js b/src/components/index.js
index e69de29..44aeabd 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -0,0 +1,3 @@
+import ManageList from './ManageList';
+
+export { ManageList };