diff --git a/src/components/PItem/index.tsx b/src/components/PItem/index.tsx
new file mode 100644
index 0000000..8420639
--- /dev/null
+++ b/src/components/PItem/index.tsx
@@ -0,0 +1,28 @@
+import { HeartButton } from '@/components/HeartButton';
+import * as S from './styles';
+import { Poster } from '@/components/Poster';
+interface PItemProps {
+  id: string;
+  rank: number;
+  title: string;
+  area: string;
+  location: string;
+  period: string;
+  posterUrl: string;
+}
+
+export const PItem = ({ rank, title, location, period, posterUrl, area }: PItemProps) => {
+  return (
+    <S.ItemContainer>
+      <S.Rank>{rank}</S.Rank>
+      {posterUrl && <Poster src={posterUrl} width="90px" rank={rank} />}
+      <S.InfoContainer>
+        <S.Title>{title}</S.Title>
+        <S.Info>{area}</S.Info>
+        <S.Info>{location}</S.Info>
+        <S.Info>{period}</S.Info>
+      </S.InfoContainer>
+      <HeartButton />
+    </S.ItemContainer>
+  );
+};
diff --git a/src/components/PItem/styles.ts b/src/components/PItem/styles.ts
new file mode 100644
index 0000000..b8106a2
--- /dev/null
+++ b/src/components/PItem/styles.ts
@@ -0,0 +1,33 @@
+import { H16, H24, P14 } from '@/components/Text';
+import styled from 'styled-components';
+
+export const ItemContainer = styled.div`
+  display: flex;
+  align-items: center;
+  padding: 16px;
+  border-bottom: 1px solid ${({ theme }) => theme.colors.gray};
+`;
+
+export const Rank = styled(H24)`
+  width: 40px;
+  text-align: center;
+  margin-right: 24px;
+`;
+
+export const InfoContainer = styled.div`
+  display: flex;
+  flex: 1;
+  justify-content: space-between;
+  align-items: center;
+  margin-left: 24px;
+`;
+
+export const Title = styled(H16)`
+  flex: 2;
+`;
+
+export const Info = styled(P14)`
+  flex: 1;
+  text-align: center;
+  color: ${({ theme }) => theme.colors.text_gray};
+`;
diff --git a/src/components/PItemContainer/index.tsx b/src/components/PItemContainer/index.tsx
new file mode 100644
index 0000000..a02f3f4
--- /dev/null
+++ b/src/components/PItemContainer/index.tsx
@@ -0,0 +1,32 @@
+import { Loader } from '@/components/Loader';
+import * as S from './styles';
+import { PItem } from '@/components/PItem';
+import { CommonResponseType } from '@/types/apis';
+
+interface PItemContainerProps {
+  data: Pick<CommonResponseType, 'mt20id' | 'prfnm' | 'fcltynm' | 'prfpdfrom' | 'prfpdto' | 'poster' | 'area'>[];
+  isLoading: boolean;
+}
+
+export const PItemContainer = ({ data, isLoading }: PItemContainerProps) => {
+  if (isLoading) {
+    return <Loader />;
+  }
+
+  return (
+    <S.PItemContainer>
+      {data.map((item, index) => (
+        <PItem
+          key={item.mt20id}
+          rank={index + 1}
+          id={item.mt20id}
+          title={item.prfnm}
+          location={item.fcltynm}
+          period={`${item.prfpdfrom} ~ ${item.prfpdto}`}
+          posterUrl={item.poster}
+          area={item.area}
+        />
+      ))}
+    </S.PItemContainer>
+  );
+};
diff --git a/src/components/PItemContainer/styles.ts b/src/components/PItemContainer/styles.ts
new file mode 100644
index 0000000..8c3b43b
--- /dev/null
+++ b/src/components/PItemContainer/styles.ts
@@ -0,0 +1,6 @@
+import { styled } from 'styled-components';
+
+export const PItemContainer = styled.div`
+  width: 100%;
+  margin: 0 auto;
+`;