From 0da4bb582c01fd51a12febf738c4849d5633265f Mon Sep 17 00:00:00 2001
From: useonglee <useong0830@naver.com>
Date: Fri, 23 Feb 2024 17:04:03 +0900
Subject: [PATCH 01/10] =?UTF-8?q?feat:=20=EC=9D=BC=EC=A0=95=20=EB=93=B1?=
 =?UTF-8?q?=EB=A1=9D=20=EB=B0=94=ED=85=80=EC=8B=AF=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../my/FloatingButton/FloatingButton.tsx      |   3 +-
 .../components/AddScheduleBottomSheet.css.ts  |  95 ++++++
 .../components/AddScheduleBottomSheet.tsx     | 305 ++++++++++++++++++
 .../schedule/components/SearchContact.css.ts  |  49 +++
 .../schedule/components/SearchContact.tsx     | 144 +++++++++
 .../src/features/schedule/components/index.ts |   1 +
 .../web/src/features/schedule/constants.ts    |  28 ++
 .../schedule/hooks/useAddSchedule.tsx         |  19 ++
 services/web/src/features/schedule/store.ts   |   4 +
 services/web/src/types/schedule.ts            |  12 +
 services/web/src/utils/formatPhoneNumber.ts   |   9 +-
 11 files changed, 667 insertions(+), 2 deletions(-)
 create mode 100644 services/web/src/features/schedule/components/AddScheduleBottomSheet.css.ts
 create mode 100644 services/web/src/features/schedule/components/AddScheduleBottomSheet.tsx
 create mode 100644 services/web/src/features/schedule/components/SearchContact.css.ts
 create mode 100644 services/web/src/features/schedule/components/SearchContact.tsx
 create mode 100644 services/web/src/features/schedule/components/index.ts
 create mode 100644 services/web/src/features/schedule/constants.ts
 create mode 100644 services/web/src/features/schedule/hooks/useAddSchedule.tsx
 create mode 100644 services/web/src/features/schedule/store.ts

diff --git a/services/web/src/features/my/FloatingButton/FloatingButton.tsx b/services/web/src/features/my/FloatingButton/FloatingButton.tsx
index d868ee98..4c28024b 100644
--- a/services/web/src/features/my/FloatingButton/FloatingButton.tsx
+++ b/services/web/src/features/my/FloatingButton/FloatingButton.tsx
@@ -1,6 +1,7 @@
 'use client';
 
 import { AddFriendBottomSheet } from '@features/contact/components';
+import { AddScheduleBottomSheet } from '@features/schedule/components';
 import { BottomSheet, Button, IconButton } from '@linker/lds';
 import type { FABType } from '@linker/lds/src/Button/FAB';
 import { useEffect, useState } from 'react';
@@ -31,7 +32,7 @@ const FloatingButton = () => {
   }, []);
 
   const BottomSheetContext = {
-    calendar: <AddFriendBottomSheet />,
+    calendar: <AddScheduleBottomSheet />,
     user: <AddFriendBottomSheet />,
   };
 
