Skip to content

[Fix] FaQ 페이지 수정 (뒤로가기, 질문 삭제) #136

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
arisue2002 merged 2 commits into from
Nov 8, 2025
Merged

[Fix] FaQ 페이지 수정 (뒤로가기, 질문 삭제) #136

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
2145ff9
FaQ에서 고객센터 문의 질문 삭제
ipcarepi Nov 8, 2025
d69b22d
faq 화면에 뒤로가기 버튼 추가
ipcarepi Nov 8, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
90 changes: 51 additions & 39 deletions src/components/screens/FaqScreen.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
import { useState } from 'react';
import { ChevronDown, ChevronUp, TypeOutline } from 'lucide-react';
import { ChevronDown, ChevronUp, TypeOutline, ArrowLeft } from 'lucide-react';
import { useDispatch } from 'react-redux';
import { setActiveTab } from '../../store/slices/appSlice';

// FAQ 데이터
const faqData = {
Expand Down Expand Up @@ -76,18 +78,6 @@ const faqData = {
],

고객지원: [
{
id: 7,
title: '고객센터 운영시간은?',
content:
'평일 오전 9시부터 오후 6시까지 운영됩니다. 주말 및 공휴일은 휴무입니다.',
},
{
id: 13,
title: '1:1 문의는 어떻게 하나요?',
content:
'FAQ 하단의 “1:1 문의하기” 버튼을 클릭하면 문의 페이지로 이동합니다. 접수된 문의는 평균 24시간 이내 답변됩니다.',
},
{
id: 14,
title: '서비스 오류를 발견했어요.',
Expand All @@ -100,28 +90,29 @@ const faqData = {
content:
'환경 기업, 단체와의 제휴를 환영합니다. [email protected] 으로 메일을 보내주시면 담당자가 확인 후 연락드립니다.',
},

],
};


// 개별 FAQ 아이템 컴포넌트
function FaqItem({ faq, isOpen, onToggle }) {
return (

<div className='border-b border-gray-200'>
<button
onClick={onToggle}
className={`w-full flex items-center justify-between p-5 text-left transition
<button
onClick={onToggle}
className={`w-full flex items-center justify-between p-5 text-left transition
${isOpen ? 'bg-white-50' : 'hover:bg-white-50'}
focus:outline-none focus:ring-0 focus-visible:outline-none`}
>
<span className='font-medium text-gray-800'>{faq.title}</span>
{isOpen ? (
<ChevronUp className='text-gray-500 flex-shrink-0' size={20} />
) : (
<ChevronDown className='text-gray-500 flex-shrink-0' size={20} />
)}
</button>
>
<span className='font-medium text-gray-800'>{faq.title}</span>
{isOpen ? (
<ChevronUp className='text-gray-500 flex-shrink-0' size={20} />
) : (
<ChevronDown className='text-gray-500 flex-shrink-0' size={20} />
)}
</button>


{isOpen && (
Expand All @@ -134,7 +125,8 @@ function FaqItem({ faq, isOpen, onToggle }) {
}

// 메인 FAQ 페이지
export default function FaqScreen() {
export default function FaqScreen({ onNavigate }) {
const dispatch = useDispatch();
const [selectedTab, setSelectedTab] = useState('인증');
const [openItemId, setOpenItemId] = useState(null);

Expand All @@ -144,17 +136,38 @@ export default function FaqScreen() {
setOpenItemId(openItemId === id ? null : id);
};

const handleGoBack = () => {
if (window.history.length > 1) {
window.history.back();
return;
}
if (typeof onNavigate === 'function') {
onNavigate('home');
return;
}
dispatch(setActiveTab('home'));
};

return (
<div className='min-h-screen bg-gray-50 py-8'>
<div className='max-w-4xl mx-auto px-4'>
{/* 헤더 */}
<div className='text-center mb-8'>
<h1 className='text-3xl font-bold text-gray-900 mb-2'>
FAQ & 고객지원
</h1>
<p className='text-gray-600'>
궁금하신 내용을 빠르게 찾아보세요
</p>
<div className='flex items-center justify-center mb-8 relative'>
<button
onClick={handleGoBack}
style={{ backgroundColor: '#f9fafb' }} // 기본 배경색
className='absolute left-0 flex items-center p-2'
>
<ArrowLeft className="w-5 h-5 text-black" />
</button>
<div>
<h1 className='text-3xl font-bold text-gray-900 mb-2'>
FAQ & 고객지원
</h1>
<p className='text-gray-600'>
궁금하신 내용을 빠르게 찾아보세요
</p>
</div>
</div>

{/* 탭 메뉴 */}
Expand All @@ -166,13 +179,12 @@ export default function FaqScreen() {
setSelectedTab(tab);
setOpenItemId(null); // 탭 변경시 열린 항목 초기화
}}
className={`flex-1 py-3 px-4 rounded-md font-medium transition ${
selectedTab === tab
? 'bg-lime-500 text-white'
: 'bg-white text-gray-600 hover:bg-gray-100'
}`}
className={`flex-1 py-3 px-4 rounded-md font-medium transition ${selectedTab === tab
? 'bg-lime-500 text-white'
: 'bg-white text-gray-600 hover:bg-gray-100'
}`}
>
{tab}
{tab}
</button>
))}
</div>
Expand Down