From 992156b3eaf2b7121affb822910cdb175241862c Mon Sep 17 00:00:00 2001 From: Jayjunyoung Date: Mon, 17 Jun 2024 11:43:46 +0900 Subject: [PATCH 1/5] =?UTF-8?q?feat:=20=EC=A0=84=EC=97=AD=20=EC=83=81?= =?UTF-8?q?=ED=83=9C=EA=B4=80=EB=A6=AC=EB=A5=BC=20=ED=86=B5=ED=95=9C=20mod?= =?UTF-8?q?al=20=EB=9E=9C=EB=8D=94=EB=A7=81=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- gitlio/app/editor/[portfolioId]/page.tsx | 5 +++- gitlio/app/editor/_components/ShareModal.tsx | 31 ++++++++++++++++++++ gitlio/app/editor/_components/TopBar.tsx | 19 ++++++++++-- gitlio/store/modalStore.ts | 15 ++++++++++ 4 files changed, 66 insertions(+), 4 deletions(-) create mode 100644 gitlio/app/editor/_components/ShareModal.tsx create mode 100644 gitlio/store/modalStore.ts diff --git a/gitlio/app/editor/[portfolioId]/page.tsx b/gitlio/app/editor/[portfolioId]/page.tsx index 81c3da2..a1d63dc 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,6 +19,7 @@ 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) => ({ portfolios: state.portfolios, @@ -80,7 +83,6 @@ export default function EditPage({ params }: EditPageProps) { onClick={() => setSelectedSection('project')} className="mb-4 cursor-pointer" > -
{/* 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..81cedeb --- /dev/null +++ b/gitlio/app/editor/_components/ShareModal.tsx @@ -0,0 +1,31 @@ +'use client'; +import useModalStore from '@/store/modalStore'; + +export default function ShareModal() { + const { closeModal } = useModalStore(); + return ( +
+
+

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

+
+ + +
+
+ +
+
+
+ ); +} diff --git a/gitlio/app/editor/_components/TopBar.tsx b/gitlio/app/editor/_components/TopBar.tsx index 0a8609e..d039ce1 100644 --- a/gitlio/app/editor/_components/TopBar.tsx +++ b/gitlio/app/editor/_components/TopBar.tsx @@ -1,24 +1,34 @@ +'use client'; + import Image from 'next/image'; import { FaGlobeAsia } from 'react-icons/fa'; import { LuAlignJustify, LuBarChartBig } from 'react-icons/lu'; import PreviewButton from '@/app/editor/_components/PreviewButton'; import { SignedIn, SignedOut, SignInButton, UserButton } from '@clerk/nextjs'; import { FaSignInAlt } from 'react-icons/fa'; -import React from 'react'; +import React, { useState } from 'react'; import { savePortfolioData } from '@/actions/portfolio'; import { useRouter, usePathname } from 'next/navigation'; +import useModalStore from '@/store/modalStore'; export default function TopBar() { const pathname = usePathname().split('/').filter(Boolean).pop(); + const { openModal } = useModalStore(); + function saveData() { if (!pathname) return; savePortfolioData(pathname).then((r) => console.log(r)); } const router = useRouter(); - const handleLogoClick = () => { + const handleLogoClick = (): void => { router.push('/studio/dashboard'); }; + + const handleShareClick = (): void => { + openModal(); + }; + return (
@@ -36,7 +46,10 @@ export default function TopBar() {
- + 공유 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; From ae614e1d6b1fabaded37965d8d402202fbe47221 Mon Sep 17 00:00:00 2001 From: Jayjunyoung Date: Mon, 17 Jun 2024 21:19:35 +0900 Subject: [PATCH 2/5] =?UTF-8?q?feat:=20=ED=8F=AC=ED=8A=B8=ED=8F=B4?= =?UTF-8?q?=EB=A6=AC=EC=98=A4=20=EB=B3=84=20=EB=8F=84=EB=A9=94=EC=9D=B8=20?= =?UTF-8?q?=EB=84=A4=EC=9E=84=EC=9D=84=20=ED=8F=AC=ED=95=A8=ED=95=9C=20url?= =?UTF-8?q?=20=ED=81=B4=EB=A6=BD=EB=B3=B4=EB=93=9C=20=EB=B3=B5=EC=82=AC=20?= =?UTF-8?q?=EA=B8=B0=EB=8A=A5=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- gitlio/actions/viewPage.ts | 12 ++++++ gitlio/app/editor/[portfolioId]/page.tsx | 38 +++++++++++-------- .../(sideBarLayout)/SectionLayout.tsx | 3 +- gitlio/app/editor/_components/ShareModal.tsx | 28 ++++++++++++-- 4 files changed, 59 insertions(+), 22 deletions(-) diff --git a/gitlio/actions/viewPage.ts b/gitlio/actions/viewPage.ts index 3062b40..ba64c3e 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/'; @@ -29,6 +30,17 @@ export const updateStoresWithPortfolioData = async (domainName: string) => { experienceSectionStore.setState({ sections: portfolioData.experienceData }); useProjectsStore.setState({ projects: portfolioData.projectData }); ContactSidebarStore.setState({ contactInfo: portfolioData.contactData }); + + const layoutStore = useLayoutStore.getState(); + if (portfolioData.layoutData) { + 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 a1d63dc..4c1fc5b 100644 --- a/gitlio/app/editor/[portfolioId]/page.tsx +++ b/gitlio/app/editor/[portfolioId]/page.tsx @@ -21,32 +21,38 @@ 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 - ); + const fetchPortfolioData = async () => { + const portfolio = portfolios.find( + (portfolio) => portfolio.portfolio_id.toString() === portfolioId + ); - if (!portfolioExists) { - router.push('/error'); // Redirect to an error page if the portfolio ID is not found - return; - } + if (!portfolio) { + router.push('/error'); // Redirect to an error page if the portfolio ID is not found + return; + } + //일치하는 포트폴리오 찾았으면 현재 포트폴리오로 세팅 + setCurrentPortfolio(portfolio); - // Proceed to fetch and update stores with the portfolio data - updateStoresWithPortfolioData(portfolioId) - .then(() => setIsLoading(false)) - .catch((error) => { + 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 ); diff --git a/gitlio/app/editor/_components/(sideBarLayout)/SectionLayout.tsx b/gitlio/app/editor/_components/(sideBarLayout)/SectionLayout.tsx index 1c29544..1bc082c 100644 --- a/gitlio/app/editor/_components/(sideBarLayout)/SectionLayout.tsx +++ b/gitlio/app/editor/_components/(sideBarLayout)/SectionLayout.tsx @@ -38,10 +38,9 @@ const SectionLayout: React.FC = ({ section = 'skill' }) => { return (

{section} Layout Options

- {['introduction', 'experience', 'skill', 'project', 'contact'].includes( + {['introduction', 'experience', 'project', 'contact'].includes( section ) && ( -
diff --git a/gitlio/app/editor/_components/ShareModal.tsx b/gitlio/app/editor/_components/ShareModal.tsx index 81cedeb..07af156 100644 --- a/gitlio/app/editor/_components/ShareModal.tsx +++ b/gitlio/app/editor/_components/ShareModal.tsx @@ -1,8 +1,25 @@ '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(() => { + 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); + } + } + }, [currentPortfolio, portfolios]); return (
@@ -12,11 +29,14 @@ export default function ShareModal() {
-
From a419634d3e5ca64a48bc2ad3a71761f6adf41b37 Mon Sep 17 00:00:00 2001 From: Jayjunyoung Date: Wed, 19 Jun 2024 11:30:16 +0900 Subject: [PATCH 3/5] =?UTF-8?q?feat:=20=EC=82=AC=EC=9A=A9=EC=9E=90=20?= =?UTF-8?q?=ED=8F=AC=ED=8A=B8=ED=8F=B4=EB=A6=AC=EC=98=A4=20=EA=B3=B5?= =?UTF-8?q?=EC=9C=A0=20=EA=B8=B0=EB=8A=A5=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- gitlio/actions/viewPage.ts | 17 ++++++++--------- gitlio/app/editor/_components/ShareModal.tsx | 5 +++-- gitlio/app/portfolio/[domainName]/page.tsx | 4 +++- 3 files changed, 14 insertions(+), 12 deletions(-) diff --git a/gitlio/actions/viewPage.ts b/gitlio/actions/viewPage.ts index ba64c3e..1eb2564 100644 --- a/gitlio/actions/viewPage.ts +++ b/gitlio/actions/viewPage.ts @@ -15,6 +15,7 @@ export async function getPortfolioDataByDomain(domainName: string) { } export const updateStoresWithPortfolioData = async (domainName: string) => { + console.log('updateStoresWithPortfolioData 호출됨'); // 이 로그가 찍히는지 확인 try { const portfolioData = await getPortfolioDataByDomain(domainName); @@ -25,6 +26,7 @@ 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 }); @@ -32,15 +34,12 @@ export const updateStoresWithPortfolioData = async (domainName: string) => { ContactSidebarStore.setState({ contactInfo: portfolioData.contactData }); const layoutStore = useLayoutStore.getState(); - if (portfolioData.layoutData) { - 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); - } + 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/_components/ShareModal.tsx b/gitlio/app/editor/_components/ShareModal.tsx index 07af156..23c44b4 100644 --- a/gitlio/app/editor/_components/ShareModal.tsx +++ b/gitlio/app/editor/_components/ShareModal.tsx @@ -17,6 +17,7 @@ export default function ShareModal() { if (matchingPortfolio) { const url = `https://gitlio-frontend.vercel.app/portfolio/${matchingPortfolio.domain_name}`; setPortfolioUrl(url); + console.log('Generated URL:', url); // 추가된 로그 } } }, [currentPortfolio, portfolios]); @@ -34,10 +35,10 @@ export default function ShareModal() { disabled />
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]); From 86e707431a9ee51d02cfc53ac5fd69d033c640c4 Mon Sep 17 00:00:00 2001 From: Jayjunyoung Date: Wed, 19 Jun 2024 20:42:08 +0900 Subject: [PATCH 4/5] =?UTF-8?q?design:=20css=20=EC=9D=BC=EB=B6=80=20?= =?UTF-8?q?=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- gitlio/app/editor/[portfolioId]/page.tsx | 12 ------------ gitlio/app/editor/_components/ShareModal.tsx | 9 ++++++--- gitlio/app/editor/_components/TopBar.tsx | 13 +------------ 3 files changed, 7 insertions(+), 27 deletions(-) diff --git a/gitlio/app/editor/[portfolioId]/page.tsx b/gitlio/app/editor/[portfolioId]/page.tsx index f2b5d4c..4c1fc5b 100644 --- a/gitlio/app/editor/[portfolioId]/page.tsx +++ b/gitlio/app/editor/[portfolioId]/page.tsx @@ -29,7 +29,6 @@ export default function EditPage({ params }: EditPageProps) { console.log(params); useEffect(() => { -<<<<<<< HEAD const fetchPortfolioData = async () => { const portfolio = portfolios.find( (portfolio) => portfolio.portfolio_id.toString() === portfolioId @@ -41,17 +40,6 @@ export default function EditPage({ params }: EditPageProps) { } //일치하는 포트폴리오 찾았으면 현재 포트폴리오로 세팅 setCurrentPortfolio(portfolio); -======= - // 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; - // } ->>>>>>> develop try { await updateStoresWithPortfolioData(portfolioId); diff --git a/gitlio/app/editor/_components/ShareModal.tsx b/gitlio/app/editor/_components/ShareModal.tsx index 23c44b4..43ca482 100644 --- a/gitlio/app/editor/_components/ShareModal.tsx +++ b/gitlio/app/editor/_components/ShareModal.tsx @@ -30,19 +30,22 @@ export default function ShareModal() {
-
diff --git a/gitlio/app/editor/_components/TopBar.tsx b/gitlio/app/editor/_components/TopBar.tsx index 659f0ae..cf298b0 100644 --- a/gitlio/app/editor/_components/TopBar.tsx +++ b/gitlio/app/editor/_components/TopBar.tsx @@ -9,24 +9,13 @@ import { FaSignInAlt } from 'react-icons/fa'; import React, { useState } from 'react'; import { savePortfolioData } from '@/actions/portfolio'; import { useRouter, usePathname } from 'next/navigation'; -<<<<<<< HEAD +import useToastStore from '@/store/toastStore'; import useModalStore from '@/store/modalStore'; export default function TopBar() { const pathname = usePathname().split('/').filter(Boolean).pop(); const { openModal } = useModalStore(); - function saveData() { - if (!pathname) return; - savePortfolioData(pathname).then((r) => console.log(r)); - } -======= -import useToastStore from '@/store/toastStore'; - -export default function TopBar() { - const pathname = usePathname().split('/').filter(Boolean).pop(); - ->>>>>>> develop const router = useRouter(); const setShowToast = useToastStore((state) => state.setShowToast); const saveData = () => { From 32563090e216ccd9e2db181c908bbaa547bad0c9 Mon Sep 17 00:00:00 2001 From: Jayjunyoung Date: Wed, 19 Jun 2024 22:03:45 +0900 Subject: [PATCH 5/5] =?UTF-8?q?chore:=20=EC=A3=BC=EC=84=9D=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- gitlio/app/editor/[portfolioId]/page.tsx | 8 ++++---- gitlio/app/editor/_components/ShareModal.tsx | 2 ++ 2 files changed, 6 insertions(+), 4 deletions(-) diff --git a/gitlio/app/editor/[portfolioId]/page.tsx b/gitlio/app/editor/[portfolioId]/page.tsx index 4c1fc5b..1e60514 100644 --- a/gitlio/app/editor/[portfolioId]/page.tsx +++ b/gitlio/app/editor/[portfolioId]/page.tsx @@ -34,10 +34,10 @@ export default function EditPage({ params }: EditPageProps) { (portfolio) => portfolio.portfolio_id.toString() === portfolioId ); - if (!portfolio) { - router.push('/error'); // Redirect to an error page if the portfolio ID is not found - return; - } + //if (!portfolio) { + //router.push('/error'); // Redirect to an error page if the portfolio ID is not found + //return; + //} //일치하는 포트폴리오 찾았으면 현재 포트폴리오로 세팅 setCurrentPortfolio(portfolio); diff --git a/gitlio/app/editor/_components/ShareModal.tsx b/gitlio/app/editor/_components/ShareModal.tsx index 43ca482..042be67 100644 --- a/gitlio/app/editor/_components/ShareModal.tsx +++ b/gitlio/app/editor/_components/ShareModal.tsx @@ -9,6 +9,8 @@ export default function ShareModal() { 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