Merge pull request #72 from TU-GitLio/(#66)feat/portfolioShare

(#66)feat/portfolioShare
TU-GitLio · Jun 19, 2024 · c206517 · c206517
2 parents 2e5e634 + 3256309
commit c206517
Show file tree

Hide file tree

Showing 6 changed files with 127 additions and 20 deletions.
diff --git 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
@@ -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) {
         <ContactSection />
       </div>
       {/* Other sections can be added here */}
+      {isOpen && <ShareModal />}
     </div>
   );
 }
diff --git a/gitlio/app/editor/_components/ShareModal.tsx 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 (
+    <div className="fixed inset-0 flex items-center justify-center z-50 bg-gray-500 bg-opacity-25 backdrop-blur-sm backdrop-brightness-100">
+      <div className="bg-white w-[580px] px-8 py-8 rounded-lg shadow-lg box-border">
+        <h2 className="text-xl font-bold mb-4 text-center">
+          다음 링크를 복사하십시오
+        </h2>
+        <div className="flex w-full justify-evenly items-center mt-6 mb-4">
+          <input
+            type="text"
+            className="border rounded-l px-4 py-2 w-3/4"
+            value={portfolioUrl}
+            disabled
+          />
+          <button
+            className="btn btn-info px-4 py-2 w-auto box-border"
+            onClick={() => navigator.clipboard.writeText(portfolioUrl)}
+          >
+            복사
+          </button>
+        </div>
+        <div className="flex justify-end w-full">
+          <button
+            className="btn btn-neutral px-4 py-2 w-auto box-border mt-4 mr-[23px]"
+            onClick={closeModal}
+          >
+            닫기
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git 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 (
     <div className="navbar bg-neutral-800 fixed top-0 left-0 right-0 z-10">
       <div className="flex-1">
@@ -45,7 +54,10 @@ export default function TopBar() {
         </a>
       </div>
       <div className="flex-none gap-6">
-        <a className="btn btn-ghost text-lg text-white hover:bg-base-300/20">
+        <a
+          className="btn btn-ghost text-lg text-white hover:bg-base-300/20"
+          onClick={handleShareClick}
+        >
           <FaGlobeAsia className="text-white size-6" />
           공유
         </a>

diff --git 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
@@ -0,0 +1,15 @@
+import { create } from 'zustand';
+
+interface ModalStore {
+  isOpen: boolean;
+  openModal: () => void;
+  closeModal: () => void;
+}
+
+const useModalStore = create<ModalStore>((set) => ({
+  isOpen: false,
+  openModal: () => set({ isOpen: true }),
+  closeModal: () => set({ isOpen: false }),
+}));
+
+export default useModalStore;