chore: 원격 변경사항 추가

Author: xaexunxang

src/features/dashboard/model/ResponseStore.tsx

@@ -0,0 +1,47 @@
+import { create } from 'zustand';
+import { responsesData } from '../../../shared/types/responseType';
+
+interface ResponseState {
+    response: responsesData[];
+    selectedField: string;
+    selectedResponse: responsesData[]; 
+    currentIndex: number;
+
+    setResponses: (responses: responsesData[]) => void;
+    setSelectedField: (field: string) => void;
+    setSelectedResponse: (responseName: string, responseEmail: string) => void;
+    setCurrentIndex: (updateFn: (prevIndex: number) => number) => void;
+}
+
+export const useResponseStore = create<ResponseState>((set) => ({
+    response: [],
+    selectedField: '',
+    selectedResponse: [],
+    currentIndex: 0,
+
+    setResponses: (response) => { 
+        set(() => ({ 
+            response: response, 
+            selectedField: response.length > 0 ? Object.keys(response[0])[1] : '' 
+        }));
+    },
+
+    setSelectedField: (field) => {
+        set({ selectedField: field });
+    },
+
+    setSelectedResponse: (responseName, responseEmail) => {
+        set((state) => {
+            const filteredResponses = state.response.filter((res) => res.name === responseName && res.email === responseEmail);
+            return {
+                selectedResponse: filteredResponses,
+                currentIndex: 0,
+            };
+        });
+    },
+    
+    setCurrentIndex: (updateFn) => set((state) => ({
+        currentIndex: updateFn(state.currentIndex),
+    })),
+
+}));

src/features/dashboard/model/TicketOptionStore.tsx

@@ -0,0 +1,33 @@
+import { create } from "zustand";
+
+export interface TOption {
+    type: string;
+    optionName: string;
+    required: boolean;
+    choices: string[];
+}
+
+interface TicketOptionState {
+    currentPage: number;
+    setCurrentPage: (page: number) => void;
+
+    selectedOptions: { [index: number]: { [key: string]: string | string[] } };
+    setOption: (index: number, optionName: string, value: string | string[]) => void;
+}
+
+export const useTicketOptionStore = create<TicketOptionState>((set) => ({
+    currentPage: 1,
+    setCurrentPage: (page: number) => set({ currentPage: page }),
+
+    selectedOptions: {},
+    setOption: (index, optionName, value) => {
+        set((state) => {
+            const updatedSelectedOptions = { ...state.selectedOptions };
+            if (!updatedSelectedOptions[index]) {
+                updatedSelectedOptions[index] = {};
+            }
+            updatedSelectedOptions[index][optionName] = value;
+            return { selectedOptions: updatedSelectedOptions };
+        });
+    },
+}));

src/features/dashboard/ui/OptionSection.tsx

