feat: [LINKER-106] Dropdown 컴포넌트 개발

packages/lds/src/Button/Button.tsx

@@ -4,7 +4,6 @@ import { HTMLAttributes, ReactNode, forwardRef } from 'react';
 
 import { baseStyle, rightAddonItem } from './Button.css';
 import { FAB } from './FAB/';
-import { Floating } from './Floating';
 import { KakaoLogin } from './KakaoLogin';
 
 interface Props extends Omit<HTMLAttributes<HTMLButtonElement>, 'type'> {
@@ -55,4 +54,4 @@ const Button = forwardRef<HTMLButtonElement, Props>(
   },
 );
 
-export default Object.assign(Button, { FAB, KakaoLogin, Floating });
+export default Object.assign(Button, { FAB, KakaoLogin });

packages/lds/src/Button/Floating/Floating.css.ts → packages/lds/src/Dropdown/Dropdown.css.ts

@@ -5,7 +5,7 @@ export const bottomSpacing = styleVariants({
   timeline: { bottom: '-8rem' },
   scheduleDetail: { bottom: '-10rem' },
 });
-export const container = style({
+export const timelineContainer = style({
   width: '16rem',
   border: `1px solid ${colors.gray200}`,
   boxShadow: '0px 0px 6px 0px #0000001A',
@@ -15,4 +15,17 @@ export const container = style({
   borderRadius: '1.6rem',
   background: colors.white,
   zIndex: '10',
+  bottom: '-8rem',
+});
+export const scheduleContainer = style({
+  width: '16rem',
+  border: `1px solid ${colors.gray200}`,
+  boxShadow: '0px 0px 6px 0px #0000001A',
+  position: 'absolute',
+  right: '0.2rem',
+  display: 'inline-block',
+  borderRadius: '1.6rem',
+  background: colors.white,
+  zIndex: '10',
+  bottom: '-10rem',
 });

packages/lds/src/Dropdown/Dropdown.tsx

@@ -0,0 +1,14 @@
+import { HTMLAttributes } from 'react';
+import { ReactNode } from 'react';
+
+import FloatingItem from './DropdownItem';
+
+interface BaseProps extends Omit<HTMLAttributes<HTMLButtonElement>, 'type'> {
+  children: ReactNode;
+  className?: string;
+}
+const Dropdown = ({ children, className }: BaseProps) => {
+  return <div className={className}>{children}</div>;
+};
+
+export default Object.assign(Dropdown, { Item: FloatingItem });

packages/lds/src/Button/Floating/FloatingItem.tsx → packages/lds/src/Dropdown/DropdownItem.tsx

@@ -2,8 +2,8 @@ import { colors } from '@linker/styles';
 import { ReactNode } from 'react';
 import { HTMLAttributes } from 'react';
 
-import { container } from './FloatingItem.css';
-import { Txt } from '../../Txt';
+import { container } from './DropdownItem.css';
+import { Txt } from '../Txt';
 
 interface Props extends Omit<HTMLAttributes<HTMLButtonElement>, 'type'> {
   text: string;
@@ -12,7 +12,7 @@ interface Props extends Omit<HTMLAttributes<HTMLButtonElement>, 'type'> {
 }
 // 플로팅 버튼의 두가지 종류 -> 오른쪽이 아이콘, 오른쪽이 원
 
-const FloatingItem = ({ text, rightAddon }: Props) => {
+const DropdownItem = ({ text, rightAddon }: Props) => {
   return (
     <div className={container}>
       <Txt typography="p3" fontWeight="regular" color={colors.gray900}>
@@ -23,4 +23,4 @@ const FloatingItem = ({ text, rightAddon }: Props) => {
   );
 };
 
-export default FloatingItem;
+export default DropdownItem;

packages/lds/src/Dropdown/index.ts

@@ -0,0 +1 @@
+export { default as Dropdown } from './Dropdown';

packages/lds/src/index.ts

@@ -14,3 +14,4 @@ export * from './Skeleton';
 export * from './Spacing';
 export * from './Tabs';
 export * from './Txt';
+export * from './Dropdown';

services/web/src/app/my/timeline/component/TimelineDefault/TimelineDefault.tsx

@@ -21,7 +21,7 @@ const TimelineDefault = ({ timelineItems }: FeedProps) => {
   const startDateYear = format(timelineItems.schedules[0].startDateTime, 'yyyy');
   const [prevYear, setPrevYear] = useState<TimelineItemProps[]>();
   const [nextYear, setNextYear] = useState<TimelineItemProps[]>();
-  const [floatingClick, setFloatingClick] = useState('');
+  const [dropdownClick, setDropdownClick] = useState('');
 
   useEffect(() => {
     if (selectDate === true) {
@@ -85,8 +85,8 @@ const TimelineDefault = ({ timelineItems }: FeedProps) => {
                   member={item.member}
                   color={item.color}
                   description={item.description}
-                  floatingClick={floatingClick}
-                  setFloatingClick={setFloatingClick}
+                  dropdownClick={dropdownClick}
+                  setDropdownClick={setDropdownClick}
                 />
               </button>
             ))}
@@ -108,8 +108,8 @@ const TimelineDefault = ({ timelineItems }: FeedProps) => {
                   member={item.member}
                   color={item.color}
                   description={item.description}
-                  floatingClick={floatingClick}
-                  setFloatingClick={setFloatingClick}
+                  dropdownClick={dropdownClick}
+                  setDropdownClick={setDropdownClick}
                 />
               </button>
             ))}
@@ -136,8 +136,8 @@ const TimelineDefault = ({ timelineItems }: FeedProps) => {
                   member={item.member}
                   color={item.color}
                   description={item.description}
-                  floatingClick={floatingClick}
-                  setFloatingClick={setFloatingClick}
+                  dropdownClick={dropdownClick}
+                  setDropdownClick={setDropdownClick}
                 />
               </button>
             ))}

services/web/src/app/my/timeline/component/TimelineItem/TimelineItem.css.ts

@@ -64,8 +64,20 @@ export const timelineItemMemoWrapper = style({
   flexDirection: 'column',
 });
 
-export const floatingDivider = style({
+export const dropdownDivider = style({
   width: '100%',
   height: '0.1rem',
   background: `${colors.gray200}`,
 });
+export const dropdownContainer = style({
+  width: '16rem',
+  border: `1px solid ${colors.gray200}`,
+  boxShadow: '0px 0px 6px 0px #0000001A',
+  position: 'absolute',
+  right: '0.2rem',
+  display: 'inline-block',
+  borderRadius: '1.6rem',
+  background: colors.white,
+  zIndex: '10',
+  bottom: '-8rem',
+});

services/web/src/app/my/timeline/component/TimelineItem/TimelineItem.tsx

@@ -3,7 +3,7 @@ import { TimelineItemProps } from '@__server__/mocks/feed';
 import { Icon, List } from '@linker/lds';
 import { Txt } from '@linker/lds';
 import { Spacing } from '@linker/lds';
-import { Button } from '@linker/lds';
+import { Dropdown } from '@linker/lds';
 import { colors } from '@linker/styles';
 import { format } from 'date-fns';
 import { ko } from 'date-fns/locale';
@@ -20,12 +20,13 @@ import {
   timelineItemMemoWrapper,
   timelineColorDivider,
   timelineItemHeaderWrapper,
-  floatingDivider,
+  dropdownContainer,
+  dropdownDivider,
 } from './TimelineItem.css';
 
-interface FloatingProps {
-  floatingClick: string;
-  setFloatingClick: React.Dispatch<React.SetStateAction<string>>;
+interface DropdownProps {
+  dropdownClick: string;
+  setDropdownClick: React.Dispatch<React.SetStateAction<string>>;
 }
 
 function TimelineItem({
@@ -37,16 +38,16 @@ function TimelineItem({
   color,
   profileImgUrl,
   description,
-  floatingClick,
-  setFloatingClick,
-}: TimelineItemProps & FloatingProps) {
+  dropdownClick,
+  setDropdownClick,
+}: TimelineItemProps & DropdownProps) {
   const router = useRouter();
   const [time, setTime] = useState('');
-  const [kebabClick, setKebabClick] = useState(false);
+  const [isOpenDropdown, setIsOpenDropdown] = useState(false);
 
-  const handleKebabClick = () => {
-    setKebabClick((prev) => !prev);
-    setFloatingClick(title);
+  const handleDropdownClick = () => {
+    setIsOpenDropdown((prev) => !prev);
+    setDropdownClick(title);
   };
 
   const handleItemClick = (id: number) => {
@@ -116,23 +117,23 @@ function TimelineItem({
           className={timelineItemHeaderWrapper}
           rightAddon={
             <div>
-              <button type="button" onClick={handleKebabClick}>
+              <button type="button" onClick={handleDropdownClick}>
                 <Icon name="more-gray" size={28} />
               </button>
-              {floatingClick === title && kebabClick ? (
-                <Button.Floating floatingType="TIMELINE">
-                  <Button.Floating.Item
+              {dropdownClick === title && isOpenDropdown ? (
+                <Dropdown className={dropdownContainer}>
+                  <Dropdown.Item
                     text="수정하기"
                     onClick={handleEditClick}
                     rightAddon={<Icon name="pencil" size={16} />}
-                  ></Button.Floating.Item>
-                  <div className={floatingDivider}></div>
-                  <Button.Floating.Item
+                  ></Dropdown.Item>
+                  <div className={dropdownDivider}></div>
+                  <Dropdown.Item
                     text="삭제하기"
                     onClick={handleDeleteClick}
                     rightAddon={<Icon name="delete" size={16} />}
-                  ></Button.Floating.Item>
-                </Button.Floating>
+                  ></Dropdown.Item>
+                </Dropdown>
               ) : null}
             </div>
           }

services/web/src/app/my/timeline/component/TimelineSearch/TimelineSearch.tsx

@@ -18,7 +18,7 @@ const TimelineSearch = ({ timelineItems }: FeedProps) => {
   const router = useRouter();
   const [date, setDate] = useState(new Date());
   const [selectDate, setSelectDate] = useState(false);
-  const [floatingClick, setFloatingClick] = useState('');
+  const [dropdownClick, setDropdownClick] = useState('');
 
   useEffect(() => {
     if (selectDate === true) {
@@ -59,8 +59,8 @@ const TimelineSearch = ({ timelineItems }: FeedProps) => {
                   member={item.member}
                   color={item.color}
                   description={item.description}
-                  floatingClick={floatingClick}
-                  setFloatingClick={setFloatingClick}
+                  dropdownClick={dropdownClick}
+                  setDropdownClick={setDropdownClick}
                 />
               </button>
             ))}

services/web/src/app/schedule/component/Schedule/Schedule.css.ts

@@ -84,8 +84,20 @@ export const scheduleNoteWrapper = style({
   flexDirection: 'column',
   gap: '1.2rem',
 });
-export const floatingDivider = style({
+export const dropdownDivider = style({
   width: '100%',
   height: '0.1rem',
   background: `${colors.gray200}`,
 });
+export const dropdownContainer = style({
+  width: '16rem',
+  border: `1px solid ${colors.gray200}`,
+  boxShadow: '0px 0px 6px 0px #0000001A',
+  position: 'absolute',
+  right: '0.2rem',
+  display: 'inline-block',
+  borderRadius: '1.6rem',
+  background: colors.white,
+  zIndex: '10',
+  bottom: '-10rem',
+});

services/web/src/app/schedule/component/Schedule/Schedule.tsx

@@ -4,7 +4,7 @@ import { MemberProps } from '@__server__/mocks/feed';
 import { List } from '@linker/lds';
 import { Icon } from '@linker/lds';
 import { Txt } from '@linker/lds';
-import { Button } from '@linker/lds';
+import { Dropdown } from '@linker/lds';
 import { colors } from '@linker/styles';
 import clsx from 'clsx';
 import { format, getHours, getMinutes } from 'date-fns';
@@ -28,7 +28,8 @@ import {
   scheduleCalendarDropDownElipse,
   calendarElipseColor,
   scheduleTitleTimeColWrapper,
-  floatingDivider,
+  dropdownContainer,
+  dropdownDivider,
 } from './Schedule.css';
 
 interface ScheduleProps {
@@ -54,9 +55,9 @@ export const Schedule = ({
   const router = useRouter();
   const [startTime, setStartTime] = useState('');
   const [endTime, setEndTime] = useState('');
-  const [floatingClick, setFloatingClick] = useState(false);
-  const handleFloatingClick = () => {
-    setFloatingClick((prev) => !prev);
+  const [dropdownClick, setDropdownClick] = useState(false);
+  const handleDropdownClick = () => {
+    setDropdownClick((prev) => !prev);
   };
 
   useEffect(() => {
@@ -145,13 +146,13 @@ export const Schedule = ({
                 <Txt typography="p1" fontWeight="medium">
                   직장
                 </Txt>
-                <button onClick={handleFloatingClick}>
+                <button onClick={handleDropdownClick}>
                   <Icon name="down" size={20} />
                 </button>
-                {floatingClick ? (
+                {dropdownClick ? (
                   <div>
-                    <Button.Floating floatingType="SCHEDULE">
-                      <Button.Floating.Item
+                    <Dropdown className={dropdownContainer}>
+                      <Dropdown.Item
                         text="개인일정"
                         onClick={handleCalendarToggleClick}
                         rightAddon={
@@ -162,9 +163,9 @@ export const Schedule = ({
                             )}
                           ></div>
                         }
-                      ></Button.Floating.Item>
-                      <div className={floatingDivider}></div>
-                      <Button.Floating.Item
+                      ></Dropdown.Item>
+                      <div className={dropdownDivider}></div>
+                      <Dropdown.Item
                         text="생일"
                         onClick={handleCalendarToggleClick}
                         rightAddon={
@@ -175,8 +176,8 @@ export const Schedule = ({
                             )}
                           ></div>
                         }
-                      ></Button.Floating.Item>
-                    </Button.Floating>
+                      ></Dropdown.Item>
+                    </Dropdown>
                   </div>
                 ) : null}
               </div>