fix: webhook setting permission and web minor bugs

apps/api/README.md

@@ -90,8 +90,8 @@ The following is a list of environment variables used by the application, along
 | `SMTP_USE`             | Flag to enable SMTP server usage (for email verification)      | `false`                             |
 | `SMTP_HOST`            | SMTP server host                                               | _required if `SMTP_USE=true`_       |
 | `SMTP_PORT`            | SMTP server port                                               | _required if `SMTP_USE=true`_       |
-| `SMTP_USERNAME`        | SMTP server authentication username                            | _required if `SMTP_USE=true`_       |
-| `SMTP_PASSWORD`        | SMTP server authentication password                            | _required if `SMTP_USE=true`_       |
+| `SMTP_USERNAME`        | SMTP server authentication username                            | _optional_                          |
+| `SMTP_PASSWORD`        | SMTP server authentication password                            | _optional_                          |
 | `SMTP_SENDER`          | Email address used as sender in emails                         | _required if `SMTP_USE=true`_       |
 | `SMTP_BASE_URL`        | Base URL for emails to link back to the application            | _required if `SMTP_USE=true`_       |
 | `OPENSEARCH_USE`       | Flag to enable OpenSearch integration                          | `false`                             |

apps/api/src/configs/smtp.config.ts

@@ -30,12 +30,12 @@ export const smtpConfigSchema = Joi.object({
   }),
   SMTP_USERNAME: Joi.string().when('SMTP_USE', {
     is: true,
-    then: Joi.required(),
+    then: Joi.optional(),
     otherwise: Joi.optional(),
   }),
   SMTP_PASSWORD: Joi.string().when('SMTP_USE', {
     is: true,
-    then: Joi.required(),
+    then: Joi.optional(),
     otherwise: Joi.optional(),
   }),
   SMTP_SENDER: Joi.string().when('SMTP_USE', {

apps/web/src/containers/create-channel/InputField.tsx

@@ -14,13 +14,14 @@
  * under the License.
  */
 
-import { Fragment, useCallback, useMemo } from 'react';
+import { useCallback, useMemo } from 'react';
 import {
   createColumnHelper,
   flexRender,
   getCoreRowModel,
   useReactTable,
 } from '@tanstack/react-table';
+import clsx from 'clsx';
 
 import { Badge, Icon } from '@ufb/ui';
 
@@ -156,19 +157,19 @@ const InputField: React.FC<IProps> = () => {
         </thead>
         <tbody>
           {table.getRowModel().rows.map((row) => (
-            <Fragment key={row.index}>
-              <tr>
-                {row.getVisibleCells().map((cell) => (
-                  <td
-                    key={`${cell.id} ${cell.row.index}`}
-                    className="border-none"
-                    style={{ width: cell.column.getSize() }}
-                  >
-                    {flexRender(cell.column.columnDef.cell, cell.getContext())}
-                  </td>
-                ))}
-              </tr>
-            </Fragment>
+            <tr key={row.index}>
+              {row.getVisibleCells().map((cell) => (
+                <td
+                  key={`${cell.id} ${cell.row.index}`}
+                  className={clsx('border-none', {
+                    'text-secondary': isDefaultField(row.original),
+                  })}
+                  style={{ width: cell.column.getSize() }}
+                >
+                  {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                </td>
+              ))}
+            </tr>
           ))}
         </tbody>
       </table>

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

@@ -249,7 +249,6 @@ const FieldSetting: React.FC<IProps> = ({ projectId, channelId }) => {
     const handleBeforeChangeRoute = (url: string) => {
       if (router.pathname !== url && !confirm(confirmMsg)) {
         router.events.emit('routeChangeError');
-        console.log('channelId: ', channelId);
 
         throw `사이트 변경 취소`;
       }

apps/web/src/containers/setting-menu/FieldSetting/PreviewTable.tsx

@@ -13,7 +13,7 @@
  * License for the specific language governing permissions and limitations
  * under the License.
  */
-import { Fragment, memo, useEffect, useMemo, useState } from 'react';
+import { memo, useEffect, useMemo, useState } from 'react';
 import { faker } from '@faker-js/faker';
 import {
   createColumnHelper,
@@ -54,7 +54,7 @@ const PreviewTable: React.FC<IProps> = ({ fields }) => {
         status: faker.helpers.arrayElement(ISSUES(t).map((v) => v.key)),
       }));
 
-    for (let i = 1; i <= 8; i++) {
+    for (let i = 1; i <= 1; i++) {
       const fakeData: Record<string, any> = {};
       for (const field of fields) {
         if (field.key === 'id') {
@@ -83,18 +83,16 @@ const PreviewTable: React.FC<IProps> = ({ fields }) => {
             : field.format === 'images' ?
               faker.helpers.arrayElements(
                 Array.from(
-                  {
-                    length: faker.number.int({ min: 1, max: 15 }),
-                  },
+                  { length: faker.number.int({ min: 1, max: 15 }) },
                   () => '/assets/images/sample_image.png',
                 ),
               )
             : null;
         }
       }
+
       fakeRows.push(fakeData);
     }
-
     setRows(fakeRows);
   }, [fields]);
 
@@ -107,17 +105,7 @@ const PreviewTable: React.FC<IProps> = ({ fields }) => {
             : field.format === 'text' ? 200
             : 150,
           cell: (info) =>
-            field.property === 'EDITABLE' ?
-              <EditableCell
-                field={field as FieldType}
-                value={info.getValue()}
-                isExpanded={info.row.getIsExpanded()}
-                feedbackId={info.row.original.id}
-              />
-            : typeof info.getValue() === 'undefined' ? undefined
-            : field.format === 'date' ?
-              dayjs(info.getValue() as string).format(DATE_TIME_FORMAT)
-            : field.key === 'issues' ?
+            field.key === 'issues' ?
               <div className="scrollbar-hide flex items-center gap-1">
                 {(
                   info.getValue() as { status: IssueStatus; name: string }[]
@@ -131,6 +119,16 @@ const PreviewTable: React.FC<IProps> = ({ fields }) => {
                   </Badge>
                 ))}
               </div>
+            : field.property === 'EDITABLE' ?
+              <EditableCell
+                field={field as FieldType}
+                value={info.getValue()}
+                isExpanded={info.row.getIsExpanded()}
+                feedbackId={info.row.original.id}
+              />
+            : typeof info.getValue() === 'undefined' ? undefined
+            : field.format === 'date' ?
+              dayjs(info.getValue() as string).format(DATE_TIME_FORMAT)
             : field.format === 'multiSelect' ?
               ((info.getValue() ?? []) as string[]).join(', ')
             : field.format === 'text' ?
@@ -184,19 +182,17 @@ const PreviewTable: React.FC<IProps> = ({ fields }) => {
         </thead>
         <tbody>
           {table.getRowModel().rows.map((row) => (
-            <Fragment key={row.id}>
-              <tr>
-                {row.getVisibleCells().map((cell) => (
-                  <td
-                    key={cell.id}
-                    style={{ width: cell.column.getSize(), border: 'none' }}
-                    className="overflow-hidden"
-                  >
-                    {flexRender(cell.column.columnDef.cell, cell.getContext())}
-                  </td>
-                ))}
-              </tr>
-            </Fragment>
+            <tr key={row.id}>
+              {row.getVisibleCells().map((cell) => (
+                <td
+                  key={cell.id}
+                  style={{ width: cell.column.getSize(), border: 'none' }}
+                  className="overflow-hidden"
+                >
+                  {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                </td>
+              ))}
+            </tr>
           ))}
         </tbody>
       </table>

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

@@ -85,7 +85,7 @@ const ProjectSettingMenu: React.FC<IProps> = (props) => {
           onClick={onClickSettingMenu('WEBHOOK_MANAGEMENT')}
           active={settingMenu === 'WEBHOOK_MANAGEMENT'}
           name={t('project-setting-menu.webhook-integration')}
-          disabled={!perms.includes('project_tracker_read')}
+          disabled={!perms.includes('project_webhook_read')}
         />
         <SettingMenuItem
           iconName="TrashFill"