fix: web minor bugs (#89)

* fix: input member tooltip

* fix: input member tooltip i18n

* feat: feedback detail i18n

* feat: feedback download

* fix: feedback download button

apps/api/src/domains/feedback/dtos/requests/export-feedbacks-request.dto.ts

@@ -23,7 +23,7 @@ export class ExportFeedbacksRequestDto extends FindFeedbacksByChannelIdRequestDt
   @IsString()
   type: 'xlsx' | 'csv';
 
-  @ApiProperty({ required: false })
+  @ApiProperty({ required: false, type: [Number] })
   @IsOptional()
   @IsArray()
   fieldIds?: number[];

apps/api/src/domains/feedback/feedback.service.ts

@@ -156,9 +156,9 @@ export class FeedbackService {
     }
 
     return Object.keys(convertedFeedback)
-      .filter((key) => fieldsToExport.find((field) => field.key === key))
+      .filter((key) => fieldsToExport.find((field) => field.name === key))
       .reduce((obj, key) => {
-        obj[key] = feedback[key];
+        obj[key] = convertedFeedback[key];
         return obj;
       }, {});
   }
@@ -228,6 +228,7 @@ export class FeedbackService {
           fieldsByKey,
           fieldsToExport,
         );
+
         worksheet.addRow(convertedFeedback).commit();
         feedbackIds.push(feedback.id);
       }

apps/web/.prettierignore

@@ -0,0 +1 @@
+src/types/api.type.ts

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

@@ -220,6 +220,7 @@
         "apiKeys": "Manage API Key information in the feedback collection API. If you collect feedback using API, please generate Key information.",
         "issueTracker": "UserFeedback feedback and Issue Tracking System can be linked and managed. Please enter your Issue Tracking System information."
       },
+      "error-member": "User information that does not currently exist.",
       "continue-channel-creation": "UserFeedback must be created up to the Channel before UserFeedback is available.\nWould you like to continue creating a channel?",
       "guide": {
         "invalid-member": "Invalid Member List exists.",
@@ -311,7 +312,8 @@
     "no-channel": "There is no registered channel.",
     "guide": "Guide",
     "more": "more",
-    "shrink": "shrink"
+    "shrink": "shrink",
+    "feedback-detail": "Feedback Detail"
   },
   "toast": {
     "sign-in": "Login Successful",

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

@@ -220,6 +220,7 @@
         "apiKeys": "フィードバック収集APIのAPI Key情報を管理します。 APIを活用してフィードバックを収集するなら、Key情報を生成してください。",
         "issueTracker": "UserFeedbackフィードバックとIssue Tracking Systemを接続して管理することができます。 使用中のIssue Tracking System情報を入力してください。"
       },
+      "error-member": "現在存在しないユーザ情報です。",
       "continue-channel-creation": "Channelまで生成しないとUser Feedbackを使用できません。\nChannel生成を続けますか？",
       "guide": {
         "invalid-member": "無効なMemberリストが存在します。",
@@ -311,7 +312,8 @@
     "no-channel": "登録されたチャンネルがありません。",
     "guide": "案内",
     "more": "もっと",
-    "shrink": "縮む"
+    "shrink": "縮む",
+    "feedback-detail": "フィードバック詳細です"
   },
   "toast": {
     "sign-in": "ログイン成功",

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

@@ -221,6 +221,7 @@
         "apiKeys": "피드백 수집 API의 API Key 정보를 관리합니다. API를 활용해 피드백을 수집한다면 Key 정보를 생성해 주세요.",
         "issueTracker": "UserFeedback 피드백과 Issue Tracking System을 연결해서 관리할 수 있습니다. 사용 중인 Issue Tracking System 정보를 입력해 주세요."
       },
