diff --git a/src/features/checklist/components/ChecklistView.tsx b/src/features/checklist/components/ChecklistView.tsx
index f392ed5..49732d1 100644
--- a/src/features/checklist/components/ChecklistView.tsx
+++ b/src/features/checklist/components/ChecklistView.tsx
@@ -1,20 +1,8 @@
-/**
- * Expansion 기능을 제공해야 한다
- * Header: Title, TriangleIcon
- * Contents:
- *   SingleChoice: title, status, checks
- *   MultipleChoice: title, status, checks
- *
- * 프레임워크를 만드는 것이 아니기 때문에 공용 이름보다는 용도가 적힌 것이 좋다.
- */
-import React, { CSSProperties, ReactElement, useState } from "react";
+import React, { ReactElement } from "react";
 
 import { CheckQuestion } from "../models";
 import { groupBy } from "../utils";
-import { ic_open } from "~/assets";
-import { color } from "~/colors";
-
-import CheckBox from "./CheckBox";
+import QuestionPanel from "./QuestionPanel";
 
 type Props = {
   questions: Array<CheckQuestion>;
@@ -32,126 +20,3 @@ export default function ChecklistView({ questions }: Props): ReactElement {
     </div>
   );
 }
-
-const 확장뷰_style = (): CSSProperties => ({
-  display: "flex",
-  justifyContent: "space-between",
-  alignItems: "center",
-  height: 39,
-  fontSize: 16,
-  fontWeight: "bold",
-  fontStretch: "normal",
-  fontStyle: "normal",
-  lineHeight: 1.34,
-  letterSpacing: "normal",
-  color: color.grayscale29,
-  cursor: "pointer",
-  marginTop: 28,
-});
-const 밑줄_style = (): CSSProperties => ({
-  height: 1,
-  backgroundColor: color.primaryDullPurple,
-  marginTop: 2,
-});
-const 밑줄_style2 = (): CSSProperties => ({
-  width: 264,
-  height: 1,
-  backgroundColor: color.grayscalef9,
-});
-const 아이콘_style = (expand: boolean): CSSProperties => ({
-  transition: "all ease 0.5s",
-  transform: `rotate(${expand ? 180 : 360}deg)`,
-});
-const 콘텐츠_style = (expand: boolean): CSSProperties => ({
-  display: `${expand ? "block" : "none"}`,
-});
-const 행_style = (): CSSProperties => ({
-  display: "flex",
-  alignItems: "flex-start",
-  height: "auto",
-  padding: "9px 0 9px 0",
-});
-const 행_질문_style = (type: string): CSSProperties => ({
-  width: `${type === "MultipleChoice" ? "84px" : "auto"}`,
-  fontSize: 12,
-  alignSelf: "center",
-  flexGrow: 1,
-});
-type ItemProps = {
-  label: string;
-  questions: Array<CheckQuestion>;
-};
-export function QuestionPanel({ label, questions }: ItemProps): ReactElement {
-  const [expand, setExpand] = useState(false);
-  return (
-    <>
-      <QuestionPanelHeader label={label} expand={expand} click={setExpand} />
-      <div style={밑줄_style()} />
-      <div style={콘텐츠_style(expand)}>
-        {questions.map((question) => (
-          <div key={question.uid}>
-            <div style={행_style()}>
-              <span style={행_질문_style(question.type_)}>
-                {question.title}
-              </span>
-              {question.type_ === "MultipleChoice" ? (
-                <div
-                  style={{
-                    display: "grid",
-                    alignSelf: "flex-end",
-                    width: 174,
-                    gridTemplateColumns: "0.5fr 2fr 0.5fr 2fr",
-                    gap: "3px",
-                  }}
-                >
-                  {question?.checks?.map((check) => (
-                    <CheckBox
-                      key={check.uid}
-                      uid={check.uid}
-                      label={check.contents}
-                    />
-                  ))}
-                </div>
-              ) : (
-                <div
-                  style={{
-                    display: "flex",
-                    justifyContent: "flex-end",
-                    flexGrow: 2,
-                  }}
-                >
-                  <CheckBox uid={question.uid} />
-                </div>
-              )}
-            </div>
-            <div style={밑줄_style2()} />
-          </div>
-        ))}
-      </div>
-    </>
-  );
-}
-
-type HeaderProps = {
-  label: string;
-  expand: boolean;
-  click: CallableFunction;
-};
-function QuestionPanelHeader({
-  label,
-  expand,
-  click,
-}: HeaderProps): ReactElement {
-  return (
-    <div style={확장뷰_style()} onClick={() => click(!expand)}>
-      <span>{label}</span>
-      <img
-        src={ic_open}
-        alt=""
-        width="24"
-        height="24"
-        style={아이콘_style(expand)}
-      />
-    </div>
-  );
-}
diff --git a/src/features/checklist/components/MultipleChoiceView.tsx b/src/features/checklist/components/MultipleChoiceView.tsx
new file mode 100644
index 0000000..e9b67ef
--- /dev/null
+++ b/src/features/checklist/components/MultipleChoiceView.tsx
@@ -0,0 +1,27 @@
+import React, { CSSProperties, ReactElement } from "react";
+
+import { CheckItem } from "../models";
+
+import CheckBox from "./CheckBox";
+
+type MultipleChoiceViewProps = {
+  checks: Array<CheckItem>;
+};
+const 행_style = (): CSSProperties => ({
+  display: "grid",
+  alignSelf: "flex-end",
+  width: 174,
+  gridTemplateColumns: "0.5fr 2fr 0.5fr 2fr",
+  gap: "3px",
+});
+export default function MultipleChoiceView({
+  checks,
+}: MultipleChoiceViewProps): ReactElement {
+  return (
+    <div style={행_style()}>
+      {checks?.map((check) => (
+        <CheckBox key={check.uid} uid={check.uid} label={check.contents} />
+      ))}
+    </div>
+  );
+}
diff --git a/src/features/checklist/components/QuestionItem.tsx b/src/features/checklist/components/QuestionItem.tsx
new file mode 100644
index 0000000..7424064
--- /dev/null
+++ b/src/features/checklist/components/QuestionItem.tsx
@@ -0,0 +1,43 @@
+import React, { CSSProperties, ReactElement } from "react";
+
+import { CheckQuestion } from "../models";
+import { color } from "~/colors";
+import SingleChoiceView from "./SingleChoiceView";
+import MultipleChoiceView from "./MultipleChoiceView";
+
+type Props = {
+  question: CheckQuestion;
+};
+const 행_style = (): CSSProperties => ({
+  display: "flex",
+  alignItems: "flex-start",
+  height: "auto",
+  padding: "9px 0 9px 0",
+});
+const 행_질문_style = (type: string): CSSProperties => ({
+  width: `${type === "MultipleChoice" ? "84px" : "auto"}`,
+  fontSize: 12,
+  alignSelf: "center",
+  flexGrow: 1,
+});
+
+const 밑줄_style = (): CSSProperties => ({
+  width: 264,
+  height: 1,
+  backgroundColor: color.grayscalef9,
+});
+export default function QuestionItem({ question }: Props): ReactElement {
+  return (
+    <div>
+      <div style={행_style()}>
+        <span style={행_질문_style(question.type_)}>{question.title}</span>
+        {question.type_ === "MultipleChoice" ? (
+          <MultipleChoiceView checks={question.checks} />
+        ) : (
+          <SingleChoiceView check={question.checks[0]} />
+        )}
+      </div>
+      <div style={밑줄_style()} />
+    </div>
+  );
+}
diff --git a/src/features/checklist/components/QuestionPanel.tsx b/src/features/checklist/components/QuestionPanel.tsx
new file mode 100644
index 0000000..b177d10
--- /dev/null
+++ b/src/features/checklist/components/QuestionPanel.tsx
@@ -0,0 +1,87 @@
+/**
+ * Expansion 기능을 제공
+ * Header: Title, TriangleIcon
+ * Contents:
+ *   SingleChoice: title, status, checks
+ *   MultipleChoice: title, status, checks
+ */
+import React, { CSSProperties, ReactElement, useState } from "react";
+
+import { CheckQuestion } from "../models";
+import { ic_open } from "~/assets";
+import { color } from "~/colors";
+import QuestionItem from "./QuestionItem";
+
+const 확장뷰_style = (): CSSProperties => ({
+  display: "flex",
+  justifyContent: "space-between",
+  alignItems: "center",
+  height: 39,
+  fontSize: 16,
+  fontWeight: "bold",
+  fontStretch: "normal",
+  fontStyle: "normal",
+  lineHeight: 1.34,
+  letterSpacing: "normal",
+  color: color.grayscale29,
+  cursor: "pointer",
+  marginTop: 28,
+});
+const 밑줄_style = (): CSSProperties => ({
+  height: 1,
+  backgroundColor: color.primaryDullPurple,
+  marginTop: 2,
+});
+const 콘텐츠_style = (expand: boolean): CSSProperties => ({
+  display: `${expand ? "block" : "none"}`,
+});
+type ItemProps = {
+  label: string;
+  questions: Array<CheckQuestion>;
+};
+export default function QuestionPanel({
+  label,
+  questions,
+}: ItemProps): ReactElement {
+  const [expand, setExpand] = useState(false);
+  return (
+    <>
+      <QuestionPanelHeader label={label} expand={expand} click={setExpand} />
+      <div style={밑줄_style()} />
+      <div style={콘텐츠_style(expand)}>
+        {questions.map((question) => (
+          <QuestionItem key={question.uid} question={question} />
+        ))}
+      </div>
+    </>
+  );
+}
+
+type HeaderProps = {
+  label: string;
+  expand: boolean;
+  click: CallableFunction;
+};
+const 아이콘_style = (expand: boolean): CSSProperties => ({
+  transition: "all ease 0.5s",
+  transform: `rotate(${expand ? 180 : 360}deg)`,
+});
+
+function QuestionPanelHeader({
+  label,
+  expand,
+  click,
+}: HeaderProps): ReactElement {
+  return (
+    <div style={확장뷰_style()} onClick={() => click(!expand)}>
+      <span>{label}</span>
+      <img
+        src={ic_open}
+        alt=""
+        width="24"
+        height="24"
+        style={아이콘_style(expand)}
+      />
+    </div>
+  );
+}
diff --git a/src/features/checklist/components/SingleChoiceView.tsx b/src/features/checklist/components/SingleChoiceView.tsx
new file mode 100644
index 0000000..9074af3
--- /dev/null
+++ b/src/features/checklist/components/SingleChoiceView.tsx
@@ -0,0 +1,21 @@
+import React, { CSSProperties, ReactElement } from "react";
+
+import { CheckItem } from "../models";
+
+import CheckBox from "./CheckBox";
+
+type Props = {
+  check: CheckItem;
+};
+const 행_style = (): CSSProperties => ({
+  display: "flex",
+  justifyContent: "flex-end",
+  flexGrow: 2,
+});
+export default function SingleChoiceView({ check }: Props): ReactElement {
+  return (
+    <div style={행_style()}>
+      <CheckBox uid={check.uid} />
+    </div>
+  );
+}
diff --git a/src/features/checklist/components/index.tsx b/src/features/checklist/components/index.tsx
index d1d3bb4..a1bf5b8 100644
--- a/src/features/checklist/components/index.tsx
+++ b/src/features/checklist/components/index.tsx
@@ -1,2 +1,13 @@
 import ChecklistView from "./ChecklistView";
