Merge pull request #126 from 42Where/refactor/ui-ux

[#116] 어드민 페이지 추가 (refactor/ui-ux)
42Where · Dec 13, 2024 · 6b0a6d4 · 6b0a6d4
2 parents decaa82 + a132eed
commit 6b0a6d4
Show file tree

Hide file tree

Showing 27 changed files with 120 additions and 156 deletions.
diff --git a/src/components/ProfilePic.tsx b/src/components/ProfilePic.tsx
@@ -1,46 +1,31 @@
 import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
 import { User } from '@/types/User';
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger,
-} from '@/components/ui/tooltip';
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
 import { CardType } from '@/types/enums';
 
-export default function ProfilePic({
-  user,
-  type,
-}: {
-  user: User;
-  type: CardType;
-}) {
+export default function ProfilePic({ user, type }: { user: User; type: CardType }) {
   return (
     <TooltipProvider>
       <Tooltip>
         <TooltipTrigger asChild>
           <Avatar
             className={`${type === 'searchedCard' && 'size-16 md:size-20'}
-            ${type === 'myCard' && 'size-24 cursor-pointer lg:size-28'}
-            ${type === 'userCard' && 'size-20 cursor-pointer md:size-28'}
+            ${type === 'myCard' && 'size-20 cursor-pointer lg:size-28'}
+            ${type === 'userCard' && 'size-16 cursor-pointer md:size-28'}
             ${
-              user.location || user.inCluster ? 'border-[#FFB5B5]' : ''
+              (user.location || user.inCluster) && 'border-basepink'
             } border-4 hover:border-[#bfb5ff]`}
             onClick={() => {
               if (type !== 'searchedCard') {
-                window.open(
-                  `https://profile.intra.42.fr/users/${user.intraId}`,
-                );
+                window.open(`https://profile.intra.42.fr/users/${user.intraId}`);
               }
             }}
           >
             <AvatarImage src={user.image} />
             <AvatarFallback />
           </Avatar>
         </TooltipTrigger>
-        {type !== 'searchedCard' && (
-          <TooltipContent>인트라 프로필 방문</TooltipContent>
-        )}
+        {type !== 'searchedCard' && <TooltipContent>인트라 프로필 방문</TooltipContent>}
       </Tooltip>
     </TooltipProvider>
   );

diff --git a/src/components/admin/AnnouncementMenu.tsx b/src/components/admin/AnnouncementMenu.tsx
@@ -17,7 +17,7 @@ export default function AnnouncementMenu({
   return (
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
-        <p className="cursor-pointer text-darkblue decoration-[#FFB5B5] hover:underline">
+        <p className="decoration-basepink cursor-pointer text-darkblue hover:underline">
           종류: {type}
         </p>
       </DropdownMenuTrigger>

diff --git a/src/components/announcement/SurveyLink.tsx b/src/components/announcement/SurveyLink.tsx
@@ -30,7 +30,7 @@ export default function SurveyLink({
       <a
         href="https://docs.google.com/forms/d/1a5S5JxdLjx9qQSucrkZ-wVTDrUcJWhiAPjkAmbmcF1U/edit"
         target="_blank"
-        className="decoration-[#FFB5B5] hover:underline"
+        className="decoration-basepink hover:underline"
       >
         🏃 설문조사 참여하기 🏃
       </a>

diff --git a/src/components/buttons/GroupSettingBtn.tsx b/src/components/buttons/GroupSettingBtn.tsx
@@ -1,11 +1,6 @@
 import Group from '@/types/Group';
 import Image from 'next/image';
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger,
-} from '@/components/ui/tooltip';
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
 import { DropdownMenuTrigger } from '@/components/ui/dropdown-menu';
 
 export default function GroupSettingBtn({
@@ -17,16 +12,14 @@ export default function GroupSettingBtn({
 }) {
   return (
     !groups.find((group) => group.groupId === curGroup.groupId)?.isInEdit && (
-      <DropdownMenuTrigger className="absolute right-[50px] top-[8px] flex size-10 items-center justify-center rounded-lg hover:bg-gray-200 md:right-[64px] md:top-[16px]">
+      <DropdownMenuTrigger
+        className="absolute right-[50px] top-[10px] flex size-7 items-center justify-center rounded-lg
+      p-1 hover:bg-gray-200 md:right-[64px] md:top-[16px] md:size-10"
+      >
         <TooltipProvider>
           <Tooltip>
             <TooltipTrigger>
-              <Image
-                src="/image/pencil.svg"
-                alt="pencil"
-                width={24}
-                height={24}
-              />
+              <Image src="/image/pencil.svg" alt="pencil" width={24} height={24} />
             </TooltipTrigger>
             <TooltipContent>그룹 설정</TooltipContent>
           </Tooltip>

diff --git a/src/components/buttons/MySettingBtn.tsx b/src/components/buttons/MySettingBtn.tsx
@@ -1,10 +1,5 @@
 import Image from 'next/image';
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger,
-} from '@/components/ui/tooltip';
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
 
 export default function MySettingBtn() {
   return (
@@ -16,7 +11,7 @@ export default function MySettingBtn() {
             alt="setting"
             width={60}
             height={60}
-            className="size-[50px] cursor-pointer rounded-lg hover:bg-gray-200 lg:size-[60px]"
+            className="size-[40px] cursor-pointer rounded-lg hover:bg-gray-200 lg:size-[60px]"
           />
         </TooltipTrigger>
         <TooltipContent>내 정보 설정</TooltipContent>

diff --git a/src/components/buttons/SetCheckBtn.tsx b/src/components/buttons/SetCheckBtn.tsx
@@ -16,15 +16,15 @@ export default function SetCheckBtn() {
 
   return (
     <Button
-      className="text-l h-8 w-40 gap-1 rounded-full
-     border-2 border-darkblue bg-white
-     p-2 text-darkblue hover:bg-gray-200  lg:h-10 lg:w-52 lg:gap-2 lg:p-4 lg:text-xl"
+      className="h-6 gap-1 rounded-full border-2 border-darkblue bg-white
+     p-2 text-xs text-darkblue
+     hover:bg-gray-200 md:h-8 lg:h-10 lg:w-52 lg:gap-2 lg:p-4 lg:text-xl"
       onClick={() => {
         setChecked(!checked);
         localStorage.setItem('checked', JSON.stringify(!checked));
       }}
     >
-      <Checkbox checked={checked} className="size-4 border-2" size={12} />
+      <Checkbox checked={checked} className="size-3 md:size-4 md:border-2" size={12} />
       출근한 친구만 보기
     </Button>
   );

diff --git a/src/components/buttons/XBtn.tsx b/src/components/buttons/XBtn.tsx
@@ -0,0 +1,5 @@
+import { X } from 'lucide-react';
+
+export default function XBtn({ onClick }: { onClick: () => void }) {
+  return <X className="size-6 cursor-pointer" onClick={onClick} />;
+}
diff --git a/src/components/cards/MyProfileCard.tsx b/src/components/cards/MyProfileCard.tsx
@@ -8,16 +8,14 @@ import SetCheckBtn from '@/components/buttons/SetCheckBtn';
 
 export default function MyProfileCard({ user }: { user: User }) {
   return (
-    <div className="flex flex-col items-center justify-center gap-2 pb-2 pt-0 md:gap-0 md:pb-4 lg:px-8">
+    <div className="flex flex-col items-center justify-center px-1 pb-1 md:pb-4 lg:px-8">
       <div className="flex min-h-full min-w-full flex-row items-center justify-between">
         <div className="flex flex-row items-center gap-4 lg:gap-6">
           <ProfilePic user={user} type="myCard" />
-          <div className="flex flex-col items-start gap-2">
+          <div className="flex flex-col items-start gap-1 md:gap-2">
             <CustomLocationModal />
-            <h2 className="text-xl text-darkblue lg:text-3xl">
-              {user.intraName}
-            </h2>
-            <p className=" text-l  lg:text-xl">{user.comment}</p>
+            <h2 className="text-xl text-darkblue lg:text-3xl">{user.intraName}</h2>
+            <p className="text-l lg:text-xl">{user.comment}</p>
           </div>
         </div>
         <MySettingModal />

diff --git a/src/components/cards/ProfileCard.tsx b/src/components/cards/ProfileCard.tsx
@@ -30,17 +30,17 @@ export default function ProfileCard({
   return (
     <button
       type="button"
-      className={`flex flex-row items-center justify-between rounded-2xl border-2 p-4 hover:border-[#FFB5B5] md:p-6 ${
+      className={`md:hover:border-basepink flex cursor-default flex-row items-center justify-between border-b p-2 md:rounded-2xl md:border-2 md:p-4 ${
         isEdit && 'cursor-pointer'
       }`}
       onClick={clickHandler}
     >
-      <div className="flex flex-row items-center gap-4 md:gap-6">
+      <div className="flex flex-row items-center gap-2 md:gap-4">
         <ProfilePic user={user} type="userCard" />
         <div className="flex flex-col items-start gap-1 md:gap-2">
           <LocationBtn user={user} />
           <h2 className=" text-xl text-darkblue md:text-3xl">{user.intraName}</h2>
-          <p className=" text-l  lg:text-xl">{user.comment}</p>
+          <p className="text-md lg:text-lg">{user.comment}</p>
         </div>
       </div>
       {isEdit ? (

diff --git a/src/components/cards/SearchedCard.tsx b/src/components/cards/SearchedCard.tsx
@@ -8,34 +8,32 @@ export default function SearchedCard({
   member,
   onClick,
   isAddingUser,
+  isAlreadyAdded,
 }: {
   member: SearchedUser;
   onClick?: () => void;
   isAddingUser?: boolean;
+  isAlreadyAdded?: boolean;
 }) {
   const { addedMembers } = useAddedMembersStore();
   return (
     <button
       type="button"
-      className={`flex flex-row items-center justify-between rounded-2xl border-2 p-2 cursor-default ${
+      className={`flex cursor-default flex-row items-center justify-between rounded-2xl border-2 p-2 ${
         isAddingUser &&
-        'transform cursor-pointer transition-transform hover:border-[#FFB5B5] active:scale-95'
+        `hover:border-basepink transform cursor-pointer transition-transform active:scale-95 ${isAlreadyAdded && 'border-basepink'}`
       }`}
       onClick={() => onClick && onClick()}
     >
       <div className="flex flex-row items-center gap-4 md:gap-4">
         <ProfilePic user={member} type="searchedCard" />
         <div className="flex flex-col items-start gap-1">
           <LocationBtn user={member} />
-          <h2 className=" text-xl text-darkblue md:text-2xl">
-            {member.intraName}
-          </h2>
+          <h2 className=" text-xl text-darkblue md:text-2xl">{member.intraName}</h2>
           <p className=" md:text-md text-sm ">{member.comment}</p>
         </div>
       </div>
-      {!addedMembers.find(
-        (a) => a === member.intraId,
-      ) && <FriendAddBtn member={member} />}
+      {!addedMembers.find((a) => a === member.intraId) && <FriendAddBtn member={member} />}
     </button>
   );
 }
diff --git a/src/components/group/GroupCardContainer.tsx b/src/components/group/GroupCardContainer.tsx
@@ -8,7 +8,7 @@ export default function GroupCardContainer({ curGroup }: { curGroup: Group }) {
 
   return (
     <>
-      <div className="grid grid-flow-row gap-4 lg:grid-cols-2 air:grid-cols-3 3xl:grid-cols-4">
+      <div className="4xl:grid-cols-4 grid grid-flow-row border-t md:gap-4 md:border-0 lg:grid-cols-2 air:grid-cols-3">
         {curGroup.members.map(
           (member) =>
             (!checked || member.inCluster) && (
@@ -23,9 +23,8 @@ export default function GroupCardContainer({ curGroup }: { curGroup: Group }) {
         )}
       </div>
       {(curGroup.members.length === 0 ||
-        (checked &&
-          !curGroup.members.filter((member) => member.inCluster).length)) && (
-          <p className="text-center text-xl">아무도 없어요.. 😢</p>
+        (checked && !curGroup.members.filter((member) => member.inCluster).length)) && (
+        <p className="p-6 text-center md:text-xl">아무도 없어요.. 😢</p>
       )}
     </>
   );

diff --git a/src/components/group/GroupEditBar.tsx b/src/components/group/GroupEditBar.tsx
@@ -4,13 +4,7 @@ import { Button } from '@/components/ui/button';
 import GroupDeleteModal from '@/components/modals/GroupDeleteModal';
 import GroupAddModal from '@/components/modals/GroupAddModal';
 
-export default function GroupEditBar({
-  groups,
-  curGroup,
-}: {
-  groups: Group[];
-  curGroup: Group;
-}) {
+export default function GroupEditBar({ groups, curGroup }: { groups: Group[]; curGroup: Group }) {
   const { setGroups } = useGroupsStore();
   const { checkedUsers, setCheckedUsers } = useCheckedUsersStore();
   return (
@@ -23,8 +17,8 @@ export default function GroupEditBar({
       )}
       <div className="flex flex-row gap-1 md:gap-2">
         <Button
-          className="text-l h-6 gap-2 rounded-full border-2 border-darkblue bg-white
-           px-2 py-1 text-darkblue hover:bg-gray-200 md:h-8 md:px-3 lg:text-xl"
+          className="h-5 gap-2 rounded-full border-2 border-darkblue bg-white
+           px-2 py-1 text-xs text-darkblue hover:bg-gray-200 md:h-8 md:px-3 lg:text-xl"
           onClick={() => {
             if (checkedUsers.length !== curGroup.members.length) {
               // curGroup.members.map((member) => temp.push(member));
@@ -35,8 +29,8 @@ export default function GroupEditBar({
           전체 선택
         </Button>
         <Button
-          className="text-l h-6 gap-2 rounded-full border-2 border-darkblue px-2
-           text-white md:h-8 md:px-3 lg:text-xl"
+          className="h-5 gap-2 rounded-full border-2 border-darkblue px-2
+           text-xs text-white md:h-8 md:px-3 lg:text-xl"
           onClick={() => {
             setGroups(
               groups.map((g) => {

diff --git a/src/components/group/GroupHeadCount.tsx b/src/components/group/GroupHeadCount.tsx
@@ -4,13 +4,8 @@ export default function GroupHeadCount({ curGroup }: { curGroup: Group }) {
   return (
     <span className="flex flex-row items-center justify-start gap-6">
       {curGroup.groupName}
-      <p className="text-xl md:text-2xl">
-        {
-          curGroup.members.filter(
-            (member) => member.location || member.inCluster,
-          ).length
-        }
-        /
+      <p className="md:text-2xl">
+        {curGroup.members.filter((member) => member.location || member.inCluster).length}/
         {curGroup.members.length}
       </p>
     </span>

diff --git a/src/components/group/Groups.tsx b/src/components/group/Groups.tsx
@@ -24,14 +24,12 @@ export default function Groups({ groups }: { groups: Group[] }) {
           value={curGroup.groupId.toString()}
           className="relative overflow-hidden transition-all duration-500 ease-in-out"
         >
-          {curGroup.isInEdit && (
-            <GroupEditBar groups={groups} curGroup={curGroup} />
-          )}
+          {curGroup.isInEdit && <GroupEditBar groups={groups} curGroup={curGroup} />}
           <GroupSettingModal curGroup={curGroup} />
-          <AccordionTrigger className="text-l p-2 text-darkblue md:p-4 md:text-2xl">
+          <AccordionTrigger className="p-1 text-darkblue md:p-4 md:text-2xl">
             <GroupHeadCount curGroup={curGroup} />
           </AccordionTrigger>
-          <AccordionContent>
+          <AccordionContent className="pb-0 md:pb-4">
             <GroupCardContainer curGroup={curGroup} />
           </AccordionContent>
         </AccordionItem>

diff --git a/src/components/header/Header.tsx b/src/components/header/Header.tsx
@@ -19,7 +19,7 @@ export default function Header({ isAdmin }: { isAdmin: boolean }) {
         alt="logo"
         width={200}
         height={100}
-        className={`${isAdmin && 'h-[75px] w-[200px] lg:h-[100px] lg:w-[300px]'} h-[75px] w-[150px] lg:h-[100px] lg:w-[200px]`}
+        className={`${isAdmin && 'h-[50px] w-[100px] lg:h-[100px] lg:w-[300px]'} h-[50px] w-[100px] lg:h-[100px] lg:w-[200px]`}
       />
       {inAdminPage ? <HomeLinkBtn /> : <HeaderMenu isAdmin={isAdmin} />}
     </header>

diff --git a/src/components/modals/GroupAddModal.tsx b/src/components/modals/GroupAddModal.tsx
@@ -58,8 +58,8 @@ export default function GroupAddModal({ curGroup }: { curGroup: Group }) {
     <Dialog>
       <DialogTrigger asChild>
         <Button
-          className="text-l h-6 gap-2 rounded-full
-          border-2 border-darkblue bg-white px-2 text-darkblue hover:bg-gray-200  md:h-8  md:px-3 lg:text-xl"
+          className="h-5 gap-2 rounded-full border-2
+          border-darkblue bg-white px-2 text-xs text-darkblue hover:bg-gray-200  md:h-8  md:px-3 lg:text-xl"
         >
           다른 그룹에 추가
         </Button>

diff --git a/src/components/modals/GroupDeleteModal.tsx b/src/components/modals/GroupDeleteModal.tsx
@@ -52,8 +52,8 @@ export default function GroupDeleteModal({ curGroup }: { curGroup: Group }) {
     <Dialog>
       <DialogTrigger asChild>
         <Button
-          className="text-l h-6 gap-2 rounded-full
-          border-2 border-red-700 bg-white px-2 text-red-700 hover:bg-gray-200 md:h-8 md:px-3 lg:text-xl"
+          className="h-5 rounded-full border-2 border-red-700 bg-white
+          px-2 text-xs text-red-700 hover:bg-gray-200 md:h-8 md:px-3 lg:text-xl"
         >
           삭제
         </Button>