From eb93090d90feb60fadbb2ed603ec96cfbf58cb9c Mon Sep 17 00:00:00 2001 From: daejlee Date: Thu, 26 Sep 2024 16:11:07 +0900 Subject: [PATCH 1/7] Chore: update axios --- package-lock.json | 2 +- package.json | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/package-lock.json b/package-lock.json index b436999..982d165 100644 --- a/package-lock.json +++ b/package-lock.json @@ -23,7 +23,7 @@ "@radix-ui/react-slot": "^1.0.2", "@radix-ui/react-toast": "^1.1.5", "@radix-ui/react-tooltip": "^1.1.2", - "axios": "^1.6.7", + "axios": "^1.7.7", "class-variance-authority": "^0.7.0", "clsx": "^2.1.0", "cmdk": "^1.0.0", diff --git a/package.json b/package.json index 9499096..c8d8f10 100644 --- a/package.json +++ b/package.json @@ -24,7 +24,7 @@ "@radix-ui/react-slot": "^1.0.2", "@radix-ui/react-toast": "^1.1.5", "@radix-ui/react-tooltip": "^1.1.2", - "axios": "^1.6.7", + "axios": "^1.7.7", "class-variance-authority": "^0.7.0", "clsx": "^2.1.0", "cmdk": "^1.0.0", From 754fcad98614a8d17bedb78ef620c8ac7fe15c36 Mon Sep 17 00:00:00 2001 From: daejlee Date: Thu, 26 Sep 2024 16:11:35 +0900 Subject: [PATCH 2/7] Feat: Added for future use --- src/components/buttons/RefreshBtn.tsx | 44 +++++++++++++++++++++++++++ 1 file changed, 44 insertions(+) create mode 100644 src/components/buttons/RefreshBtn.tsx diff --git a/src/components/buttons/RefreshBtn.tsx b/src/components/buttons/RefreshBtn.tsx new file mode 100644 index 0000000..ddc4a4f --- /dev/null +++ b/src/components/buttons/RefreshBtn.tsx @@ -0,0 +1,44 @@ +import React from "react"; +import Image from "next/image"; +import groupApi from "@/api/groupApi"; +import { useGroupsStore, useUserStore } from "@/lib/stores"; +import { + Tooltip, + TooltipContent, + TooltipProvider, + TooltipTrigger, +} from "@/components/ui/tooltip"; +import { Button } from "@/components/ui/button"; + +export default function RefreshBtn() { + const { setGroups } = useGroupsStore(); + const { user } = useUserStore(); + return ( + + + + + + 자리상태 새로고침 + + + ); +} From e1091f7800cde96fc48cc182d211375089fbbb2b Mon Sep 17 00:00:00 2001 From: daejlee Date: Thu, 26 Sep 2024 16:12:08 +0900 Subject: [PATCH 3/7] Style: css modified --- src/api/groupApi.ts | 24 ++++++++-------- src/components/Header.tsx | 20 +++++++------- src/components/ProfilePic.tsx | 4 +-- src/components/buttons/GroupSettingBtn.tsx | 4 +-- src/components/buttons/LocationBtn.tsx | 8 ++---- src/components/buttons/LogoutBtn.tsx | 4 +-- src/components/buttons/MySettingBtn.tsx | 4 +-- src/components/buttons/SearchBtn.tsx | 4 +-- src/components/ui/tooltip.tsx | 2 ++ src/components/utils/RepoLink.tsx | 4 +-- src/lib/Axios.ts | 32 +++++++++++----------- src/pages/_app.tsx | 16 +++++------ src/pages/index.tsx | 31 ++++++++++----------- 13 files changed, 71 insertions(+), 86 deletions(-) diff --git a/src/api/groupApi.ts b/src/api/groupApi.ts index 4b3b6a1..d13a444 100644 --- a/src/api/groupApi.ts +++ b/src/api/groupApi.ts @@ -1,6 +1,6 @@ -import { axios } from '@/lib/Axios'; -import Group from '@/types/Group'; -import { User } from '@/types/User'; +import { axios } from "@/lib/Axios"; +import Group from "@/types/Group"; +import { User } from "@/types/User"; const groupApi = { /** @@ -13,7 +13,7 @@ const groupApi = { }: { groupId: number; }): Promise => { - const response = await axios.get('/v3/group/groupmember', { + const response = await axios.get("/v3/group/groupmember", { params: { groupId }, }); return response.data; @@ -31,7 +31,7 @@ const groupApi = { groupId: number; members: number[]; }): Promise => { - const response = await axios.put('/v3/group/groupmember', { + const response = await axios.put("/v3/group/groupmember", { groupId, members, }); @@ -49,7 +49,7 @@ const groupApi = { groupId: number; members: number[]; }): Promise => { - const response = await axios.post('/v3/group/groupmember/members', { + const response = await axios.post("/v3/group/groupmember/members", { groupId, members, }); @@ -61,7 +61,7 @@ const groupApi = { * 임시로 any를 사용하였지만 백엔드에서 타입 정의 후 수정 필요 */ getAllGroups: async (): Promise => { - const response = await axios.get('/v3/group'); + const response = await axios.get("/v3/group"); return response.data; }, /** @@ -74,7 +74,7 @@ const groupApi = { }: { groupName: string; }): Promise<{ groupId: number; groupName: string }> => { - const response = await axios.post('/v3/group', { + const response = await axios.post("/v3/group", { groupName, }); console.table(response.data); @@ -93,7 +93,7 @@ const groupApi = { groupId: number; groupName: string; }): Promise<{ groupId: number; groupName: string }> => { - const response = await axios.post('/v3/group/name', { + const response = await axios.post("/v3/group/name", { groupId, groupName, }); @@ -109,7 +109,7 @@ const groupApi = { }: { groupId: number; }): Promise<{ groupId: number }> => { - const response = await axios.delete('/v3/group', { params: { groupId } }); + const response = await axios.delete("/v3/group", { params: { groupId } }); return response.data; }, @@ -126,7 +126,7 @@ const groupApi = { groupId: number; userNames: string[]; }): Promise => { - const response = await axios.post('/v3/group/groupmember', { + const response = await axios.post("/v3/group/groupmember", { groupId, members: userNames, }); @@ -134,7 +134,7 @@ const groupApi = { }, agreeJoin: async (): Promise => { - const response = await axios.post('/v3/join'); + const response = await axios.post("/v3/join"); return response.status; }, }; diff --git a/src/components/Header.tsx b/src/components/Header.tsx index 2855235..514f420 100644 --- a/src/components/Header.tsx +++ b/src/components/Header.tsx @@ -1,21 +1,21 @@ -import React from 'react'; -import Image from 'next/image'; -import { useRouter } from 'next/router'; -import SearchModal from '@/components/modals/SearchModal'; -import LogoutBtn from '@/components/buttons/LogoutBtn'; +import React from "react"; +import Image from "next/image"; +import { useRouter } from "next/router"; +import SearchModal from "@/components/modals/SearchModal"; +import LogoutBtn from "@/components/buttons/LogoutBtn"; export default function Header() { const router = useRouter(); return ( -
+
logo -
+
diff --git a/src/components/ProfilePic.tsx b/src/components/ProfilePic.tsx index 4863335..c335c1f 100644 --- a/src/components/ProfilePic.tsx +++ b/src/components/ProfilePic.tsx @@ -38,9 +38,7 @@ export default function ProfilePic({ {type !== "searchedCard" && ( - -

인트라 프로필 방문

- + 인트라 프로필 방문 )} diff --git a/src/components/buttons/GroupSettingBtn.tsx b/src/components/buttons/GroupSettingBtn.tsx index a1ae5f0..239a99f 100644 --- a/src/components/buttons/GroupSettingBtn.tsx +++ b/src/components/buttons/GroupSettingBtn.tsx @@ -28,9 +28,7 @@ export default function GroupSettingBtn({ height={24} /> - -

그룹 설정

- + 그룹 설정 diff --git a/src/components/buttons/LocationBtn.tsx b/src/components/buttons/LocationBtn.tsx index 9b7ad83..008c13a 100644 --- a/src/components/buttons/LocationBtn.tsx +++ b/src/components/buttons/LocationBtn.tsx @@ -38,17 +38,13 @@ export default function LocationBtn({ ${ location !== "퇴근" ? "bg-darkblue" - : "border-darkblue text-darkblue border-2 bg-white hover:bg-white" + : "border-2 border-darkblue bg-white text-darkblue hover:bg-white" } h-6 px-2 md:h-8 md:px-3 md:text-xl `} > {location} - {isMyProfile && ( - -

내 위치 변경

- - )} + {isMyProfile && 내 위치 변경} ); diff --git a/src/components/buttons/LogoutBtn.tsx b/src/components/buttons/LogoutBtn.tsx index 1412338..612c79e 100644 --- a/src/components/buttons/LogoutBtn.tsx +++ b/src/components/buttons/LogoutBtn.tsx @@ -33,9 +33,7 @@ export default function LogoutBtn() { />
- -

로그아웃

- + 로그아웃 ); diff --git a/src/components/buttons/MySettingBtn.tsx b/src/components/buttons/MySettingBtn.tsx index b650596..bedd410 100644 --- a/src/components/buttons/MySettingBtn.tsx +++ b/src/components/buttons/MySettingBtn.tsx @@ -19,9 +19,7 @@ export default function MySettingBtn() { className="size-[50px] cursor-pointer rounded-lg hover:bg-gray-200 lg:size-[60px]" /> - -

내 정보 설정

- + 내 정보 설정 ); diff --git a/src/components/buttons/SearchBtn.tsx b/src/components/buttons/SearchBtn.tsx index 7ef1155..fc46cd5 100644 --- a/src/components/buttons/SearchBtn.tsx +++ b/src/components/buttons/SearchBtn.tsx @@ -25,9 +25,7 @@ export default function SearchBtn() { /> - -

유저 검색

- + 유저 검색 ); diff --git a/src/components/ui/tooltip.tsx b/src/components/ui/tooltip.tsx index 8750e49..cfc7a48 100644 --- a/src/components/ui/tooltip.tsx +++ b/src/components/ui/tooltip.tsx @@ -20,6 +20,8 @@ const TooltipContent = React.forwardRef< className={cn( "z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-[#4A6282] shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2", className, + "text-l lg:text-xl", + // Above text property is added by me )} {...props} /> diff --git a/src/components/utils/RepoLink.tsx b/src/components/utils/RepoLink.tsx index aa823af..cd455e3 100644 --- a/src/components/utils/RepoLink.tsx +++ b/src/components/utils/RepoLink.tsx @@ -23,9 +23,7 @@ export default function RepoLink() { /> - -

깃허브 레포지토리 방문

- + 깃허브 레포지토리 방문 ); diff --git a/src/lib/Axios.ts b/src/lib/Axios.ts index e951023..c211a13 100644 --- a/src/lib/Axios.ts +++ b/src/lib/Axios.ts @@ -1,12 +1,12 @@ -import Axios from 'axios'; -import Cookies from 'js-cookie'; -import authApi from '@/api/authApi'; +import Axios, { AxiosAdapter } from "axios"; +import Cookies from "js-cookie"; +import authApi from "@/api/authApi"; export const tokenAxios = Axios.create({ baseURL: process.env.NEXT_PUBLIC_DEV_API_URL, headers: { - 'Content-Type': 'application/json', - Accept: 'application/json', + "Content-Type": "application/json", + Accept: "application/json", }, withCredentials: true, }); @@ -14,23 +14,23 @@ export const tokenAxios = Axios.create({ export const axios = Axios.create({ baseURL: process.env.NEXT_PUBLIC_DEV_API_URL, headers: { - 'Content-Type': 'application/json', - Accept: 'application/json', + "Content-Type": "application/json", + Accept: "application/json", }, withCredentials: true, }); axios.interceptors.request.use( (config) => { - const accessToken = Cookies.get('accessToken'); + const accessToken = Cookies.get("accessToken"); if (accessToken) { config.headers.Authorization = `Bearer ${accessToken}`; } else { - config.headers.Authorization = 'Bearer NONE'; + config.headers.Authorization = "Bearer NONE"; } return config; }, - (error) => Promise.reject(error) + (error) => Promise.reject(error), ); axios.interceptors.response.use( @@ -44,20 +44,20 @@ axios.interceptors.response.use( if (error.response && error.response.status == 401) { try { const res = await authApi.reissueToken(); - console.log('Refreshed token successfully!'); + console.log("Refreshed token successfully!"); const accessToken = res.accessToken; const originalRequest = error.config; originalRequest.headers.Authorization = `Bearer ${accessToken}`; return await axios(originalRequest); } catch (err) { - console.error('Failed to refresh token:', err); - Cookies.remove('accessToken'); - Cookies.remove('refreshToken'); - window.location.href = '/login'; + console.error("Failed to refresh token:", err); + Cookies.remove("accessToken"); + Cookies.remove("refreshToken"); + window.location.href = "/login"; } } else if (error.response && error.response.status == 500) { return Promise.reject(error); } return Promise.reject(error); - } + }, ); diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx index ad7b5dd..5e4cadb 100644 --- a/src/pages/_app.tsx +++ b/src/pages/_app.tsx @@ -1,9 +1,9 @@ -import React from 'react'; -import '@/styles/globals.css'; -import type { AppProps } from 'next/app'; -import { Toaster } from '@/components/ui/toaster'; -import Head from 'next/head'; -import { GoogleAnalytics } from '@next/third-parties/google'; +import React from "react"; +import "@/styles/globals.css"; +import type { AppProps } from "next/app"; +import { Toaster } from "@/components/ui/toaster"; +import Head from "next/head"; +import { GoogleAnalytics } from "@next/third-parties/google"; export default function App({ Component, pageProps }: AppProps) { return ( @@ -11,10 +11,10 @@ export default function App({ Component, pageProps }: AppProps) { Where42 - + - + ); } diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 5335ed0..8c22d8b 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -1,19 +1,18 @@ -import { useState, useEffect } from 'react'; -import { useRouter } from 'next/router'; -import Header from '@/components/Header'; -import MyProfileCard from '@/components/cards/MyProfileCard'; -import Groups from '@/components/Groups'; -import Footer from '@/components/Footer'; -import authApi from '@/api/authApi'; -import groupApi from '@/api/groupApi'; -import ProfileSkeleton from '@/components/utils/ProfileSkeleton'; +import { useState, useEffect } from "react"; +import { useRouter } from "next/router"; +import Header from "@/components/Header"; +import MyProfileCard from "@/components/cards/MyProfileCard"; +import Groups from "@/components/Groups"; +import Footer from "@/components/Footer"; +import authApi from "@/api/authApi"; +import groupApi from "@/api/groupApi"; +import ProfileSkeleton from "@/components/utils/ProfileSkeleton"; import { useUserStore, useGroupsStore, useAddedMembersStore, -} from '@/lib/stores'; -import AgreementModal from '@/components/modals/AgreementModal'; -import Cookies from 'js-cookie'; +} from "@/lib/stores"; +import AgreementModal from "@/components/modals/AgreementModal"; export default function Home() { const router = useRouter(); @@ -24,7 +23,7 @@ export default function Home() { const [showModal, setShowModal] = useState(false); useEffect(() => { - if (agreement && agreement === 'false') setShowModal(true); + if (agreement && agreement === "false") setShowModal(true); if (router.query.intraId || router.query.agreement) router.replace(router.pathname, router.pathname, { shallow: true }); }, [intraId, agreement, router]); @@ -44,11 +43,11 @@ export default function Home() { groupApi.getAllGroups().then((res) => { res.map((group) => { if (group.groupId === userDefaultGroupId) - group.groupName = '친구 목록'; + group.groupName = "친구 목록"; }); setGroups(res); const allMemberIds = res.flatMap((group) => - group.members.map((member) => member.intraId) + group.members.map((member) => member.intraId), ); allMemberIds.push(userIntraId); setAddedMembers(allMemberIds); @@ -58,7 +57,7 @@ export default function Home() { return ( <> -
+
{user ? : } From 60b1c04a9b5e29eb11ec45cacceae603aec6a171 Mon Sep 17 00:00:00 2001 From: daejlee Date: Sat, 28 Sep 2024 18:49:16 +0900 Subject: [PATCH 4/7] Fix: CSS typo --- src/pages/login/index.tsx | 2 +- src/styles/globals.css | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/pages/login/index.tsx b/src/pages/login/index.tsx index 8420754..cd3d5a4 100644 --- a/src/pages/login/index.tsx +++ b/src/pages/login/index.tsx @@ -4,7 +4,7 @@ import LoginBtn from "@/components/buttons/LoginBtn"; export default function LoginPage() { return ( -
+
Date: Wed, 2 Oct 2024 00:23:26 +0900 Subject: [PATCH 5/7] Feat: Move default group to bottom, New group modal ux enhace --- src/components/Groups.tsx | 9 +++++++- src/components/modals/NewGroupModal.tsx | 29 +++++++++++++++---------- 2 files changed, 26 insertions(+), 12 deletions(-) diff --git a/src/components/Groups.tsx b/src/components/Groups.tsx index 69d2b9e..4043486 100644 --- a/src/components/Groups.tsx +++ b/src/components/Groups.tsx @@ -1,4 +1,3 @@ -import React, { useEffect } from "react"; import { Accordion, AccordionContent, @@ -24,7 +23,15 @@ export default function Groups({ groups }: { groups: Group[] }) { const { checkedUsers, setCheckedUsers } = useCheckedUsersStore(); const { checked } = useCheckedStore(); const sortedGroups = [...groups].sort((a, b) => a.groupId - b.groupId); + const defaultGroup = sortedGroups.find( + (group) => group.groupName === "친구 목록", + ); + if (defaultGroup) { + sortedGroups.splice(sortedGroups.indexOf(defaultGroup), 1); + sortedGroups.push(defaultGroup); + } const defaultValues = sortedGroups.map((group) => group.groupId.toString()); + return (
diff --git a/src/components/modals/NewGroupModal.tsx b/src/components/modals/NewGroupModal.tsx index 71306ae..d27df41 100644 --- a/src/components/modals/NewGroupModal.tsx +++ b/src/components/modals/NewGroupModal.tsx @@ -59,6 +59,7 @@ export default function NewGroupModal() { setSelectedUsers([]); formRef.current?.reset(); setSearchValue(""); + setIsAddingUser(false); }, 100); } else { setSelectedUsers([]); @@ -69,8 +70,8 @@ export default function NewGroupModal() { >