Merge pull request #24 from 9oormDari/feature/UserApi

[#24] 로그인, 회원가입 연결
9oormDari · Sep 28, 2024 · 2c0ad78 · 2c0ad78
2 parents 5f4052f + 968e7b7
commit 2c0ad78
Show file tree

Hide file tree

Showing 16 changed files with 255 additions and 114 deletions.
diff --git a/src/components/Goalpage/GoormScreen.tsx b/src/components/Goalpage/GoormScreen.tsx
@@ -13,7 +13,6 @@ interface Cloud {
     hidden: boolean;
 }
 
-
 export default function GoormScreen() {
     const [stage, setStage] = useState<number>(0);
 
@@ -22,25 +21,25 @@ export default function GoormScreen() {
             cloudType: stage === 1 ? ColorCloud : BlueCloud,
             colStart: 1,
             rowStart: 1,
-            hidden: stage === 0
+            hidden: stage === 0,
         },
         {
             cloudType: stage === 2 ? ColorCloud : BlueCloud,
             colStart: 2,
             rowStart: 2,
-            hidden: stage < 2
+            hidden: stage < 2,
         },
         {
             cloudType: stage === 3 ? ColorCloud : BlueCloud,
             colStart: 3,
             rowStart: 1,
-            hidden: stage < 3 
+            hidden: stage < 3,
         },
         {
-            cloudType: stage === 4 ? ColorCloud : BlueCloud, 
+            cloudType: stage === 4 ? ColorCloud : BlueCloud,
             colStart: 4,
             rowStart: 2,
-            hidden: stage < 4 
+            hidden: stage < 4,
         },
     ];
 
@@ -57,9 +56,9 @@ export default function GoormScreen() {
     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]"
+                '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]'
             )}
         >
             {/* 단계 조절 버튼 */}
@@ -93,4 +92,4 @@ export default function GoormScreen() {
             </div>
         </div>
     );
-}
+}
diff --git a/src/components/Goalpage/GoormScreen/CloudComponent.tsx b/src/components/Goalpage/GoormScreen/CloudComponent.tsx
@@ -9,31 +9,36 @@ interface CloudComponentProps {
     hidden: boolean;
 }
 