-export { ChecklistView };
+import QuestionItem from "./QuestionItem";
+import SingleChoiceView from "./SingleChoiceView";
+import MultipleChoiceView from "./MultipleChoiceView";
+import QuestionPanel from "./QuestionPanel";
+
+export {
+  ChecklistView,
+  QuestionItem,
+  MultipleChoiceView,
+  SingleChoiceView,
+  QuestionPanel,
+};
diff --git a/src/features/rooms/components/RoomCard.tsx b/src/features/rooms/components/RoomCard.tsx
index 204f053..7954bcb 100644
--- a/src/features/rooms/components/RoomCard.tsx
+++ b/src/features/rooms/components/RoomCard.tsx
@@ -3,6 +3,7 @@ import { useHistory } from "react-router-dom";
 import { Room, SELLING_TYPE_MATCHER } from "../models";
 import { img_no_thumbnail } from "~/assets";
 import { color } from "~/colors";
+import RoomCardIndicator from "./RoomCardIndicator";
 type Props = {
   room: Room;
   is_selected: boolean;
@@ -22,7 +23,6 @@ const 카드_style = ({ margin }: ThumbnailProps): CSSProperties => ({
   cursor: "pointer",
   margin: margin,
 });
-
 const 카드_썸네일_style = ({
   width,
   height,
@@ -115,26 +115,13 @@ function RoomCard({
           SELLING_TYPE_MATCHER[room.selling_type]
         } ${room.deposit}/${room.monthly_rent}`}</span>
       </div>
-      {is_selected ? (
-        <div
-          style={{
-            backgroundColor: color.primaryYellow,
-            width: width,
-            height: 5,
-            borderRadius: 2.5,
-            marginTop: 3,
-          }}
-        />
-      ) : (
-        <div
-          style={{
-            width: width,
-            height: 5,
-            borderRadius: 2.5,
-            marginTop: 3,
-          }}
-        />
-      )}
+      <RoomCardIndicator
+        visible={is_selected}
+        width={width}
+        height={5}
+        borderRadius={2.5}
+        marginTop={3}
+      />
     </div>
   );
 }
diff --git a/src/features/rooms/components/RoomCardIndicator.tsx b/src/features/rooms/components/RoomCardIndicator.tsx
new file mode 100644
index 0000000..7a9c910
--- /dev/null
+++ b/src/features/rooms/components/RoomCardIndicator.tsx
@@ -0,0 +1,30 @@
+import React, { ReactElement } from "react";
+import { color } from "~/colors";
+
+type RoomCardIndicatorProps = {
+  visible: boolean;
+  width: number;
+  height: number;
+  borderRadius: number;
+  marginTop: number;
+};
+export default function RoomCardIndicator({
+  visible,
+  width,
+  height,
+  borderRadius,
+  marginTop,
+}: RoomCardIndicatorProps): ReactElement {
+  return (
+    <div
+      style={{
+        backgroundColor: visible ? color.primaryYellow : "",
+        width: width,
+        height: height,
+        borderRadius: borderRadius,
+        marginTop: marginTop,
+        transition: ".3s ease-in-out",
+      }}
+    />
+  );
+}
diff --git a/src/features/rooms/components/RoomListView.tsx b/src/features/rooms/components/RoomListView.tsx
index f916ef7..2bcdbeb 100644
--- a/src/features/rooms/components/RoomListView.tsx
+++ b/src/features/rooms/components/RoomListView.tsx
@@ -28,39 +28,26 @@ export default function RoomListView({
   select,
   rooms,
 }: RoomListViewProps): ReactElement {
-  return (
-    <div style={방_리스트_style()}>
-      {
-        <RoomCard
-          key={select.uid}
-          room={select}
-          width={width}
-          height={height}
-          margin={margin}
-          label_overlay={true}
-          is_selected={true}
-        />
-      }
-      {rooms
-        .filter((room) => room.uid !== select.uid)
-        .map((room) => (
-          <RoomCard
-            key={room.uid}
-            room={room}
-            width={width}
-            height={height}
-            margin={margin}
-            label_overlay={true}
-            is_selected={false}
-          />
-        ))}
-      <AddCard
-        align="start"
-        width={width}
-        height={height}
-        plusSize={30}
-        margin={"0 8px 8px 0"}
-      />
-    </div>
+  const cards = rooms.map((room) => (
+    <RoomCard
+      key={room.uid}
+      room={room}
+      width={width}
+      height={height}
+      margin={margin}
+      label_overlay={true}
+      is_selected={room.uid === select.uid}
+    />
+  ));
+  cards.push(
+    <AddCard
+      key="add-card"
+      align="start"
+      width={width}
+      height={height}
+      plusSize={30}
+      margin={"0 8px 8px 0"}
+    />
   );
+  return <div style={방_리스트_style()}>{cards}</div>;
 }
diff --git a/src/features/rooms/components/index.ts b/src/features/rooms/components/index.ts
index ae03c26..e7b1a59 100644
--- a/src/features/rooms/components/index.ts
+++ b/src/features/rooms/components/index.ts
@@ -3,6 +3,7 @@ import DropDown from "./DropDown";
 import RoomListView from "./RoomListView";
 import DetailCard, { SummaryTable } from "./DetailCard";
 import { DeleteModal } from "./DeleteModal";
+import RoomCardIndicator from "./RoomCardIndicator";
 
 export {
   RoomCard,
@@ -11,5 +12,6 @@ export {
   RoomListView,
   DetailCard,
   SummaryTable,
+  RoomCardIndicator,
   DeleteModal,
 };