69 lines
2.2 KiB
TypeScript
69 lines
2.2 KiB
TypeScript
import { useEffect, useState } from 'react';
|
|
import { motion } from 'framer-motion';
|
|
import { useTranslation } from 'react-i18next';
|
|
import { FaqItem } from '../../model/types';
|
|
import { DetailMotionDuration, DetailMotionStyle, DetailMotionVariants } from '@/entities/common/model/constant';
|
|
import { FullMenuClose } from '@/entities/common/ui/full-menu-close';
|
|
|
|
export interface FaqDetaillProps {
|
|
detailOn: boolean;
|
|
setDetailOn: (detailOn: boolean) => void;
|
|
faqItem: FaqItem
|
|
};
|
|
export const FaqDetail = ({
|
|
detailOn,
|
|
setDetailOn,
|
|
faqItem
|
|
}: FaqDetaillProps) => {
|
|
const { t } = useTranslation();
|
|
|
|
const [cursorId, setCursorId] = useState<number>();
|
|
const [seq, setSeq] = useState<string>();
|
|
const [category, setCategory] = useState<string>();
|
|
const [title, setTitle] = useState<string>();
|
|
const [contents, setContents] = useState<string>();
|
|
|
|
const onClickToClose = () => {
|
|
setDetailOn(false);
|
|
};
|
|
|
|
useEffect(() => {
|
|
setCursorId(faqItem?.cursorId);
|
|
setSeq(faqItem?.seq);
|
|
setCategory(faqItem?.category);
|
|
setTitle(faqItem?.title);
|
|
setContents(faqItem?.contents);
|
|
}, [faqItem]);
|
|
|
|
return (
|
|
<>
|
|
<motion.div
|
|
className="full-menu-modal"
|
|
initial="hidden"
|
|
animate={ (detailOn)? 'visible': 'hidden' }
|
|
variants={ DetailMotionVariants }
|
|
transition={ DetailMotionDuration }
|
|
style={ DetailMotionStyle }
|
|
>
|
|
{ contents &&
|
|
<div className="full-menu-container pdw-16">
|
|
<div className="full-menu-header">
|
|
<div className="full-menu-title center">{ t('support.qna.title') }</div>
|
|
<div className="full-menu-actions">
|
|
<FullMenuClose
|
|
addClass="full-menu-close"
|
|
onClickToCallback={ onClickToClose }
|
|
></FullMenuClose>
|
|
</div>
|
|
</div>
|
|
<div className="faq-detail">
|
|
<div className="faq-detail__title">{ title }</div>
|
|
<div className="faq-detail__divider"></div>
|
|
<div className="faq-detail__body" dangerouslySetInnerHTML={{ __html: contents || '' }}></div>
|
|
</div>
|
|
</div>
|
|
}
|
|
</motion.div>
|
|
</>
|
|
);
|
|
}; |