-export default function CloudComponent({ cloudType, colStart, rowStart, hidden }: CloudComponentProps) {
+export default function CloudComponent({
+    cloudType,
+    colStart,
+    rowStart,
+    hidden,
+}: CloudComponentProps) {
     return (
-        <div 
+        <div
             className={cn(
-                `col-start-${colStart}`, 
-                `row-start-${rowStart}`, 
-                "flex justify-center flex-col items-center",
-                `${hidden ? "hidden" : ""}`
+                `col-start-${colStart}`,
+                `row-start-${rowStart}`,
+                'flex justify-center flex-col items-center',
+                `${hidden ? 'hidden' : ''}`
             )}
         >
-            <img 
+            <img
                 src={cloudType}
-                alt="구름" 
+                alt="구름"
                 className="md:w-[220px] md:h-[220px]"
-                style={{zIndex: 1}}
+                style={{ zIndex: 1 }}
             />
-            <img 
-                src={CloudDisk} 
-                alt="받침" 
+            <img
+                src={CloudDisk}
+                alt="받침"
                 className={cn(
-                    "w-1/4 h-1/4 md:w-[288px] md:h-[156px]",
-                    "absolute mt-20 md:mt-[200px]", 
-                    `${cloudType === ColorCloud ? "" : "hidden"}`
+                    'w-1/4 h-1/4 md:w-[288px] md:h-[156px]',
+                    'absolute mt-20 md:mt-[200px]',
+                    `${cloudType === ColorCloud ? '' : 'hidden'}`
                 )}
-                style={{zIndex: 0}}
+                style={{ zIndex: 0 }}
             />
         </div>
     );

diff --git a/src/components/Goalpage/MemberList.tsx b/src/components/Goalpage/MemberList.tsx
@@ -1,21 +1,21 @@
-import MemberCard from "./MemberList/MemberCard";
+import MemberCard from './MemberList/MemberCard';
 
 export default function MemberList() {
     return (
         <>
-        <div className="w-full text-4xl font-bold text-left px-10 pt-10">
-            <span className="text-blue-400">질수없조</span>
-            <span> 팀원들의</span>
-        </div>
-        <div className="text-4xl font-bold text-left w-full px-10 pt-4">
-            목표 인증을 확인해볼래요?
-        </div>
+            <div className="w-full text-4xl font-bold text-left px-10 pt-10">
+                <span className="text-blue-400">질수없조</span>
+                <span> 팀원들의</span>
+            </div>
+            <div className="text-4xl font-bold text-left w-full px-10 pt-4">
+                목표 인증을 확인해볼래요?
+            </div>
 
-        <div className="flex flex-row gap-10 pt-10">
-          <MemberCard name="조원1"/>
-          <MemberCard name="조원2"/>
-          <MemberCard name="조원3"/>
-        </div>
+            <div className="flex flex-row gap-10 pt-10">
+                <MemberCard name="조원1" />
+                <MemberCard name="조원2" />
+                <MemberCard name="조원3" />
+            </div>
         </>
     );
-}
+}
diff --git a/src/components/Goalpage/MemberList/MemberCard.tsx b/src/components/Goalpage/MemberList/MemberCard.tsx
@@ -1,13 +1,15 @@
 interface MemberCardProps {
-  name: string;
+    name: string;
 }
 
-export default function MemberCard({name}: MemberCardProps) {
-  return (
-    <div className="flex flex-col items-center justify-center w-[267px] h-[406px] bg-gray-200 rounded-lg">
-      <div className="w-[80px] h-[80px] bg-gray-300 rounded-full"></div>
-      <div className="text-lg font-bold">{name}</div>
-      <button className="w-[200px] h-[40px] bg-blue-400 rounded-lg">보러 가기</button>
-    </div>
-  );
-}
+export default function MemberCard({ name }: MemberCardProps) {
+    return (
+        <div className="flex flex-col items-center justify-center w-[267px] h-[406px] bg-gray-200 rounded-lg">
+            <div className="w-[80px] h-[80px] bg-gray-300 rounded-full"></div>
+            <div className="text-lg font-bold">{name}</div>
+            <button className="w-[200px] h-[40px] bg-blue-400 rounded-lg">
+                보러 가기
+            </button>
+        </div>
+    );
+}
diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
@@ -1,11 +1,25 @@
-import { useState, useEffect, useRef } from 'react';
+import { useEffect, useRef, useState } from 'react';
+
 import HamburgerMenu from './HamburgerMenu';
 import NavLink from './NavLink';
 import cn from '../../lib/cn';
+import { useNavigate } from 'react-router-dom';
 
 export default function Header() {
     const [isMenuOpen, setIsMenuOpen] = useState(false);
     const menuRef = useRef<HTMLDivElement>(null);
+    const navigate = useNavigate();
+    const [isLoggedIn, setIsLoggedIn] = useState(false); // 로그인 여부 상태 관리
+
+    useEffect(() => {
+        // localStorage에서 accessToken을 확인하여 로그인 여부 설정
+        const token = localStorage.getItem('accessToken');
+        if (token) {
+            setIsLoggedIn(true);
+        } else {
+            setIsLoggedIn(false);
+        }
+    }, []);
 
     const toggleMenu = () => {
         setIsMenuOpen((prev) => !prev);
@@ -56,7 +70,11 @@ export default function Header() {
                 <NavLink href="/" label="서비스소개" />
                 <NavLink href="/guide" label="이용방법" />
                 <NavLink href="/goal" label="목표 점검" />
-                <NavLink href="/mypage" label="마이페이지" />
+                {isLoggedIn ? (
+                    <NavLink href="/mypage" label="마이페이지" />
+                ) : (
+                    <NavLink href="/login" label="로그인/회원가입" />
+                )}
             </nav>
 
             {/* 오버레이 */}
@@ -99,7 +117,11 @@ export default function Header() {
                     <NavLink href="/" label="서비스소개" />
                     <NavLink href="/guide" label="이용방법" />
                     <NavLink href="/goal" label="목표 점검" />
-                    <NavLink href="/mypage" label="마이페이지" />
+                    {isLoggedIn ? (
+                        <NavLink href="/mypage" label="마이페이지" />
+                    ) : (
+                        <NavLink href="/login" label="로그인/회원가입" />
+                    )}
                 </nav>
             </div>
         </header>

diff --git a/src/components/Mainpage/AdditionalIntroSection.tsx b/src/components/Mainpage/AdditionalIntroSection.tsx
@@ -10,8 +10,7 @@ import Trophy from '../../assets/MainPage/Icons/Trophy.svg';
 export default function AdditionalIntroSection() {
     const items = [
         {
-            text:
-            '팀과 함께하는\n 목표 및 루틴 설정',
+            text: '팀과 함께하는\n 목표 및 루틴 설정',
             image: Flag,
         },
         {
@@ -40,9 +39,10 @@ export default function AdditionalIntroSection() {
     ];
 
     return (
-        <section className={cn(
-            "bg-white w-full p-5 md:px-10 py-10 flex items-center",
-            "justify-center flex-col md:px-60 "
+        <section
+            className={cn(
+                'bg-white w-full p-5 md:px-10 py-10 flex items-center',
+                'justify-center flex-col md:px-60 '
             )}
         >
             {/* 첫 번째 박스 그룹 */}
@@ -53,11 +53,7 @@ export default function AdditionalIntroSection() {
                 </h2>
                 <div className="place-items-center grid grid-cols-1 md:grid-cols-3 gap-8 text-center">
                     {items.map((item, index) => (
-                        <Item
-                            key={index}
-                            text={item.text}
-                            image={item.image}
-                        />
+                        <Item key={index} text={item.text} image={item.image} />
                     ))}
                 </div>
             </div>
@@ -70,14 +66,10 @@ export default function AdditionalIntroSection() {
                 </h2>
                 <div className="place-items-center grid grid-cols-1 md:grid-cols-3 gap-8 text-center">
                     {additionalItems.map((item, index) => (
-                        <Item
-                            key={index}
-                            text={item.text}
-                            image={item.image}
-                        />
+                        <Item key={index} text={item.text} image={item.image} />
                     ))}
                 </div>
             </div>
         </section>
     );
-}
+}
diff --git a/src/components/Mainpage/ImageIntroSection.tsx b/src/components/Mainpage/ImageIntroSection.tsx
@@ -4,31 +4,33 @@ export default function ImageIntroSection() {
     return (
         <section
             className={cn(
-                "relative bg-gradient-to-b from-[#5A82F1] to-[#DAE4FF]", 
-                "p-2 md:p-10 flex items-center flex-col justify-center"
+                'relative bg-gradient-to-b from-[#5A82F1] to-[#DAE4FF]',
+                'p-2 md:p-10 flex items-center flex-col justify-center'
             )}
         >
-            <img 
+            <img
                 src={GoormdariFriends}
                 alt="GoormdariFriends"
-                className='md:mt-20 h-[358.46px] w-[182.52] md:h-[762] md:w-[388]'
+                className="md:mt-20 h-[358.46px] w-[182.52] md:h-[762] md:w-[388]"
             />
             <div className="md:pt-10 bottom-10 text-left md:text-center text-[#455DA8]">
                 <h2 className="text-2xl md:text-[44px] font-bold mb-4 md:mb-8">
-                    구름다리와 <br className='md:hidden'/>
+                    구름다리와 <br className="md:hidden" />
                     함께 이뤄나가요!
                 </h2>
                 <p className="text-base md:text-lg">
-                    구름다리는 친구들과 함께 매일 루틴을 달성하며 <br className='md:hidden'/>
+                    구름다리는 친구들과 함께 매일 루틴을 달성하며{' '}
+                    <br className="md:hidden" />
                     목표를 향해 나아가는 서비스입니다
                 </p>
                 {/* 데스크탑에서 보이는 p태그 */}
                 <p className="text-lg hidden md:block">
-                    친구들과의 루틴 인증을 통해 꾸준함을 유지하고 목표에 가까워질 수 있도록 도와드립니다 <br />
+                    친구들과의 루틴 인증을 통해 꾸준함을 유지하고 목표에
+                    가까워질 수 있도록 도와드립니다 <br />
                     구름다리와 함께 생산적이고 의미있는 하루를 만들어보세요!
                 </p>
                 {/* 모바일에서 보이는 p태그 */}
-                <p className='text-base md:hidden mb-4'>
+                <p className="text-base md:hidden mb-4">
                     팀과의 루틴 인증을 통해 꾸준하게 목표를 이뤄보세요!
                 </p>
             </div>

diff --git a/src/components/Mainpage/Item.tsx b/src/components/Mainpage/Item.tsx
@@ -16,15 +16,16 @@ const Item: React.FC<ItemProps> = ({ text, image }) => {
     return (
         <div
             className={cn(
-                "relative h-[70px] md:h-[300px] w-[300px] p-5",
-                "transform transition-transform",
-                "duration-300 hover:scale-105 rounded-lg bg-[#E8EAF8] shadow-lg"
+                'relative h-[70px] md:h-[300px] w-[300px] p-5',
+                'transform transition-transform',
+                'duration-300 hover:scale-105 rounded-lg bg-[#E8EAF8] shadow-lg'
             )}
         >
             {/* 텍스트를 상단에 고정 */}
-            <div className={cn(
-                "absolute top-2 md:top-5 left-2 md:left-5 bg-opacity-50 text-black",
-                "text-base md:text-2xl text-left font-normal md:font-semibold p-2 rounded-t-lg"
+            <div
+                className={cn(
+                    'absolute top-2 md:top-5 left-2 md:left-5 bg-opacity-50 text-black',
+                    'text-base md:text-2xl text-left font-normal md:font-semibold p-2 rounded-t-lg'
                 )}
             >
                 {formattedText}
@@ -35,9 +36,10 @@ const Item: React.FC<ItemProps> = ({ text, image }) => {
                 src={image}
                 alt={text}
                 className={cn(
-                    "absolute bottom-2 md:bottom-5 right-2 md:right-5",
-                    "object-contain rounded-b-lg",
-                    "h-[50px] w-[50px] md:h-[120px] md:w-[120px]")}
+                    'absolute bottom-2 md:bottom-5 right-2 md:right-5',
+                    'object-contain rounded-b-lg',
+                    'h-[50px] w-[50px] md:h-[120px] md:w-[120px]'
+                )}
             />
         </div>
     );

diff --git a/src/components/NeedLoginComponents.tsx b/src/components/NeedLoginComponents.tsx
@@ -4,19 +4,21 @@ import cn from '../lib/cn.ts';
 export default function NeedLoginComponents() {
     return (
         <div className="flex flex-col items-center justify-center">
-            <img src={NotGood} alt="Not Good" className='w-1/2 h-1/2'/>
+            <img src={NotGood} alt="Not Good" className="w-1/2 h-1/2" />
             <h1 className="text-2xl md:text-4xl font-bold mt-8">로그인 후</h1>
-            <h1 className="text-2xl md:text-4xl font-bold mt-2">이용할 수 있는 기능이에요</h1>
+            <h1 className="text-2xl md:text-4xl font-bold mt-2">
+                이용할 수 있는 기능이에요
+            </h1>
             <a href="/login">
-                <button 
+                <button
                     className={cn(
-                      "mt-5 md:mt-10 px-20 md:px-40 py-4 bg-blue-500 rounded-lg",
-                      "text-white text-base md:text-2xl font-bold"
+                        'mt-5 md:mt-10 px-20 md:px-40 py-4 bg-blue-500 rounded-lg',
+                        'text-white text-base md:text-2xl font-bold'
                     )}
                 >
-                  로그인하러 가기
+                    로그인하러 가기
                 </button>
             </a>
         </div>
     );
-}
+}