From 8773833dedf4117a3c1d6922a9d281d2e584fbf9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=ED=99=8D=EC=84=9C=ED=98=84?=
 <81316050+ghdtjgus76@users.noreply.github.com>
Date: Fri, 28 Jul 2023 00:55:01 +0900
Subject: [PATCH] =?UTF-8?q?feat(ui):=20FriendsList=20=EC=BB=B4=ED=8F=AC?=
 =?UTF-8?q?=EB=84=8C=ED=8A=B8=20=EC=A0=9C=EC=9E=91=20(#55)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../atoms/FriendsList/FriendsList.stories.tsx | 28 +++++++++
 src/components/atoms/FriendsList/index.tsx    | 57 +++++++++++++++++++
 2 files changed, 85 insertions(+)
 create mode 100644 src/components/atoms/FriendsList/FriendsList.stories.tsx
 create mode 100644 src/components/atoms/FriendsList/index.tsx

diff --git a/src/components/atoms/FriendsList/FriendsList.stories.tsx b/src/components/atoms/FriendsList/FriendsList.stories.tsx
new file mode 100644
index 00000000..51eee5f0
--- /dev/null
+++ b/src/components/atoms/FriendsList/FriendsList.stories.tsx
@@ -0,0 +1,28 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { FriendsList } from ".";
+
+const meta: Meta<typeof FriendsList> = {
+  title: 'Atom/FriendsList',
+  component: FriendsList,
+  tags: ['autodocs'],
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const visibleFriendsList: Story = {
+  args: {
+    name: '김수빈',
+    nickName: 'beenie',
+    avatarImgUrl: 'kitty',
+  },
+};
+
+export const invisibleFriendsList: Story = {
+  args: {
+    variant: 'invisible',
+    name: '김수빈',
+    nickName: 'beenie',
+    avatarImgUrl: 'kitty',
+  },
+};
\ No newline at end of file
diff --git a/src/components/atoms/FriendsList/index.tsx b/src/components/atoms/FriendsList/index.tsx
new file mode 100644
index 00000000..0148055b
--- /dev/null
+++ b/src/components/atoms/FriendsList/index.tsx
@@ -0,0 +1,57 @@
+import styled from "@emotion/styled";
+import { theme } from "@styles/theme";
+
+import { Text } from "../Text";
+import { Avatar } from "../Avatar";
+
+import openEyeIconImgUrl from "../../../assets/icons/openEye.svg";
+import closeEyeIconImgUrl from "../../../assets/icons/closeEye.svg";
+import orderingIconImgUrl from "../../../assets/icons/ordering.svg";
+
+type FriendsListVariant = 'visible' | 'invisible';
+
+interface FriendsListProps {
+  variant?: FriendsListVariant;
+  name: string;
+  nickName: string;
+  avatarImgUrl: "kitty" | "monkey";
+  onClick?: () => void;
+}
+
+export const FriendsList = ({ variant = 'visible', name, nickName, avatarImgUrl, onClick }: FriendsListProps) => {
+  return (
+    <Wrapper variant={variant}>
+      <Avatar variant="small" color="purple" imageUrl={`${avatarImgUrl}`} isVisible={`${variant}`} />
+      <NameWrapper>
+        {variant === 'visible' ? <Text children={name} typo='Subhead_16' /> : <Text children={name} typo='Subhead_16' color='gray_400' />}
+        <Text children={'@' + nickName} typo='Caption_12M' color='gray_300' />
+      </NameWrapper>
+      <IconWrapper>
+        {variant === 'visible' ? <img src={openEyeIconImgUrl} /> : <img src={closeEyeIconImgUrl} />}
+        <img src={orderingIconImgUrl} onClick={onClick} />
+      </IconWrapper>
+    </Wrapper>
+  );
+};
+
+const Wrapper = styled.div<{ variant: FriendsListVariant }>`
+  width: 312px;
+  height: 48px;
+  background-color: ${theme.palette.background};
+  display: flex;
+`;
+
+const NameWrapper = styled.div`
+  width: 132px;
+  margin-left: 16px;
+  margin-right: 52px;
+`;
+
+const IconWrapper = styled.div`
+  display: flex;
+  width: 64px;
+  height: 24px;
+  margin: auto 0;
+  gap: 16px;
+  justify-content: space-between;
+`;
\ No newline at end of file