Skip to content

Commit 13077f2

Browse files
choikyungsoochoikyungsoo
authored
Merge pull request #68 from CodeItBoost3/feature/all-noLogin
비로그인시, 로그인 팝업띄우도록 작업
2 parents bc71343 + b092aca commit 13077f2

9 files changed

Lines changed: 103 additions & 23 deletions

File tree

‎src/components/group/GroupTab.jsx‎

Lines changed: 22 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,38 @@
11
import { useState } from "react";
2-
import { useSearchParams, useLocation } from "react-router-dom";
2+
import {useSearchParams, useLocation, useNavigate} from "react-router-dom";
33
import Tab from "@/components/common/Tab";
44
import { groupTabList, GROUP_PARAMS } from "@/utils/constants";
55
import CreateGroup from "@/components/modal/CreateGroup";
6-
import CreateMemory from "@/components/modal/CreateMemory";
6+
import CreateMemory from "@/components/modal/CreateMemory";
7+
import useValidateLogin from "@/hooks/useValidateLogin.js";
8+
import NeedLoginToGuest from "@/components/modal/NeedLoginToGuest.jsx";
9+
710
export default function GroupTab() {
811
const location = useLocation();
912
const [searchParams, setSearchParams] = useSearchParams();
1013
const [isModalOpen, setIsModalOpen] = useState(false);
14+
const [isShowLoginModal, setIsShowLoginModal] = useState(false);
1115
const [isSecondModalOpen, setIsSecondModalOpen] = useState(false);
1216
const tabName = searchParams.get(GROUP_PARAMS) || "Public";
1317

18+
const navigate = useNavigate();
19+
const {isLogin} = useValidateLogin();
20+
1421
const handleChangeTab = (type) => {
1522
setSearchParams({ [GROUP_PARAMS]: type });
1623
};
1724

25+
const handleLoginModal = (type) => {
26+
switch (type) {
27+
case "register":
28+
navigate("/login");
29+
break;
30+
case "guest":
31+
setIsShowLoginModal(false);
32+
break;
33+
}
34+
}
35+
1836
const isGroupDetailPage = location.pathname.includes("/group/");
1937

2038
return (
@@ -29,7 +47,7 @@ export default function GroupTab() {
2947
onClick={() =>
3048
isGroupDetailPage
3149
? setIsSecondModalOpen(true)
32-
: setIsModalOpen(true)
50+
: isLogin ? setIsModalOpen(true) : setIsShowLoginModal(true)
3351
}
3452
className="cursor-pointer whitespace-pre px-4 pb-[19px] text-center text-normalGray hover:text-normalGray-hover active:text-normalGray-active"
3553
>
@@ -38,6 +56,7 @@ export default function GroupTab() {
3856
</Tab>
3957
{isModalOpen && <CreateGroup onClose={() => setIsModalOpen(false)} />}
4058
{isSecondModalOpen && <CreateMemory onClose={() => setIsSecondModalOpen(false)} />}
59+
{isShowLoginModal && <NeedLoginToGuest onClick={handleLoginModal}/>}
4160
</>
4261
);
4362
}

‎src/components/main/MemoryAction.jsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -39,13 +39,13 @@ export default function MemoryActions({ widthClass = "flex-1", marginTop = "mt-0
3939
</div>
4040

4141
<div className="flex flex-col gap-3 w-full">
42-
<div className="bg-white rounded-md p-3 shadow-sm cursor-pointer" onClick={() => isLogin ? setShowLoginModal(true) : setShowCreateGroupModal(true)}>
42+
<div className="bg-white rounded-md p-3 shadow-sm cursor-pointer" onClick={() => !isLogin ? setShowLoginModal(true) : setShowCreateGroupModal(true)}>
4343
<span className="text-black text-sm font-normal">
4444
새로운 <span className="text-darkViolet">조각 그룹</span> 등록하기
4545
</span>
4646
</div>
4747

48-
<div className="bg-white rounded-md p-3 shadow-sm cursor-pointer" onClick={() => setShowMemoryModal(true)}>
48+
<div className="bg-white rounded-md p-3 shadow-sm cursor-pointer" onClick={() => !isLogin ? setShowLoginModal(true) : setShowMemoryModal(true)}>
4949
<span className="text-[#2a2a2a] text-sm font-normal">
5050
새로운 <span className="text-darkViolet">추억</span> 기록하기
5151
</span>

‎src/components/mypage/GroupCard.jsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,12 @@ import GroupList from "@/components/mypage/GroupList.jsx";
33
import userService from "@/services/user/userService";
44
import { useToast } from "@/hooks/useToast";
55
import DummyImg from "@/assets/image/profile-basic2.svg";
6+
import useValidateLogin from "@/hooks/useValidateLogin.js";
67

78
export default function GroupCard() {
89
const [groups, setGroups] = useState([]);
910
const addToast = useToast();
11+
const {isLogin} = useValidateLogin();
1012

1113
useEffect(() => {
1214
const fetchGroups = async () => {
@@ -20,7 +22,7 @@ export default function GroupCard() {
2022

2123
setGroups(groupList);
2224
} catch {
23-
addToast("내가 속한 그룹 목록 불러오기에 실패했습니다.");
25+
if(isLogin) addToast("내가 속한 그룹 목록 불러오기에 실패했습니다.");
2426
}
2527
};
2628

‎src/components/notification/Notification.jsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,18 +3,20 @@ import { X, Trash2, ChevronRight } from "lucide-react";
33
import { useToast } from "@/hooks/useToast";
44
import TimeIcon from "@/assets/icon/notification/time.svg";
55
import notificationService from "@/services/notification/notificationService";
6+
import useValidateLogin from "@/hooks/useValidateLogin.js";
67

78
export default function Notification({ onClose }) {
89
const [notifications, setNotifications] = useState([]);
910
const addToast = useToast();
11+
const {isLogin} = useValidateLogin();
1012

1113
useEffect(() => {
1214
const fetchNotifications = async () => {
1315
try {
1416
const data = await notificationService.getNotification();
1517
setNotifications(data || []);
1618
} catch (error) {
17-
addToast(error.message);
19+
if(isLogin) addToast(error.message);
1820
}
1921
};
2022

‎src/hooks/useValidateLogin.js‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import {useEffect, useState} from "react";
2+
3+
export default function useValidateLogin() {
4+
const [isLogin, setIsLogin] = useState(!!localStorage.getItem("accessToken"));
5+
6+
useEffect(() => {
7+
const handleStorageToken = () => {
8+
setIsLogin(!!localStorage.getItem("accessToken"));
9+
};
10+
11+
handleStorageToken();
12+
}, []);
13+
14+
return {isLogin, setIsLogin};
15+
}

‎src/pages/Group.jsx‎

Lines changed: 23 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,8 @@ import SearchBar from "@/components/common/SearchBar";
1818
import SearchButton from "@/components/common/SearchButton";
1919
import Select from "@/components/common/Select";
2020

21+
import NeedLoginToGuest from "@/components/modal/NeedLoginToGuest.jsx";
22+
2123
const GROUP_PARAMS = "group";
2224

2325
const options = [
@@ -29,6 +31,7 @@ const options = [
2931

3032

3133
export default function Group() {
34+
const [isLogin, setLogin] = useState(false);
3235
const [isModalOpen, setIsModalOpen] = useState(false);
3336
const [currentPage, setCurrentPage] = useState(1);
3437
const [searchTerm, setSearchTerm] = useState("");
@@ -41,6 +44,7 @@ export default function Group() {
4144
const [selectedGroupId, setSelectedGroupId] = useState(null);
4245
const [searchResult, setSearchResult] = useState([]);
4346
const [isSearching, setIsSearching] = useState(false);
47+
const [isShowLogin, setIsShowLogin] = useState(false);
4448
const navigate = useNavigate();
4549
const tabName = searchParams.get(GROUP_PARAMS) || "Public";
4650
const isPublic = tabName === "Public";
@@ -51,8 +55,10 @@ export default function Group() {
5155
try {
5256
const userInfo = await userService.getUserInfo();
5357
setMyId(userInfo.data.id);
58+
setLogin(true);
5459
} catch {
55-
addToast("사용자 정보를 불러오는 중 오류가 발생했습니다.");
60+
setLogin(false);
61+
if(isLogin) addToast("사용자 정보를 불러오는 중 오류가 발생했습니다.");
5662
}
5763
};
5864

@@ -78,7 +84,7 @@ export default function Group() {
7884
throw new Error("그룹 목록 조회 실패");
7985
}
8086
} catch {
81-
addToast("그룹 목록 조회에 실패했습니다.");
87+
if(isLogin) addToast("그룹 목록 조회에 실패했습니다.");
8288
}
8389
};
8490

@@ -88,6 +94,17 @@ export default function Group() {
8894
useEffect(() => {
8995
setSortBy(searchParams.get("sortBy") || "mostLiked");
9096
}, [searchParams]);
97+
98+
const handleLoginModal = (type) => {
99+
switch (type) {
100+
case "register":
101+
navigate("/login");
102+
break;
103+
case "guest":
104+
setIsShowLogin(false);
105+
break;
106+
}
107+
}
91108

92109
const handleSearch = async () => {
93110
if (!searchTerm.trim()) {
@@ -109,7 +126,7 @@ export default function Group() {
109126
throw new Error("검색 실패");
110127
}
111128
} catch {
112-
addToast("검색 결과를 불러오는 중 오류가 발생했습니다.");
129+
if(isLogin) addToast("검색 결과를 불러오는 중 오류가 발생했습니다.");
113130
}
114131
};
115132

@@ -151,7 +168,7 @@ export default function Group() {
151168
navigate(`/group/${groupId}`);
152169

153170
} catch {
154-
addToast("그룹 정보 조회 중 오류가 발생했습니다.");
171+
if(isLogin) addToast("그룹 정보 조회 중 오류가 발생했습니다.");
155172
}
156173
};
157174

@@ -256,7 +273,7 @@ export default function Group() {
256273
</p>
257274
<p className="text-sm text-gray-400">가장 먼저 그룹을 만들어보세요!</p>
258275
{!isSearching && (
259-
<button onClick={() => setIsModalOpen(true)}
276+
<button onClick={() => isLogin ? setIsModalOpen(true) : setIsShowLogin(true)}
260277
className="mt-4 px-5 py-2 bg-normalViolet hover:bg-normalViolet-hover active:bg-normalViolet-active text-white text-sm font-medium rounded-md">
261278
그룹 만들기
262279
</button>
@@ -282,6 +299,7 @@ export default function Group() {
282299
onPageChange={setCurrentPage}
283300
/>
284301
</div>
302+
{isShowLogin && <NeedLoginToGuest onClick={handleLoginModal}/>}
285303
</div>
286304
);
287305
}

‎src/pages/Main.jsx‎

Lines changed: 16 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@ export default function Main() {
3838
setIsLogin(true);
3939
} catch {
4040
setIsLogin(false);
41-
addToast("사용자 정보를 불러올 수 없습니다.");
41+
if(isLogin) addToast("사용자 정보를 불러올 수 없습니다.");
4242
}
4343
};
4444

@@ -60,7 +60,7 @@ export default function Main() {
6060
throw new Error("그룹 목록 조회 실패");
6161
}
6262
} catch {
63-
addToast("그룹 목록 조회에 실패했습니다.");
63+
if(isLogin) addToast("그룹 목록 조회에 실패했습니다.");
6464
}
6565
};
6666

@@ -78,7 +78,7 @@ export default function Main() {
7878
throw new Error("내가 작성한 글 목록 조회 실패");
7979
}
8080
} catch {
81-
addToast("최근에 작성한 글 조회에 실패했습니다.");
81+
if(isLogin) addToast("최근에 작성한 글 조회에 실패했습니다.");
8282
}
8383
}
8484

@@ -95,6 +95,17 @@ export default function Main() {
9595
navigate("/notice/20")
9696
}
9797

98+
const handleLoginModal = (type) => {
99+
switch (type) {
100+
case "register":
101+
navigate("/login");
102+
break;
103+
case "guest":
104+
setIsLoginModalOpen(false);
105+
break;
106+
}
107+
}
108+
98109
return (
99110
<div className="w-full h-full pt-3 pb-7 overflow-auto">
100111
<div className="flex items-center mb-1">
@@ -154,8 +165,7 @@ export default function Main() {
154165
<span className="text-black text-base font-semibold">최근에 내가 작성한 </span>
155166
<span className="text-darkViolet text-base font-semibold">추억 글</span>
156167
</div>
157-
<div
158-
className="cursor-pointer text-right text-normalGray hover:text-normalGray-hover active:text-normalGray-active text-sm font-semibold">
168+
<div className="cursor-pointer text-right text-normalGray hover:text-normalGray-hover active:text-normalGray-active text-sm font-semibold" onClick={() => !isLogin ? setIsLoginModalOpen(true) : navigate('mypage/posts')}>
159169
전체 글 보러가기
160170
</div>
161171
</div>
@@ -186,7 +196,7 @@ export default function Main() {
186196
<MemoryActions widthClass="flex-1" marginTop="mt-[7vh]" onClickGroup={handleGroupRegist}/>
187197
</div>
188198
{isGroupMakeModalOpen && <CreateGroup onClose={() => setIsGroupMakeModalOpen(false)}/>}
189-
{isLoginModalOpen && <NeedLoginToGuest isLogin={isLogin}/>}
199+
{isLoginModalOpen && <NeedLoginToGuest onClick={handleLoginModal}/>}
190200
</div>
191201
);
192202
}

‎src/pages/Mypage.jsx‎

Lines changed: 17 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import GroupCard from "@/components/mypage/GroupCard.jsx";
99
import Reply from "@/components/mypage/Reply.jsx";
1010
import EditProfile from "@/components/modal/EditProfile.jsx";
1111
import PassWordChange from "@/components/modal/PasswordChange.jsx";
12+
import NeedLoginToGuest from "@/components/modal/NeedLoginToGuest.jsx";
1213

1314
import userService from "@/services/user/userService";
1415

@@ -25,6 +26,7 @@ export default function Mypage() {
2526
const replyScrollRef = useRef(null);
2627
const [isLoading, setIsLoading] = useState(true);
2728
const [isLogin, setIsLogin] = useState(false);
29+
const [isShowLoginModal, setIsShowLoginModal] = useState(!isLogin);
2830
const [nickname, setNickname] = useState("예비 사용자");
2931
const [isTimeoutPassed, setIsTimeoutPassed] = useState(false);
3032
const [isModalVisible, setModalVisible] = useState(false);
@@ -41,6 +43,17 @@ export default function Mypage() {
4143
navigate("/mypage/comments");
4244
};
4345

46+
const handleLoginModal = (type) => {
47+
switch (type) {
48+
case "register":
49+
navigate("/login");
50+
break;
51+
case "guest":
52+
navigate("/");
53+
setIsShowLoginModal(false);
54+
break;
55+
}
56+
}
4457
useEffect(() => {
4558
const fetchUserInfo = async () => {
4659
try {
@@ -49,7 +62,7 @@ export default function Mypage() {
4962
setIsLogin(true);
5063
} catch {
5164
setIsLogin(false);
52-
addToast("사용자 정보를 불러올 수 없습니다.");
65+
if(isLogin) addToast("사용자 정보를 불러올 수 없습니다.");
5366
} finally {
5467
setIsLoading(false);
5568
}
@@ -97,7 +110,7 @@ export default function Mypage() {
97110
);
98111
} catch (error) {
99112
console.error("내가 작성한 글 불러오기 실패:", error);
100-
addToast("내가 작성한 글을 불러오는 데 실패했습니다.");
113+
if(isLogin) addToast("내가 작성한 글을 불러오는 데 실패했습니다.");
101114
}
102115
};
103116

@@ -120,7 +133,7 @@ export default function Mypage() {
120133
);
121134
} catch (error) {
122135
console.error("내가 작성한 댓글 불러오기 실패:", error);
123-
if (error.response?.status !== 200) {
136+
if (error.response?.status !== 200 && isLogin) {
124137
addToast("내가 작성한 댓글을 불러오는 데 실패했습니다.");
125138
}
126139
}
@@ -244,6 +257,7 @@ export default function Mypage() {
244257
<EditProfile id={"gildeong32"} nickname={"홍길동"} onClose={() => setModalVisible(false)} onVerfiyChange={handleVerfiyChange} />
245258
)}
246259
{isSecondeModalVisible && <PassWordChange onClose={() => setSecondeModalVisible(false)} />}
260+
{isShowLoginModal && <NeedLoginToGuest onClick={handleLoginModal}/>}
247261
</div>
248262
);
249263
}

‎src/pages/Scrap.jsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import dayjs from 'dayjs';
44

55
import {useToast} from "@/hooks/useToast.js";
66

7+
78
import scrapService from "@/services/scrap/scrapService.js";
89

910
import NoScrapIcon from "@/assets/icon/scrap/no-scrap.svg";
@@ -42,7 +43,6 @@ export default function Scrap () {
4243
/** 로그인 유무 판단 **/
4344
useEffect(() => {
4445
const token = localStorage.getItem("accessToken");
45-
4646
if (!token) {
4747
setIsLogin(false);
4848
} else {
@@ -68,7 +68,7 @@ export default function Scrap () {
6868
}
6969

7070
} catch{
71-
addToast("스크랩한 추억글 조회에 실패했습니다.");
71+
if(isLogin) addToast("스크랩한 추억글 조회에 실패했습니다.");
7272
}
7373
}
7474

0 commit comments

Comments
 (0)