@@ -0,0 +1,49 @@
+import Checkbox from "../../../../design-system/ui/Checkbox";
+import { Option } from "../../../shared/types/responseType";
+
+interface Response {
+  id: string;
+  name: string;
+  selectedOptions: {
+    [key: string]: string;
+  };
+}
+
+interface OptionSectionProps {
+  responses: Response[];
+  options: Option[];
+}
+
+const OptionSection = ({ responses, options }: OptionSectionProps) => {
+  return (
+    <div>
+      {responses.map((response) => (
+        <div key={response.id}>
+          {options.map((option) => {
+            const selectedChoice = response.selectedOptions[option.optionName];
+
+            return (
+              <div key={option.optionName}>
+                <p className="block mb-2 text-sm md:text-lg">{option.optionName}</p>
+                <ul className="space-y-1">
+                  {option.choices.map((choice: string) => (
+                    <li key={choice}>
+                      <Checkbox
+                        label={choice}
+                        checked={selectedChoice === choice}
+                        onChange={() => {}}
+                        disabled={selectedChoice !== choice}
+                      />
+                    </li>
+                  ))}
+                </ul>
+              </div>
+            );
+          })}
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export default OptionSection;

src/features/dashboard/ui/ResponseFilter.tsx

@@ -0,0 +1,91 @@
+import IconButton from '../../../../design-system/ui/buttons/IconButton';
+import { responsesData } from '../../../shared/types/responseType';
+import DropDown from '../../../shared/ui/DropDown';
+import { createFieldMappings } from '../../lib/createFieldMappings';
+import rightButton from '../../../../public/assets/main/RightButton.svg';
+import leftButton from '../../../../public/assets/main/LeftButton.svg';
+
+interface ResponseFilterProps {
+    responses: responsesData[];
+    listType: 'summary' | 'query' | 'individual';
+    selectedField: { v1: string; v2: string };
+    setSelectedField: (v1: string, v2: string) => void;
+    setCurrentIndex: (updateFn: (prevIndex: number) => number) => void;
+    currentIndex: number;
+    responsesLength: number;
+    options: { v1: string; v2: string }[];
+}
+
+const ResponseFilter = ({
+    responses,
+    listType,
+    selectedField,
+    setSelectedField,
+    setCurrentIndex,
+    currentIndex,
+    responsesLength,
+    options
+}: ResponseFilterProps) => {
+    const { fieldMapToKorean } = createFieldMappings(responses);
+    const optionsToKorean = options.map(option => ({
+        v1: fieldMapToKorean[option.v1] || option.v1,
+        v2: option.v2
+    }));
+    const handlePageChange = (direction: 'prev' | 'next') => {
+        const nextIndex = direction === 'prev' ? Math.max(currentIndex - 1, 0) : Math.min(currentIndex + 1, responsesLength - 1);
+        setCurrentIndex(() => nextIndex);
+
+        const nextOption = options[nextIndex];
+
+        if (nextOption) {
+            setSelectedField(nextOption.v1, nextOption.v2);
+        }
+    };
+    return (
+        <div className="bg-white p-4 flex flex-col gap-2 mb-4">
+            <div className="flex justify-between items-center">
+                <div className="w-2/3">
+                    <DropDown
+                        options={optionsToKorean}
+                        selectedValue={selectedField.v1}
+                        onSelect={(selectedName, selectedEmail) => {
+                            const selectedOption = options.find(opt =>
+                                (listType === 'query' ? fieldMapToKorean[opt.v1] === selectedName : opt.v1 === selectedName) &&
+                                opt.v2 === selectedEmail
+                            );
+                            if (selectedOption) {
+                                setSelectedField(selectedOption.v1, selectedOption.v2);
+                                setCurrentIndex(() => 0);
+                            }
+                        }}
+                    />
+                </div>
+                <div className="flex items-center gap-1 md:gap-2 ml-auto ">
+                    <IconButton
+                        iconPath={<img src={leftButton} alt="왼쪽 버튼" />}
+                        onClick={() => {
+                            if (listType === 'individual') {
+                                setCurrentIndex((prev) => Math.max(prev - 1, 0));
+                            } else {
+                                handlePageChange('prev');
+                            }
+                        }}
+                    />
+                    <span className='text-sm md:text-base w-10 text-center'>{Math.floor(currentIndex / 1) + 1} / {Math.ceil(responsesLength / 1)}</span>
+                    <IconButton
+                        iconPath={<img src={rightButton} alt="오른쪽 버튼" />}
+                        onClick={() => {
+                            if (listType === 'individual') {
+                                setCurrentIndex((prev) => Math.min(prev + 1, responsesLength - 1));
+                            } else {
+                                handlePageChange('next');
+                            }
+                        }}
+                    />
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default ResponseFilter;

src/features/dashboard/ui/ResponsesList.tsx

@@ -0,0 +1,112 @@
+import { useResponseStore } from '../model/ResponseStore';
+import { responsesInfo } from '../../../shared/types/responseType';
+import ResponseFilter from './ResponseFilter';
+import SelectedResponseList from './SelectedResponseList';
+import { createFieldMappings } from '../../lib/createFieldMappings';
+import { useEffect } from 'react';
+
+interface ResponsesListProps {
+    listType: 'summary' | 'query' | 'individual';
+}
+
+const ResponsesList = ({ listType }: ResponsesListProps) => {
+    const { response, selectedField, setSelectedField, selectedResponse, setSelectedResponse, currentIndex, setCurrentIndex } = useResponseStore();
+    const { fieldMap, fieldMapToKorean } = createFieldMappings(response);
+    const queryOptions = response && response[0]
+        ? Object.keys(response[0])
+            .filter(key => key !== 'id' && key !== 'selectedOptions')
+            .map(key => ({
+                v1: fieldMap[key] || key,
+                v2: ""
+            }))
+        : [];
+
+    useEffect(() => {
+        setCurrentIndex(() => 0);
+    }, [listType, setCurrentIndex]);
+
+    const renderSection = (title: string, key: keyof typeof responsesInfo[0], isSummaryPage: boolean) => {
+        const transTitle = fieldMapToKorean[title];
+
+        return (
+            <div className="bg-white p-4 flex flex-col gap-2 mb-4">
+                <div className="flex justify-between items-center text-xs bg-white px-2 md:px-3 py-3">
+                    <p className='text-base font-bold'>{transTitle}</p>
+                    <p>응답 {response.length}개</p>
+                </div>
+
+                {response.length === 0 ? (
+                    <p>응답이 없습니다.</p>
+                ) : (
+                    <div className={isSummaryPage ? "h-full max-h-48 overflow-y-auto space-y-2" : "h-full overflow-y-auto space-y-2"}>
+                        {response.map((response) => (
+                            <div className="flex justify-between text-xs bg-gray-100 shadow-sm px-2 md:px-3 py-3 gap-2" key={response.id}>
+                                <p>{typeof response[key] === 'object' ? JSON.stringify(response[key]) : response[key]}</p>
+                            </div>
+                        ))}
+                    </div>
+                )}
+            </div>
+        );
+    };
+
+    const renderList = () => {
+        switch (listType) {
+            case 'summary':
+                return (
+                    <>
+                        {renderSection('name', 'name', true)}
+                        {renderSection('phone', 'phone', true)}
+                        {renderSection('email', 'email', true)}
+                        {renderSection('grade', 'grade', true)}
+                        {renderSection('email', 'email', true)}
+                    </>
+                );
+            case 'query':
+                return (
+                    <>
+                        <ResponseFilter
+                            responses={response}
+                            listType={listType}
+                            selectedField={{ v1: fieldMapToKorean[selectedField], v2: "" }}
+                            setSelectedField={setSelectedField}
+                            setCurrentIndex={setCurrentIndex}
+                            currentIndex={currentIndex}
+                            responsesLength={queryOptions.length}
+                            options={queryOptions}
+                        />
+                        {renderSection(selectedField, selectedField as keyof typeof responsesInfo[0], false)}
+                    </>
+                );
+            case 'individual':
+                return (
+                    <div>
+                        <ResponseFilter
+                            responses={response}
+                            listType={listType}
+                            selectedField={selectedResponse.length > 0 ?
+                                { v1: selectedResponse[0].name, v2: selectedResponse[0].email } : { v1: '전체', v2: '' }}
+                            setSelectedField={setSelectedResponse}
+                            setCurrentIndex={setCurrentIndex}
+                            currentIndex={currentIndex}
+                            responsesLength={selectedResponse.length > 0 ? selectedResponse.length : response.length}
+                            options={[{ v1: '전체', v2: '' },
+                            ...response.map((res) => ({ v1: res.name, v2: res.email }))]}
+                        />
+                        <SelectedResponseList
+                            currentIndex={currentIndex}
+                        />
+                    </div>
+                );
+            default:
+                return null;
+        }
+    };
+    return (
+        <div>
+            {renderList()}
+        </div>
+    );
+};
+
+export default ResponsesList;