Merge pull request #74 from 9oormDari/dev

Dev

src/components/Goalpage/GoormScreen.tsx

@@ -6,6 +6,7 @@ import Rainbow1 from '../../assets/GoalPage/Rainbow1.svg';
 import Rainbow2 from '../../assets/GoalPage/Rainbow2.svg';
 import CloudComponent from './GoormScreen/CloudComponent';
 import { API } from '../../lib/api/index.ts';
+import useIdStore from '../../components/idStore.ts';
 
 interface Cloud {
     cloudType: string;
@@ -16,21 +17,52 @@ interface Cloud {
 
 export default function GoormScreen() {
     const [stage, setStage] = useState<number>(0);
+    const [targetStage, setTargetStage] = useState<number>(0); // 목표 스테이지 상태 추가
+
     const [clouds, setClouds] = useState<Cloud[]>([]); 
+    const id = useIdStore((state) => state.id);
+
+    // id가 변경될 때 데이터를 가져오는 함수
+    useEffect(() => {
+        const fetchUserData = async () => {
+            if (!id) return; // id가 없으면 실행하지 않음
+
+            try {
+                const response = await API.User.getUserStep(id);
+                if (response.status === 'OK' && response.data) {
+                    console.log("currentStep", response.data.currentStep);
+                    setTargetStage(response.data.currentStep); // 목표 스테이지 설정
+                    setStage(0); // 초기 스테이지를 0으로 설정
+                } else {
+                    console.error('응답 상태가 OK가 아니거나 데이터가 없습니다.');
+                    setTargetStage(0);
+                    setStage(0);
+                }
+            } catch (error) {
+                console.error('내 정보를 불러오는 중 오류가 발생했습니다:', error);
+                setTargetStage(0);
+                setStage(0);
+            }
+        };
+
+        fetchUserData();
+    }, [id]);
 
     useEffect(() => {
         const fetchMyData = async () => {
             try {
                 const response = await API.User.currentStep();
 
                 if (response.status === 'OK' && response.data) {
-                    setStage(response.data.currentStep);
+                    setStage(0);
+                    setTargetStage(response.data.currentStep);
                     console.log('현재 스테이지:', response.data.currentStep);
                 } else {
                     console.error(
                         '응답 상태가 OK가 아니거나 데이터가 없습니다.'
                     );
                     setStage(0);
+                    setTargetStage(0);
                 }
             } catch (error) {
                 console.error(
@@ -44,54 +76,54 @@ export default function GoormScreen() {
         fetchMyData();
     }, []);
 
-    useEffect(() => {
-        const newClouds: Cloud[] = [
-            {
-                cloudType: stage === 1 ? ColorCloud : BlueCloud,
-                colStart: 1,
-                rowStart: 1,
-                hidden: stage < 1,
-            },
-            {
-                cloudType: stage === 2 ? ColorCloud : BlueCloud,
-                colStart: 2,
-                rowStart: 2,
-                hidden: stage < 2,
-            },
-            {
-                cloudType: stage === 3 ? ColorCloud : BlueCloud,
-                colStart: 3,
-                rowStart: 1,
-                hidden: stage < 3,
-            },
-            {
-                cloudType: stage === 4 ? ColorCloud : BlueCloud,
-                colStart: 4,
-                rowStart: 2,
-                hidden: stage < 4,
-            },
-        ];
-
-        setClouds(newClouds); // 새로운 clouds 배열로 업데이트
-    }, [stage]); // stage가 변경될 때마다 실행
 
-    // 임시로 집어넣은 구름 단계 증가 함수
-    const increaseStage = (stage:number) => {
-        setStage((prev) => (prev < stage ? prev + 1 : prev));
-    };
+    // stage가 변경될 때 clouds 상태 업데이트
+    useEffect(() => {
+        console.log("Stage updated:", stage);
+        const updateClouds = () => {
+            const newClouds: Cloud[] = [
+                {
+                    cloudType: stage === 1 ? ColorCloud : BlueCloud,
+                    colStart: 1,
+                    rowStart: 1,
+                    hidden: stage < 1,
+                },
+                {
+                    cloudType: stage === 2 ? ColorCloud : BlueCloud,
+                    colStart: 2,
+                    rowStart: 2,
+                    hidden: stage < 2,
+                },
+                {
+                    cloudType: stage === 3 ? ColorCloud : BlueCloud,
+                    colStart: 3,
+                    rowStart: 1,
+                    hidden: stage < 3,
+                },
+                {
+                    cloudType: stage === 4 ? ColorCloud : BlueCloud,
+                    colStart: 4,
+                    rowStart: 2,
+                    hidden: stage < 4,
+                },
+            ];
+
+            setClouds(newClouds); // 새로운 clouds 배열로 업데이트
+        };
+
+        updateClouds();
+    }, [stage, targetStage]); // stage가 변경될 때마다 실행
 
     // 구름 증가시키는데 천천히 증가하도록 설정
     useEffect(() => {
-        if (stage === 0) {
-            return;
-        } else if (stage < 4) { // 최대 스테이지가 4라면
+        if (stage <= targetStage) { // 목표 스테이지를 넘지 않도록 설정
             const timer = setTimeout(() => {
-                increaseStage(stage);
-            }, 1500);
+                setStage((prev) => (prev < targetStage ? prev + 1 : prev)); // 목표 스테이지를 넘지 않도록 증가
+            }, 1000);
 
             return () => clearTimeout(timer);
         }
-    }, [stage]);
+    }, [stage, targetStage]);
 
     return (
         <div

src/components/Goalpage/MemberList.tsx

@@ -14,10 +14,11 @@ interface Member {
 export default function MemberList() {
     const [isModalVisible, setIsModalVisible] = useState(false);
     const [isSeeMyImageModalVisible, setIsSeeMyImageModalVisible] = useState(false);
+    const [canOpenSeeMyImageModal, setCanOpenSeeMyImageModal] = useState(false);
     const [members, setMembers] = useState<Member[]>([
-        { id: '1', username: '김', profileUrl: '' },
-        { id: '2', username: '박', profileUrl: '' },
-        { id: '3', username: '최', profileUrl: '' },
+        { id: '1', username: 'Empty Data', profileUrl: ''  },
+        { id: '2', username: 'Empty Data', profileUrl: ''  },
+        { id: '3', username: 'Empty Data', profileUrl: ''  },
     ]);
     const [loading, setLoading] = useState<boolean>(true);
     const [error, setError] = useState<string | null>(null);
@@ -28,22 +29,28 @@ export default function MemberList() {
         const fetchMyData = async () => {
             try {
                 const response = await API.User.getMyInfo();
-                    setMyId(response.username);
-                    setMyName(response.nickname);
-                    console.log(myId, myName);    
+                    console.log(response);
+                    setMyId(response.id);
+                    setMyName(response.nickname);  
             } catch (error) {
                 console.error('내 정보를 불러오는 중 오류가 발생했습니다:', error);
             }
         };
         fetchMyData();
     }, []);
 
+    useEffect(() => {
+        // myId와 myName이 업데이트되면 canOpenSeeMyImageModal 상태를 true로 변경
+        if (myId && myName) {
+            setCanOpenSeeMyImageModal(true);
+        }
+    }, [myId, myName]);
+
     useEffect(() => {
         const fetchMemberList = async () => {
             setLoading(true);
             try {
                 const response = await API.User.getGroupMemberList();
-
                 if (response.status === 'OK' && response.data) {
                     const memberList: Member[] = response.data;
                     setMembers(memberList);
@@ -67,7 +74,11 @@ export default function MemberList() {
     };
 
     const openSeeMyImageModal = () => {
-        setIsSeeMyImageModalVisible(true);
+        if (canOpenSeeMyImageModal) {
+            setIsSeeMyImageModalVisible(true);
+        } else {
+            alert('내 정보를 불러오는 중입니다. 잠시 후 다시 시도해주세요.');
+        }
     }
 
     const closeSeeMyImageModal = () => {

src/components/Goalpage/MemberList/MemberCard.tsx

@@ -1,6 +1,7 @@
 import ShowImageModal from './ShowImageModal';
 import { useState } from 'react';
 import cn from '../../../lib/cn';
+import useIdStore from '../../idStore';
 
 interface MemberCardProps {
     id: string; // 회원을 식별할 수 있는 고유 ID
@@ -10,11 +11,15 @@ interface MemberCardProps {
 
 export default function MemberCard({ id, name, profileUrl }: MemberCardProps) {
     const [isModalOpen, setIsModalOpen] = useState(false);
+    const setId = useIdStore((state) => state.setId);
 
+    // 모달을 열고 id를 설정하는 함수
     const handleOpenModal = () => {
-        setIsModalOpen(true);
+        setId(id); // zustand 스토어의 id를 설정
+        setIsModalOpen(true); // 모달 열기
     };
 
+    // 모달을 닫는 함수
     const handleCloseModal = () => {
         setIsModalOpen(false);
     };
@@ -35,11 +40,10 @@ export default function MemberCard({ id, name, profileUrl }: MemberCardProps) {
                     'w-16 md:w-32 h-8 md:h-12 bg-slate-400 text-white rounded-lg',
                     'hover:bg-slate-700 transition text-sm md:text-xl font-semibold'
                 )}
-                onClick={handleOpenModal}
+                onClick={handleOpenModal} // 모달 열기와 id 설정을 하나의 함수로 처리
             >
                 보러 가기
             </button>
-
             {isModalOpen && (
                 <ShowImageModal
                     memberId={id}

src/components/idStore.ts

@@ -0,0 +1,25 @@
+// idStore.ts
+import { create } from 'zustand';
+
+// 상태 타입을 정의합니다.
+interface IdState {
+  id: string;
+}
+
+// 액션 타입을 정의합니다.
+interface IdActions {
+  setId: (newId: string) => void;
+}
+
+// 상태와 액션을 합친 타입을 정의합니다.
+type IdStore = IdState & IdActions;
+
+// 상태를 관리하는 zustand 스토어를 생성합니다.
+const useIdStore = create<IdStore>((set) => ({
+  id: '', // 초기 상태 값
+
+  // setId 함수는 새로운 id 값을 받아서 상태를 업데이트합니다.
+  setId: (newId) => set(() => ({ id: newId })),
+}));
+
+export default useIdStore;

src/lib/api/user/index.ts

@@ -90,8 +90,8 @@ export namespace __User {
             tokenOn: true,
         });
     }
-    export async function currentStep() {
-        const url = `${BASE_URL}/user/current-step`;
+    export async function getUserStep(id:string) {
+        const url = `${BASE_URL}/user/current-step/${id}`;
 
         return fetchData({
             url,
@@ -130,4 +130,14 @@ export namespace __User {
             tokenOn: true,
         });
     }
+
+    export async function currentStep() {
+        const url = `${BASE_URL}/user/current-step`;
+
+        return fetchData({
+            url,
+            method: 'GET',
+            tokenOn: true,
+        });
+    }
 }