[FEATURE] 알림 발송 Modal 구현 (#115)

* feat: 알림 발송 Modal UI 구현

* fix: description 필드 제거

* fix: resolve build error

* chore: set yarn 4.5.0

* feat: 알림 발송 API 연결

* Revert "feat: 알림 발송 API 연결"

This reverts commit d25d07e.

* Revert "chore: set yarn 4.5.0"

This reverts commit e931706.

* fix: DatePicker용 커스텀 Select 컴포넌트로 대체

* [FEATURE] 알림 발송 API 연결 (#116)

* yarn install version 4.5.0

* Revert "feat: 알림 발송 API 연결"

This reverts commit d25d07e.

* feat: 알림 발송 API 연결

* fix: remoce legacy postAlarm function.

* fix: remove legacy Alarm Modal component.

* feat: 알림 앱링크 연결

* refactor: selectOptions 항목 utils로 이동

* lint

* feat: CSV 파일 업로드 로직 이식

* fix: 불필요한 코드 삭제

* feat: CSV 파일 검사 로직 추가

* Add onClose

* fix: csv 조건문 수정

* update cache

* fix: 발송금지시간 스펙 변경사항 반영

---------

Co-authored-by: Brokyeom <[email protected]>
Co-authored-by: HyeongKyeom Kim <[email protected]>

package.json

@@ -20,7 +20,7 @@
     "@sopt-makers/colors": "^3.0.1",
     "@sopt-makers/fonts": "^2.0.1",
     "@sopt-makers/icons": "^1.0.4",
-    "@sopt-makers/ui": "^2.0.0",
+    "@sopt-makers/ui": "^2.4.0",
     "axios": "^1.3.4",
     "dayjs": "^1.11.9",
     "eslint-config-next": "^14.1.4",

src/components/alarmAdmin/AlarmList/index.tsx

@@ -43,17 +43,6 @@ function AlarmList(props: Props) {
     }
   };
 
-  const onSendAlarm = async (alarmId: number, title: string) => {
-    const response = window.confirm(`${title} 알림을 전송하시겠습니까?`);
-    if (response) {
-      setIsSending(true);
-      const result = await sendAlarm(alarmId);
-      setIsSending(false);
-      window.alert(result ? '전송에 성공했습니다' : '전송에 실패했습니다');
-      refetch();
-    }
-  };
-
   const onShowAlarmDetail = (alarmId: number) => {
     setShowAlarmDetail(alarmId);
   };
@@ -122,7 +111,6 @@ function AlarmList(props: Props) {
                 text="전송"
                 onClick={(e) => {
                   e.stopPropagation();
-                  onSendAlarm(alarm.alarmId, alarm.title);
                 }}
                 disabled={alarm.status === '발송 후'}
               />

src/components/alarmAdmin/CreateAlarmModal/DatePickerSelect.tsx

@@ -0,0 +1,78 @@
+import styled from '@emotion/styled';
+import { colors } from '@sopt-makers/colors';
+import { fontsObject } from '@sopt-makers/fonts';
+import { IconChevronDown } from '@sopt-makers/icons';
+import React from 'react';
+
+interface DatePickerSelectProps {
+  selectedDate: string | null;
+  placeholder: string;
+  open: boolean;
+}
+
+function DatePickerSelect({
+  selectedDate,
+  placeholder,
+  open,
+}: DatePickerSelectProps) {
+  const selectedLabel = selectedDate ? selectedDate : placeholder;
+
+  return (
+    <DatePickerSelectButton>
+      <DatePickerSelectWrapper>
+        <DatePickerSelectLabel isSelected={selectedDate !== null}>
+          {selectedLabel}
+        </DatePickerSelectLabel>
+        <IconChevronDown
+          style={{
+            width: 20,
+            height: 20,
+            transform: open ? 'rotate(-180deg)' : '',
+            transition: 'all 0.3s ease',
+          }}
+        />
+      </DatePickerSelectWrapper>
+    </DatePickerSelectButton>
+  );
+}
+
+export default DatePickerSelect;
+
+const DatePickerSelectButton = styled.button`
+  width: 100%;
+  height: 100%;
+  background: none;
+  border: none;
+  padding: 0;
+  margin: 0;
+  cursor: pointer;
+`;
+
+const DatePickerSelectWrapper = styled.div`
+  width: 100%;
+  height: 100%;
+
+  ${fontsObject.BODY_2_16_M};
+  color: ${colors.white};
+
+  border-radius: 10px;
+
+  border: 1px solid transparent;
+  padding: 11px 16px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 12px;
+  cursor: pointer;
+  transition: border 0.2s;
+
+  background-color: ${colors.gray700};
+
+  &:focus {
+    border: 1px solid ${colors.gray200};
+  }
+`;
+
+const DatePickerSelectLabel = styled.p<{ isSelected: boolean }>`
+  color: ${({ isSelected }) => !isSelected && colors.gray300};
+`;

src/components/alarmAdmin/CreateAlarmModal/LabeledComponent.tsx

@@ -0,0 +1,58 @@
+import styled from '@emotion/styled';
+import { colors } from '@sopt-makers/colors';
+import { fontsObject } from '@sopt-makers/fonts';
+import { ReactNode } from 'react';
+
+interface LabelProps {
+  labelText: string;
+  desc?: string;
+  children?: ReactNode;
+}
+
+function LabeledComponent({ labelText, desc, children }: LabelProps) {
+  return (
+    <LabeledComponentWrapper>
+      <LabelWrapper>
+        <LabelText>{labelText}</LabelText>
+        <RequiredStar>*</RequiredStar>
+      </LabelWrapper>
+      {desc && (
+        <DescWrapper>
+          <DescText>{desc}</DescText>
+        </DescWrapper>
+      )}
+      {children}
+    </LabeledComponentWrapper>
+  );
+}
+
+export default LabeledComponent;
+
+const LabeledComponentWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+`;
+
+const LabelWrapper = styled.label`
+  display: flex;
+  gap: 0.4rem;
+`;
+
+const DescWrapper = styled.label`
+  margin: 0.8rem 0;
+`;
+
+const DescText = styled.span`
+  ${fontsObject.LABEL_4_12_SB}
+  color: ${colors.gray300};
+`;
+
+const LabelText = styled.span`
+  ${fontsObject.LABEL_3_14_SB}
+  color: ${colors.white};
+`;
+
+const RequiredStar = styled.span`
+  ${fontsObject.LABEL_3_14_SB}
+  color: ${colors.secondary};
+`;