feat: [LINKER-124] 연락처 등록 기능 구현 (#61)

packages/lds/src/BottomSheet/BottomSheet.css.ts

@@ -24,6 +24,7 @@ export const content = style({
 
 export const handler = style({
   position: 'sticky',
+  zIndex: 1,
   top: 0,
   display: 'flex',
   justifyContent: 'center',
@@ -46,6 +47,7 @@ export const handler = style({
 
 export const buttonGroupWrapper = style({
   position: 'sticky',
+  zIndex: 1,
   top: '1.6rem',
   display: 'flex',
   justifyContent: 'space-between',

packages/lds/src/BottomSheet/BottomSheet.tsx

@@ -101,7 +101,7 @@ const Content = ({ children, className, bgColor = colors.background }: ContentPr
     <DialogBase open={open} onOpenChange={onOpenChange} onExited={onOpenChange}>
       <a.div
         {...bind?.()}
-        style={{ display, y, bottom: `calc(-100vh + ${height}px)`, backgroundColor: bgColor }}
+        style={{ display, y, bottom: `calc(-135vh + ${height}px)`, backgroundColor: bgColor }}
         className={clsx(content, className)}
       >
         <div className={handler} />

packages/lds/src/Button/FAB/FAB.css.ts

@@ -63,14 +63,3 @@ export const dialog = style({
     },
   },
 });
-
-export const linkButton = style({
-  display: 'flex',
-  justifyContent: 'center',
-  alignItems: 'center',
-  width: '4.8rem',
-  height: '4.8rem',
-  borderRadius: '5rem',
-  backgroundColor: `${colors.white}`,
-  boxShadow: '0px 0px 12px 0px rgba(0, 0, 0, 0.12)',
-});

packages/lds/src/Button/FAB/FAB.tsx

@@ -3,28 +3,22 @@
 import { assignInlineVars } from '@vanilla-extract/dynamic';
 import clsx from 'clsx';
 import { motion } from 'framer-motion';
-import { HTMLAttributes, MouseEvent, ReactNode } from 'react';
+import { HTMLAttributes, MouseEvent, ReactNode, memo } from 'react';
 import { useEffect, useState } from 'react';
 
-import {
-  button,
-  container,
-  buttonText,
-  innerContariner,
-  buttonRotate,
-  linkButton,
-  dialog,
-} from './FAB.css';
+import { button, container, buttonText, innerContariner, buttonRotate, dialog } from './FAB.css';
 import { DialogBase } from '../../Dialog';
 import { Icon } from '../../Icon';
 import { Txt } from '../../Txt';
 import { FAB_Z_INDEX } from '../../constants';
 
-type ButtonType = 'extand' | 'default';
+export type FABType = 'extand' | 'default';
 
 interface BaseProps extends Omit<HTMLAttributes<HTMLButtonElement>, 'type'> {
   children: ReactNode;
   className?: string;
+  open?: boolean;
+  onOpenChange?: () => void;
 }
 
 interface DefaultProps extends BaseProps {
@@ -38,10 +32,19 @@ interface ExtandProps extends BaseProps {
 
 type Props = DefaultProps | ExtandProps;
 
-const FAB = ({ children, className, type = 'extand', onClick, ...props }: Props) => {
+const FAB = ({
+  children,
+  className,
+  type = 'extand',
+  onClick,
+  open,
+  onOpenChange,
+
+  ...props
+}: Props) => {
   const { text } = props as ExtandProps;
 
-  const [fabType, setFabType] = useState<ButtonType>(type);
+  const [fabType, setFabType] = useState<FABType>(type);
   const [isVisible, setIsVisible] = useState(false);
 
   const handleButtonClick = (event: MouseEvent<HTMLButtonElement>) => {
@@ -72,7 +75,7 @@ const FAB = ({ children, className, type = 'extand', onClick, ...props }: Props)
     <>
       <motion.div
         className={container}
-        style={{ zIndex: isVisible ? `${FAB_Z_INDEX + 1}` : '' }}
+        style={{ zIndex: open ?? isVisible ? `${FAB_Z_INDEX + 1}` : '' }}
         initial={{
           width: type === 'default' ? '8.8rem' : '100%',
         }}
@@ -85,6 +88,12 @@ const FAB = ({ children, className, type = 'extand', onClick, ...props }: Props)
             return;
           }
 
+          if (typeof onOpenChange === 'function') {
+            onOpenChange();
+
+            return;
+          }
+
           setIsVisible((prev) => !prev);
         }}
       >
@@ -94,11 +103,11 @@ const FAB = ({ children, className, type = 'extand', onClick, ...props }: Props)
             onClick={handleButtonClick}
             className={clsx(button, className)}
             style={assignInlineVars(buttonRotate, {
-              transform: isVisible ? 'rotate(45deg)' : '',
+              transform: open ?? isVisible ? 'rotate(45deg)' : '',
             })}
             {...props}
           >
-            {children}
+            <Icon name="plus-white" size={42} />
             {fabType === 'extand' && (
               <Txt typography="p3" className={buttonText}>
                 {text}
@@ -109,21 +118,15 @@ const FAB = ({ children, className, type = 'extand', onClick, ...props }: Props)
       </motion.div>
 
       <DialogBase
-        open={isVisible}
-        onOpenChange={() => setIsVisible(false)}
-        onExited={() => setIsVisible(false)}
+        open={open ?? isVisible}
+        onOpenChange={onOpenChange ?? (() => setIsVisible(false))}
+        onExited={onOpenChange ?? (() => setIsVisible(false))}
         className={dialog}
       >
-        <button className={linkButton}>
-          <Icon name="calendar" />
-        </button>
-
-        <button className={linkButton}>
-          <Icon name="user" />
-        </button>
+        {children}
       </DialogBase>
     </>
   );
 };
 
-export default FAB;
+export default memo(FAB);

packages/lds/src/Button/FAB/index.ts

@@ -1 +1,2 @@
 export { default as FAB } from './FAB';
+export type { FABType } from './FAB';

services/web/next.config.js

@@ -30,6 +30,11 @@ const nextConfig = {
         hostname: 'newsimg.sedaily.com',
         pathname: '/**',
       },
+      {
+        protocol: 'https',
+        hostname: 'linker-image-dev.s3.ap-northeast-2.amazonaws.com',
+        pathname: '/**',
+      },
       /** @todo 서버에서 mock데이터로 해당 도메인을 내려줘서 임시로 추가. 추후에 삭제 필요 */
       {
         protocol: 'https',

services/web/package.json

@@ -34,6 +34,7 @@
     "next-themes": "^0.2.1",
     "react": "^18",
     "react-dom": "^18",
+    "react-hook-form": "^7.50.1",
     "ts-pattern": "^5.0.5"
   },
   "devDependencies": {

services/web/src/api/contacts.ts

@@ -1,8 +1,21 @@
 import { ContactInfo } from '@/types/contact';
+import { ContactDataRes } from '@app/my/contact/types/contact';
 import { ky } from '@linker/ky';
 
 export const getContectInfo = (id: string) => {
   const data = ky.get<ContactInfo>(`/v1/contacts/${id}`);
 
   return data;
 };
+
+export const getContact = () => {
+  const response = ky.get<ContactDataRes>('/v1/contacts');
+
+  return response;
+};
+
+export const getContactBookMarks = () => {
+  const response = ky.get<ContactDataRes>('/v1/contacts/bookmarks');
+
+  return response;
+};

services/web/src/app/my/contact/Contact.tsx

@@ -6,17 +6,22 @@ import { useEffect, useState } from 'react';
 
 import { wrapper, searchInputWrapper } from './Contact.css';
 import ContactDefault from './component/ContactDefault/ContactDefault';
-import { ContactData } from './types/contact';
+import useBookmarkContact from './hooks/useBookmarkContact';
+import useContact from './hooks/useContact';
+import { ContactDataRes } from './types/contact';
 
-export interface ContactProps {
-  defaultContact: ContactData[];
-  bookmarksContact: ContactData[];
+interface ContactProps {
+  defaultContact: ContactDataRes;
+  bookmarksContact: ContactDataRes;
 }
 
 export default function Contact({ defaultContact, bookmarksContact }: ContactProps) {
   const [isFoucsed, setIsFocused] = useState(false);
   const router = useRouter();
 
+  const { defualtContactData } = useContact(defaultContact);
+  const { bookmarkContactData } = useBookmarkContact(bookmarksContact);
+
   useEffect(() => {
     if (isFoucsed) {
       router.push('/contactSearch');
@@ -32,7 +37,10 @@ export default function Contact({ defaultContact, bookmarksContact }: ContactPro
           setIsFocused={setIsFocused}
         />
       </article>
-      <ContactDefault defaultContact={defaultContact} bookmarksContact={bookmarksContact} />
+      <ContactDefault
+        defaultContact={defualtContactData.contacts}
+        bookmarksContact={bookmarkContactData.contacts}
+      />
     </section>
   );
 }

services/web/src/app/my/contact/component/ContactDefault/ContactDefault.tsx

@@ -12,10 +12,15 @@ import {
   favoritesWrapper,
   favoriteDropDown,
 } from './ContactDefault.css';
-import { ContactProps } from '../../Contact';
+import { ContactData } from '../../types/contact';
 import ContactItem from '../ContactItem/ContactItem';
 
-export default function ContactDefault({ defaultContact, bookmarksContact }: ContactProps) {
+interface Props {
+  defaultContact: ContactData[];
+  bookmarksContact: ContactData[];
+}
+
+export default function ContactDefault({ defaultContact, bookmarksContact }: Props) {
   const [isClickFavorites, setIsClickFavorites] = useState(true);
 
   const onFavoriteClick = () => {

services/web/src/app/my/contact/hooks/useBookmarkContact.ts

@@ -0,0 +1,20 @@
+import { getContactBookMarks } from '@api/contacts';
+import { useSuspenseQuery } from '@tanstack/react-query';
+
+import { ContactDataRes } from '../types/contact';
+
+const useBookmarkContact = (bookmarksContact: ContactDataRes) => {
+  const { data: bookmarkContactData } = useSuspenseQuery({
+    queryKey: useBookmarkContact.getKey(),
+    queryFn: () => getContactBookMarks(),
+    initialData: bookmarksContact,
+  });
+
+  return { bookmarkContactData };
+};
+
+export default useBookmarkContact;
+
+useBookmarkContact.getKey = () => {
+  return ['/v1/contacts/bookmarks'];
+};

services/web/src/app/my/contact/hooks/useContact.ts

@@ -0,0 +1,20 @@
+import { getContact } from '@api/contacts';
+import { useSuspenseQuery } from '@tanstack/react-query';
+
+import { ContactDataRes } from '../types/contact';
+
+const useContact = (defaultContact: ContactDataRes) => {
+  const { data: defualtContactData } = useSuspenseQuery({
+    queryKey: useContact.getKey(),
+    queryFn: () => getContact(),
+    initialData: defaultContact,
+  });
+
+  return { defualtContactData };
+};
+
+export default useContact;
+
+useContact.getKey = () => {
+  return ['/v1/contact'];
+};

services/web/src/app/my/contact/page.tsx

@@ -1,26 +1,14 @@
-import { ky } from '@linker/ky';
+import { getContact, getContactBookMarks } from '@api/contacts';
 
 import Contact from './Contact';
-import { ContactDataRes } from './types/contact';
 
 export default async function ContactPage() {
-  const contactData = (await getContact()).contacts;
-  const bookmarkData = (await getContactBookMarks()).contacts;
+  const contactData = await getContact();
+  const bookmarkData = await getContactBookMarks();
 
   return (
     <div>
       <Contact defaultContact={contactData} bookmarksContact={bookmarkData} />
     </div>
   );
 }
-const getContact = () => {
-  const response = ky.get<ContactDataRes>('/v1/contacts');
-
-  return response;
-};
-
-const getContactBookMarks = () => {
-  const response = ky.get<ContactDataRes>('/v1/contacts/bookmarks');
-
-  return response;
-};