diff --git a/services/web/src/features/schedule/components/AddScheduleBottomSheet.css.ts b/services/web/src/features/schedule/components/AddScheduleBottomSheet.css.ts
new file mode 100644
index 00000000..ac825237
--- /dev/null
+++ b/services/web/src/features/schedule/components/AddScheduleBottomSheet.css.ts
@@ -0,0 +1,95 @@
+import { colors } from '@linker/styles';
+import { style } from '@vanilla-extract/css';
+
+export const container = style({
+  position: 'relative',
+  backgroundColor: colors.background,
+  height: 'calc(100% - 64px)',
+});
+
+export const listRow = style({
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'space-between',
+});
+
+export const invitedContactCard = style([
+  {
+    flexDirection: 'column',
+  },
+]);
+
+export const scheduleInput = style({
+  width: '11.8rem !important',
+  height: '3.4rem !important',
+  padding: '0.6rem 1.2rem !important',
+  backgroundColor: `${colors.gray050} !important`,
+});
+
+export const contactAddButton = style({
+  display: 'inline-flex',
+  alignItems: 'center',
+});
+
+export const divider = style({
+  width: '100%',
+  height: 1,
+  margin: '1.2rem 0',
+  backgroundColor: colors.gray100,
+});
+
+export const textareaContainer = style({
+  padding: '0 1.6rem',
+});
+
+export const textarea = style({
+  height: '23.2rem !important',
+  padding: '0 1.6rem',
+});
+
+export const categoryLegend = style({
+  display: 'inline-block',
+  width: '1.2rem',
+  height: '1.2rem',
+  borderRadius: '50%',
+});
+
+export const dropdown = style({
+  position: 'relative',
+  display: 'flex',
+  flexDirection: 'column',
+});
+
+export const categoryWrapper = style({
+  position: 'absolute',
+  top: 30,
+  right: -10,
+  zIndex: 1,
+  width: '16rem',
+  borderRadius: 8,
+  boxShadow: '0px 0px 6px 0px #0000001A',
+  backgroundColor: colors.gray000,
+});
+
+export const border = style({
+  borderBottom: `1px solid ${colors.gray100}`,
+});
+
+export const categoryItem = style([
+  listRow,
+  {
+    width: '100%',
+    padding: '1.2rem 1.6rem',
+  },
+]);
+
+export const categoryIdentifier = style({
+  position: 'absolute',
+  zIndex: 1,
+  top: 0,
+  left: 2,
+  width: '0.5rem',
+  height: '2.8rem',
+  margin: '1.2rem 0.8rem 1.2rem 0.8rem',
+  borderRadius: '0.8rem',
+});
diff --git a/services/web/src/features/schedule/components/AddScheduleBottomSheet.tsx b/services/web/src/features/schedule/components/AddScheduleBottomSheet.tsx
new file mode 100644
index 00000000..f324d971
--- /dev/null
+++ b/services/web/src/features/schedule/components/AddScheduleBottomSheet.tsx
@@ -0,0 +1,305 @@
+/* eslint-disable max-lines */
+/* eslint-disable max-lines-per-function */
+/* eslint-disable react/jsx-no-undef */
+import {
+  BottomSheet,
+  Dropdown,
+  Icon,
+  Input,
+  List,
+  Profile,
+  Spacing,
+  TextArea,
+  TextButton,
+  Txt,
+} from '@linker/lds';
+import { colors, typography } from '@linker/styles';
+import clsx from 'clsx';
+import { format } from 'date-fns';
+import { useAtom } from 'jotai';
+import { useState } from 'react';
+import { useForm, useWatch } from 'react-hook-form';
+
+import formatInputDate from '@utils/formatInputDate';
+
+import {
+  border,
+  categoryIdentifier,
+  categoryItem,
+  categoryLegend,
+  categoryWrapper,
+  contactAddButton,
+  container,
+  divider,
+  dropdown,
+  invitedContactCard,
+  listRow,
+  scheduleInput,
+  textarea,
+  textareaContainer,
+} from './AddScheduleBottomSheet.css';
+import SearchContact from './SearchContact';
+import { contactCard, contactCardInfo, contactWrapper } from './SearchContact.css';
+import { CalendarType, Category, CategoryColor, ColorEnum } from '../constants';
+import useAddSchedule from '../hooks/useAddSchedule';
+import { selectedContactsAtom } from '../store';
+
+interface InputData {
+  title: string;
+  startDateTime: string;
+  endDateTime: string;
+  description: string;
+}
+
+const AddScheduleBottomSheet = () => {
+  const {
+    register,
+    handleSubmit,
+    control,
+    reset,
+    formState: { errors, isValid },
+  } = useForm<InputData>({
+    defaultValues: {
+      startDateTime: format(new Date(), 'yyyy. MM. dd'),
+      endDateTime: format(new Date(), 'yyyy. MM. dd'),
+    },
+  });
+
+  const formState = useWatch({
+    name: ['title', 'startDateTime', 'endDateTime', 'description'],
+    control,
+  });
+
+  const { mutate: addSchedule } = useAddSchedule();
+
+  const 모든정보를_입력했는가 = formState.every((value) => value !== '') && isValid;
+
+  const [isSearchContact, setIsSearchContact] = useState(false);
+  const [isOpenDropdown, setIsOpenDropdown] = useState(false);
+  const [category, setCategory] = useState<Category>('개인일정');
+  const [categoryColor, setCategoryColor] = useState<CategoryColor>(ColorEnum['개인일정']);
+
+  const [selectedContacts, setSelectedContacts] = useAtom(selectedContactsAtom);
+
+  const resetFormState = () => {
+    reset();
+    setSelectedContacts([]);
+    setCategory('개인일정');
+    setCategoryColor(ColorEnum['개인일정']);
+  };
+
+  const handleContactSubmit = () => {
+    const payload = {
+      title: formState[0],
+      startDateTime: formatDate(formState[1]),
+      endDateTime: formatDate(formState[2]),
+      description: formState[3],
+      contactIds: selectedContacts.map((contact) => contact.id),
+      category,
+      color: categoryColor,
+    };
+
+    addSchedule(payload);
+    resetFormState();
+  };
+
+  return (
+    <BottomSheet.Content bgColor={colors.gray000}>
+      {isSearchContact ? (
+        <SearchContact setIsSearchContact={setIsSearchContact} />
+      ) : (
+        <>
+          <BottomSheet.ButtonGroup>
+            <BottomSheet.CloseButton>
+              <TextButton
+                typography="b1"
+                fontWeight="medium"
+                onClick={() => {
+                  resetFormState();
+                }}
+              >
+                취소
+              </TextButton>
+            </BottomSheet.CloseButton>
+
+            <BottomSheet.CloseButton>
+              <TextButton
+                typography="b1"
+                type="submit"
+                disabled={!모든정보를_입력했는가}
+                onClick={handleSubmit(handleContactSubmit)}
+              >
+                저장
+              </TextButton>
+            </BottomSheet.CloseButton>
+          </BottomSheet.ButtonGroup>
+          <form className={container}>
+            <div style={{ backgroundColor: categoryColor }} className={categoryIdentifier} />
+            <Input
+              className={typography({ type: 'h5' })}
+              placeholder="어떤 일정인가요?"
+              errorMessage={errors.title?.message}
+              {...register('title', {
+                required: true,
+                maxLength: 20,
+              })}
+            />
+            <Spacing size={16} />
+
+            <List>
+              <div className={listRow}>
+                <Txt as="p" typography="p1" color={colors.gray800}>
+                  시작
+                </Txt>
+
+                <Input
+                  className={scheduleInput}
+                  type="text"
+                  placeholder={format(new Date(), 'yyyy. MM. dd')}
+                  errorMessage={errors.startDateTime?.message}
+                  {...register('startDateTime', {
+                    required: true,
+                  })}
+                  onKeyUp={(e) => {
+                    const formatted = formatInputDate(e.currentTarget.value);
+
+                    e.currentTarget.value = formatted;
+                  }}
+                />
+              </div>
+              <div className={divider} />
+              <div className={listRow}>
+                <Txt typography="p1" color={colors.gray800}>
+                  종료
+                </Txt>
+
+                <Input
+                  className={scheduleInput}
+                  type="text"
+                  placeholder={format(new Date(), 'yyyy. MM. dd')}
+                  errorMessage={errors.endDateTime?.message}
+                  {...register('endDateTime', {
+                    required: true,
+                  })}
+                  onKeyUp={(e) => {
+                    const formatted = formatInputDate(e.currentTarget.value);
+
+                    e.currentTarget.value = formatted;
+                  }}
+                />
+              </div>
+            </List>
+            <Spacing size={16} />
+
+            <List className={listRow}>
+              <Txt typography="p1" color={colors.gray700}>
+                캘린더
+              </Txt>
+              <Dropdown
+                className={dropdown}
+                open={isOpenDropdown}
+                onOpenChange={() => setIsOpenDropdown((prev) => !prev)}
+              >
+                <Dropdown.Trigger>
+                  <div>
+                    <span
+                      className={categoryLegend}
+                      style={{ marginRight: '0.8rem', backgroundColor: categoryColor }}
+                    />
+                    <Txt typography="p1">{category}</Txt>
+                  </div>
+                </Dropdown.Trigger>
+                <Dropdown.Content className={categoryWrapper}>
+                  {CalendarType.map((item, index) => (
+                    <li
+                      role="presentation"
+                      key={item.category}
+                      className={clsx(categoryItem, index !== CalendarType.length - 1 && border)}
+                      onClick={() => {
+                        setCategory(item.category);
+                        setCategoryColor(ColorEnum[item.category]);
+
+                        setIsOpenDropdown(false);
+                      }}
+                    >
+                      <Txt typography="p3" fontWeight="regular">
+                        {item.category}
+                      </Txt>
+
+                      <span
+                        className={categoryLegend}
+                        style={{ marginRight: '0.8rem', backgroundColor: ColorEnum[item.category] }}
+                      />
+                    </li>
+                  ))}
+                </Dropdown.Content>
+              </Dropdown>
+            </List>
+            <Spacing size={16} />
+
+            <List className={invitedContactCard}>
+              <div className={listRow}>
+                <Txt typography="p1" color={colors.gray700}>
+                  초대받은 사람
+                </Txt>
+                <TextButton typography="p1" onClick={() => setIsSearchContact(true)}>
+                  <span className={contactAddButton}>
+                    추가하기 <Icon name="next-gray" size={20} />
+                  </span>
+                </TextButton>
+              </div>
+
+              {selectedContacts.length > 0 && (
+                <ul className={contactWrapper}>
+                  {selectedContacts.map((contact) => {
+                    return (
+                      <li role="presentation" key={contact.id} className={contactCard}>
+                        <Profile priority imageUrl={contact.profileImgUrl} size="small" />
+
+                        <div className={contactCardInfo}>
+                          <Txt typography="p2">{contact.name}</Txt>
+                          <Txt typography="p5" color={colors.gray500}>
+                            {contact.careers ?? contact.school ?? ''}
+                          </Txt>
+                        </div>
+                      </li>
+                    );
+                  })}
+
+                  <Spacing size={8} />
+                </ul>
+              )}
+            </List>
+
+            <Spacing size={16} />
+
+            <TextArea
+              placeholder="일정에 대한 정보를 작성해주세요"
+              containerClassName={textareaContainer}
+              className={textarea}
+              errorMessage={errors.description?.message}
+              {...register('description', {
+                required: true,
+                maxLength: 400,
+              })}
+            />
+          </form>
+        </>
+      )}
+    </BottomSheet.Content>
+  );
+};
+
+export default AddScheduleBottomSheet;
+
+const formatDate = (inputDate: string) => {
+  const parts = inputDate.split('.').map((part) => {
+    return parseInt(part);
+  });
+
+  const date = new Date(parts[0], parts[1] - 1, parts[2]);
+
+  const isoDate = format(date, 'yyyy-MM-dd HH:mm:ss');
+
+  return isoDate;
+};
diff --git a/services/web/src/features/schedule/components/SearchContact.css.ts b/services/web/src/features/schedule/components/SearchContact.css.ts
new file mode 100644
index 00000000..adffcd73
--- /dev/null
+++ b/services/web/src/features/schedule/components/SearchContact.css.ts
@@ -0,0 +1,49 @@
+import { colors } from '@linker/styles';
+import { style } from '@vanilla-extract/css';
+
+export const container = style({
+  height: 'calc(100% - 64px)',
+  padding: '0 1.6rem',
+  backgroundColor: colors.gray000,
+});
+
+export const topWrapper = style({
+  display: 'flex',
+  justifyContent: 'space-between',
+  width: '100%',
+});
+
+export const inputWrapper = style({
+  display: 'flex',
+  alignItems: 'center',
+});
+
+export const contactInput = style({
+  height: '4.8rem !important',
+});
+
+export const contactWrapper = style({
+  display: 'flex',
+  flexDirection: 'column',
+  gap: '1.6rem',
+  marginTop: '2.4rem',
+});
+
+export const contactCard = style({
+  cursor: 'pointer',
+  display: 'flex',
+  alignItems: 'center',
+});
+
+export const selectedContactCard = style([
+  contactCard,
+  {
+    justifyContent: 'space-between',
+  },
+]);
+
+export const contactCardInfo = style({
+  display: 'flex',
+  flexDirection: 'column',
+  marginLeft: '1.2rem',
+});
diff --git a/services/web/src/features/schedule/components/SearchContact.tsx b/services/web/src/features/schedule/components/SearchContact.tsx
new file mode 100644
index 00000000..fce62748
--- /dev/null
+++ b/services/web/src/features/schedule/components/SearchContact.tsx
@@ -0,0 +1,144 @@
+import { useGetContactSearch } from '@app/contactSearch/hooks/useGetSearch';
+import { ContactData } from '@app/my/contact/types/contact';
+import { Icon, IconButton, Input, Profile, Spacing, TextButton, Txt } from '@linker/lds';
+import { colors } from '@linker/styles';
+import { useAtom } from 'jotai';
+import { useForm, useWatch } from 'react-hook-form';
+
+import {
+  contactCard,
+  contactCardInfo,
+  contactInput,
+  contactWrapper,
+  container,
+  inputWrapper,
+  selectedContactCard,
+  topWrapper,
+} from './SearchContact.css';
+import { selectedContactsAtom } from '../store';
+
+interface Props {
+  setIsSearchContact: (value: boolean) => void;
+}
+
+interface InputData {
+  contact: string;
+}
+
+const SearchContact = ({ setIsSearchContact }: Props) => {
+  const {
+    register,
+    control,
+    formState: { errors },
+  } = useForm<InputData>({});
+
+  const formState = useWatch({
+    name: 'contact',
+    control,
+  });
+
+  const { data } = useGetContactSearch(formState);
+
+  const [selectedContacts, setSelectedContacts] = useAtom(selectedContactsAtom);
+
+  return (
+    <>
+      <div className={container}>
+        <div className={topWrapper}>
+          <div className={inputWrapper}>
+            <Icon name="search" size={32} />
+            <Input
+              className={contactInput}
+              type="text"
+              placeholder="초대받은 사람 추가"
+              errorMessage={errors.contact?.message}
+              {...register('contact', {
+                required: true,
+                maxLength: 20,
+              })}
+            />
+          </div>
+
+          <TextButton
+            typography="b1"
+            type="submit"
+            onClick={() => {
+              setIsSearchContact(false);
+            }}
+          >
+            완료
+          </TextButton>
+        </div>
+
+        {selectedContacts.length > 0 && (
+          <ul className={contactWrapper}>
+            {selectedContacts.map((contact) => {
+              return (
+                <li role="presentation" key={contact.id} className={selectedContactCard}>
+                  <div className={contactCard}>
+                    <Profile priority imageUrl={contact.profileImgUrl} size="regular" />
+
+                    <div className={contactCardInfo}>
+                      <Txt typography="p2">{contact.name}</Txt>
+                      <Txt typography="p5" color={colors.gray500}>
+                        {contact.careers ?? contact.school ?? ''}
+                      </Txt>
+                    </div>
+                  </div>
+
+                  <IconButton
+                    name="close"
+                    size={24}
+                    onClick={() => {
+                      const filtered = selectedContacts.filter((c) => c.id !== contact.id);
+
+                      setSelectedContacts(filtered);
+                    }}
+                  />
+                </li>
+              );
+            })}
+
+            <Spacing size={8} />
+          </ul>
+        )}
+
+        <ul className={contactWrapper}>
+          {data.contacts.map((contact) => {
+            const find = findSelectedContact(selectedContacts, contact);
+
+            if (selectedContacts.length > 0 && find) {
+              return;
+            }
+
+            return (
+              <li
+                role="presentation"
+                key={contact.id}
+                className={contactCard}
+                onClick={() => {
+                  setSelectedContacts((prev) => [...prev, contact]);
+                }}
+              >
+                <Profile priority imageUrl={contact.profileImgUrl} size="regular" />
+
+                <div className={contactCardInfo}>
+                  <Txt typography="p2">{contact.name}</Txt>
+                  <Txt typography="p5" color={colors.gray500}>
+                    {contact.careers ?? contact.school ?? ''}
+                  </Txt>
+                </div>
+              </li>
+            );
+          })}
+        </ul>
+      </div>
+    </>
+  );
+};
+
+export default SearchContact;
+
+const findSelectedContact = (contacts: ContactData[], contact: ContactData) => {
+  return contacts.find((c) => c.id === contact.id);
+};
diff --git a/services/web/src/features/schedule/components/index.ts b/services/web/src/features/schedule/components/index.ts
new file mode 100644
index 00000000..fae10e42
--- /dev/null
+++ b/services/web/src/features/schedule/components/index.ts
@@ -0,0 +1 @@
+export { default as AddScheduleBottomSheet } from './AddScheduleBottomSheet';
diff --git a/services/web/src/features/schedule/constants.ts b/services/web/src/features/schedule/constants.ts
new file mode 100644
index 00000000..61eb7646
--- /dev/null
+++ b/services/web/src/features/schedule/constants.ts
@@ -0,0 +1,28 @@
+export const CalendarType = [
+  {
+    category: '개인일정',
+    color: '#CE7AF0',
+  },
+  {
+    category: '생일',
+    color: '#11CDF2',
+  },
+  {
+    category: '네트워킹',
+    color: '#FF70B0',
+  },
+  {
+    category: '친구',
+    color: '#FF875C',
+  },
+] as const;
+
+export const ColorEnum = {
+  개인일정: '#CE7AF0',
+  생일: '#11CDF2',
+  네트워킹: '#FF70B0',
+  친구: '#FF875C',
+} as const;
+
+export type Category = (typeof CalendarType)[number]['category'];
+export type CategoryColor = (typeof CalendarType)[number]['color'];
diff --git a/services/web/src/features/schedule/hooks/useAddSchedule.tsx b/services/web/src/features/schedule/hooks/useAddSchedule.tsx
new file mode 100644
index 00000000..103018ac
--- /dev/null
+++ b/services/web/src/features/schedule/hooks/useAddSchedule.tsx
@@ -0,0 +1,19 @@
+import { SchedulePayload } from '@/types/schedule';
+import { kyClient } from '@linker/ky';
+import { useMutation } from '@tanstack/react-query';
+
+const postAddSchedule = (payload: SchedulePayload) => {
+  const response = kyClient.post('/v1/schedules', {
+    json: payload,
+  });
+
+  return response;
+};
+
+const useAddSchedule = () => {
+  return useMutation({
+    mutationFn: (payload: SchedulePayload) => postAddSchedule(payload),
+  });
+};
+
+export default useAddSchedule;
diff --git a/services/web/src/features/schedule/store.ts b/services/web/src/features/schedule/store.ts
new file mode 100644
index 00000000..5a9e5ffd
--- /dev/null
+++ b/services/web/src/features/schedule/store.ts
@@ -0,0 +1,4 @@
+import { ContactData } from '@app/my/contact/types/contact';
+import { atom } from 'jotai';
+
+export const selectedContactsAtom = atom<ContactData[]>([]);
diff --git a/services/web/src/types/schedule.ts b/services/web/src/types/schedule.ts
index cfa7207b..6d433d27 100644
--- a/services/web/src/types/schedule.ts
+++ b/services/web/src/types/schedule.ts
@@ -1,3 +1,5 @@
+import { Category, CategoryColor } from '@features/schedule/constants';
+
 export interface Schedule {
   scheduleId: number;
   title: string;
@@ -5,3 +7,13 @@ export interface Schedule {
   endDateTime: string;
   profileImgUrl: string | null;
 }
+
+export interface SchedulePayload {
+  title: string;
+  startDateTime: string;
+  endDateTime: string;
+  description: string;
+  contactIds: number[];
+  category: Category;
+  color: CategoryColor;
+}
diff --git a/services/web/src/utils/formatPhoneNumber.ts b/services/web/src/utils/formatPhoneNumber.ts
index f9588119..2e0c1c4f 100644
--- a/services/web/src/utils/formatPhoneNumber.ts
+++ b/services/web/src/utils/formatPhoneNumber.ts
@@ -1,6 +1,13 @@
 const formatPhoneNumber = (phoneNumber: string | number) => {
   const cleaned = `${phoneNumber}`.replace(/\D/g, '');
-  const formatted = cleaned.replace(/(\d{3})(\d{4})(\d{4})/, '$1-$2-$3');
+
+  const formatted = cleaned.replace(/(\d{3})(\d{1,4})?(\d{0,4})?/, function (_, p1, p2, p3) {
+    const first = p1 || '';
+    const second = p2 ? `-${p2}` : '';
+    const third = p3 ? `-${p3}` : '';
+
+    return first + second + third;
+  });
 
   return formatted;
 };

From be3aad20529642f17bd9bf7272ea7ff8700ae837 Mon Sep 17 00:00:00 2001
From: useonglee <useong0830@naver.com>
Date: Fri, 23 Feb 2024 17:05:35 +0900
Subject: [PATCH 02/10] =?UTF-8?q?fix:=20=EC=97=B0=EB=9D=BD=EC=B2=98=20?=
 =?UTF-8?q?=EB=93=B1=EB=A1=9D=20=EB=B6=88=ED=95=84=EC=9A=94=ED=95=9C=20?=
 =?UTF-8?q?=EC=A0=84=EC=97=AD=20=EC=83=81=ED=83=9C=20=EC=A0=9C=EA=B1=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../AddFriendBottomSheet.tsx                  | 20 +++++++++++++------
 .../AddFriendBottomSheet/SelectTag.tsx        |  9 ++++++---
 services/web/src/features/contact/store.ts    |  2 --
 services/web/src/utils/formatInputDate.ts     | 17 ++++++++++++++++
 4 files changed, 37 insertions(+), 11 deletions(-)
 create mode 100644 services/web/src/utils/formatInputDate.ts

diff --git a/services/web/src/features/contact/components/AddFriendBottomSheet/AddFriendBottomSheet.tsx b/services/web/src/features/contact/components/AddFriendBottomSheet/AddFriendBottomSheet.tsx
index 4f2bcfde..be88c643 100644
--- a/services/web/src/features/contact/components/AddFriendBottomSheet/AddFriendBottomSheet.tsx
+++ b/services/web/src/features/contact/components/AddFriendBottomSheet/AddFriendBottomSheet.tsx
@@ -1,9 +1,10 @@
+/* eslint-disable max-lines */
 /* eslint-disable max-lines-per-function */
 /* eslint-disable no-console */
 import { Tag } from '@/types/contact';
 import useAddContact from '@features/contact/hooks/useAddContact';
 import useImageUpload from '@features/contact/hooks/useImageUpload';
-import { isDisplaySelectTagAtom, selectedTagsAtom } from '@features/contact/store';
+import { selectedTagsAtom } from '@features/contact/store';
 import {
   BottomSheet,
   Chip,
@@ -46,8 +47,6 @@ export interface InputData {
 
 const AddFriendBottomSheet = () => {
   const imageUploadRef = useRef<HTMLInputElement>(null);
-  const [isDisplaySelectTag, setIsDisplaySelectTag] = useAtom(isDisplaySelectTagAtom);
-  const [selectedTags, setSelectedTags] = useAtom(selectedTagsAtom);
 
   const {
     register,
@@ -66,6 +65,8 @@ const AddFriendBottomSheet = () => {
   const { mutate: addContact } = useAddContact();
 
   const [imageUrl, setImageUrl] = useState<string | null>(null);
+  const [isDisplaySelectTag, setIsDisplaySelectTag] = useState(false);
+  const [selectedTags, setSelectedTags] = useAtom(selectedTagsAtom);
 
   const 모든정보를_입력했는가 =
     formState.every((value) => value !== '') && imageS3Url != null && isValid;
@@ -89,7 +90,7 @@ const AddFriendBottomSheet = () => {
     const payload = {
       name: data.name,
       profileImgUrl: imageS3Url ?? '',
-      phoneNumber: formatPhoneNumber(data.phoneNumber),
+      phoneNumber: data.phoneNumber,
       description: data.description,
       interests: selectedTags,
     };
@@ -101,7 +102,7 @@ const AddFriendBottomSheet = () => {
   return (
     <BottomSheet.Content>
       {isDisplaySelectTag ? (
-        <SelectTag />
+        <SelectTag setIsDisplay={setIsDisplaySelectTag} />
       ) : (
         <>
           <BottomSheet.ButtonGroup>
@@ -170,9 +171,16 @@ const AddFriendBottomSheet = () => {
               <Input
                 label="전화번호"
                 placeholder="전화번호를 입력해주세요"
+                type="text"
                 errorMessage={errors.phoneNumber?.message}
+                onKeyUp={(e) => {
+                  const formatted = formatPhoneNumber(e.currentTarget.value);
+
+                  e.currentTarget.value = formatted;
+                }}
                 {...register('phoneNumber', {
-                  required: '숫자만 입력할 수 있어요.',
+                  required: true,
+                  maxLength: 11,
                   pattern: {
                     value: /^[0-9]+$/,
                     message: '숫자만 입력할 수 있어요.',
diff --git a/services/web/src/features/contact/components/AddFriendBottomSheet/SelectTag.tsx b/services/web/src/features/contact/components/AddFriendBottomSheet/SelectTag.tsx
index 1cc4fb80..4a054d2e 100644
--- a/services/web/src/features/contact/components/AddFriendBottomSheet/SelectTag.tsx
+++ b/services/web/src/features/contact/components/AddFriendBottomSheet/SelectTag.tsx
@@ -1,5 +1,5 @@
 import { Tag } from '@/types/contact';
-import { isDisplaySelectTagAtom, selectedTagsAtom } from '@features/contact/store';
+import { selectedTagsAtom } from '@features/contact/store';
 import { BottomSheet, Chip, TextButton, Txt } from '@linker/lds';
 import { colors } from '@linker/styles';
 import { useSetAtom } from 'jotai';
@@ -8,9 +8,12 @@ import { useState } from 'react';
 import { container, interestTagWrapper } from './SelectTag.css';
 import { INTEREST_TAGS } from './constants';
 
-const SelectTagBottomSheet = () => {
+interface Props {
+  setIsDisplay: (value: boolean) => void;
+}
+
+const SelectTagBottomSheet = ({ setIsDisplay }: Props) => {
   const setSelectedTags = useSetAtom(selectedTagsAtom);
-  const setIsDisplay = useSetAtom(isDisplaySelectTagAtom);
 
   const [tags, setTags] = useState<Tag[]>([]);
 
diff --git a/services/web/src/features/contact/store.ts b/services/web/src/features/contact/store.ts
index e5cadedf..131ab2b5 100644
--- a/services/web/src/features/contact/store.ts
+++ b/services/web/src/features/contact/store.ts
@@ -2,5 +2,3 @@ import { Tag } from '@/types/contact';
 import { atom } from 'jotai';
 
 export const selectedTagsAtom = atom<Tag[]>([]);
-
-export const isDisplaySelectTagAtom = atom(false);
diff --git a/services/web/src/utils/formatInputDate.ts b/services/web/src/utils/formatInputDate.ts
new file mode 100644
index 00000000..230b9fc5
--- /dev/null
+++ b/services/web/src/utils/formatInputDate.ts
@@ -0,0 +1,17 @@
+const formatInputDate = (date: number | string) => {
+  const cleaned = String(date).replace(/[^\d]/g, '');
+
+  let formatted = cleaned.replace(/(\d{4})(\d{2})?(\d{0,2})?/, function (_, p1, p2, p3) {
+    const year = p1 || '';
+    const month = p2 ? `. ${p2}` : '';
+    const day = p3 ? `. ${p3}` : '';
+
+    return year + month + day;
+  });
+
+  formatted = formatted.slice(0, 12);
+
+  return formatted;
+};
+
+export default formatInputDate;

From a13617886d426b913f07f27185e228c319ff72be Mon Sep 17 00:00:00 2001
From: useonglee <useong0830@naver.com>
Date: Fri, 23 Feb 2024 17:06:14 +0900
Subject: [PATCH 03/10] =?UTF-8?q?fix:=20Layout=20css=20position=20?=
 =?UTF-8?q?=EC=A0=9C=EA=B1=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/lds/src/Layout/Layout.css.ts   | 1 -
 packages/lds/src/List/ListHeader.css.ts | 4 +---
 2 files changed, 1 insertion(+), 4 deletions(-)

diff --git a/packages/lds/src/Layout/Layout.css.ts b/packages/lds/src/Layout/Layout.css.ts
index 0418ed50..75e7e235 100644
--- a/packages/lds/src/Layout/Layout.css.ts
+++ b/packages/lds/src/Layout/Layout.css.ts
@@ -1,7 +1,6 @@
 import { style } from '@vanilla-extract/css';
 
 export const container = style({
-  position: 'relative',
   maxWidth: '72rem',
   minWidth: '36rem',
   width: '100%',
diff --git a/packages/lds/src/List/ListHeader.css.ts b/packages/lds/src/List/ListHeader.css.ts
index 2bc98e60..77c60b1d 100644
--- a/packages/lds/src/List/ListHeader.css.ts
+++ b/packages/lds/src/List/ListHeader.css.ts
@@ -1,8 +1,6 @@
 import { style } from '@vanilla-extract/css';
 
-export const headerContainer = style({
-  position: 'relative',
-});
+export const headerContainer = style({});
 
 export const headerTitle = style({
   display: 'flex',

From c82ba3120ad02792afb765a5c63c9e34db38cb6e Mon Sep 17 00:00:00 2001
From: useonglee <useong0830@naver.com>
Date: Fri, 23 Feb 2024 17:06:45 +0900
Subject: [PATCH 04/10] =?UTF-8?q?fix:=20IconButton=20size=20prop=20?=
 =?UTF-8?q?=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/lds/src/Button/IconButton.tsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/packages/lds/src/Button/IconButton.tsx b/packages/lds/src/Button/IconButton.tsx
index 21493245..5409cae7 100644
--- a/packages/lds/src/Button/IconButton.tsx
+++ b/packages/lds/src/Button/IconButton.tsx
@@ -4,13 +4,14 @@ import { Icon } from '../Icon';
 
 interface Props extends HTMLAttributes<HTMLButtonElement> {
   name: string;
+  size?: number;
   className?: string;
 }
 
-const IconButton = ({ name, className, ...props }: Props) => {
+const IconButton = ({ name, size = 32, className, ...props }: Props) => {
   return (
     <button type="button" className={className} {...props}>
-      <Icon name={name} />
+      <Icon name={name} size={size} />
     </button>
   );
 };

From 3db4c01a7b086a25d1d33df9726a53b8186abde4 Mon Sep 17 00:00:00 2001
From: useonglee <useong0830@naver.com>
Date: Fri, 23 Feb 2024 17:07:11 +0900
Subject: [PATCH 05/10] =?UTF-8?q?fix:=20Dropdown=20onOepnChange=20prop=20?=
 =?UTF-8?q?=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/lds/src/Dropdown/Dropdown.tsx | 11 +++++------
 1 file changed, 5 insertions(+), 6 deletions(-)

diff --git a/packages/lds/src/Dropdown/Dropdown.tsx b/packages/lds/src/Dropdown/Dropdown.tsx
index 25878aed..d9c46d74 100644
--- a/packages/lds/src/Dropdown/Dropdown.tsx
+++ b/packages/lds/src/Dropdown/Dropdown.tsx
@@ -10,21 +10,20 @@ import { DropdownProvider, useDropdownContext } from './context';
 
 interface Props extends HTMLAttributes<HTMLButtonElement> {
   open?: boolean;
+  onOpenChange?: () => void;
   children?: ReactNode;
   className?: string;
 }
 
-const Dropdown = ({ children, className, open }: Props) => {
+const Dropdown = ({ children, className, open, onOpenChange }: Props) => {
   const [isOpen, setIsOpen] = useState(false);
 
   return (
     <DropdownProvider
       isOpen={open ?? isOpen}
-      onOpenChange={() => {
-        setIsOpen((prev) => !prev);
-      }}
+      onOpenChange={onOpenChange ?? (() => setIsOpen((prev) => !prev))}
     >
-      <button className={className}>{children}</button>
+      <div className={className}>{children}</div>
     </DropdownProvider>
   );
 };
@@ -48,5 +47,5 @@ function DropdownTrigger({ children }: Props) {
 function DropdownContent({ children, className }: Props) {
   const { isOpen } = useDropdownContext('Dropdow-Trigger');
 
-  return <>{isOpen && <button className={className}> {children}</button>}</>;
+  return <>{isOpen && <ul className={className}> {children}</ul>}</>;
 }

From b95aadbc06f064648e44480fe13c0f50f63ada52 Mon Sep 17 00:00:00 2001
From: useonglee <useong0830@naver.com>
Date: Fri, 23 Feb 2024 17:08:54 +0900
Subject: [PATCH 06/10] =?UTF-8?q?fix:=20TextArea=20=EB=B6=80=EB=AA=A8?=
 =?UTF-8?q?=EC=97=90=20className=20=EB=84=A3=EC=9D=84=20=EC=88=98=20?=
 =?UTF-8?q?=EC=9E=88=EB=8F=84=EB=A1=9D=20prop=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/lds/src/TextArea/TextArea.tsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/packages/lds/src/TextArea/TextArea.tsx b/packages/lds/src/TextArea/TextArea.tsx
index 9ce3d55a..bc6c2b18 100644
--- a/packages/lds/src/TextArea/TextArea.tsx
+++ b/packages/lds/src/TextArea/TextArea.tsx
@@ -8,14 +8,15 @@ import { Txt } from '../Txt';
 interface Props extends InputHTMLAttributes<HTMLTextAreaElement> {
   value?: string;
   label?: string;
+  containerClassName?: string;
   className?: string;
   errorMessage?: string;
 }
 
 const Input = forwardRef<HTMLTextAreaElement, Props>(
-  ({ label, className, errorMessage, value, ...props }, ref) => {
+  ({ label, containerClassName, className, errorMessage, value, ...props }, ref) => {
     return (
-      <div className={formContainer}>
+      <div className={clsx(formContainer, containerClassName)}>
         {label != null && (
           <label htmlFor={label} className={labelContainer}>
             {label}

From b89c23f7693e829ad6940612dba5d97f681de580 Mon Sep 17 00:00:00 2001
From: useonglee <useong0830@naver.com>
Date: Fri, 23 Feb 2024 17:09:18 +0900
Subject: [PATCH 07/10] =?UTF-8?q?fix:=20=EB=AA=A8=EB=B0=94=EC=9D=BC?=
 =?UTF-8?q?=EC=97=90=EC=84=9C=20=ED=84=B0=EC=B9=98=EC=98=81=EC=97=AD=20?=
 =?UTF-8?q?=EC=95=88=20=EB=B3=B4=EC=9D=B4=EB=8F=84=EB=A1=9D=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/styles/src/nomalize.css | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/packages/styles/src/nomalize.css b/packages/styles/src/nomalize.css
index c15d88ae..db4deaba 100644
--- a/packages/styles/src/nomalize.css
+++ b/packages/styles/src/nomalize.css
@@ -27,6 +27,10 @@ body {
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
+
+  * {
+    -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
+  }
 }
 
 /**

From 7d2327b5f29c282b0b7e8f1ce840d560e2f04fef Mon Sep 17 00:00:00 2001
From: useonglee <useong0830@naver.com>
Date: Fri, 23 Feb 2024 17:12:10 +0900
Subject: [PATCH 08/10] =?UTF-8?q?fix:=20hook=20lint=20rule=20=EC=A0=81?=
 =?UTF-8?q?=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../app/contactSearch/component/ContactSearch/ContactSearch.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/services/web/src/app/contactSearch/component/ContactSearch/ContactSearch.tsx b/services/web/src/app/contactSearch/component/ContactSearch/ContactSearch.tsx
index 58e2ee9d..febea6dd 100644
--- a/services/web/src/app/contactSearch/component/ContactSearch/ContactSearch.tsx
+++ b/services/web/src/app/contactSearch/component/ContactSearch/ContactSearch.tsx
@@ -29,7 +29,7 @@ export default function ContactSearch({ contacts }: ContactDataRes) {
 
   useEffect(() => {
     setQueryAtom(query);
-  }, [query]);
+  }, [query, setQueryAtom]);
 
   return (
     <section className={container}>

From 0efa6afe4d083c8e1a747f9c32dbbf8f3bf24a8b Mon Sep 17 00:00:00 2001
From: useonglee <useong0830@naver.com>
Date: Fri, 23 Feb 2024 17:54:43 +0900
Subject: [PATCH 09/10] =?UTF-8?q?fix:=20=ED=94=BC=EB=93=9C=20>=20=EB=A1=9C?=
 =?UTF-8?q?=EA=B7=B8=EC=9D=B8=20=EC=9C=A0=EB=8F=84=20=EB=B0=B0=EB=84=88=20?=
 =?UTF-8?q?=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../app/my/feed/contact-banner/ContactBanner.css.ts    |  6 +++++-
 .../src/app/my/feed/contact-banner/ContactBanner.tsx   | 10 +++++++++-
 services/web/src/app/my/feed/page.tsx                  |  2 +-
 services/web/src/app/my/layout.tsx                     |  5 ++---
 4 files changed, 17 insertions(+), 6 deletions(-)

diff --git a/services/web/src/app/my/feed/contact-banner/ContactBanner.css.ts b/services/web/src/app/my/feed/contact-banner/ContactBanner.css.ts
index bd621a7e..59727306 100644
--- a/services/web/src/app/my/feed/contact-banner/ContactBanner.css.ts
+++ b/services/web/src/app/my/feed/contact-banner/ContactBanner.css.ts
@@ -5,6 +5,7 @@ const keyframesExample = keyframes({
   '0%': {
     opacity: 0,
     transform: 'scale(0.95)',
+    background: colors.gradationPurple,
   },
   '50%': {
     opacity: 0.5,
@@ -13,6 +14,7 @@ const keyframesExample = keyframes({
   '100%': {
     opacity: 1,
     transform: 'scale(1)',
+    background: colors.gradationPurple,
   },
 });
 
@@ -20,7 +22,9 @@ export const bannerContainer = style({
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'space-between',
-  background: colors.gradationPurple,
+  maxWidth: '72rem',
+  margin: '1.6rem auto',
+  background: `${colors.gradationPurple} !important`,
   animation: `${keyframesExample} 0.4s linear`,
 });
 
diff --git a/services/web/src/app/my/feed/contact-banner/ContactBanner.tsx b/services/web/src/app/my/feed/contact-banner/ContactBanner.tsx
index b164fc1a..adb8fcab 100644
--- a/services/web/src/app/my/feed/contact-banner/ContactBanner.tsx
+++ b/services/web/src/app/my/feed/contact-banner/ContactBanner.tsx
@@ -8,7 +8,11 @@ import { useRouter } from 'next/navigation';
 
 import { bannerContainer, contentWrapper, imageWrapper, text } from './ContactBanner.css';
 
-function ContactBanner() {
+interface Props {
+  isLoggedIn: boolean;
+}
+
+function ContactBanner({ isLoggedIn }: Props) {
   const router = useRouter();
 
   const handleLoginClick = () => {
@@ -19,6 +23,10 @@ function ContactBanner() {
     router.replace(`${process.env.NEXT_PUBLIC_KAKAO_LOGIN_URL}`);
   };
 
+  if (isLoggedIn) {
+    return;
+  }
+
   return (
     <motion.div
       initial={{
diff --git a/services/web/src/app/my/feed/page.tsx b/services/web/src/app/my/feed/page.tsx
index 5e0cfdfc..795ecb77 100644
--- a/services/web/src/app/my/feed/page.tsx
+++ b/services/web/src/app/my/feed/page.tsx
@@ -12,7 +12,7 @@ export default function FeedPage() {
 
   return (
     <article className={wrapper}>
-      {accessToken == null && <ContactBanner />}
+      <ContactBanner isLoggedIn={accessToken != null} />
       <UpcomingSchedule />
       <Recommendation />
       <PreviousSchedule />
diff --git a/services/web/src/app/my/layout.tsx b/services/web/src/app/my/layout.tsx
index 3ce4d8f2..6bcd3497 100644
--- a/services/web/src/app/my/layout.tsx
+++ b/services/web/src/app/my/layout.tsx
@@ -4,15 +4,14 @@ import { Layout } from '@linker/lds';
 import { getTokens } from '@utils/token/server';
 
 function MyLayout({ children }: { children: React.ReactNode }) {
-  const hasToken = getTokens().accessToken;
+  const { accessToken } = getTokens();
 
   return (
     <>
       <MyHeader />
       <Layout>
         {children}
-
-        {hasToken && <FloatingButton />}
+        {accessToken != null && <FloatingButton />}
       </Layout>
     </>
   );

From 5d2aae9980dc8303cc6af3897212f10f9ee3d285 Mon Sep 17 00:00:00 2001
From: useonglee <useong0830@naver.com>
Date: Fri, 23 Feb 2024 18:17:26 +0900
Subject: [PATCH 10/10] =?UTF-8?q?fix:=20=EC=BA=98=EB=A6=B0=EB=8D=94=20?=
 =?UTF-8?q?=ED=83=80=EC=9E=85=20=EB=93=9C=EB=9E=8D=EB=8B=A4=EC=9A=B4?=
 =?UTF-8?q?=EC=97=90=20=ED=86=A0=EA=B8=80=20=EC=95=84=EC=9D=B4=EC=BD=98?=
 =?UTF-8?q?=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/lds/src/Dropdown/Dropdown.tsx          |  5 +++--
 .../components/AddScheduleBottomSheet.css.ts    |  9 +++++++++
 .../components/AddScheduleBottomSheet.tsx       | 17 +++++++++--------
 3 files changed, 21 insertions(+), 10 deletions(-)

diff --git a/packages/lds/src/Dropdown/Dropdown.tsx b/packages/lds/src/Dropdown/Dropdown.tsx
index d9c46d74..74e40ad1 100644
--- a/packages/lds/src/Dropdown/Dropdown.tsx
+++ b/packages/lds/src/Dropdown/Dropdown.tsx
@@ -1,5 +1,6 @@
 'use client';
 
+import clsx from 'clsx';
 import { HTMLAttributes } from 'react';
 import { ReactNode } from 'react';
 import { useState } from 'react';
@@ -34,11 +35,11 @@ export default Object.assign(Dropdown, {
   Content: DropdownContent,
 });
 
-function DropdownTrigger({ children }: Props) {
+function DropdownTrigger({ children, className }: Props) {
   const { onOpenChange } = useDropdownContext('Dropdown-Trigger');
 
   return (
-    <button type="button" onClick={onOpenChange} className={dropdownTrigger}>
+    <button type="button" onClick={onOpenChange} className={clsx(dropdownTrigger, className)}>
       {children}
     </button>
   );
diff --git a/services/web/src/features/schedule/components/AddScheduleBottomSheet.css.ts b/services/web/src/features/schedule/components/AddScheduleBottomSheet.css.ts
index ac825237..e4d3247e 100644
--- a/services/web/src/features/schedule/components/AddScheduleBottomSheet.css.ts
+++ b/services/web/src/features/schedule/components/AddScheduleBottomSheet.css.ts
@@ -47,6 +47,11 @@ export const textarea = style({
   padding: '0 1.6rem',
 });
 
+export const dropdownTrigger = style({
+  display: 'flex',
+  alignItems: 'center',
+});
+
 export const categoryLegend = style({
   display: 'inline-block',
   width: '1.2rem',
@@ -54,6 +59,10 @@ export const categoryLegend = style({
   borderRadius: '50%',
 });
 
+export const categoryToggleIcon = style({
+  display: 'inline-block',
+});
+
 export const dropdown = style({
   position: 'relative',
   display: 'flex',
diff --git a/services/web/src/features/schedule/components/AddScheduleBottomSheet.tsx b/services/web/src/features/schedule/components/AddScheduleBottomSheet.tsx
index f324d971..ee75c50a 100644
--- a/services/web/src/features/schedule/components/AddScheduleBottomSheet.tsx
+++ b/services/web/src/features/schedule/components/AddScheduleBottomSheet.tsx
@@ -27,11 +27,13 @@ import {
   categoryIdentifier,
   categoryItem,
   categoryLegend,
+  categoryToggleIcon,
   categoryWrapper,
   contactAddButton,
   container,
   divider,
   dropdown,
+  dropdownTrigger,
   invitedContactCard,
   listRow,
   scheduleInput,
@@ -200,14 +202,13 @@ const AddScheduleBottomSheet = () => {
                 open={isOpenDropdown}
                 onOpenChange={() => setIsOpenDropdown((prev) => !prev)}
               >
-                <Dropdown.Trigger>
-                  <div>
-                    <span
-                      className={categoryLegend}
-                      style={{ marginRight: '0.8rem', backgroundColor: categoryColor }}
-                    />
-                    <Txt typography="p1">{category}</Txt>
-                  </div>
+                <Dropdown.Trigger className={dropdownTrigger}>
+                  <span
+                    className={categoryLegend}
+                    style={{ marginRight: '0.8rem', backgroundColor: categoryColor }}
+                  />
+                  <Txt typography="p1">{category}</Txt>
+                  <Icon name="down-gray" size={20} className={categoryToggleIcon} />
                 </Dropdown.Trigger>
                 <Dropdown.Content className={categoryWrapper}>
                   {CalendarType.map((item, index) => (