diff --git a/gitlio/actions/viewPage.ts b/gitlio/actions/viewPage.ts index 3062b40..1eb2564 100644 --- a/gitlio/actions/viewPage.ts +++ b/gitlio/actions/viewPage.ts @@ -5,6 +5,7 @@ import { useSidebarIconsStore } from '@/store/sidebarIconsStore'; import experienceSectionStore from '@/store/experienceSectionStore'; import { useProjectsStore } from '@/store/projectStore'; import ContactSidebarStore from '@/store/contactSidebarStore'; +import useLayoutStore from '@/store/layoutDesignStore'; const API_URL = 'https://gitlio.fly.dev/api/'; @@ -14,6 +15,7 @@ export async function getPortfolioDataByDomain(domainName: string) { } export const updateStoresWithPortfolioData = async (domainName: string) => { + console.log('updateStoresWithPortfolioData 호출됨'); // 이 로그가 찍히는지 확인 try { const portfolioData = await getPortfolioDataByDomain(domainName); @@ -24,11 +26,20 @@ export const updateStoresWithPortfolioData = async (domainName: string) => { } // Assuming `portfolioData` includes sections that correspond to data needed for each store + IntroSidebarStore.setState({ profile: portfolioData.introData }); useSidebarIconsStore.setState({ dropAreas: portfolioData.skillData }); experienceSectionStore.setState({ sections: portfolioData.experienceData }); useProjectsStore.setState({ projects: portfolioData.projectData }); ContactSidebarStore.setState({ contactInfo: portfolioData.contactData }); + + const layoutStore = useLayoutStore.getState(); + layoutStore.intro.setOption(portfolioData.layoutData.introOption); + layoutStore.skill.setColor(portfolioData.layoutData.skillColor); + layoutStore.experience.setOption(portfolioData.layoutData.experienceOption); + layoutStore.contact.setOption(portfolioData.layoutData.contactOption); + + //console.log('Updated layout store:', layoutStore); } catch (error) { console.error(error); throw error; // 에러 발생 시 예외를 throw diff --git a/gitlio/app/editor/[portfolioId]/page.tsx b/gitlio/app/editor/[portfolioId]/page.tsx index 1913999..1e60514 100644 --- a/gitlio/app/editor/[portfolioId]/page.tsx +++ b/gitlio/app/editor/[portfolioId]/page.tsx @@ -9,6 +9,8 @@ import { updateStoresWithPortfolioData } from '@/actions/portfolio'; import { useEffect, useState } from 'react'; import { useRouter } from 'next/navigation'; import { useUserStore } from '@/store/userStore'; +import useModalStore from '@/store/modalStore'; +import ShareModal from '../_components/ShareModal'; interface EditPageProps { params: { @@ -17,33 +19,40 @@ interface EditPageProps { } export default function EditPage({ params }: EditPageProps) { const [isLoading, setIsLoading] = useState(true); // State to manage loading + const { isOpen, closeModal } = useModalStore(); const router = useRouter(); - const { portfolios, setPortfolios } = useUserStore((state) => ({ + const { portfolios, setCurrentPortfolio } = useUserStore((state) => ({ portfolios: state.portfolios, - setPortfolios: state.setPortfolios, + setCurrentPortfolio: state.setCurrentPortfolio, })); const { portfolioId } = params; console.log(params); useEffect(() => { - // Check if the portfolio exists in the user's store - // const portfolioExists = portfolios.some( - // (portfolio) => portfolio.portfolio_id.toString() === portfolioId - // ); - // - // if (!portfolioExists) { - // router.push('/error'); // Redirect to an error page if the portfolio ID is not found - // return; - // } + const fetchPortfolioData = async () => { + const portfolio = portfolios.find( + (portfolio) => portfolio.portfolio_id.toString() === portfolioId + ); - // Proceed to fetch and update stores with the portfolio data - updateStoresWithPortfolioData(portfolioId) - .then(() => setIsLoading(false)) - .catch((error) => { + //if (!portfolio) { + //router.push('/error'); // Redirect to an error page if the portfolio ID is not found + //return; + //} + //일치하는 포트폴리오 찾았으면 현재 포트폴리오로 세팅 + setCurrentPortfolio(portfolio); + + try { + await updateStoresWithPortfolioData(portfolioId); + setIsLoading(false); + } catch (error) { console.error('Failed to update stores:', error); setIsLoading(false); - }); - }, [portfolioId, portfolios, router]); + } + }; + + fetchPortfolioData(); + }, [portfolioId, portfolios, router, setCurrentPortfolio]); + const setSelectedSection = useSidebarStore( (state) => state.setSelectedSection ); @@ -89,6 +98,7 @@ export default function EditPage({ params }: EditPageProps) { {/* Other sections can be added here */} + {isOpen && } ); } diff --git a/gitlio/app/editor/_components/ShareModal.tsx b/gitlio/app/editor/_components/ShareModal.tsx new file mode 100644 index 0000000..042be67 --- /dev/null +++ b/gitlio/app/editor/_components/ShareModal.tsx @@ -0,0 +1,57 @@ +'use client'; +import useModalStore from '@/store/modalStore'; +import { useUserStore } from '@/store/userStore'; +import { useEffect, useState } from 'react'; + +export default function ShareModal() { + const { closeModal } = useModalStore(); + const { portfolios, currentPortfolio } = useUserStore(); + const [portfolioUrl, setPortfolioUrl] = useState(''); + + useEffect(() => { + console.log('currentPortfolio:', currentPortfolio); // 로그 추가 + console.log('portfolios:', portfolios); // 로그 추가 + if (currentPortfolio && currentPortfolio.portfolio_id) { + const matchingPortfolio = portfolios.find( + (portfolio) => portfolio.portfolio_id === currentPortfolio.portfolio_id + ); + + if (matchingPortfolio) { + const url = `https://gitlio-frontend.vercel.app/portfolio/${matchingPortfolio.domain_name}`; + setPortfolioUrl(url); + console.log('Generated URL:', url); // 추가된 로그 + } + } + }, [currentPortfolio, portfolios]); + return ( +
+
+

+ 다음 링크를 복사하십시오 +

+
+ + +
+
+ +
+
+
+ ); +} diff --git a/gitlio/app/editor/_components/TopBar.tsx b/gitlio/app/editor/_components/TopBar.tsx index d3b178b..cf298b0 100644 --- a/gitlio/app/editor/_components/TopBar.tsx +++ b/gitlio/app/editor/_components/TopBar.tsx @@ -1,3 +1,5 @@ +'use client'; + import Image from 'next/image'; import { FaGlobeAsia } from 'react-icons/fa'; import { LuAlignJustify, LuBarChartBig } from 'react-icons/lu'; @@ -8,9 +10,11 @@ import React, { useState } from 'react'; import { savePortfolioData } from '@/actions/portfolio'; import { useRouter, usePathname } from 'next/navigation'; import useToastStore from '@/store/toastStore'; +import useModalStore from '@/store/modalStore'; export default function TopBar() { const pathname = usePathname().split('/').filter(Boolean).pop(); + const { openModal } = useModalStore(); const router = useRouter(); const setShowToast = useToastStore((state) => state.setShowToast); @@ -25,9 +29,14 @@ export default function TopBar() { .catch((error: any) => console.error('Error saving data:', error)); }; - const handleLogoClick = () => { + const handleLogoClick = (): void => { router.push('/studio/dashboard'); }; + + const handleShareClick = (): void => { + openModal(); + }; + return (
@@ -45,7 +54,10 @@ export default function TopBar() {
- + 공유 diff --git a/gitlio/app/portfolio/[domainName]/page.tsx b/gitlio/app/portfolio/[domainName]/page.tsx index d1407e4..2bfe29b 100644 --- a/gitlio/app/portfolio/[domainName]/page.tsx +++ b/gitlio/app/portfolio/[domainName]/page.tsx @@ -14,9 +14,12 @@ export default function PortfolioPage({ }: { params: { domainName: string }; }) { + console.log('PortfolioPage 컴포넌트 렌더링'); // 이 로그가 찍히는지 확인 const [loading, setLoading] = useState(true); const router = useRouter(); + // 스토어 초기화 함수 + useEffect(() => { const fetchData = async () => { try { @@ -28,7 +31,6 @@ export default function PortfolioPage({ router.push('/error'); // 에러 발생 시 리다이렉션 } }; - fetchData(); }, [params.domainName]); diff --git a/gitlio/store/modalStore.ts b/gitlio/store/modalStore.ts new file mode 100644 index 0000000..abdd5b6 --- /dev/null +++ b/gitlio/store/modalStore.ts @@ -0,0 +1,15 @@ +import { create } from 'zustand'; + +interface ModalStore { + isOpen: boolean; + openModal: () => void; + closeModal: () => void; +} + +const useModalStore = create((set) => ({ + isOpen: false, + openModal: () => set({ isOpen: true }), + closeModal: () => set({ isOpen: false }), +})); + +export default useModalStore;