diff --git a/dictation_client/src/pages/DictationPage/displayInfo.tsx b/dictation_client/src/pages/DictationPage/displayInfo.tsx
index 74224b9..6a688e4 100644
--- a/dictation_client/src/pages/DictationPage/displayInfo.tsx
+++ b/dictation_client/src/pages/DictationPage/displayInfo.tsx
@@ -353,6 +353,7 @@ export const DisPlayInfo: React.FC = (): JSX.Element => {
         <li>
           <label htmlFor="comment">
             <input
+              id="comment"
               type="checkbox"
               value="clm16"
               className={styles.formCheck}
diff --git a/dictation_client/src/pages/DictationPage/index.tsx b/dictation_client/src/pages/DictationPage/index.tsx
index 31bbd18..9f6d995 100644
--- a/dictation_client/src/pages/DictationPage/index.tsx
+++ b/dictation_client/src/pages/DictationPage/index.tsx
@@ -1166,13 +1166,7 @@ const DictationPage: React.FC = (): JSX.Element => {
                     {(isChangeTranscriptionistPopupOpen || !isLoading) &&
                       tasks.length !== 0 &&
                       tasks.map((x) => (
-                        <tr
-                          key={x.audioFileId}
-                          style={{
-                            backgroundColor:
-                              x.priority === "01" ? "#ff00004f" : "#ffffff",
-                          }}
-                        >
+                        <tr key={x.audioFileId}>
                           <td className={styles.clm0}>
                             <ul className={styles.menuInTable}>
                               <li>
@@ -1288,7 +1282,12 @@ const DictationPage: React.FC = (): JSX.Element => {
                             </td>
                           )}
                           {displayColumn.Priority && (
-                            <td className={styles.clm3}>
+                            <td
+                              className={styles.clm3}
+                              style={{
+                                color: x.priority === "01" ? "red" : undefined,
+                              }}
+                            >
                               {x.priority === "01"
                                 ? PRIORITY.HIGH
                                 : PRIORITY.NORMAL}
diff --git a/dictation_client/src/pages/LicensePage/licenseOrderHistory.tsx b/dictation_client/src/pages/LicensePage/licenseOrderHistory.tsx
index 9cbafd0..1a3a4cb 100644
--- a/dictation_client/src/pages/LicensePage/licenseOrderHistory.tsx
+++ b/dictation_client/src/pages/LicensePage/licenseOrderHistory.tsx
@@ -171,8 +171,11 @@ export const LicenseOrderHistory: React.FC<LicenseOrderHistoryProps> = (
         <div>
           <div className={styles.pageHeader}>
             <h1 className={styles.pageTitle}>
-              {t(getTranslationID("orderHistoriesPage.label.title"))}
+              {t(getTranslationID("LicenseSummaryPage.label.title"))}
             </h1>
+            <p className={styles.pageTx}>
+              {t(getTranslationID("orderHistoriesPage.label.orderHistory"))}
+            </p>
           </div>
           <section className={styles.license}>
             <div>
diff --git a/dictation_client/src/pages/UserListPage/index.tsx b/dictation_client/src/pages/UserListPage/index.tsx
index 4dc2cee..92ecef0 100644
--- a/dictation_client/src/pages/UserListPage/index.tsx
+++ b/dictation_client/src/pages/UserListPage/index.tsx
@@ -166,168 +166,180 @@ const UserListPage: React.FC = (): JSX.Element => {
                     </a>
                   </li>
                 </ul>
-                <table className={`${styles.table} ${styles.user}`}>
-                  <tbody>
-                    <tr className={styles.tableHeader}>
-                      <th className={styles.clm0}>{/** th is empty */}</th>
-                      <th>{t(getTranslationID("userListPage.label.name"))}</th>
-                      <th>{t(getTranslationID("userListPage.label.role"))}</th>
-                      <th>
-                        {t(getTranslationID("userListPage.label.authorID"))}
-                      </th>
-                      <th>
-                        {t(getTranslationID("userListPage.label.encryption"))}
-                      </th>
-                      <th>
-                        {t(getTranslationID("userListPage.label.prompt"))}
-                      </th>
-                      <th>
-                        {t(getTranslationID("userListPage.label.typistGroup"))}
-                      </th>
-                      <th>{t(getTranslationID("userListPage.label.email"))}</th>
-                      <th>
-                        {t(getTranslationID("userListPage.label.status"))}
-                      </th>
-                      <th>
-                        {t(getTranslationID("userListPage.label.expiration"))}
-                      </th>
-                      <th>
-                        {t(getTranslationID("userListPage.label.remaining"))}
-                      </th>
-                      <th>
-                        {t(getTranslationID("userListPage.label.autoRenew"))}
-                      </th>
-                      <th>
-                        {t(getTranslationID("userListPage.label.notification"))}
-                      </th>
-                      <th>
-                        {t(
-                          getTranslationID("userListPage.label.emailVerified")
-                        )}
-                      </th>
-                    </tr>
-                    {!isLoading &&
-                      users.map((user) => (
-                        <tr key={user.email}>
-                          <td className={styles.clm0}>
-                            <ul className={styles.menuInTable}>
-                              <li>
-                                {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions */}
-                                <a
-                                  onClick={() => {
-                                    onUpdateOpen(user.id);
-                                  }}
-                                >
-                                  {t(
-                                    getTranslationID(
-                                      "userListPage.label.editUser"
-                                    )
-                                  )}
-                                </a>
-                              </li>
-                              {isTier5 && (
-                                <>
-                                  <li>
-                                    {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions */}
-                                    <a
-                                      onClick={() => {
-                                        onAllocateLicensePopupOpen(user);
-                                      }}
-                                    >
-                                      {t(
-                                        getTranslationID(
-                                          "userListPage.label.licenseAllocation"
-                                        )
-                                      )}
-                                    </a>
-                                  </li>
-                                  <li>
-                                    {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions */}
-                                    <a
-                                      className={
-                                        user.licenseStatus ===
-                                        LICENSE_STATUS.NOLICENSE
-                                          ? styles.isDisable
-                                          : ""
-                                      }
-                                      onClick={() => {
-                                        onLicenseDeallocation(user.id);
-                                      }}
-                                    >
-                                      {t(
-                                        getTranslationID(
-                                          "userListPage.label.licenseDeallocation"
-                                        )
-                                      )}
-                                    </a>
-                                  </li>
-                                </>
-                              )}
-                              <li>
-                                {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions */}
-                                <a
-                                  onClick={() => {
-                                    onDeleteUser(user.id);
-                                  }}
-                                >
-                                  {t(
-                                    getTranslationID(
-                                      "userListPage.label.deleteUser"
-                                    )
-                                  )}
-                                </a>
-                              </li>
-                            </ul>
-                          </td>
-                          <td> {user.name}</td>
-                          <td>{user.role}</td>
-                          <td>{user.authorId}</td>
-                          <td>{boolToElement(user.encryption)}</td>
-                          <td>{boolToElement(user.prompt)}</td>
-                          <td>{arrayToElement(user.typistGroupName)}</td>
-                          <td>{user.email}</td>
-                          <td>
-                            <span
-                              className={
-                                user.licenseStatus ===
-                                  LICENSE_STATUS.NOLICENSE ||
-                                user.licenseStatus === LICENSE_STATUS.ALERT
-                                  ? styles.isAlert
-                                  : ""
-                              }
-                            >
-                              {getLicenseStatus(user.licenseStatus)}
-                            </span>
-                          </td>
-                          <td>
-                            <span
-                              className={
-                                user.licenseStatus === LICENSE_STATUS.ALERT
-                                  ? styles.isAlert
-                                  : ""
-                              }
-                            >
-                              {user.expiration ?? "-"}
-                            </span>
-                          </td>
-                          <td>
-                            <span
-                              className={
-                                user.licenseStatus === LICENSE_STATUS.ALERT
-                                  ? styles.isAlert
-                                  : ""
-                              }
-                            >
-                              {user.remaining ?? "-"}
-                            </span>
-                          </td>
-                          <td>{boolToElement(user.autoRenew)}</td>
-                          <td>{boolToElement(user.notification)}</td>
-                          <td>{boolToElement(user.emailVerified)}</td>
-                        </tr>
-                      ))}
-                  </tbody>
-                </table>
+                <div className={styles.tableWrap}>
+                  <table className={`${styles.table} ${styles.user}`}>
+                    <tbody>
+                      <tr className={styles.tableHeader}>
+                        <th className={styles.clm0}>{/** th is empty */}</th>
+                        <th>
+                          {t(getTranslationID("userListPage.label.name"))}
+                        </th>
+                        <th>
+                          {t(getTranslationID("userListPage.label.role"))}
+                        </th>
+                        <th>
+                          {t(getTranslationID("userListPage.label.authorID"))}
+                        </th>
+                        <th>
+                          {t(getTranslationID("userListPage.label.encryption"))}
+                        </th>
+                        <th>
+                          {t(getTranslationID("userListPage.label.prompt"))}
+                        </th>
+                        <th>
+                          {t(
+                            getTranslationID("userListPage.label.typistGroup")
+                          )}
+                        </th>
+                        <th>
+                          {t(getTranslationID("userListPage.label.email"))}
+                        </th>
+                        <th>
+                          {t(getTranslationID("userListPage.label.status"))}
+                        </th>
+                        <th>
+                          {t(getTranslationID("userListPage.label.expiration"))}
+                        </th>
+                        <th>
+                          {t(getTranslationID("userListPage.label.remaining"))}
+                        </th>
+                        <th>
+                          {t(getTranslationID("userListPage.label.autoRenew"))}
+                        </th>
+                        <th>
+                          {t(
+                            getTranslationID("userListPage.label.notification")
+                          )}
+                        </th>
+                        <th>
+                          {t(
+                            getTranslationID("userListPage.label.emailVerified")
+                          )}
+                        </th>
+                      </tr>
+                      {!isLoading &&
+                        users.map((user) => (
+                          <tr key={user.email}>
+                            <td className={styles.clm0}>
+                              <ul className={styles.menuInTable}>
+                                <li>
+                                  {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions */}
+                                  <a
+                                    onClick={() => {
+                                      onUpdateOpen(user.id);
+                                    }}
+                                  >
+                                    {t(
+                                      getTranslationID(
+                                        "userListPage.label.editUser"
+                                      )
+                                    )}
+                                  </a>
+                                </li>
+                                {isTier5 && (
+                                  <>
+                                    <li>
+                                      {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions */}
+                                      <a
+                                        onClick={() => {
+                                          onAllocateLicensePopupOpen(user);
+                                        }}
+                                      >
+                                        {t(
+                                          getTranslationID(
+                                            "userListPage.label.licenseAllocation"
+                                          )
+                                        )}
+                                      </a>
+                                    </li>
+                                    <li>
+                                      {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions */}
+                                      <a
+                                        className={
+                                          user.licenseStatus ===
+                                          LICENSE_STATUS.NOLICENSE
+                                            ? styles.isDisable
+                                            : ""
+                                        }
+                                        onClick={() => {
+                                          onLicenseDeallocation(user.id);
+                                        }}
+                                      >
+                                        {t(
+                                          getTranslationID(
+                                            "userListPage.label.licenseDeallocation"
+                                          )
+                                        )}
+                                      </a>
+                                    </li>
+                                  </>
+                                )}
+                                <li>
+                                  {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions */}
+                                  <a
+                                    onClick={() => {
+                                      onDeleteUser(user.id);
+                                    }}
+                                  >
+                                    {t(
+                                      getTranslationID(
+                                        "userListPage.label.deleteUser"
+                                      )
+                                    )}
+                                  </a>
+                                </li>
+                              </ul>
+                            </td>
+                            <td> {user.name}</td>
+                            <td>{user.role}</td>
+                            <td>{user.authorId}</td>
+                            <td>{boolToElement(user.encryption)}</td>
+                            <td>{boolToElement(user.prompt)}</td>
+                            <td>{arrayToElement(user.typistGroupName)}</td>
+                            <td>{user.email}</td>
+                            <td>
+                              <span
+                                className={
+                                  user.licenseStatus ===
+                                    LICENSE_STATUS.NOLICENSE ||
+                                  user.licenseStatus === LICENSE_STATUS.ALERT
+                                    ? styles.isAlert
+                                    : ""
+                                }
+                              >
+                                {getLicenseStatus(user.licenseStatus)}
+                              </span>
+                            </td>
+                            <td>
+                              <span
+                                className={
+                                  user.licenseStatus === LICENSE_STATUS.ALERT
+                                    ? styles.isAlert
+                                    : ""
+                                }
+                              >
+                                {user.expiration ?? "-"}
+                              </span>
+                            </td>
+                            <td>
+                              <span
+                                className={
+                                  user.licenseStatus === LICENSE_STATUS.ALERT
+                                    ? styles.isAlert
+                                    : ""
+                                }
+                              >
+                                {user.remaining ?? "-"}
+                              </span>
+                            </td>
+                            <td>{boolToElement(user.autoRenew)}</td>
+                            <td>{boolToElement(user.notification)}</td>
+                            <td>{boolToElement(user.emailVerified)}</td>
+                          </tr>
+                        ))}
+                    </tbody>
+                  </table>
+                </div>
                 {!isLoading && users.length === 0 && (
                   <p
                     style={{
diff --git a/dictation_client/src/pages/WorkTypeIdSettingPage/editOptionItemsPopup.tsx b/dictation_client/src/pages/WorkTypeIdSettingPage/editOptionItemsPopup.tsx
index fb547da..762b7a5 100644
--- a/dictation_client/src/pages/WorkTypeIdSettingPage/editOptionItemsPopup.tsx
+++ b/dictation_client/src/pages/WorkTypeIdSettingPage/editOptionItemsPopup.tsx
@@ -128,107 +128,132 @@ export const EditOptionItemsPopup: React.FC<EditOptionItemsPopupProps> = (
           <dl className={`${styles.formList} ${styles.hasbg}`}>
             <dd className={styles.full}>
               <div className={styles.tableWrap}>
-                <table className={styles.table}>
-                  <tr className={styles.tableHeader}>
-                    <th className={styles.noLine}>
-                      {t(getTranslationID("worktypeIdSetting.label.itemLabel"))}
-                    </th>
-                    <th className={styles.noLine}>
-                      {t(
-                        getTranslationID("worktypeIdSetting.label.defaultValue")
-                      )}
-                    </th>
-                    <th>
-                      {t(
-                        getTranslationID("worktypeIdSetting.label.initialValue")
-                      )}
-                    </th>
-                  </tr>
-                  {optionItems?.map((item) => (
-                    <tr key={`optionItem_${item.id}`}>
-                      <td>
-                        <input
-                          type="text"
-                          maxLength={16}
-                          name="itemLabel"
-                          value={item.itemLabel}
-                          className={styles.formInput}
-                          onChange={(e) => {
-                            const { value } = e.target;
-                            // optionItemsの更新
-                            const newOptionItem = {
-                              ...item,
-                              itemLabel: value,
-                            };
-                            onChangeOptionItem(newOptionItem);
-                          }}
-                        />
-                      </td>
-                      <td>
-                        <select
-                          name="defaultValueType"
-                          className={styles.formInput}
-                          value={item.defaultValueType}
-                          onChange={(e) => {
-                            const { value } = e.target;
-                            // optionItemsの更新
-                            const newOptionItem = {
-                              ...item,
-                              defaultValueType: value,
-                            };
-                            onChangeOptionItem(newOptionItem);
-                          }}
-                        >
-                          <option
-                            value={OPTION_ITEMS_DEFAULT_VALUE_TYPE.DEFAULT}
-                          >
-                            {t(
-                              getTranslationID(
-                                "worktypeIdSetting.label.default"
-                              )
-                            )}
-                          </option>
-                          <option value={OPTION_ITEMS_DEFAULT_VALUE_TYPE.BLANK}>
-                            {t(
-                              getTranslationID("worktypeIdSetting.label.blank")
-                            )}
-                          </option>
-                          <option
-                            value={OPTION_ITEMS_DEFAULT_VALUE_TYPE.LAST_INPUT}
-                          >
-                            {t(
-                              getTranslationID(
-                                "worktypeIdSetting.label.lastInput"
-                              )
-                            )}
-                          </option>
-                        </select>
-                      </td>
-                      <td>
-                        {item.defaultValueType ===
-                        OPTION_ITEMS_DEFAULT_VALUE_TYPE.DEFAULT ? (
+                <table className={`${styles.table} ${styles.optionItem}`}>
+                  <tbody>
+                    <tr className={styles.tableHeader}>
+                      <th className={styles.noLine}>
+                        {t(
+                          getTranslationID("worktypeIdSetting.label.itemLabel")
+                        )}
+                      </th>
+                      <th className={styles.noLine}>
+                        {t(
+                          getTranslationID(
+                            "worktypeIdSetting.label.defaultValue"
+                          )
+                        )}
+                      </th>
+                      <th>
+                        {t(
+                          getTranslationID(
+                            "worktypeIdSetting.label.initialValue"
+                          )
+                        )}
+                      </th>
+                    </tr>
+                    {optionItems?.map((item) => (
+                      <tr key={`optionItem_${item.id}`}>
+                        <td>
                           <input
                             type="text"
-                            maxLength={20}
-                            name="initialValue"
-                            value={item.initialValue}
+                            maxLength={16}
+                            name="itemLabel"
+                            value={item.itemLabel}
                             className={styles.formInput}
                             onChange={(e) => {
                               const { value } = e.target;
                               // optionItemsの更新
                               const newOptionItem = {
                                 ...item,
-                                initialValue: value,
+                                itemLabel: value,
                               };
                               onChangeOptionItem(newOptionItem);
                             }}
                           />
-                        ) : (
-                          "-"
-                        )}
+                        </td>
+                        <td>
+                          <select
+                            name="defaultValueType"
+                            className={styles.formInput}
+                            value={item.defaultValueType}
+                            onChange={(e) => {
+                              const { value } = e.target;
+                              // optionItemsの更新
+                              const newOptionItem = {
+                                ...item,
+                                defaultValueType: value,
+                              };
+                              onChangeOptionItem(newOptionItem);
+                            }}
+                          >
+                            <option
+                              value={OPTION_ITEMS_DEFAULT_VALUE_TYPE.DEFAULT}
+                            >
+                              {t(
+                                getTranslationID(
+                                  "worktypeIdSetting.label.default"
+                                )
+                              )}
+                            </option>
+                            <option
+                              value={OPTION_ITEMS_DEFAULT_VALUE_TYPE.BLANK}
+                            >
+                              {t(
+                                getTranslationID(
+                                  "worktypeIdSetting.label.blank"
+                                )
+                              )}
+                            </option>
+                            <option
+                              value={OPTION_ITEMS_DEFAULT_VALUE_TYPE.LAST_INPUT}
+                            >
+                              {t(
+                                getTranslationID(
+                                  "worktypeIdSetting.label.lastInput"
+                                )
+                              )}
+                            </option>
+                          </select>
+                        </td>
+                        <td>
+                          {item.defaultValueType ===
+                          OPTION_ITEMS_DEFAULT_VALUE_TYPE.DEFAULT ? (
+                            <input
+                              type="text"
+                              maxLength={20}
+                              name="initialValue"
+                              value={item.initialValue}
+                              className={styles.formInput}
+                              onChange={(e) => {
+                                const { value } = e.target;
+                                // optionItemsの更新
+                                const newOptionItem = {
+                                  ...item,
+                                  initialValue: value,
+                                };
+                                onChangeOptionItem(newOptionItem);
+                              }}
+                            />
+                          ) : (
+                            "-"
+                          )}
+                        </td>
+                      </tr>
+                    ))}
+                    <tr>
+                      <td colSpan={3}>
+                        <span
+                          className={`${styles.formComment} ${styles.alignCenter}`}
+                        >
+                          {t(
+                            getTranslationID(
+                              "worktypeIdSetting.label.optionItemTerms"
+                            )
+                          )}
+                        </span>
                       </td>
                     </tr>
-                  ))}
+                  </tbody>
                 </table>
                 {isPushSaveButton && hasInvalidOptionItems && (
                   <span className={`${styles.formError} ${styles.alignCenter}`}>
@@ -248,14 +273,6 @@ export const EditOptionItemsPopup: React.FC<EditOptionItemsPopupProps> = (
                     )}
                   </span>
                 )}
-                <span
-                  style={{ display: "block" }}
-                  className={`${styles.formComment} ${styles.alignCenter}`}
-                >
-                  {t(
-                    getTranslationID("worktypeIdSetting.label.optionItemTerms")
-                  )}
-                </span>
               </div>
             </dd>
             <dd className={`${styles.full} ${styles.alignCenter}`}>
diff --git a/dictation_client/src/styles/app.module.scss b/dictation_client/src/styles/app.module.scss
index c075fdc..0753e75 100644
--- a/dictation_client/src/styles/app.module.scss
+++ b/dictation_client/src/styles/app.module.scss
@@ -1130,6 +1130,9 @@ h3 + .brCrumb .tlIcon {
 .modal .form .table.backup td:first-child {
   padding: 0.6rem 0.2rem;
 }
+.modal .form .table.optionItem select {
+  width: 123px;
+}
 .modal .form .pagenation {
   margin-bottom: 1.5rem;
   padding-right: 2.5%;
@@ -1597,15 +1600,6 @@ _:-ms-lang(x)::-ms-backdrop,
   left: 0;
   z-index: 2;
 }
-.account .table.user,
-.user .table.user,
-.license .table.user,
-.dictation .table.user,
-.partners .table.user,
-.workflow .table.user,
-.support .table.user {
-  margin-bottom: 5rem;
-}
 .account .table.user th::after,
 .user .table.user th::after,
 .license .table.user th::after,
@@ -1626,6 +1620,16 @@ _:-ms-lang(x)::-ms-backdrop,
   vertical-align: top;
 }
 
+.user .table {
+  margin-bottom: 0;
+}
+.user .tableWrap {
+  max-width: calc(100vw - 5.1rem);
+  max-height: 90vh;
+  overflow-x: scroll;
+  margin-bottom: 5rem;
+}
+
 .account .listVertical {
   margin-bottom: 3rem;
 }
@@ -2488,10 +2492,13 @@ tr.isSelected .menuInTable li a.isDisable {
 .formChange ul.chooseMember li input + label,
 .formChange ul.holdMember li input + label {
   display: block;
-  padding: 0.2rem 0 0.2rem 1.5rem;
+  padding: 0.4rem 0 0.4rem 1.5rem;
   margin-right: 0;
   background: url(../assets/images/circle.svg) no-repeat left center;
   background-size: 1.3rem;
+  white-space: pre-line;
+  word-break: break-all;
+  line-height: 1.3;
 }
 .formChange ul.chooseMember li input + label:hover,
 .formChange ul.holdMember li input + label:hover {
@@ -2501,7 +2508,7 @@ tr.isSelected .menuInTable li a.isDisable {
 }
 .formChange ul.chooseMember li input:checked + label,
 .formChange ul.holdMember li input:checked + label {
-  padding: 0.2rem 1rem 0.2rem 0;
+  padding: 0.4rem 1.5rem 0.4rem 0;
   background: url(../assets/images/check_circle_fill.svg) no-repeat right center;
   background-size: 1.3rem;
 }
diff --git a/dictation_client/src/styles/app.module.scss.d.ts b/dictation_client/src/styles/app.module.scss.d.ts
index 68fcbca..d6ebd8f 100644
--- a/dictation_client/src/styles/app.module.scss.d.ts
+++ b/dictation_client/src/styles/app.module.scss.d.ts
@@ -74,6 +74,7 @@ declare const classNames: {
   readonly table: "table";
   readonly tableHeader: "tableHeader";
   readonly backup: "backup";
+  readonly optionItem: "optionItem";
   readonly pagenation: "pagenation";
   readonly encryptionPass: "encryptionPass";
   readonly pageHeader: "pageHeader";
diff --git a/dictation_server/src/features/licenses/licenses.service.spec.ts b/dictation_server/src/features/licenses/licenses.service.spec.ts
index cdc56b2..69b6530 100644
--- a/dictation_server/src/features/licenses/licenses.service.spec.ts
+++ b/dictation_server/src/features/licenses/licenses.service.spec.ts
@@ -18,14 +18,21 @@ import {
 } from './test/utility';
 import { UsersService } from '../users/users.service';
 import { Context, makeContext } from '../../common/log';
-import { ADB2C_SIGN_IN_TYPE, LICENSE_ALLOCATED_STATUS, LICENSE_TYPE } from '../../constants';
+import {
+  ADB2C_SIGN_IN_TYPE,
+  LICENSE_ALLOCATED_STATUS,
+  LICENSE_TYPE,
+} from '../../constants';
 import {
   makeHierarchicalAccounts,
   makeTestSimpleAccount,
   makeTestUser,
 } from '../../common/test/utility';
 import { LicensesRepositoryService } from '../../repositories/licenses/licenses.repository.service';
-import { overrideAdB2cService, overrideSendgridService } from '../../common/test/overrides';
+import {
+  overrideAdB2cService,
+  overrideSendgridService,
+} from '../../common/test/overrides';
 import { truncateAllTable } from '../../common/test/init';
 
 describe('ライセンス注文', () => {
@@ -672,7 +679,10 @@ describe('ライセンス割り当て', () => {
     const module = await makeTestingModule(source);
     if (!module) fail();
 
-    const { id: dealerId } = await makeTestSimpleAccount(source, { company_name: "DEALER_COMPANY", tier: 4 });
+    const { id: dealerId } = await makeTestSimpleAccount(source, {
+      company_name: 'DEALER_COMPANY',
+      tier: 4,
+    });
     const { id: dealerAdminId } = await makeTestUser(source, {
       account_id: dealerId,
       external_id: 'userId_admin',
@@ -682,7 +692,7 @@ describe('ライセンス割り当て', () => {
 
     const { id: accountId } = await makeTestSimpleAccount(source, {
       parent_account_id: dealerId,
-      tier: 5
+      tier: 5,
     });
     const { id: userId } = await makeTestUser(source, {
       account_id: accountId,
@@ -740,7 +750,7 @@ describe('ライセンス割り当て', () => {
             },
           ],
         }));
-      }
+      },
     });
 
     overrideSendgridService(service, {
diff --git a/dictation_server/src/features/tasks/tasks.service.spec.ts b/dictation_server/src/features/tasks/tasks.service.spec.ts
index e417991..2e1a101 100644
--- a/dictation_server/src/features/tasks/tasks.service.spec.ts
+++ b/dictation_server/src/features/tasks/tasks.service.spec.ts
@@ -11,6 +11,7 @@ import { makeErrorResponse } from '../../common/error/makeErrorResponse';
 import { TasksService } from './tasks.service';
 import { DataSource } from 'typeorm';
 import {
+  createAudioFile,
   createCheckoutPermissions,
   createTask,
   createUserGroup,
@@ -707,6 +708,19 @@ describe('TasksService', () => {
         role: 'author',
         author_id: 'MY_AUTHOR_ID',
       });
+
+      //「バグ 3661: [FB対応]Option Itemにチェックを付けると真っ白な画面になる」の確認のため
+      // audio_file_idをTaskIdと異なる値にするために、AudioFileを作成
+      await createAudioFile(
+        source,
+        accountId,
+        userId,
+        'MY_AUTHOR_ID',
+        '',
+        '00',
+      );
+
+      // Taskを作成
       await createTask(
         source,
         accountId,
@@ -750,10 +764,26 @@ describe('TasksService', () => {
       {
         const task = tasks[0];
         expect(task.jobNumber).toEqual('00000001');
+        // AudioOptionItem
+        const audioOptionItems = Array.from({ length: 10 }).map((_, i) => {
+          return {
+            optionItemLabel: `label${i}:audio_file_id${task.audioFileId}`,
+            optionItemValue: `value${i}:audio_file_id${task.audioFileId}`,
+          };
+        });
+        expect(task.optionItemList).toEqual(audioOptionItems);
       }
       {
         const task = tasks[1];
         expect(task.jobNumber).toEqual('00000002');
+        // AudioOptionItem
+        const audioOptionItems = Array.from({ length: 10 }).map((_, i) => {
+          return {
+            optionItemLabel: `label${i}:audio_file_id${task.audioFileId}`,
+            optionItemValue: `value${i}:audio_file_id${task.audioFileId}`,
+          };
+        });
+        expect(task.optionItemList).toEqual(audioOptionItems);
       }
     });
     it('[Author] Authorは同一アカウントであっても自分以外のAuhtorのTaskは取得できない', async () => {
diff --git a/dictation_server/src/features/tasks/test/utility.ts b/dictation_server/src/features/tasks/test/utility.ts
index d9e6d8f..eb3938e 100644
--- a/dictation_server/src/features/tasks/test/utility.ts
+++ b/dictation_server/src/features/tasks/test/utility.ts
@@ -131,6 +131,17 @@ export const createTask = async (
       audio_format: 'audio_format',
       is_encrypted: true,
     });
+  // AudioOptionItemを10個作成
+  const audioOptionItems = Array.from({ length: 10 }).map((_, i) => {
+    return {
+      audio_file_id: audioFileIdentifiers[0].id,
+      label: `label${i}:audio_file_id${audioFileIdentifiers[0].id}`,
+      value: `value${i}:audio_file_id${audioFileIdentifiers[0].id}`,
+    };
+  });
+
+  await datasource.getRepository(AudioOptionItem).insert(audioOptionItems);
+
   const audioFile = audioFileIdentifiers.pop() as AudioFile;
   const { identifiers: taskIdentifiers } = await datasource
     .getRepository(Task)
@@ -202,6 +213,37 @@ export const createTask = async (
 
   return { taskId: task.id, audioFileId: audioFile.id };
 };
+
+export const createAudioFile = async (
+  datasource: DataSource,
+  account_id: number,
+  owner_user_id: number,
+  author_id: string,
+  work_type_id: string,
+  priority: string,
+): Promise<{ audioFileId: number }> => {
+  const { identifiers: audioFileIdentifiers } = await datasource
+    .getRepository(AudioFile)
+    .insert({
+      account_id: account_id,
+      owner_user_id: owner_user_id,
+      url: '',
+      file_name: 'x.zip',
+      author_id: author_id,
+      work_type_id: work_type_id,
+      started_at: new Date(),
+      duration: '100000',
+      finished_at: new Date(),
+      uploaded_at: new Date(),
+      file_size: 10000,
+      priority: priority,
+      audio_format: 'audio_format',
+      is_encrypted: true,
+    });
+  const audioFile = audioFileIdentifiers.pop() as AudioFile;
+  return { audioFileId: audioFile.id };
+};
+
 /**
  *
  * @param datasource
diff --git a/dictation_server/src/features/templates/types/types.ts b/dictation_server/src/features/templates/types/types.ts
index a3ca106..f1959d3 100644
--- a/dictation_server/src/features/templates/types/types.ts
+++ b/dictation_server/src/features/templates/types/types.ts
@@ -17,7 +17,6 @@ export class GetTemplatesResponse {
   templates: TemplateFile[];
 }
 
-
 export class DeleteTemplateRequestParam {
   @ApiProperty()
   @Type(() => Number)
diff --git a/dictation_server/src/repositories/audio_option_items/entity/audio_option_item.entity.ts b/dictation_server/src/repositories/audio_option_items/entity/audio_option_item.entity.ts
index 665ac69..5d586c5 100644
--- a/dictation_server/src/repositories/audio_option_items/entity/audio_option_item.entity.ts
+++ b/dictation_server/src/repositories/audio_option_items/entity/audio_option_item.entity.ts
@@ -18,6 +18,6 @@ export class AudioOptionItem {
   @Column()
   value: string;
   @ManyToOne(() => Task, (task) => task.audio_file_id)
-  @JoinColumn({ name: 'audio_file_id' })
+  @JoinColumn({ name: 'audio_file_id', referencedColumnName: 'audio_file_id' })
   task: Task | null;
 }