fix: imageConfig?.domainWhiteList and impl image setting in create-ch…

…annel (#199)

fix: imageConfig?.domainWhiteList and create-channel image setting

apps/web/public/locales/en/common.json

@@ -415,7 +415,7 @@
     "api-key": "Manage API Key information in the feedback collection API. If you collect feedback using API, please generate Key information.",
     "issue-tracker": "UserFeedback feedback and Issue Tracking System can be linked and managed. Please enter your Issue Tracking System information.",
     "channel-info": "You can define the feedback fields that you want to collect through the Channel. Please register the Channel information considering the feedback path and personality. (ex. VOC, APP Reivew)",
-    "fields": "Define the feedback fields that you want to collect with User Feedback according to the registered channel. Try pre-setting the fields you want to collect through the API or the fields you want to register directly from the ADMIN.",
+    "field": "Define the feedback fields that you want to collect with User Feedback according to the registered channel. Try pre-setting the fields you want to collect through the API or the fields you want to register directly from the ADMIN.",
     "image-setting": "When collecting feedback on the Image format, you can work with Image Storage and set up a whitelist for the Image URL domain.\nSee Image <icon></icon> <docs>Docs</docs>.",
     "field-preview": "You can preview what the fields you set up in Field Management will look like. Previews are not real because they are shown as arbitrary data."
   },

apps/web/public/locales/ja/common.json

@@ -415,7 +415,7 @@
     "api-key": "フィードバック収集APIのAPI Key情報を管理します。 APIを活用してフィードバックを収集するなら、Key情報を生成してください。",
     "issue-tracker": "UserFeedbackフィードバックとIssue Tracking Systemを接続して管理することができます。\n使用中のIssue Tracking System情報を入力してください。",
     "channel-info": "Channelを通じて収集したいフィードバックフィールドを定義できます。 フィードバック経路と性格を考慮してChannel情報を登録してください。(ex. VOC, APP Reivew)",
-    "fields": "登録したChannelに合わせてUser Feedbackで収集したいフィードバックフィールドを定義します。 APIを通じて収集したいフィールドやADMINで直接登録したいフィールドをあらかじめ設定してみてください。",
+    "field": "登録したChannelに合わせてUser Feedbackで収集したいフィードバックフィールドを定義します。 APIを通じて収集したいフィールドやADMINで直接登録したいフィールドをあらかじめ設定してみてください。",
     "image-setting": "Imageフォーマットに対してフィードバックを収集するとき、Image Storageと連動することができ、Image URLドメインに対するホワイトリストを設定することができます。\n詳細については、Image <icon></icon> <docs>Docs</docs>を参照してください。",
     "field-preview": "Field管理で設定したフィールドがどのように見えるかを事前に確認することができます。 プレビューは任意のデータで表示されるため、実際とは異なります。"
   },

apps/web/src/containers/create-channel-complete/ImageUploadSection.tsx

@@ -16,7 +16,7 @@
 
 import { useTranslation } from 'react-i18next';
 
-import { Input } from '@ufb/ui';
+import { Badge, Input } from '@ufb/ui';
 
 import { CreateSectionTemplate } from '@/components/templates/CreateSectionTemplate';
 import type { InputImageConfigType } from '@/types/channel.type';
@@ -29,16 +29,34 @@ const ImageUploadSection: React.FC<IProps> = ({
   endpoint,
   region,
   secretAccessKey,
+  domainWhiteList,
 }) => {
   const { t } = useTranslation();
 
   return (
     <CreateSectionTemplate title={t('channel-setting-menu.image-mgmt')}>
-      <Input label="Access Key ID" value={accessKeyId} disabled />
-      <Input label="Secret Access Key ID" value={secretAccessKey} disabled />
-      <Input label="End Point" value={endpoint} disabled />
-      <Input label="Region" value={region} disabled />
-      <Input label="Bucket Name" value={bucket} disabled />
+      <div className="flex flex-col gap-2">
+        <h2 className="font-20-bold pb-1">
+          {t('image-mgmt-setting.image-storage-integration-setting')}
+        </h2>
+        <Input label="Access Key ID" value={accessKeyId} disabled />
+        <Input label="Secret Access Key ID" value={secretAccessKey} disabled />
+        <Input label="End Point" value={endpoint} disabled />
+        <Input label="Region" value={region} disabled />
+        <Input label="Bucket Name" value={bucket} disabled />
+      </div>
+      <div>
+        <h2 className="font-20-bold pb-3">Image URL Domain Whitelist</h2>
+        {domainWhiteList && (
+          <div className="flex items-center gap-2">
+            {domainWhiteList.map((domain, index) => (
+              <Badge key={index} type="secondary">
+                {domain}
+              </Badge>
+            ))}
+          </div>
+        )}
+      </div>
     </CreateSectionTemplate>
   );
 };

apps/web/src/containers/setting-menu/ImageSetting/ImageSetting.tsx

@@ -116,7 +116,7 @@ const ImageSetting: React.FC<IProps> = ({ channelId, projectId }) => {
     if (!data) return;
     reset({
       ...data.imageConfig,
-      domainWhiteList: data.imageConfig.domainWhiteList ?? null,
+      domainWhiteList: data.imageConfig?.domainWhiteList ?? null,
     });
   }, [data]);