From 8be9a8ea8090ccce1ef16981018bd41d77efe068 Mon Sep 17 00:00:00 2001 From: Yunseok Date: Fri, 27 Sep 2024 21:15:50 +0900 Subject: [PATCH 1/8] =?UTF-8?q?[FEAT]=20-=20=EB=AA=A9=ED=91=9C=EC=A0=90?= =?UTF-8?q?=EA=B2=80=20=ED=8E=98=EC=9D=B4=EC=A7=80=20=EC=83=9D=EC=84=B1=20?= =?UTF-8?q?=EB=B0=8F=20=EB=A1=9C=EA=B7=B8=EC=9D=B8=20=EA=B2=80=EC=82=AC=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/goal.tsx | 31 +++++++++++++++++++++++++++++++ src/pages/mypage.tsx | 5 +---- 2 files changed, 32 insertions(+), 4 deletions(-) create mode 100644 src/pages/goal.tsx diff --git a/src/pages/goal.tsx b/src/pages/goal.tsx new file mode 100644 index 00000000..426f6ca8 --- /dev/null +++ b/src/pages/goal.tsx @@ -0,0 +1,31 @@ +import { useEffect, useState } from 'react'; +import NeedLoginComponents from '../components/NeedLoginComponents.tsx'; +import cn from '../lib/cn.ts'; + +export default function Goal() { + const [isLogin, setIsLogin] = useState(false); + + useEffect(() => { + if (localStorage.getItem('accesstoken')) { + setIsLogin(true); + } + }, []); + + return ( +
+ {/* 로그인 확인 컴포넌트 */} + { !isLogin ? : + <> +
+

목표 페이지

+

구현 중입니다

+
+ } +
+ ); +} \ No newline at end of file diff --git a/src/pages/mypage.tsx b/src/pages/mypage.tsx index 26775efb..ea150ca0 100644 --- a/src/pages/mypage.tsx +++ b/src/pages/mypage.tsx @@ -20,10 +20,7 @@ export default function MyPage() { 'pb-[50px] pt-[50px] gap-[50px]' )} > - {/* - * 로그인 확인 컴포넌트 - * 삼항연산자 사용했는데 가독성 구린거 같긴 하네요 ㅠ - */} + {/* 로그인 확인 컴포넌트 */} { !isLogin ? : <> From e3110ef8bbd6cf7d3380e2595dfb5e38f1afb623 Mon Sep 17 00:00:00 2001 From: Yunseok Date: Fri, 27 Sep 2024 22:59:26 +0900 Subject: [PATCH 2/8] =?UTF-8?q?[FEAT]=20-=20=EA=B5=AC=EB=A6=84=20=EC=BB=B4?= =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=83=9D=EC=84=B1=20+=20?= =?UTF-8?q?=EC=9D=B4=EB=AF=B8=EC=A7=80=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/GoalPage/BlueCloud.svg | 36 +++++++++++ src/assets/GoalPage/ColorCloud.svg | 60 +++++++++++++++++++ .../Goalpage/GoormScreen/CloudComponent.tsx | 23 +++++++ 3 files changed, 119 insertions(+) create mode 100644 src/assets/GoalPage/BlueCloud.svg create mode 100644 src/assets/GoalPage/ColorCloud.svg create mode 100644 src/components/Goalpage/GoormScreen/CloudComponent.tsx diff --git a/src/assets/GoalPage/BlueCloud.svg b/src/assets/GoalPage/BlueCloud.svg new file mode 100644 index 00000000..553529d6 --- /dev/null +++ b/src/assets/GoalPage/BlueCloud.svg @@ -0,0 +1,36 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/GoalPage/ColorCloud.svg b/src/assets/GoalPage/ColorCloud.svg new file mode 100644 index 00000000..9d342581 --- /dev/null +++ b/src/assets/GoalPage/ColorCloud.svg @@ -0,0 +1,60 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/components/Goalpage/GoormScreen/CloudComponent.tsx b/src/components/Goalpage/GoormScreen/CloudComponent.tsx new file mode 100644 index 00000000..db8b403b --- /dev/null +++ b/src/components/Goalpage/GoormScreen/CloudComponent.tsx @@ -0,0 +1,23 @@ +import cn from '../../../lib/cn'; + +interface CloudComponentProps { + cloudType: string; + colStart: number; + rowStart: number; + hidden: boolean; +} + +export default function CloudComponent({ cloudType, colStart, rowStart, hidden }: CloudComponentProps) { + return ( +
+ 구름 +
+ ); +} From e1c741f75eef805e5d82ea09bb996bf405bd2e15 Mon Sep 17 00:00:00 2001 From: Yunseok Date: Fri, 27 Sep 2024 23:28:50 +0900 Subject: [PATCH 3/8] =?UTF-8?q?[FEAT]=20-=20=EA=B5=AC=EB=A6=84=EB=93=A4=20?= =?UTF-8?q?=ED=81=AC=EA=B8=B0=20=EC=A1=B0=EC=A0=95=20=EB=B0=8F=20=EC=B9=BC?= =?UTF-8?q?=EB=9D=BC=20=EA=B5=AC=EB=A6=84=EC=97=90=20=EB=94=94=EC=8A=A4?= =?UTF-8?q?=ED=81=AC=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/GoalPage/CloudDisk.svg | 9 ++++ src/assets/GoalPage/ColorCloud.svg | 47 +++++++++---------- .../Goalpage/GoormScreen/CloudComponent.tsx | 21 ++++++++- 3 files changed, 49 insertions(+), 28 deletions(-) create mode 100644 src/assets/GoalPage/CloudDisk.svg diff --git a/src/assets/GoalPage/CloudDisk.svg b/src/assets/GoalPage/CloudDisk.svg new file mode 100644 index 00000000..dd177e8c --- /dev/null +++ b/src/assets/GoalPage/CloudDisk.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/assets/GoalPage/ColorCloud.svg b/src/assets/GoalPage/ColorCloud.svg index 9d342581..f7e89040 100644 --- a/src/assets/GoalPage/ColorCloud.svg +++ b/src/assets/GoalPage/ColorCloud.svg @@ -1,24 +1,20 @@ - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + - - - - + @@ -26,25 +22,25 @@ - + - + - + - + - + @@ -55,6 +51,5 @@ - diff --git a/src/components/Goalpage/GoormScreen/CloudComponent.tsx b/src/components/Goalpage/GoormScreen/CloudComponent.tsx index db8b403b..0933bc9b 100644 --- a/src/components/Goalpage/GoormScreen/CloudComponent.tsx +++ b/src/components/Goalpage/GoormScreen/CloudComponent.tsx @@ -1,4 +1,6 @@ import cn from '../../../lib/cn'; +import CloudDisk from '../../../assets/GoalPage/CloudDisk.svg'; +import ColorCloud from '../../../assets/GoalPage/ColorCloud.svg'; interface CloudComponentProps { cloudType: string; @@ -13,11 +15,26 @@ export default function CloudComponent({ cloudType, colStart, rowStart, hidden } className={cn( `col-start-${colStart}`, `row-start-${rowStart}`, - "flex justify-center", + "flex justify-center flex-col items-center", `${hidden ? "hidden" : ""}` )} > - 구름 + 구름 + 받침 ); } From 0feb50779dbb41acef54056065523527d4ff14f8 Mon Sep 17 00:00:00 2001 From: Yunseok Date: Sat, 28 Sep 2024 00:01:41 +0900 Subject: [PATCH 4/8] =?UTF-8?q?[FEAT]=20-=20=EB=AA=A9=ED=91=9C=20=EC=A0=90?= =?UTF-8?q?=EA=B2=80=20=ED=8E=98=EC=9D=B4=EC=A7=80=EC=97=90=20=EA=B5=AC?= =?UTF-8?q?=EB=A6=84=EC=8A=A4=ED=81=AC=EB=A6=B0=20=EB=A0=8C=EB=8D=94?= =?UTF-8?q?=EB=A7=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/GoalPage/Rainbow1.svg | 9 ++ src/assets/GoalPage/Rainbow2.svg | 9 ++ src/assets/data.json | 0 src/components/Goalpage/GoormScreen.tsx | 114 ++++++++++++++++++++++++ src/pages/goal.tsx | 10 +-- 5 files changed, 137 insertions(+), 5 deletions(-) create mode 100644 src/assets/GoalPage/Rainbow1.svg create mode 100644 src/assets/GoalPage/Rainbow2.svg delete mode 100644 src/assets/data.json create mode 100644 src/components/Goalpage/GoormScreen.tsx diff --git a/src/assets/GoalPage/Rainbow1.svg b/src/assets/GoalPage/Rainbow1.svg new file mode 100644 index 00000000..bff07e11 --- /dev/null +++ b/src/assets/GoalPage/Rainbow1.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/assets/GoalPage/Rainbow2.svg b/src/assets/GoalPage/Rainbow2.svg new file mode 100644 index 00000000..5478e07d --- /dev/null +++ b/src/assets/GoalPage/Rainbow2.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/assets/data.json b/src/assets/data.json deleted file mode 100644 index e69de29b..00000000 diff --git a/src/components/Goalpage/GoormScreen.tsx b/src/components/Goalpage/GoormScreen.tsx new file mode 100644 index 00000000..0ef49cd9 --- /dev/null +++ b/src/components/Goalpage/GoormScreen.tsx @@ -0,0 +1,114 @@ +import { 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 RainbowComponent from './GoormScreen/RainbowComponent'; + +interface Cloud { + cloudType: string; + colStart: number; + rowStart: number; + hidden: boolean; +} + +interface Rainbow { + src: string; + colStart: number; + colSpan: number; + rowStart: number; + hidden: boolean; +} + + +export default function GoormScreen() { + const [stage, setStage] = useState(0); + + 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 + }, + ]; + const rainbows: Rainbow[] = [ + // 첫 번째 구름과 두 번째 구름 사이 + { src: Rainbow1, colStart: 1, colSpan: 2, rowStart: 1, hidden: stage < 2 }, + // 두 번째 구름과 세 번째 구름 사이 + { src: Rainbow2, colStart: 2, colSpan: 2, rowStart: 2, hidden: stage < 3 }, + // 세 번째 구름과 네 번째 구름 사이 + { src: Rainbow1, colStart: 3, colSpan: 2, rowStart: 1, hidden: stage < 4 }, + ]; + + + // 임시로 집어넣은 구름 단계 증가 함수 + const increaseStage = () => { + setStage((prev) => (prev < 4 ? prev + 1 : prev)); + }; + + // 임시로 집어넣은 구름 단계 감소 함수 + const decreaseStage = () => { + setStage((prev) => (prev > 0 ? prev - 1 : prev)); + }; + + return ( +
+ {/* 단계 조절 버튼 */} +
+ + +
+ +
+ {clouds.map((cloud, index) => ( +
+
+ ); +} \ No newline at end of file diff --git a/src/pages/goal.tsx b/src/pages/goal.tsx index 426f6ca8..17b02ff2 100644 --- a/src/pages/goal.tsx +++ b/src/pages/goal.tsx @@ -1,5 +1,6 @@ import { useEffect, useState } from 'react'; import NeedLoginComponents from '../components/NeedLoginComponents.tsx'; +import GoormScreen from '../components/Goalpage/GoormScreen.tsx'; import cn from '../lib/cn.ts'; export default function Goal() { @@ -14,16 +15,15 @@ export default function Goal() { return (
{/* 로그인 확인 컴포넌트 */} { !isLogin ? : <> -
-

목표 페이지

-

구현 중입니다

+
+
}
From 4878a473c7cc45d03c88b91cc0b19a0425e82bd3 Mon Sep 17 00:00:00 2001 From: Yunseok Date: Sat, 28 Sep 2024 00:16:25 +0900 Subject: [PATCH 5/8] =?UTF-8?q?[FEAT]=20-=20=ED=8C=80=EC=9B=90=20=EB=AA=A9?= =?UTF-8?q?=EB=A1=9D=20=EC=B9=B4=EB=93=9C=20=EC=83=9D=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Goalpage/GoormScreen.tsx | 20 +----------------- src/components/Goalpage/MemberList.tsx | 21 +++++++++++++++++++ .../Goalpage/MemberList/MemberCard.tsx | 13 ++++++++++++ src/pages/goal.tsx | 2 ++ 4 files changed, 37 insertions(+), 19 deletions(-) create mode 100644 src/components/Goalpage/MemberList.tsx create mode 100644 src/components/Goalpage/MemberList/MemberCard.tsx diff --git a/src/components/Goalpage/GoormScreen.tsx b/src/components/Goalpage/GoormScreen.tsx index 0ef49cd9..d850c4a7 100644 --- a/src/components/Goalpage/GoormScreen.tsx +++ b/src/components/Goalpage/GoormScreen.tsx @@ -5,7 +5,6 @@ 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 RainbowComponent from './GoormScreen/RainbowComponent'; interface Cloud { cloudType: string; @@ -14,14 +13,6 @@ interface Cloud { hidden: boolean; } -interface Rainbow { - src: string; - colStart: number; - colSpan: number; - rowStart: number; - hidden: boolean; -} - export default function GoormScreen() { const [stage, setStage] = useState(0); @@ -52,15 +43,6 @@ export default function GoormScreen() { hidden: stage < 4 }, ]; - const rainbows: Rainbow[] = [ - // 첫 번째 구름과 두 번째 구름 사이 - { src: Rainbow1, colStart: 1, colSpan: 2, rowStart: 1, hidden: stage < 2 }, - // 두 번째 구름과 세 번째 구름 사이 - { src: Rainbow2, colStart: 2, colSpan: 2, rowStart: 2, hidden: stage < 3 }, - // 세 번째 구름과 네 번째 구름 사이 - { src: Rainbow1, colStart: 3, colSpan: 2, rowStart: 1, hidden: stage < 4 }, - ]; - // 임시로 집어넣은 구름 단계 증가 함수 const increaseStage = () => { @@ -77,7 +59,7 @@ export default function GoormScreen() { 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-[70vh]" + "p-2 md:p-10 h-[30vh] md:h-[60vh]" )} > {/* 단계 조절 버튼 */} diff --git a/src/components/Goalpage/MemberList.tsx b/src/components/Goalpage/MemberList.tsx new file mode 100644 index 00000000..45046531 --- /dev/null +++ b/src/components/Goalpage/MemberList.tsx @@ -0,0 +1,21 @@ +import MemberCard from "./MemberList/MemberCard"; + +export default function MemberList() { + return ( + <> +
+ 질수없조 + 팀원들의 +
+
+ 목표 인증을 확인해볼래요? +
+ +
+ + + +
+ + ); +} \ No newline at end of file diff --git a/src/components/Goalpage/MemberList/MemberCard.tsx b/src/components/Goalpage/MemberList/MemberCard.tsx new file mode 100644 index 00000000..48e54e3a --- /dev/null +++ b/src/components/Goalpage/MemberList/MemberCard.tsx @@ -0,0 +1,13 @@ +interface MemberCardProps { + name: string; +} + +export default function MemberCard({name}: MemberCardProps) { + return ( +
+
+
{name}
+ +
+ ); +} \ No newline at end of file diff --git a/src/pages/goal.tsx b/src/pages/goal.tsx index 17b02ff2..9fdf7aa3 100644 --- a/src/pages/goal.tsx +++ b/src/pages/goal.tsx @@ -2,6 +2,7 @@ import { useEffect, useState } from 'react'; import NeedLoginComponents from '../components/NeedLoginComponents.tsx'; import GoormScreen from '../components/Goalpage/GoormScreen.tsx'; import cn from '../lib/cn.ts'; +import MemberList from '../components/Goalpage/MemberList.tsx'; export default function Goal() { const [isLogin, setIsLogin] = useState(false); @@ -24,6 +25,7 @@ export default function Goal() { <>
+
}
From 7d63f22c95da06083ae80afad797fce906c08fc1 Mon Sep 17 00:00:00 2001 From: liupei8979 Date: Sat, 28 Sep 2024 04:33:53 +0900 Subject: [PATCH 6/8] =?UTF-8?q?[FEAT]=20-=20User=20Api=20=EC=A0=95?= =?UTF-8?q?=EB=A6=AC=20=EB=B0=8F=20,=20=ED=9A=8C=EC=9B=90=EA=B0=80?= =?UTF-8?q?=EC=9E=85=20=EB=B6=80=EB=B6=84=20=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Goalpage/GoormScreen.tsx | 19 ++++---- .../Goalpage/GoormScreen/CloudComponent.tsx | 37 +++++++------- src/components/Goalpage/MemberList.tsx | 28 +++++------ .../Goalpage/MemberList/MemberCard.tsx | 22 +++++---- .../Mainpage/AdditionalIntroSection.tsx | 24 ++++------ src/components/Mainpage/ImageIntroSection.tsx | 18 +++---- src/components/Mainpage/Item.tsx | 20 ++++---- src/components/NeedLoginComponents.tsx | 16 ++++--- src/custom.d.ts | 4 +- src/lib/api/user/index.ts | 48 +++++++++++++++++-- src/lib/api/util.ts | 9 ++++ src/pages/goal.tsx | 23 +++++---- src/pages/mypage.tsx | 15 +++--- src/pages/register.tsx | 35 ++++++++++++++ 14 files changed, 207 insertions(+), 111 deletions(-) diff --git a/src/components/Goalpage/GoormScreen.tsx b/src/components/Goalpage/GoormScreen.tsx index d850c4a7..ceed7dde 100644 --- 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(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 (
{/* 단계 조절 버튼 */} @@ -93,4 +92,4 @@ export default function GoormScreen() {
); -} \ No newline at end of file +} diff --git a/src/components/Goalpage/GoormScreen/CloudComponent.tsx b/src/components/Goalpage/GoormScreen/CloudComponent.tsx index 0933bc9b..f03334f8 100644 --- 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 ( -
- 구름 - 받침
); diff --git a/src/components/Goalpage/MemberList.tsx b/src/components/Goalpage/MemberList.tsx index 45046531..705e0d22 100644 --- 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 ( <> -
- 질수없조 - 팀원들의 -
-
- 목표 인증을 확인해볼래요? -
+
+ 질수없조 + 팀원들의 +
+
+ 목표 인증을 확인해볼래요? +
-
- - - -
+
+ + + +
); -} \ No newline at end of file +} diff --git a/src/components/Goalpage/MemberList/MemberCard.tsx b/src/components/Goalpage/MemberList/MemberCard.tsx index 48e54e3a..4a2618fa 100644 --- 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 ( -
-
-
{name}
- -
- ); -} \ No newline at end of file +export default function MemberCard({ name }: MemberCardProps) { + return ( +
+
+
{name}
+ +
+ ); +} diff --git a/src/components/Mainpage/AdditionalIntroSection.tsx b/src/components/Mainpage/AdditionalIntroSection.tsx index fe8556a0..8e7fbc2c 100644 --- 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 ( -
{/* 첫 번째 박스 그룹 */} @@ -53,11 +53,7 @@ export default function AdditionalIntroSection() {
{items.map((item, index) => ( - + ))}
@@ -70,14 +66,10 @@ export default function AdditionalIntroSection() {
{additionalItems.map((item, index) => ( - + ))}
); -} \ No newline at end of file +} diff --git a/src/components/Mainpage/ImageIntroSection.tsx b/src/components/Mainpage/ImageIntroSection.tsx index 3d63dcc9..d098beba 100644 --- a/src/components/Mainpage/ImageIntroSection.tsx +++ b/src/components/Mainpage/ImageIntroSection.tsx @@ -4,31 +4,33 @@ export default function ImageIntroSection() { return (
- GoormdariFriends

- 구름다리와
+ 구름다리와
함께 이뤄나가요!

- 구름다리는 친구들과 함께 매일 루틴을 달성하며
+ 구름다리는 친구들과 함께 매일 루틴을 달성하며{' '} +
목표를 향해 나아가는 서비스입니다

{/* 데스크탑에서 보이는 p태그 */}

- 친구들과의 루틴 인증을 통해 꾸준함을 유지하고 목표에 가까워질 수 있도록 도와드립니다
+ 친구들과의 루틴 인증을 통해 꾸준함을 유지하고 목표에 + 가까워질 수 있도록 도와드립니다
구름다리와 함께 생산적이고 의미있는 하루를 만들어보세요!

{/* 모바일에서 보이는 p태그 */} -

+

팀과의 루틴 인증을 통해 꾸준하게 목표를 이뤄보세요!

diff --git a/src/components/Mainpage/Item.tsx b/src/components/Mainpage/Item.tsx index e10bd469..b4f269e4 100644 --- a/src/components/Mainpage/Item.tsx +++ b/src/components/Mainpage/Item.tsx @@ -16,15 +16,16 @@ const Item: React.FC = ({ text, image }) => { return (
{/* 텍스트를 상단에 고정 */} -
{formattedText} @@ -35,9 +36,10 @@ const Item: React.FC = ({ 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]' + )} />
); diff --git a/src/components/NeedLoginComponents.tsx b/src/components/NeedLoginComponents.tsx index 34382fba..a65a0f60 100644 --- 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 (
- Not Good + Not Good

로그인 후

-

이용할 수 있는 기능이에요

+

+ 이용할 수 있는 기능이에요 +

-
); -} \ No newline at end of file +} diff --git a/src/custom.d.ts b/src/custom.d.ts index 869107fc..4255ce63 100644 --- a/src/custom.d.ts +++ b/src/custom.d.ts @@ -1,6 +1,6 @@ declare module 'cal-heatmap'; declare module 'cal-heatmap/plugins/Tooltip'; declare module '*.svg' { - const content: string; - export default content; + const content: string; + export default content; } diff --git a/src/lib/api/user/index.ts b/src/lib/api/user/index.ts index 22b0660e..38f413fb 100644 --- a/src/lib/api/user/index.ts +++ b/src/lib/api/user/index.ts @@ -1,7 +1,49 @@ -const BASE_URL = import.meta.env.VITE_API_BASE_URL; +import { fetchData } from '../util'; // 적절한 fetchData 파일 경로로 변경하세요 export namespace __User { - export async function login(username: string, password: string) {} + const BASE_URL = import.meta.env.VITE_API_BASE_URL; - export async function register(username: string, password: string) {} + // 로그인 함수 + export async function login(username: string, password: string) { + const url = `${BASE_URL}/auth/login`; + + const body = { + username, + password, + }; + + const response = await fetchData({ + url, + method: 'POST', + body, + }); + + // 로그인 성공 시 accessToken을 localStorage에 저장 + const { accessToken } = response; + if (accessToken) { + localStorage.setItem('accessToken', accessToken); // tokenType 없이 accessToken만 저장 + } + + return response; // 필요한 경우 호출하는 쪽에서 추가 처리 + } + + export async function register( + nickname: string, + username: string, + password: string + ) { + const url = `${BASE_URL}/auth/signup`; + + const body = { + nickname, + username, + password, + }; + + return fetchData({ + url, + method: 'POST', + body, + }); + } } diff --git a/src/lib/api/util.ts b/src/lib/api/util.ts index 16dbe9ab..b8179307 100644 --- a/src/lib/api/util.ts +++ b/src/lib/api/util.ts @@ -5,6 +5,7 @@ export async function fetchData(args: { method: 'POST' | 'PUT' | 'GET' | 'DELETE'; body?: any; isFormData?: boolean; + tokenOn?: boolean; // tokenOn 플래그 추가 }): Promise { let headers: Record = {}; @@ -12,6 +13,14 @@ export async function fetchData(args: { headers['Content-Type'] = 'application/json'; } + // tokenOn이 true일 경우, localStorage에서 accessToken을 가져와 헤더에 추가 + if (args.tokenOn) { + const token = localStorage.getItem('accessToken'); + if (token) { + headers['Authorization'] = token; + } + } + try { let response = await axios({ url: args.url, diff --git a/src/pages/goal.tsx b/src/pages/goal.tsx index 9fdf7aa3..f96a2529 100644 --- a/src/pages/goal.tsx +++ b/src/pages/goal.tsx @@ -6,7 +6,7 @@ import MemberList from '../components/Goalpage/MemberList.tsx'; export default function Goal() { const [isLogin, setIsLogin] = useState(false); - + useEffect(() => { if (localStorage.getItem('accesstoken')) { setIsLogin(true); @@ -20,14 +20,17 @@ export default function Goal() { 'pb-[50px] gap-[50px] min-h-screen' )} > - {/* 로그인 확인 컴포넌트 */} - { !isLogin ? : - <> -
- - -
- } + {/* 로그인 확인 컴포넌트 */} + {!isLogin ? ( + + ) : ( + <> +
+ + +
+ + )}
); -} \ No newline at end of file +} diff --git a/src/pages/mypage.tsx b/src/pages/mypage.tsx index ea150ca0..20d713dd 100644 --- a/src/pages/mypage.tsx +++ b/src/pages/mypage.tsx @@ -6,7 +6,7 @@ import cn from '../lib/cn.ts'; export default function MyPage() { const [isLogin, setIsLogin] = useState(false); - + useEffect(() => { if (localStorage.getItem('accesstoken')) { setIsLogin(true); @@ -21,11 +21,14 @@ export default function MyPage() { )} > {/* 로그인 확인 컴포넌트 */} - { !isLogin ? : - <> - - - } + {!isLogin ? ( + + ) : ( + <> + + + + )} ); } diff --git a/src/pages/register.tsx b/src/pages/register.tsx index c3114290..7787a69b 100644 --- a/src/pages/register.tsx +++ b/src/pages/register.tsx @@ -1,9 +1,35 @@ +import React, { useState } from 'react'; + +import { API } from '../lib/api/index.ts'; import cn from '../lib/cn.ts'; import { useNavigate } from 'react-router-dom'; export default function Register() { const navigate = useNavigate(); + // 입력 필드 상태 관리 + const [nickname, setNickname] = useState(''); + const [username, setUsername] = useState(''); + const [password, setPassword] = useState(''); + const [confirmPassword, setConfirmPassword] = useState(''); + + const handleRegister = async () => { + if (password !== confirmPassword) { + alert('비밀번호가 일치하지 않습니다.'); + return; + } + + try { + // 회원가입 요청 + await API.User.register(nickname, username, password); + alert('회원가입 성공!'); + navigate('/login'); // 회원가입 후 로그인 페이지로 이동 + } catch (error) { + console.error('회원가입 실패:', error); + alert('회원가입에 실패했습니다.'); + } + }; + return (
setNickname(e.target.value)} /> setUsername(e.target.value)} /> setPassword(e.target.value)} /> setConfirmPassword(e.target.value)} />
@@ -63,6 +97,7 @@ export default function Register() { 'w-1/2 h-[70px] bg-[#5A82F1] text-white font-bold rounded', 'hover:bg-[#4A72D1] focus:outline-none focus:ring-2 focus:ring-[#5A82F1]' )} + onClick={handleRegister} > 확인 From e48f9180e5da46a5b428f9806edffaed41ea55ac Mon Sep 17 00:00:00 2001 From: liupei8979 Date: Sat, 28 Sep 2024 04:38:54 +0900 Subject: [PATCH 7/8] =?UTF-8?q?[FEAT]=20-=20login=20=EC=83=81=ED=83=9C=20?= =?UTF-8?q?=EA=B0=90=EC=A7=80=20=ED=95=98=EC=97=AC=20=EB=A9=94=EB=89=B4=20?= =?UTF-8?q?=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Header/Header.tsx | 28 +++++++++++++++++++++++++--- 1 file changed, 25 insertions(+), 3 deletions(-) diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx index 8a08e14c..7717bc32 100644 --- 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(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() { - + {isLoggedIn ? ( + + ) : ( + + )} {/* 오버레이 */} @@ -99,7 +117,11 @@ export default function Header() { - + {isLoggedIn ? ( + + ) : ( + + )} From 968e7b72020a0fe0f26c3c6f0830519ad768afa5 Mon Sep 17 00:00:00 2001 From: liupei8979 Date: Sat, 28 Sep 2024 12:35:21 +0900 Subject: [PATCH 8/8] =?UTF-8?q?[FEAT]=20-=20=EB=A1=9C=EA=B7=B8=EC=9D=B8=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/login.tsx | 23 +++++++++++++++++++++++ 1 file changed, 23 insertions(+) diff --git a/src/pages/login.tsx b/src/pages/login.tsx index 6c1ec8f3..16c63aef 100644 --- a/src/pages/login.tsx +++ b/src/pages/login.tsx @@ -1,9 +1,27 @@ +import { API } from '../lib/api'; import cn from '../lib/cn.ts'; import { useNavigate } from 'react-router-dom'; +import { useState } from 'react'; export default function Login() { const navigate = useNavigate(); + // 입력 필드 상태 관리 + const [username, setUsername] = useState(''); + const [password, setPassword] = useState(''); + + const handleLogin = async () => { + try { + // 로그인 요청 + await API.User.login(username, password); + alert('로그인 성공!'); + navigate('/'); // 로그인 성공 시 메인 페이지로 이동 + } catch (error) { + console.error('로그인 실패:', error); + alert('로그인에 실패했습니다.'); + } + }; + return (
setUsername(e.target.value)} /> setPassword(e.target.value)} />
@@ -47,6 +69,7 @@ export default function Login() { 'w-[500px] h-[70px] bg-[#5A82F1] text-white font-bold rounded', 'hover:bg-[#4A72D1] focus:outline-none focus:ring-2 focus:ring-[#5A82F1]' )} + onClick={handleLogin} // 로그인 버튼 클릭 시 실행 > 로그인