Merge pull request #58 from 9oormDari/dev

Dev
9oormDari · Sep 28, 2024 · 7ae457f · 7ae457f
2 parents 6aeba97 + 6a015e7
commit 7ae457f
Show file tree

Hide file tree

Showing 26 changed files with 638 additions and 326 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,5 +1,5 @@
-import { BrowserRouter } from 'react-router-dom';
 import { Analytics } from '@vercel/analytics/react';
+import { BrowserRouter } from 'react-router-dom';
 
 function App() {
     return (

diff --git a/src/assets/loading/1.png b/src/assets/loading/1.png
diff --git a/src/assets/loading/2.png b/src/assets/loading/2.png
diff --git a/src/assets/loading/3.png b/src/assets/loading/3.png
diff --git a/src/components/Goalpage/GoormScreen.tsx b/src/components/Goalpage/GoormScreen.tsx
@@ -1,10 +1,11 @@
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import cn from '../../lib/cn';
 import BlueCloud from '../../assets/GoalPage/BlueCloud.svg';
 import ColorCloud from '../../assets/GoalPage/ColorCloud.svg';
 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';
 
 interface Cloud {
     cloudType: string;
@@ -15,98 +16,128 @@ interface Cloud {
 
 export default function GoormScreen() {
     const [stage, setStage] = useState<number>(0);
+    const [myId, setMyId] = useState<string>('');
+    const [clouds, setClouds] = useState<Cloud[]>([]); 
 
-    const clouds: Cloud[] = [
-        {
-            cloudType: stage === 1 ? ColorCloud : BlueCloud,
-            colStart: 1,
-            rowStart: 1,
-            hidden: stage === 0,
-        },
-        {
-            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,
-        },
-    ];
+    useEffect(() => {
+        const fetchMyData = async () => {
+            try {
+                const response = await API.User.getMyInfo();
+
+                if (response.status === 'OK' && response.data) {
+                    // 사용자 ID 설정
+                    setMyId(response.data.id);
+
+                    // 'data' 배열이 존재하고 배열인지 확인 후 길이 설정
+                    if (response.data.data && Array.isArray(response.data.data)) {
+                        const dataCount = response.data.data.length;
+                        setStage(dataCount);
+                    } else {
+                        // 'data' 배열이 없거나 배열이 아닌 경우 0으로 설정
+                        setStage(0);
+                    }
+                } else {
+                    console.error('응답 상태가 OK가 아니거나 데이터가 없습니다.');
+                    setStage(0);
+                }
+            } catch (error) {
+                console.error('내 정보를 불러오는 중 오류가 발생했습니다:', error);
+                setStage(0);
+            }
+        };
+
+        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 = () => {
         setStage((prev) => (prev < 4 ? prev + 1 : prev));
     };
 
-    // 임시로 집어넣은 구름 단계 감소 함수
-    const decreaseStage = () => {
-        setStage((prev) => (prev > 0 ? prev - 1 : prev));
-    };
+    // 구름 증가시키는데 천천히 증가하도록 설정
+    useEffect(() => {
+        if (stage < 4) { // 최대 스테이지가 4라면
+            const timer = setTimeout(() => {
+                increaseStage();
+            }, 1000);
+
+            return () => clearTimeout(timer);
+        }
+    }, [stage]);
 
     return (
         <div
             className={cn(
                 'flex flex-col items-center justify-center w-full',
                 'relative bg-gradient-to-b from-[#5A82F1] to-[#DAE4FF]',
-                'p-2 md:p-10 h-[30vh] md:h-[60vh]'
+                'p-2 md:p-10 h-[30vh] md:h-[75vh]'
             )}
         >
-            {/* 단계 조절 버튼 */}
-            <div className="absolute top-4 right-4 flex space-x-2">
-                <button
-                    onClick={decreaseStage}
-                    className="px-4 py-2 bg-white rounded shadow"
-                    disabled={stage === 0}
-                >
-                    단계 감소
-                </button>
-                <button
-                    onClick={increaseStage}
-                    className="px-4 py-2 bg-white rounded shadow"
-                    disabled={stage === 4}
-                >
-                    단계 증가
-                </button>
-            </div>
-
             <div className="relative grid grid-cols-4 grid-rows-2 gap-2 md:gap-4 mt-8">
-            {clouds.map((cloud, index) => (
-                <CloudComponent
-                key={index}
-                cloudType={cloud.cloudType}
-                colStart={cloud.colStart}
-                rowStart={cloud.rowStart}
-                hidden={cloud.hidden}
-                />
-            ))}
-                
+                {clouds.map((cloud, index) => (
+                    <CloudComponent
+                        key={index}
+                        cloudType={cloud.cloudType}
+                        colStart={cloud.colStart}
+                        rowStart={cloud.rowStart}
+                        hidden={cloud.hidden}
+                    />
+                ))}
+
                 {/* 무지개 이미지를 절대 위치로 배치 */}
                 <div className="absolute inset-x-0 top-[90px] md:top-[242px] flex justify-center transform -translate-y-1/2">
                     {/* 무지개 이미지 */}
                     <img
                         src={Rainbow1}
                         alt="첫 번째 무지개"
-                        className={`w-1/4 ${stage >= 2 ? "" : "invisible"}`}
+                        className={`w-1/4 transition-opacity duration-500 ${
+                            stage >= 2 ? 'opacity-100 delay-100' : 'opacity-0'
+                        }`}
                     />
                     <img
                         src={Rainbow2}
                         alt="두 번째 무지개"
-                        className={`w-1/4 ${stage >= 3 ? "" : "invisible"}`}
+                        className={`w-1/4 transition-opacity duration-500 ${
+                            stage >= 3 ? 'opacity-100 delay-200' : 'opacity-0'
+                        }`}
                     />
                     <img
                         src={Rainbow1}
                         alt="세 번째 무지개"
-                        className={`w-1/4 ${stage >= 4 ? "" : "invisible"}`}
+                        className={`w-1/4 transition-opacity duration-500 ${
+                            stage >= 4 ? 'opacity-100 delay-300' : 'opacity-0'
+                        }`}
                     />
                 </div>
             </div>

diff --git a/src/components/Goalpage/GoormScreen/CloudComponent.tsx b/src/components/Goalpage/GoormScreen/CloudComponent.tsx
@@ -1,3 +1,4 @@
+import React, { useEffect } from 'react';
 import cn from '../../../lib/cn';
 import CloudDisk from '../../../assets/GoalPage/CloudDisk.svg';
 import ColorCloud from '../../../assets/GoalPage/ColorCloud.svg';
@@ -9,17 +10,17 @@ interface CloudComponentProps {
     hidden: boolean;
 }
 
-export default function CloudComponent({
+const CloudComponent: React.FC<CloudComponentProps> = ({
     cloudType,
     colStart,
     rowStart,
     hidden,
-}: CloudComponentProps) {
+}) => {
     return (
         <div
             className={cn(
-                'flex justify-center flex-col items-center',
-                `${hidden ? 'hidden' : ''}`
+                'flex justify-center flex-col items-center transition-opacity duration-500',
+                hidden ? 'opacity-0' : 'opacity-100'
             )}
             style={{
                 gridColumnStart: colStart,
@@ -37,11 +38,13 @@ export default function CloudComponent({
                 alt="받침"
                 className={cn(
                     'w-1/4 h-1/4 md:w-[288px] md:h-[156px]',
-                    'absolute mt-20 md:mt-[200px]',
-                    `${cloudType === ColorCloud ? '' : 'hidden'}`
+                    'absolute mt-20 md:mt-[200px] transition-opacity duration-500',
+                    cloudType === ColorCloud ? 'opacity-100' : 'opacity-0'
                 )}
-                style={{ zIndex: 1 }}
+                style={{ zIndex: 0 }}
             />
         </div>
     );
-}
+};
+
+export default CloudComponent;
diff --git a/src/components/Goalpage/MemberList.tsx b/src/components/Goalpage/MemberList.tsx
@@ -7,7 +7,6 @@ interface Member {
     username: string;
 }
 
-
 export default function MemberList() {
     const [members, setMembers] = useState<Member[]>([
         { id: '1', username: '김' },

diff --git a/src/components/Goalpage/MemberList/ShowImageModal.tsx b/src/components/Goalpage/MemberList/ShowImageModal.tsx
@@ -15,7 +15,11 @@ interface ImageData {
     alt: string; // 이미지 대체 텍스트
 }
 
-export default function ShowImageModal({ memberId, memberName, onClose }: ShowImageModalProps) {
+export default function ShowImageModal({
+    memberId,
+    memberName,
+    onClose,
+}: ShowImageModalProps) {
     // 백엔드에서 가져온 이미지들을 저장할 상태
     const [images, setImages] = useState<ImageData[]>([]);
 
@@ -53,11 +57,14 @@ export default function ShowImageModal({ memberId, memberName, onClose }: ShowIm
     }, []);
 
     // 가져온 이미지와 기본 이미지를 결합하여 최대 4개의 이미지를 생성
-    const displayImages = [...images, ...Array(4 - images.length).fill({
-        id: 'no-image', // ID 대신 'no-image'로 채움
-        url: NoImage, // 기본 이미지 URL
-        alt: 'No Image Available', // 대체 텍스트
-    })].slice(0, 4); // 최대 4개까지 표시
+    const displayImages = [
+        ...images,
+        ...Array(4 - images.length).fill({
+            id: 'no-image', // ID 대신 'no-image'로 채움
+            url: NoImage, // 기본 이미지 URL
+            alt: 'No Image Available', // 대체 텍스트
+        }),
+    ].slice(0, 4); // 최대 4개까지 표시
 
     return (
         <div
@@ -74,22 +81,23 @@ export default function ShowImageModal({ memberId, memberName, onClose }: ShowIm
                 </h1>
                 <div className="mt-8 grid grid-cols-1 sm:grid-cols-2 gap-4">
                     {displayImages.map((image, index) => (
+                        <div 
+                        key={`${image.id}-${index}`}
+                        className="h-32 md:h-48 bg-gray-200 flex justify-center items-center rounded"
+                        >
                         <img
-                            key={`${image.id}-${index}`} // 고유한 key 설정
-                            src={image.url} // 이미지 URL 설정
-                            alt={image.alt} // 대체 텍스트 설정
-                            className={cn(
-                                "flex justify-center items-center w-[80vp] md:w-[80vp]",
-                                "h-32 md:h-48 object-cover rounded" // 이미지 스타일링
-                            )}
+                            src={image.url} 
+                            alt={image.alt}
+                            className="w-full h-full object-contain"
                         />
+                        </div>
                     ))}
                 </div>
                 <div className="flex items-center justify-center p-2">
                     <button
                         className={cn(
                             'w-32 md:w-64 h-10 bg-blue-400 text-white text-2xl',
-                            'rounded-lg hover:bg-blue-500 transition-colors',
+                            'rounded-lg hover:bg-blue-500 transition-colors'
                         )}
                         onClick={onClose}
                         aria-label="Close Modal" // 접근성을 위한 aria-label

diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
@@ -52,7 +52,8 @@ export default function Header() {
             className={cn(
                 'bg-white flex items-center justify-between',
                 'h-[75px] md:h-[150px] p-2 md:px-20',
-                'border-b-2 border-[#DBDBDB] relative'
+                'border-b-2 border-[#DBDBDB] fixed top-0 left-0 w-full z-50',
+                'shadow-md' // 추가: 그림자 효과
             )}
         >
             {/* 로고 영역 */}
@@ -88,7 +89,7 @@ export default function Header() {
             <div
                 ref={menuRef}
                 className={cn(
-                    'fixed top-0 right-0 h-full w-64 bg-white shadow-lg z-50', 
+                    'fixed top-0 right-0 h-full w-64 bg-white shadow-lg z-50',
                     'transform transition-transform duration-300',
                     isMenuOpen ? 'translate-x-0' : 'translate-x-full'
                 )}

diff --git a/src/components/Header/NavLink.tsx b/src/components/Header/NavLink.tsx
@@ -1,5 +1,6 @@
+import { useLocation, useNavigate } from 'react-router-dom';
+
 import cn from '../../lib/cn.ts';
-import { useLocation } from 'react-router-dom';
 
 interface NavLinkProps {
     href: string;
@@ -8,17 +9,22 @@ interface NavLinkProps {
 
 export default function NavLink({ href, label }: NavLinkProps) {
     const location = useLocation();
+    const navigate = useNavigate(); // useNavigate 훅 사용
     const isActive = location.pathname === href;
 
+    const handleClick = () => {
+        navigate(href); // 페이지 이동
+    };
+
     return (
-        <a
-            href={href}
+        <div
+            onClick={handleClick}
             className={cn(
-                'text-base md:text-2xl transition md:p-4',
+                'text-xl md:text-2xl p-1 md:p-4',
                 `${isActive ? 'text-black font-bold' : 'text-gray-400 hover:text-gray-600'}`
             )}
         >
             {label}
-        </a>
+        </div>
     );
 }
diff --git a/src/components/Mypage/Goals.tsx b/src/components/Mypage/Goals.tsx
@@ -19,7 +19,7 @@ const Goals: React.FC = () => {
     const isSetting = sector === 'setting';
 
     return (
-        <div className="w-full max-w-lg">
+        <div className="w-full max-w-2xl">
             {/* 목표 점검 및 설정 버튼 */}
             <div className="flex w-full">
                 {/* 목표 점검 (maintenance) 버튼 */}