diff --git a/src/components/PosterWithButtons/index.tsx b/src/components/PosterWithButtons/index.tsx
new file mode 100644
index 0000000..b1e8d67
--- /dev/null
+++ b/src/components/PosterWithButtons/index.tsx
@@ -0,0 +1,34 @@
+import { Poster } from '@/components/Poster';
+import { ShareButton } from '@/components/ShareButton';
+import { HeartButton } from '@/components/HeartButton';
+import * as S from './styles';
+import { useState } from 'react';
+
+interface PosterWithButtonsProps {
+  src: string;
+  url: string;
+  initialIsFilled?: boolean;
+  width?: number;
+}
+
+export const PosterWithButtons = ({ src, url, initialIsFilled = false, width = 20 }: PosterWithButtonsProps) => {
+  const [isFilled, setIsFilled] = useState(initialIsFilled);
+  console.log('Poster:', src);
+
+  const onClickHeart = () => {
+    setIsFilled(prev => !prev);
+  };
+
+  return (
+    <S.PosterWithButtons width={width}>
+      <Poster src={src} width="100%" />
+      <S.PosterButtonContainer>
+        <S.HeartBtnWithText>
+          <HeartButton initialFilled={isFilled} onClickHeartButton={onClickHeart} />
+          <p>찜하기</p>
+        </S.HeartBtnWithText>
+        <ShareButton url={url} />
+      </S.PosterButtonContainer>
+    </S.PosterWithButtons>
+  );
+};
diff --git a/src/components/PosterWithButtons/styles.ts b/src/components/PosterWithButtons/styles.ts
new file mode 100644
index 0000000..2b7bc94
--- /dev/null
+++ b/src/components/PosterWithButtons/styles.ts
@@ -0,0 +1,22 @@
+import { styled } from 'styled-components';
+
+export const PosterWithButtons = styled.div<{ width: number }>`
+  width: ${({ width }) => width}%;
+`;
+
+export const PosterButtonContainer = styled.div`
+  display: flex;
+  justify-content: space-between;
+  padding: 10px 5px;
+`;
+
+export const HeartBtnWithText = styled.div`
+  display: flex;
+  justify-content: space-between;
+  gap: 2px;
+
+  &:hover {
+    transform: scale(1.1);
+    color: ${({ theme }) => theme.colors.primary};
+  }
+`;