+      "error-member": "현재 존재하지 않는 User 정보 입니다.",
       "continue-channel-creation": "Channel까지 생성해야 UserFeedback을 사용할 수 있습니다.\nChannel 생성을 이어서 하시겠어요?",
       "guide": {
         "invalid-member": "유효하지 않은 Member 목록이 존재합니다.",
@@ -312,7 +313,8 @@
     "no-channel": "등록된 Channel이 없습니다.",
     "guide": "안내",
     "more": "더보기",
-    "shrink": "줄이기"
+    "shrink": "줄이기",
+    "feedback-detail": "피드백 상세"
   },
   "toast": {
     "sign-in": "로그인 성공",

apps/web/src/components/etc/CheckedTableHead/CheckedTableHead.tsx

@@ -29,6 +29,7 @@ interface IProps {
     projectId: number;
     channelId: number;
     ids: number[];
+    fieldIds: number[];
   };
   disabled?: boolean;
 }
@@ -73,6 +74,7 @@ const CheckedTableHead: React.FC<IProps> = (props) => {
               <DownloadButton
                 query={{ ids: download.ids }}
                 count={download.ids.length}
+                fieldIds={download.fieldIds}
                 isHead
               />
               <div className="border-r-fill-secondary h-4 border-r-[1px]" />

apps/web/src/components/etc/DescriptionTooltip/DescriptionTooltip.tsx

@@ -19,18 +19,26 @@ import type { Placement } from '@floating-ui/react';
 import { Icon, Tooltip, TooltipContent, TooltipTrigger } from '@ufb/ui';
 
 export interface ITooltipProps {
-  description?: string;
+  description: string;
   placement?: Placement;
+  color?: 'red';
 }
 
 const DescriptionTooltip: React.FC<ITooltipProps> = ({
   description,
   placement,
+  color,
 }) => {
   return (
     <Tooltip placement={placement ?? 'right'}>
       <TooltipTrigger>
-        <Icon name="InfoCircleFill" size={16} className="text-tertiary ml-1" />
+        <Icon
+          name="InfoCircleFill"
+          size={16}
+          className={[
+            color === 'red' ? 'text-red-primary' : 'text-tertiary ml-1',
+          ].join('')}
+        />
       </TooltipTrigger>
       <TooltipContent>{description}</TooltipContent>
     </Tooltip>

apps/web/src/containers/create-project/InputIssueTracker.tsx

@@ -107,6 +107,7 @@ const InputIssueTracker: React.FC<IProps> = () => {
         userId: member.user.id,
       })),
       roles: input.roles,
+      timezoneOffset: '+90:00',
     });
   };
 

apps/web/src/containers/create-project/InputMember.tsx

@@ -30,7 +30,7 @@ import {
   PopoverTrigger,
 } from '@ufb/ui';
 
-import { SelectBox, TableSortIcon } from '@/components';
+import { DescriptionTooltip, SelectBox, TableSortIcon } from '@/components';
 import { useCreateProject } from '@/contexts/create-project.context';
 import { useUserSearch } from '@/hooks';
 import type { InputMemberType } from '@/types/member.type';
