From 39a503ff5e22cdab489572c8eb67876d56c7aff9 Mon Sep 17 00:00:00 2001 From: daejlee Date: Fri, 13 Dec 2024 16:55:51 +0900 Subject: [PATCH 01/14] Feat: X button componented --- src/components/buttons/XBtn.tsx | 5 ++++ src/components/modals/GroupSettingModal.tsx | 5 ++-- src/components/modals/MySettingModal.tsx | 31 +++++---------------- src/components/modals/NewGroupModal.tsx | 11 +++----- src/components/modals/SearchModal.tsx | 5 ++-- 5 files changed, 20 insertions(+), 37 deletions(-) create mode 100644 src/components/buttons/XBtn.tsx diff --git a/src/components/buttons/XBtn.tsx b/src/components/buttons/XBtn.tsx new file mode 100644 index 0000000..416077d --- /dev/null +++ b/src/components/buttons/XBtn.tsx @@ -0,0 +1,5 @@ +import { X } from 'lucide-react'; + +export default function XBtn({ onClick }: { onClick: () => void }) { + return ; +} diff --git a/src/components/modals/GroupSettingModal.tsx b/src/components/modals/GroupSettingModal.tsx index 96945f9..1d89d1e 100644 --- a/src/components/modals/GroupSettingModal.tsx +++ b/src/components/modals/GroupSettingModal.tsx @@ -1,5 +1,4 @@ import { useState, useRef, FormEvent } from 'react'; -import { X } from 'lucide-react'; import { DialogTrigger } from '@radix-ui/react-dialog'; import { Dialog, DialogContent, DialogTitle, DialogClose } from '@/components/ui/dialog'; import groupApi from '@/api/groupApi'; @@ -9,6 +8,7 @@ import { Button } from '@/components/ui/button'; import Group from '@/types/Group'; import { useToast } from '@/components/ui/use-toast'; import GroupSettingBtn from '@/components/buttons/GroupSettingBtn'; +import XBtn from '@/components/buttons/XBtn'; export default function GroupSettingModal({ curGroup }: { curGroup: Group }) { const [isDelete, setIsDelete] = useState(false); @@ -153,8 +153,7 @@ export default function GroupSettingModal({ curGroup }: { curGroup: Group }) { /> {groupName && ( - { formRef.current?.reset(); setGroupName(''); diff --git a/src/components/modals/MySettingModal.tsx b/src/components/modals/MySettingModal.tsx index d42290a..56dcace 100644 --- a/src/components/modals/MySettingModal.tsx +++ b/src/components/modals/MySettingModal.tsx @@ -1,22 +1,13 @@ import { useState, useRef, FormEvent } from 'react'; -import { X } from 'lucide-react'; import { DialogTrigger } from '@radix-ui/react-dialog'; import { DropdownMenuTrigger } from '@radix-ui/react-dropdown-menu'; -import { - Dialog, - DialogContent, - DialogHeader, - DialogTitle, -} from '@/components/ui/dialog'; +import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog'; import memberApi from '@/api/memberApi'; -import { - DropdownMenu, - DropdownMenuContent, - DropdownMenuItem, -} from '@/components/ui/dropdown-menu'; +import { DropdownMenu, DropdownMenuContent, DropdownMenuItem } from '@/components/ui/dropdown-menu'; import { useUserStore } from '@/lib/stores'; import CustomLocationContent from '@/components/utils/CustomLocationContent'; import SettingBtn from '@/components/buttons/MySettingBtn'; +import XBtn from '@/components/buttons/XBtn'; export default function MySettingModal() { const [isMessage, setIsMessage] = useState(false); @@ -80,14 +71,10 @@ export default function MySettingModal() { setIsMessage(true)}> - - 상태 메시지 수정 - + 상태 메시지 수정 setIsMessage(false)}> - - 수동 위치 설정 - + 수동 위치 설정 @@ -115,8 +102,7 @@ export default function MySettingModal() { {searchValue.length}/15

{searchValue && ( - { formRef.current?.reset(); setSearchValue(''); @@ -128,10 +114,7 @@ export default function MySettingModal() { ) : ( - + )} ); diff --git a/src/components/modals/NewGroupModal.tsx b/src/components/modals/NewGroupModal.tsx index 85c3cbd..dffd119 100644 --- a/src/components/modals/NewGroupModal.tsx +++ b/src/components/modals/NewGroupModal.tsx @@ -1,5 +1,4 @@ import { useState, useRef, useEffect, FormEvent } from 'react'; -import { X } from 'lucide-react'; import Image from 'next/image'; import { Button } from '@/components/ui/button'; import { @@ -25,6 +24,7 @@ import Group from '@/types/Group'; import { useToast } from '@/components/ui/use-toast'; import { SearchedUser, User } from '@/types/User'; import SearchedCard from '@/components/cards/SearchedCard'; +import XBtn from '@/components/buttons/XBtn'; export default function NewGroupModal() { const { groups, setGroups } = useGroupsStore(); @@ -212,8 +212,7 @@ export default function NewGroupModal() { className="flex flex-row items-center gap-2 rounded-xl border border-gray-400 p-2 shadow-lg" >

{selectedUser.intraName}

- { setSelectedUsers( selectedUsers.filter((selected) => selected !== selectedUser), @@ -233,8 +232,7 @@ export default function NewGroupModal() { onChange={(e) => setSearchValue(e.target.value)} /> {searchValue && ( - { formRef.current?.reset(); setSearchValue(''); @@ -277,8 +275,7 @@ export default function NewGroupModal() { /> {searchValue && ( - { formRef.current?.reset(); setSearchValue(''); diff --git a/src/components/modals/SearchModal.tsx b/src/components/modals/SearchModal.tsx index e760842..5d87332 100644 --- a/src/components/modals/SearchModal.tsx +++ b/src/components/modals/SearchModal.tsx @@ -1,6 +1,5 @@ import { useState, useRef, FormEvent } from 'react'; import Image from 'next/image'; -import { X } from 'lucide-react'; import { z } from 'zod'; import SearchedCard from '@/components/cards/SearchedCard'; import SearchBtn from '@/components/buttons/SearchBtn'; @@ -14,6 +13,7 @@ import { import memberApi from '@/api/memberApi'; import { useUserStore } from '@/lib/stores'; import { SearchedUser } from '@/types/User'; +import XBtn from '@/components/buttons/XBtn'; const SearchInputSchema = z.string().regex(/^[a-zA-Z0-9-]*$/, { message: '영어, 숫자, -만 입력 가능합니다.', @@ -111,8 +111,7 @@ export default function SearchModal() { /> {searchValue && ( - { formRef.current?.reset(); setSearchValue(''); From c13c5d102ab7b4f5b739a91299bedf14061734f7 Mon Sep 17 00:00:00 2001 From: daejlee Date: Fri, 13 Dec 2024 17:09:20 +0900 Subject: [PATCH 02/14] Style: New group ui enhaced, add pink color const --- src/components/ProfilePic.tsx | 25 +++++----------------- src/components/admin/AnnouncementMenu.tsx | 2 +- src/components/announcement/SurveyLink.tsx | 2 +- src/components/cards/ProfileCard.tsx | 2 +- src/components/cards/SearchedCard.tsx | 14 ++++++------ src/components/modals/NewGroupModal.tsx | 3 +++ src/styles/globals.css | 1 + tailwind.config.ts | 1 + 8 files changed, 19 insertions(+), 31 deletions(-) diff --git a/src/components/ProfilePic.tsx b/src/components/ProfilePic.tsx index 757be58..3ac639f 100644 --- a/src/components/ProfilePic.tsx +++ b/src/components/ProfilePic.tsx @@ -1,20 +1,9 @@ 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 ( @@ -24,13 +13,11 @@ export default function ProfilePic({ ${type === 'myCard' && 'size-24 cursor-pointer lg:size-28'} ${type === 'userCard' && 'size-20 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}`); } }} > @@ -38,9 +25,7 @@ export default function ProfilePic({ - {type !== 'searchedCard' && ( - 인트라 프로필 방문 - )} + {type !== 'searchedCard' && 인트라 프로필 방문} ); diff --git a/src/components/admin/AnnouncementMenu.tsx b/src/components/admin/AnnouncementMenu.tsx index 06a4d3a..9cae5c9 100644 --- a/src/components/admin/AnnouncementMenu.tsx +++ b/src/components/admin/AnnouncementMenu.tsx @@ -17,7 +17,7 @@ export default function AnnouncementMenu({ return ( -

+

종류: {type}

diff --git a/src/components/announcement/SurveyLink.tsx b/src/components/announcement/SurveyLink.tsx index fd70fb4..6977035 100644 --- a/src/components/announcement/SurveyLink.tsx +++ b/src/components/announcement/SurveyLink.tsx @@ -30,7 +30,7 @@ export default function SurveyLink({ 🏃 설문조사 참여하기 🏃 diff --git a/src/components/cards/ProfileCard.tsx b/src/components/cards/ProfileCard.tsx index e004726..8843670 100644 --- a/src/components/cards/ProfileCard.tsx +++ b/src/components/cards/ProfileCard.tsx @@ -30,7 +30,7 @@ export default function ProfileCard({ return ( ); } diff --git a/src/components/modals/NewGroupModal.tsx b/src/components/modals/NewGroupModal.tsx index dffd119..d878d87 100644 --- a/src/components/modals/NewGroupModal.tsx +++ b/src/components/modals/NewGroupModal.tsx @@ -248,6 +248,9 @@ export default function NewGroupModal() { member={searchedMember as SearchedUser} onClick={() => clickSearchedUserHandler(searchedMember as SearchedUser)} isAddingUser + isAlreadyAdded={selectedUsers.some( + (selectedUser) => selectedUser.intraId === searchedMember.intraId, + )} /> ))} diff --git a/src/styles/globals.css b/src/styles/globals.css index 7de8050..c0c4563 100644 --- a/src/styles/globals.css +++ b/src/styles/globals.css @@ -53,6 +53,7 @@ --ring: 240 10% 3.9%; --darkblue: 215 56% 17%; --baseblue: 214 27.5% 40%; + --basepink: 0 100% 85.5%; --radius: 0.5rem; } diff --git a/tailwind.config.ts b/tailwind.config.ts index fb2f85c..5bd10b9 100644 --- a/tailwind.config.ts +++ b/tailwind.config.ts @@ -37,6 +37,7 @@ const config = { foreground: 'hsl(var(--foreground))', darkblue: 'hsl(var(--darkblue))', baseblue: 'hsl(var(--baseblue))', + basepink: 'hsl(var(--basepink))', primary: { DEFAULT: 'hsl(var(--primary))', foreground: 'hsl(var(--primary-foreground))', From e6336f1106f370c0b69d7bd9c48dc22edaee3bda Mon Sep 17 00:00:00 2001 From: daejlee Date: Fri, 13 Dec 2024 17:12:24 +0900 Subject: [PATCH 03/14] Style: Whitespace trimmed --- src/components/modals/UserSettingModal.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/modals/UserSettingModal.tsx b/src/components/modals/UserSettingModal.tsx index 85e7bf4..d718849 100644 --- a/src/components/modals/UserSettingModal.tsx +++ b/src/components/modals/UserSettingModal.tsx @@ -167,12 +167,12 @@ export default function UserSettingModal({

" {targUser.intraName} - " + "{' '}

님을

- " - {targGroup.groupName} + {' '} + "{targGroup.groupName} "{' '}

그룹으로부터 삭제하시겠습니까? From 277dac1c13230a2c9be8334a051e8e3b8a269e02 Mon Sep 17 00:00:00 2001 From: daejlee Date: Fri, 13 Dec 2024 17:54:56 +0900 Subject: [PATCH 04/14] Style: Cluster represented as C --- src/types/CascaderOption.ts | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/src/types/CascaderOption.ts b/src/types/CascaderOption.ts index b4c168c..bcea3ca 100644 --- a/src/types/CascaderOption.ts +++ b/src/types/CascaderOption.ts @@ -25,7 +25,7 @@ export const DefaultCustomLocation: CascaderOption = { value: '2층', children: [ { - label: '1클러스터', + label: 'C1', value: 'c1', children: [ { label: '회의실', value: '회의실' }, @@ -34,7 +34,7 @@ export const DefaultCustomLocation: CascaderOption = { ], }, { - label: '2클러스터', + label: 'C2', value: 'c2', children: [ { label: '테이블', value: '테이블' }, @@ -48,7 +48,7 @@ export const DefaultCustomLocation: CascaderOption = { value: '3층', children: [ { - label: 'x1클러스터', + label: 'CX1', value: 'cx1', children: [ { label: '회의실', value: '회의실' }, @@ -57,7 +57,7 @@ export const DefaultCustomLocation: CascaderOption = { ], }, { - label: 'x2클러스터', + label: 'CX2', value: 'cx2', children: [ { label: '테이블', value: '테이블' }, @@ -71,7 +71,7 @@ export const DefaultCustomLocation: CascaderOption = { value: '4층', children: [ { - label: '3클러스터', + label: 'C3', value: 'c3', children: [ { label: '회의실', value: '회의실' }, @@ -80,7 +80,7 @@ export const DefaultCustomLocation: CascaderOption = { ], }, { - label: '4클러스터', + label: 'C4', value: 'c4', children: [ { label: '테이블', value: '테이블' }, @@ -94,7 +94,7 @@ export const DefaultCustomLocation: CascaderOption = { value: '5층', children: [ { - label: '5클러스터', + label: 'C5', value: 'c5', children: [ { label: '집현전', value: '집현전' }, @@ -103,7 +103,7 @@ export const DefaultCustomLocation: CascaderOption = { ], }, { - label: '6클러스터', + label: 'C6', value: '개포 5층 c6', children: [ { label: '테이블', value: '개포 5층 c6 테이블' }, From 2b6a18060c845da1cf3c3d33183f19498bc3f4a0 Mon Sep 17 00:00:00 2001 From: daejlee Date: Fri, 13 Dec 2024 18:15:39 +0900 Subject: [PATCH 05/14] Style: CSS refactored --- src/components/cards/ProfileCard.tsx | 6 +++--- src/components/group/GroupCardContainer.tsx | 23 +++++++++++++++++---- tailwind.config.ts | 1 + 3 files changed, 23 insertions(+), 7 deletions(-) diff --git a/src/components/cards/ProfileCard.tsx b/src/components/cards/ProfileCard.tsx index 8843670..c8636fb 100644 --- a/src/components/cards/ProfileCard.tsx +++ b/src/components/cards/ProfileCard.tsx @@ -30,17 +30,17 @@ export default function ProfileCard({ return ( diff --git a/src/components/modals/GroupDeleteModal.tsx b/src/components/modals/GroupDeleteModal.tsx index 6ae72d3..c3f51cb 100644 --- a/src/components/modals/GroupDeleteModal.tsx +++ b/src/components/modals/GroupDeleteModal.tsx @@ -52,8 +52,8 @@ export default function GroupDeleteModal({ curGroup }: { curGroup: Group }) { diff --git a/src/components/modals/GroupSettingModal.tsx b/src/components/modals/GroupSettingModal.tsx index 3bb0961..ff46c01 100644 --- a/src/components/modals/GroupSettingModal.tsx +++ b/src/components/modals/GroupSettingModal.tsx @@ -88,7 +88,7 @@ export default function GroupSettingModal({ curGroup }: { curGroup: Group }) { openHandler(open)}> - + {curGroup.members.length > 0 && ( editClickHandler()}> 그룹 수정 diff --git a/src/components/modals/UserSettingModal.tsx b/src/components/modals/UserSettingModal.tsx index d718849..1e27221 100644 --- a/src/components/modals/UserSettingModal.tsx +++ b/src/components/modals/UserSettingModal.tsx @@ -1,9 +1,19 @@ import { useState } from 'react'; -import { DialogTrigger } from '@radix-ui/react-dialog'; +import { + DialogTrigger, + Dialog, + DialogContent, + DialogTitle, + DialogClose, +} from '@/components/ui/dialog'; import Image from 'next/image'; -import { DropdownMenuTrigger } from '@radix-ui/react-dropdown-menu'; -import { Dialog, DialogContent, DialogTitle, DialogClose } from '@/components/ui/dialog'; -import { DropdownMenu, DropdownMenuContent, DropdownMenuItem } from '@/components/ui/dropdown-menu'; +import { + DropdownMenuSeparator, + DropdownMenuTrigger, + DropdownMenu, + DropdownMenuContent, + DropdownMenuItem, +} from '@/components/ui/dropdown-menu'; import { useGroupsStore, useUserStore, @@ -113,13 +123,17 @@ export default function UserSettingModal({ setIsDelete(false)}> - 다른 그룹에 추가하기 + 다른 그룹에 추가하기 - selectClickHandler()}> + + selectClickHandler()}> 유저 선택하기 + setIsDelete(true)}> - 그룹에서 삭제하기 + + 그룹에서 삭제하기 + diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 8d9b9e9..2315259 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -27,7 +27,7 @@ export default function Home() { return ( <> -
+
{user ? : } From ca0f30e80a3a533ac43871a891517e8290f8e480 Mon Sep 17 00:00:00 2001 From: daejlee Date: Fri, 13 Dec 2024 20:40:25 +0900 Subject: [PATCH 11/14] Style: Searched user content height widen --- src/components/modals/SearchModal.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/modals/SearchModal.tsx b/src/components/modals/SearchModal.tsx index 5d87332..8158c53 100644 --- a/src/components/modals/SearchModal.tsx +++ b/src/components/modals/SearchModal.tsx @@ -123,7 +123,7 @@ export default function SearchModal() { {/* eslint-disable-next-line no-nested-ternary */} {searchedUsers?.length ? ( searchedUsers?.length > 4 ? ( -
+
{searchedUsers?.map((searchedMember) => ( From 10c5d8fea1d8f6008ca627750a7f6addbccff9dd Mon Sep 17 00:00:00 2001 From: daejlee Date: Fri, 13 Dec 2024 20:46:55 +0900 Subject: [PATCH 12/14] Chore: Remove dummy --- src/components/group/GroupCardContainer.tsx | 16 ---------------- 1 file changed, 16 deletions(-) diff --git a/src/components/group/GroupCardContainer.tsx b/src/components/group/GroupCardContainer.tsx index be34bf9..9f2b55f 100644 --- a/src/components/group/GroupCardContainer.tsx +++ b/src/components/group/GroupCardContainer.tsx @@ -2,16 +2,6 @@ import ProfileCard from '@/components/cards/ProfileCard'; import { useCheckedStore, useCheckedUsersStore } from '@/lib/stores'; import Group from '@/types/Group'; -const dummyUser = { - agree: true, - comment: '십오글자십오글자십오글자십오글', - intraId: '1234', - intraName: 'RipVanWinkle', - location: '개포 5층 6C 테라스', - inCluster: true, - defaultGroupId: 1, -}; - export default function GroupCardContainer({ curGroup }: { curGroup: Group }) { const { checked } = useCheckedStore(); const { checkedUsers } = useCheckedUsersStore(); @@ -31,12 +21,6 @@ export default function GroupCardContainer({ curGroup }: { curGroup: Group }) { /> ), )} -
{(curGroup.members.length === 0 || (checked && !curGroup.members.filter((member) => member.inCluster).length)) && ( From ead815b1ef7f1f30cf09a66fea749bf82f2c75f0 Mon Sep 17 00:00:00 2001 From: daejlee Date: Fri, 13 Dec 2024 21:12:02 +0900 Subject: [PATCH 13/14] Style: size trimmed --- src/components/group/Groups.tsx | 2 +- src/components/header/Header.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/group/Groups.tsx b/src/components/group/Groups.tsx index 64ce495..1454bd2 100644 --- a/src/components/group/Groups.tsx +++ b/src/components/group/Groups.tsx @@ -29,7 +29,7 @@ export default function Groups({ groups }: { groups: Group[] }) { - + diff --git a/src/components/header/Header.tsx b/src/components/header/Header.tsx index 7532c6c..f28c7e8 100644 --- 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-[50px] w-[100px] 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 ? : }
From a132eed59e9818094085df36aaf59ec4dda3ec32 Mon Sep 17 00:00:00 2001 From: daejlee Date: Fri, 13 Dec 2024 21:27:37 +0900 Subject: [PATCH 14/14] Style: Size trimmed --- src/components/buttons/GroupSettingBtn.tsx | 5 ++++- src/components/buttons/SetCheckBtn.tsx | 8 ++++---- src/components/group/GroupCardContainer.tsx | 2 +- src/components/modals/NewGroupModal.tsx | 4 ++-- 4 files changed, 11 insertions(+), 8 deletions(-) diff --git a/src/components/buttons/GroupSettingBtn.tsx b/src/components/buttons/GroupSettingBtn.tsx index 43e332f..9fe52e1 100644 --- a/src/components/buttons/GroupSettingBtn.tsx +++ b/src/components/buttons/GroupSettingBtn.tsx @@ -12,7 +12,10 @@ export default function GroupSettingBtn({ }) { return ( !groups.find((group) => group.groupId === curGroup.groupId)?.isInEdit && ( - + diff --git a/src/components/buttons/SetCheckBtn.tsx b/src/components/buttons/SetCheckBtn.tsx index 3130a13..19977d3 100644 --- a/src/components/buttons/SetCheckBtn.tsx +++ b/src/components/buttons/SetCheckBtn.tsx @@ -16,15 +16,15 @@ export default function SetCheckBtn() { return ( ); diff --git a/src/components/group/GroupCardContainer.tsx b/src/components/group/GroupCardContainer.tsx index 9f2b55f..6761578 100644 --- a/src/components/group/GroupCardContainer.tsx +++ b/src/components/group/GroupCardContainer.tsx @@ -24,7 +24,7 @@ export default function GroupCardContainer({ curGroup }: { curGroup: Group }) { {(curGroup.members.length === 0 || (checked && !curGroup.members.filter((member) => member.inCluster).length)) && ( -

아무도 없어요.. 😢

+

아무도 없어요.. 😢

)} ); diff --git a/src/components/modals/NewGroupModal.tsx b/src/components/modals/NewGroupModal.tsx index d878d87..ba29f65 100644 --- a/src/components/modals/NewGroupModal.tsx +++ b/src/components/modals/NewGroupModal.tsx @@ -165,8 +165,8 @@ export default function NewGroupModal() { openHandler(open)}>