diff --git a/frontend/src/components/common/Post/index.tsx b/frontend/src/components/common/Post/index.tsx
new file mode 100644
index 000000000..331a8d33e
--- /dev/null
+++ b/frontend/src/components/common/Post/index.tsx
@@ -0,0 +1,33 @@
+import { PostInfo } from '@type/post';
+
+import WrittenVoteOptionList from '@components/optionList/WrittenVoteOptionList';
+
+import * as S from './style';
+
+interface PostProps {
+  postInfo: PostInfo;
+  isPreview: boolean;
+}
+
+export default function Post({ postInfo, isPreview }: PostProps) {
+  return (
+    <S.Container>
+      <S.Category>{postInfo.category.map(category => category.name).join(' | ')}</S.Category>
+      <S.Title isPreview={isPreview}>{postInfo.title}</S.Title>
+      <S.Wrapper>
+        <S.Writer>{postInfo.writer.nick}</S.Writer>
+        <S.Wrapper>
+          <S.Time>{postInfo.startTime}</S.Time>
+          <S.Time>{postInfo.endTime}</S.Time>
+        </S.Wrapper>
+      </S.Wrapper>
+      <S.Content isPreview={isPreview}>{postInfo.content}</S.Content>
+      <WrittenVoteOptionList
+        selectedOptionId={postInfo.voteInfo.selectedOptionId}
+        handleVoteClick={() => {}}
+        isPreview={isPreview}
+        voteOptionList={postInfo.voteInfo.options}
+      />
+    </S.Container>
+  );
+}
diff --git a/frontend/src/components/common/Post/style.ts b/frontend/src/components/common/Post/style.ts
new file mode 100644
index 000000000..bbec00dab
--- /dev/null
+++ b/frontend/src/components/common/Post/style.ts
@@ -0,0 +1,79 @@
+import { styled } from 'styled-components';
+
+export const Container = styled.li`
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+
+  font-size: 1.2rem;
+  letter-spacing: 0.5px;
+  line-height: 1.5;
+
+  @media (min-width: 576px) {
+    font-size: 1.4rem;
+  }
+`;
+
+export const Category = styled.span`
+  font-size: 1.2rem;
+
+  @media (min-width: 576px) {
+    font-size: 1.4rem;
+  }
+`;
+
+export const Title = styled.p<{ isPreview: boolean }>`
+  display: -webkit-box;
+
+  font-size: 2rem;
+  text-overflow: ellipsis;
+  word-break: break-word;
+
+  overflow: hidden;
+
+  -webkit-line-clamp: ${props => props.isPreview && '2'};
+  -webkit-box-orient: vertical;
+
+  @media (min-width: 576px) {
+    font-size: 2.2rem;
+  }
+`;
+
+export const Writer = styled.span``;
+
+export const Wrapper = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
+  font-size: 1.2rem;
+
+  :nth-child(2) {
+    margin-left: 10px;
+  }
+
+  @media (min-width: 576px) {
+    font-size: 1.4rem;
+  }
+`;
+
+export const Time = styled.span``;
+
+export const Content = styled.p<{ isPreview: boolean }>`
+  display: -webkit-box;
+
+  font-size: 1.4rem;
+  text-overflow: ellipsis;
+  word-break: break-word;
+
+  margin: 10px 0;
+
+  overflow: hidden;
+
+  -webkit-line-clamp: ${props => props.isPreview && '10'};
+  -webkit-box-orient: vertical;
+
+  @media (min-width: 576px) {
+    font-size: 1.6rem;
+  }
+`;