Merge pull request #114 from 42Where/feature/ux-css

[#113] UX + CSS Fix (feature/ux-css)
42Where · Oct 3, 2024 · c4696d9 · c4696d9
2 parents ba8d6ae + 6d511b3
commit c4696d9
Show file tree

Hide file tree

Showing 21 changed files with 148 additions and 105 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git 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",

diff --git 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<User[]> => {
-    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<number[]> => {
-    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<number> => {
-    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<Group[]> => {
-    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,15 +126,15 @@ const groupApi = {
     groupId: number;
     userNames: string[];
   }): Promise<number> => {
-    const response = await axios.post('/v3/group/groupmember', {
+    const response = await axios.post("/v3/group/groupmember", {
       groupId,
       members: userNames,
     });
     return response.status;
   },
 
   agreeJoin: async (): Promise<number> => {
-    const response = await axios.post('/v3/join');
+    const response = await axios.post("/v3/join");
     return response.status;
   },
 };

diff --git 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 (
     <div>
       <Divider />
@@ -86,7 +93,7 @@ export default function Groups({ groups }: { groups: Group[] }) {
                 </div>
               )}
               <GroupSettingModal curGroup={group} />
-              <AccordionTrigger className="text-l p-2 px-6 text-darkblue md:p-4  md:text-2xl">
+              <AccordionTrigger className="text-l p-2 text-darkblue md:p-4 md:text-2xl">
                 <span className="flex flex-row items-center justify-start gap-6">
                   {group.groupName}
                   <p className="text-xl md:text-2xl">

diff --git 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 (
-    <header className='flex flex-row justify-between items-center p-2 pb-0 md:p-4'>
+    <header className="flex flex-row items-center justify-between p-2 pb-0 md:p-4">
       <Image
-        src='/image/logo/logoC.svg'
-        alt='logo'
+        src="/image/logo/logoC.svg"
+        alt="logo"
         width={200}
         height={100}
-        className='lg:w-[200px] lg:h-[100px] w-[150px] h-[75px]'
+        className="h-[75px] w-[150px] lg:h-[100px] lg:w-[200px]"
       />
-      <div className='flex flex-row gap-2'>
+      <div className="flex flex-row gap-2">
         <SearchModal />
         <LogoutBtn />
       </div>

diff --git a/src/components/ProfilePic.tsx b/src/components/ProfilePic.tsx
@@ -38,9 +38,7 @@ export default function ProfilePic({
           </Avatar>
         </TooltipTrigger>
         {type !== "searchedCard" && (
-          <TooltipContent>
-            <p className="text-l lg:text-xl">인트라 프로필 방문</p>
-          </TooltipContent>
+          <TooltipContent>인트라 프로필 방문</TooltipContent>
         )}
       </Tooltip>
     </TooltipProvider>

diff --git a/src/components/buttons/GroupSettingBtn.tsx b/src/components/buttons/GroupSettingBtn.tsx
@@ -28,9 +28,7 @@ export default function GroupSettingBtn({
               height={24}
             />
           </TooltipTrigger>
-          <TooltipContent>
-            <p className="text-l lg:text-xl">그룹 설정</p>
-          </TooltipContent>
+          <TooltipContent>그룹 설정</TooltipContent>
         </Tooltip>
       </TooltipProvider>
     </DropdownMenuTrigger>

diff --git 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}
           </Button>
         </TooltipTrigger>
-        {isMyProfile && (
-          <TooltipContent>
-            <p className=" text-l  lg:text-xl">내 위치 변경</p>
-          </TooltipContent>
-        )}
+        {isMyProfile && <TooltipContent>내 위치 변경</TooltipContent>}
       </Tooltip>
     </TooltipProvider>
   );

diff --git a/src/components/buttons/LogoutBtn.tsx b/src/components/buttons/LogoutBtn.tsx
@@ -33,9 +33,7 @@ export default function LogoutBtn() {
             />
           </div>
         </TooltipTrigger>
-        <TooltipContent>
-          <p className=" text-l  lg:text-xl">로그아웃</p>
-        </TooltipContent>
+        <TooltipContent>로그아웃</TooltipContent>
       </Tooltip>
     </TooltipProvider>
   );

diff --git 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]"
           />
         </TooltipTrigger>
-        <TooltipContent>
-          <p className=" text-l  lg:text-xl">내 정보 설정</p>
-        </TooltipContent>
+        <TooltipContent>내 정보 설정</TooltipContent>
       </Tooltip>
     </TooltipProvider>
   );

diff --git a/src/components/buttons/RefreshBtn.tsx 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 (
+    <TooltipProvider>
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <Button variant={"ghost"} className="h-fit max-h-20 w-fit">
+            <Image
+              src="/image/logo/logoB.svg"
+              alt="logo"
+              width={200}
+              height={100}
+              className="h-[75px] w-[150px] lg:h-[100px] lg:w-[200px]"
+              onClick={async () => {
+                console.log("refresh");
+                groupApi.getAllGroups().then((res) => {
+                  res.map((group) => {
+                    if (group.groupId === user?.defaultGroupId)
+                      group.groupName = "친구 목록";
+                  });
+                  setGroups(res);
+                });
+              }}
+            />
+          </Button>
+        </TooltipTrigger>
+        <TooltipContent>자리상태 새로고침</TooltipContent>
+      </Tooltip>
+    </TooltipProvider>
+  );
+}
diff --git a/src/components/buttons/SearchBtn.tsx b/src/components/buttons/SearchBtn.tsx
@@ -25,9 +25,7 @@ export default function SearchBtn() {
             />
           </div>
         </TooltipTrigger>
-        <TooltipContent>
-          <p className=" text-l  lg:text-xl">유저 검색</p>
-        </TooltipContent>
+        <TooltipContent>유저 검색</TooltipContent>
       </Tooltip>
     </TooltipProvider>
   );

diff --git 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() {
     >
       <DialogTrigger>
         <Button
-          className="text-l w-30 lg:w-30 border-darkblue text-darkblue h-8
-          gap-2 rounded-full border-2  bg-white px-3 py-1 hover:bg-gray-200 lg:h-10 lg:text-xl"
+          className="text-l w-30 lg:w-30 h-8 gap-2 rounded-full
+          border-2 border-darkblue bg-white  px-3 py-1 text-darkblue hover:bg-gray-200 lg:h-10 lg:text-xl"
         >
           <Image
             src="/image/newGroup.svg"
@@ -84,7 +85,7 @@ export default function NewGroupModal() {
       <DialogContent className="max-w-[800px] transition-all duration-500 ease-out">
         <DialogHeader className="flex w-full flex-col items-center justify-center gap-2">
           <AlertDialog open={isDuplicated}>
-            <AlertDialogContent className="text-darkblue max-w-[425px] transition-all duration-500  ease-out">
+            <AlertDialogContent className="max-w-[425px] text-darkblue transition-all duration-500  ease-out">
               <AlertDialogHeader>
                 <AlertDialogTitle>중복 그룹 확인</AlertDialogTitle>
                 <AlertDialogDescription>
@@ -136,9 +137,9 @@ export default function NewGroupModal() {
           </AlertDialog>
           <DialogTitle>새로운 그룹 생성</DialogTitle>
           {isAddingUser ? (
-            <div className="flex w-full flex-col items-center justify-center gap-4 overflow-scroll">
+            <div className="flex w-full flex-col items-center justify-center gap-4">
               {selectedUsers.length > 0 && (
-                <div className="flex w-[300px] flex-row gap-2 overflow-x-scroll md:w-[700px]">
+                <div className="flex w-[300px] flex-row gap-2 overflow-auto md:w-[700px]">
                   {selectedUsers.map((selectedUser) => (
                     <div
                       key={selectedUser.intraId}
@@ -170,7 +171,7 @@ export default function NewGroupModal() {
                 />
                 <input
                   ref={inputRef}
-                  className="text-l text-darkblue w-full bg-transparent outline-none placeholder:text-gray-500  dark:text-gray-700"
+                  className="text-l w-full bg-transparent text-darkblue outline-none placeholder:text-gray-500  dark:text-gray-700"
                   placeholder="새 그룹에 추가할 친구를 검색하세요."
                   onChange={(e) => setSearchValue(e.target.value)}
                 />
@@ -184,7 +185,7 @@ export default function NewGroupModal() {
                   />
                 )}
               </div>
-              <div className="h-[300px] w-full overflow-scroll rounded-md md:h-[500px]">
+              <div className="h-[300px] w-full overflow-auto rounded-md md:h-[500px]">
                 <div className="grid grid-flow-row gap-2 md:grid-cols-2">
                   {searchedUsers?.map((searchedMember) => (
                     <SearchedCard
@@ -196,9 +197,15 @@ export default function NewGroupModal() {
                             (selectedUser) =>
                               selectedUser.intraId === searchedMember.intraId,
                           )
-                        )
-                          return;
-                        setSelectedUsers([...selectedUsers, searchedMember]);
+                        ) {
+                          setSelectedUsers(
+                            selectedUsers.filter(
+                              (selectedUser) =>
+                                selectedUser.intraId !== searchedMember.intraId,
+                            ),
+                          );
+                        } else
+                          setSelectedUsers([...selectedUsers, searchedMember]);
                       }}
                       isAddingUser={true}
                     />
@@ -283,7 +290,7 @@ export default function NewGroupModal() {
               >
                 <input
                   ref={inputRef}
-                  className="text-l text-darkblue w-full bg-transparent outline-none placeholder:text-gray-500  dark:text-gray-700"
+                  className="text-l w-full bg-transparent text-darkblue outline-none placeholder:text-gray-500  dark:text-gray-700"
                   placeholder="생성할 그룹의 이름을 입력하세요."
                   onChange={(e) => setSearchValue(e.target.value)}
                 />

diff --git 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
@@ -23,9 +23,7 @@ export default function RepoLink() {
             />
           </Link>
         </TooltipTrigger>
-        <TooltipContent>
-          <p className="text-l lg:text-xl">깃허브 레포지토리 방문</p>
-        </TooltipContent>
+        <TooltipContent>깃허브 레포지토리 방문</TooltipContent>
       </Tooltip>
     </TooltipProvider>
   );