From 8580927563f7ae237d412123530ee5e0e5bb22aa Mon Sep 17 00:00:00 2001
From: soosoo22 <lllllh00@naver.com>
Date: Fri, 27 Dec 2024 13:48:05 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=EB=A6=AC=EB=B7=B0=20=EB=A7=81=ED=81=AC?=
 =?UTF-8?q?=20=EA=B4=80=EB=A6=AC=20=ED=8E=98=EC=9D=B4=EC=A7=80=20=EB=A0=88?=
 =?UTF-8?q?=EC=9D=B4=EC=95=84=EC=9B=83=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ReviewLinkManagementLayout/index.tsx      | 18 +++++++
 .../ReviewLinkManagementLayout/styles.ts      | 48 +++++++++++++++++++
 2 files changed, 66 insertions(+)
 create mode 100644 frontend/src/components/layouts/ReviewLinkManagementLayout/index.tsx
 create mode 100644 frontend/src/components/layouts/ReviewLinkManagementLayout/styles.ts

diff --git a/frontend/src/components/layouts/ReviewLinkManagementLayout/index.tsx b/frontend/src/components/layouts/ReviewLinkManagementLayout/index.tsx
new file mode 100644
index 000000000..885ba0e35
--- /dev/null
+++ b/frontend/src/components/layouts/ReviewLinkManagementLayout/index.tsx
@@ -0,0 +1,18 @@
+import * as S from './styles';
+
+interface ReviewLinkManagementLayoutProps {
+  leftContent: React.ReactNode;
+  rightContent: React.ReactNode;
+}
+
+const ReviewLinkManagementLayout = ({ leftContent, rightContent }: ReviewLinkManagementLayoutProps) => {
+  return (
+    <S.Layout>
+      <S.LeftWrapper>{leftContent}</S.LeftWrapper>
+      <S.Separator />
+      <S.RightWrapper>{rightContent}</S.RightWrapper>
+    </S.Layout>
+  );
+};
+
+export default ReviewLinkManagementLayout;
diff --git a/frontend/src/components/layouts/ReviewLinkManagementLayout/styles.ts b/frontend/src/components/layouts/ReviewLinkManagementLayout/styles.ts
new file mode 100644
index 000000000..db01ad59b
--- /dev/null
+++ b/frontend/src/components/layouts/ReviewLinkManagementLayout/styles.ts
@@ -0,0 +1,48 @@
+import styled from '@emotion/styled';
+
+import media from '@/utils/media';
+
+export const Layout = styled.section`
+  width: 100%;
+
+  display: flex;
+
+  ${media.small} {
+    flex-direction: column;
+
+    padding: 0 3rem;
+  }
+`;
+
+export const LeftWrapper = styled.div`
+  width: 30%;
+
+  padding: 10rem 0;
+
+  ${media.small} {
+    width: 100%;
+  }
+`;
+
+export const Separator = styled.div`
+  width: 0.1rem;
+  min-height: calc(100vh - 13rem); // 전체 영역에서 헤더와 푸터 영역 제외
+
+  background-color: ${({ theme }) => theme.colors.lightGray};
+
+  margin: 0 10rem;
+
+  ${media.small} {
+    display: none;
+  }
+`;
+
+export const RightWrapper = styled.div`
+  width: 70%;
+
+  padding: 10rem 0;
+
+  ${media.small} {
+    width: 100%;
+  }
+`;