feat: 공연 어드민 홈 마크업 추가

apps/admin/src/App.tsx

@@ -39,8 +39,6 @@ const router = createBrowserRouter([
 ]);
 
 const App = () => {
-  // const { data } = useHelloQuery();
-  // console.log(data?.hello)
   return (
     <QueryClientProvider>
       <BooltiUIProvider>

apps/admin/src/components/AccountInfo/AccountInfo.styles.ts

@@ -0,0 +1,45 @@
+import styled from '@emotion/styled';
+
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: start;
+  justify-content: center;
+  border-radius: 8px;
+  background-color: ${({ theme }) => theme.palette.grey.g10};
+  padding: 28px 32px;
+`;
+
+const Title = styled.p`
+  ${({ theme }) => theme.typo.h1};
+  color: ${({ theme }) => theme.palette.grey.g90};
+  margin-bottom: 4px;
+`;
+
+const Description = styled.span`
+  ${({ theme }) => theme.typo.b3};
+  color: ${({ theme }) => theme.palette.grey.g70};
+  margin-bottom: 24px;
+`;
+
+const AccountText = styled.span`
+  ${({ theme }) => theme.typo.sh2};
+  color: ${({ theme }) => theme.palette.grey.g90};
+  margin-right: 8px;
+  &:last-of-type {
+    margin-right: 16px;
+  }
+`;
+
+const AccountContainer = styled.div`
+  display: flex;
+  align-items: center;
+`;
+
+export default {
+  Container,
+  Title,
+  Description,
+  AccountText,
+  AccountContainer,
+};

apps/admin/src/components/AccountInfo/index.tsx

@@ -0,0 +1,27 @@
+import { Button } from '@boolti/ui';
+import Styled from './AccountInfo.styles';
+
+interface Props {
+  orgName?: string;
+  accountNumber?: string;
+  accountHolder?: string;
+}
+
+const AccountInfo = ({ orgName, accountHolder, accountNumber }: Props) => {
+  return (
+    <Styled.Container>
+      <Styled.Title>정산 계좌 정보</Styled.Title>
+      <Styled.Description>빠른 정산을 위해서는 정확한 계좌 정보가 필요해요.</Styled.Description>
+      <Styled.AccountContainer>
+        {orgName && <Styled.AccountText>{orgName}</Styled.AccountText>}
+        {accountNumber && <Styled.AccountText>{accountNumber}</Styled.AccountText>}
+        {accountHolder && <Styled.AccountText>{accountHolder}</Styled.AccountText>}
+        <Button type="button" colorTheme="netural" size="regular">
+          {accountNumber ? '변경하기' : '입력하기'}
+        </Button>
+      </Styled.AccountContainer>
+    </Styled.Container>
+  );
+};
+
+export default AccountInfo;

apps/admin/src/components/Layout/Layout.styles.ts

@@ -10,7 +10,7 @@ const HeaderContainer = styled.div`
 `;
 
 const Header = styled.header`
-  width: ${({ theme }) => theme.breakpoint.desktop};
+  max-width: ${({ theme }) => theme.breakpoint.desktop};
   margin: 0 auto;
   padding: 0 20px;
 `;

apps/admin/src/components/ShowList/ShowList.styles.ts

@@ -0,0 +1,26 @@
+import styled from '@emotion/styled';
+
+const Container = styled.div``;
+
+const List = styled.ol`
+  list-style: none;
+`;
+
+const Header = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 24px;
+`;
+
+const HeaderText = styled.h2`
+  ${({ theme }) => theme.typo.h2};
+  color: ${({ theme }) => theme.palette.grey.g90};
+`;
+
+export default {
+  Container,
+  List,
+  Header,
+  HeaderText,
+};

apps/admin/src/components/ShowList/index.tsx

@@ -0,0 +1,33 @@
+import { Button } from '@boolti/ui';
+import Styled from './ShowList.styles';
+import { PlusIcon } from '@boolti/icon';
+import ShowListItem from '../ShowListItem';
+
+interface Props {
+  shows: React.ComponentProps<typeof ShowListItem>[];
+}
+
+const ShowList = ({ shows }: Props) => {
+  const isEmpty = shows.length === 0;
+  return (
+    <Styled.Container>
+      <Styled.Header>
+        <Styled.HeaderText>등록한 공연</Styled.HeaderText>
+        <Button type="button" colorTheme="primary" size="bold" icon={<PlusIcon size={20} />}>
+          공연 등록하기
+        </Button>
+      </Styled.Header>
+      {isEmpty ? (
+        <ShowListItem isEmpty thumbnailPath="" title="" date="" host="" />
+      ) : (
+        <Styled.List>
+          {shows.map((show, index) => (
+            <ShowListItem key={index} {...show} />
+          ))}
+        </Styled.List>
+      )}
+    </Styled.Container>
+  );
+};
+
+export default ShowList;

apps/admin/src/components/ShowListItem/ShowListItem.styles.ts

@@ -0,0 +1,97 @@
+import styled from '@emotion/styled';
+
+const Container = styled.li`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 8px;
+  min-height: 240px;
+  border: 1px solid ${({ theme }) => theme.palette.grey.g20};
+  background-color: ${({ theme }) => theme.palette.grey.w};
+  box-shadow: 0px 8px 14px 0px rgba(136, 141, 157, 0.15);
+  padding: 28px 32px;
+  &:not(:last-of-type) {
+    margin-bottom: 24px;
+  }
+`;
+
+const Button = styled.button`
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+`;
+
+const EmptyText = styled.p`
+  ${({ theme }) => theme.typo.b4};
+  color: ${({ theme }) => theme.palette.grey.g40};
+`;
+
+const Poster = styled.div<{ thumbnailPath: string }>`
+  width: 130px;
+  height: 184px;
+  border: 1px solid ${({ theme }) => theme.palette.grey.g20};
+  background-image: url(${({ thumbnailPath }) => thumbnailPath});
+  background-position: center;
+  margin-right: 28px;
+  border-radius: 6px;
+`;
+
+const TextContainer = styled.div`
+  flex: 1;
+  height: 184px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+`;
+
+const Title = styled.h2`
+  margin-right: 8px;
+  ${({ theme }) => theme.typo.h2_m};
+  color: ${({ theme }) => theme.palette.grey.g90};
+`;
+
+const TitleContainer = styled.div`
+  display: flex;
+`;
+
+const InfoContainer = styled.div``;
+
+const InfoColumn = styled.div`
+  &:not(:last-of-type) {
+    margin-bottom: 4px;
+  }
+`;
+
+const InfoText = styled.span<{ isLabel?: boolean }>`
+  display: inline-block;
+  min-width: 92px;
+  margin-right: 16px;
+  ${({ theme }) => theme.typo.b3};
+  color: ${({ isLabel, theme }) => (isLabel ? theme.palette.grey.g60 : theme.palette.grey.g90)};
+`;
+
+const IconContainer = styled.div`
+  width: 36px;
+  height: 36px;
+  color: ${({ theme }) => theme.palette.grey.g60};
+  & > svg {
+    width: 36px;
+    height: 36px;
+  }
+`;
+
+export default {
+  Container,
+  EmptyText,
+  Poster,
+  Button,
+  TextContainer,
+  Title,
+  InfoContainer,
+  InfoColumn,
+  InfoText,
+  IconContainer,
+  TitleContainer,
+};

apps/admin/src/components/ShowListItem/index.tsx

@@ -0,0 +1,52 @@
+import { Badge } from '@boolti/ui';
+import Styled from './ShowListItem.styles';
+import { ChevronRightIcon } from '@boolti/icon';
+
+interface Props {
+  isEmpty?: boolean;
+  thumbnailPath: string;
+  title: string;
+  date: string;
+  host: string;
+}
+
+const ShowListItem = ({ isEmpty, thumbnailPath, title, date, host }: Props) => {
+  return (
+    <Styled.Container as={isEmpty ? 'div' : 'li'}>
+      {isEmpty ? (
+        <Styled.EmptyText>아직 등록한 공연이 없어요.</Styled.EmptyText>
+      ) : (
+        <Styled.Button>
+          <Styled.Poster thumbnailPath={thumbnailPath} />
+          <Styled.TextContainer>
+            <Styled.TitleContainer>
+              <Styled.Title>{title}</Styled.Title>
+              <Badge colorTheme="red">공연 당일</Badge>
+            </Styled.TitleContainer>
+            <Styled.InfoContainer>
+              <Styled.InfoColumn>
+                <Styled.InfoText isLabel>호스트</Styled.InfoText>
+                <Styled.InfoText>{host}</Styled.InfoText>
+              </Styled.InfoColumn>
+              <Styled.InfoColumn>
+                <Styled.InfoText isLabel>공연일시</Styled.InfoText>
+                <Styled.InfoText>{date}</Styled.InfoText>
+              </Styled.InfoColumn>
+              <Styled.InfoColumn>
+                <Styled.InfoText isLabel>티켓 판매 기간</Styled.InfoText>
+                <Styled.InfoText>
+                  {date} ~ {date}
+                </Styled.InfoText>
+              </Styled.InfoColumn>
+            </Styled.InfoContainer>
+          </Styled.TextContainer>
+          <Styled.IconContainer>
+            <ChevronRightIcon size={24} />
+          </Styled.IconContainer>
+        </Styled.Button>
+      )}
+    </Styled.Container>
+  );
+};
+
+export default ShowListItem;

apps/admin/src/components/UserProfile/UserProfile.styles.ts

@@ -0,0 +1,34 @@
+import styled from '@emotion/styled';
+
+const Container = styled.div`
+  display: flex;
+  align-items: center;
+`;
+
+const ProfileImage = styled.img`
+  border-radius: 100%;
+  background-color: ${({ theme }) => theme.palette.grey.g90};
+`;
+
+const TextContainer = styled.div`
+  margin-left: 16px;
+`;
+
+const Username = styled.p`
+  ${({ theme }) => theme.typo.sh2};
+  color: ${({ theme }) => theme.palette.grey.g90};
+  margin-bottom: 6px;
+`;
+
+const Email = styled.span`
+  ${({ theme }) => theme.typo.b3};
+  color: ${({ theme }) => theme.palette.grey.g70};
+`;
+
+export default {
+  Container,
+  ProfileImage,
+  TextContainer,
+  Username,
+  Email,
+};

apps/admin/src/components/UserProfile/index.tsx

@@ -0,0 +1,21 @@
+import Styled from './UserProfile.styles';
+
+interface Props {
+  profileImage: string;
+  username: string;
+  email: string;
+}
+
+const UserProfile = ({ profileImage, username, email }: Props) => {
+  return (
+    <Styled.Container>
+      <Styled.ProfileImage width={68} height={68} alt="" src={profileImage} />
+      <Styled.TextContainer>
+        <Styled.Username>{username}</Styled.Username>
+        <Styled.Email>{email}</Styled.Email>
+      </Styled.TextContainer>
+    </Styled.Container>
+  );
+};
+
+export default UserProfile;

apps/admin/src/pages/HomePage/HomePage.styles.ts

@@ -19,10 +19,18 @@ const LogoutLink = styled(Link)`
   color: ${({ theme }) => theme.palette.grey.g90};
 `;
 
-const HomePage = styled.div``;
+const Seperator = styled.hr<{ size: number }>`
+  height: ${({ size }) => size}px;
+`;
+
+const Container = styled.main`
+  min-height: calc(100vh - 68px - 274px);
+  padding: 60px 20px 0;
+`;
 
 export default {
   Logo,
   LogoutLink,
-  HomePage,
+  Container,
+  Seperator,
 };