@@ -45,17 +45,18 @@ const columns = (deleteMember: (index: number) => void, users: UserType[]) => [
     header: 'Email',
     enableSorting: false,
     cell: ({ getValue }) => {
+      // eslint-disable-next-line react-hooks/rules-of-hooks
+      const { t } = useTranslation();
       return (
         <>
           {users.some((v) => v.email === getValue()) ? (
             getValue()
           ) : (
             <div className="flex items-center gap-1">
               <span className="text-red-primary">{getValue()}</span>
-              <Icon
-                name="WarningCircleFill"
-                className="text-red-primary"
-                size={16}
+              <DescriptionTooltip
+                color="red"
+                description={t('main.create-project.error-member')}
               />
             </div>
           )}

apps/web/src/containers/tables/FeedbackTable/DownloadButton/DownloadButton.tsx

@@ -27,13 +27,15 @@ import useFeedbackTable from '../feedback-table.context';
 
 export interface IDownloadButtonProps {
   query: any;
+  fieldIds: number[];
   count?: number;
   isHead?: boolean;
 }
 
 const DownloadButton: React.FC<IDownloadButtonProps> = ({
-  count,
   query,
+  fieldIds,
+  count,
   isHead = false,
 }) => {
   const { channelId, projectId, createdAtRange } = useFeedbackTable();
@@ -49,10 +51,7 @@ const DownloadButton: React.FC<IDownloadButtonProps> = ({
   }, [query]);
 
   const { mutateAsync } = useDownload({
-    params: {
-      channelId,
-      projectId,
-    },
+    params: { channelId, projectId },
     options: {
       onSuccess: async () => {
         setIsClicked(false);
@@ -71,8 +70,7 @@ const DownloadButton: React.FC<IDownloadButtonProps> = ({
     toast.promise(
       mutateAsync({
         type,
-        limit: count,
-        page: 1,
+        fieldIds,
         query: {
           ...query,
           createdAt: {

apps/web/src/containers/tables/FeedbackTable/FeedbackDetail/FeedbackDetail.tsx

@@ -25,6 +25,7 @@ import {
   useRole,
 } from '@floating-ui/react';
 import dayjs from 'dayjs';
+import { useTranslation } from 'react-i18next';
 
 import { Badge, Icon } from '@ufb/ui';
 
@@ -44,6 +45,7 @@ interface IProps {
 }
 
 const FeedbackDetail: React.FC<IProps> = (props) => {
+  const { t } = useTranslation();
   const { channelId, id, projectId, onOpenChange, open } = props;
   const { data } = useFeedbackSearch(projectId, channelId, {
     query: { ids: [id] },
@@ -83,7 +85,9 @@ const FeedbackDetail: React.FC<IProps> = (props) => {
           >
             <div className="overflow-y-auto p-10">
               <div className="flex items-center">
-                <h1 className="font-20-bold flex-1">피드백 상세</h1>
+                <h1 className="font-20-bold flex-1">
+                  {t('text.feedback-detail')}
+                </h1>
                 <button
                   className="icon-btn icon-btn-tertiary icon-btn-md"
                   onClick={() => context.onOpenChange(false)}

apps/web/src/containers/tables/FeedbackTable/FeedbackTable.tsx

@@ -82,7 +82,7 @@ const FeedbackTable: React.FC<IFeedbackTableProps> = (props) => {
     setRowSelection({});
   }, [limit, query]);
 
-  const q = useMemo(
+  const formattedQuery = useMemo(
     () =>
       produce(query, (draft) => {
         if (sub) {
@@ -137,7 +137,7 @@ const FeedbackTable: React.FC<IFeedbackTableProps> = (props) => {
   } = useFeedbackSearch(
     projectId,
     channelId,
-    { page, limit, sort: sort as Record<string, never>, query: q },
+    { page, limit, sort: sort as Record<string, never>, query: formattedQuery },
     { enabled: channelId !== -1 },
   );
 
@@ -184,6 +184,16 @@ const FeedbackTable: React.FC<IFeedbackTableProps> = (props) => {
     [rowSelection],
   );
 
+  const fieldIds = useMemo(() => {
+    if (!fieldData) return [];
+    if (columnOrder.length === 0) return fieldData.map((v) => v.id);
+
+    return fieldData
+      .filter((v) => columnVisibility[v.key] !== false)
+      .sort((a, b) => columnOrder.indexOf(a.key) - columnOrder.indexOf(b.key))
+      .map((v) => v.id);
+  }, [columnOrder, columnVisibility, fieldData]);
+
   return (
     <div className="flex flex-col gap-2">
       <FeedbackTableBar
@@ -197,6 +207,7 @@ const FeedbackTable: React.FC<IFeedbackTableProps> = (props) => {
         fieldData={fieldData}
         meta={data?.meta}
         sub={sub}
+        formattedQuery={formattedQuery}
       />
       {fieldData && (
         <div className="overflow-x-auto">
@@ -221,7 +232,12 @@ const FeedbackTable: React.FC<IFeedbackTableProps> = (props) => {
                     onClickCancle={table.resetRowSelection}
                     onClickDelete={() => setOpenDeleteDialog(true)}
                     disabled={!perms.includes('feedback_delete')}
-                    download={{ channelId, projectId, ids: rowSelectionIds }}
+                    download={{
+                      channelId,
+                      projectId,
+                      ids: rowSelectionIds,
+                      fieldIds,
+                    }}
                   />
                 ) : (
                   table.getFlatHeaders().map((header) => (