[ Feature/dev 104 ] 구독관리 - 이메일 시간/요일 , 토글 구독 : mock api 연결 작업

[Happhee]

🔥 Related Issues

https://linear.app/fewletter/issue/DEV-104/구독리스트에서-토글로-구독-상태-변경

💜 작업 내용

• mock api 연결
• 테스트코드 작성했는데, pr이 너무많아서 일단 먼저 올릴게요
• 구독관리 컴포넌트 및 기능 구현

✅ PR Point

SubscriptionManagementModel

• 구독 시간 및 요일을 관리

static getDayPostInfo({ day }: Pick<SubscriptionEmailClientInfo, "day">) {
    switch (day) {
      case "EVERY_DAYS":
        return SUBSCRIPTION_EMAIL_SERVER_INFO.DAY["EVERY_DAYS"];
      case "WEEK_DAYS":
        return SUBSCRIPTION_EMAIL_SERVER_INFO.DAY["WEEK_DAYS"];
    }
  }

  static getTimePostInfo({ time }: Pick<SubscriptionEmailClientInfo, "time">) {
    return SUBSCRIPTION_EMAIL_SERVER_INFO.TIME[time];
  }

  private getDayClientInfo({
    date,
  }: Pick<
    SubscriptionEmailServerInfo,
    "date"
  >): SubscriptionEmailClientInfo["day"] {
    switch (date) {
      case SUBSCRIPTION_EMAIL_SERVER_INFO.DAY["EVERY_DAYS"]:
        return SUBSCRIPTION_DAYS["EVERY_DAYS"];

      default:
        return SUBSCRIPTION_DAYS["WEEK_DAYS"];
    }
  }

  private getTimeClientInfo({
    time,
  }: Pick<
    SubscriptionEmailServerInfo,
    "time"
  >): SubscriptionEmailClientInfo["time"] {
    switch (time) {
      case SUBSCRIPTION_EMAIL_SERVER_INFO.TIME["06"]:
        return "06";
      case SUBSCRIPTION_EMAIL_SERVER_INFO.TIME["07"]:
        return "07";
      case SUBSCRIPTION_EMAIL_SERVER_INFO.TIME["08"]:
        return "08";
      case SUBSCRIPTION_EMAIL_SERVER_INFO.TIME["09"]:
        return "09";
      case SUBSCRIPTION_EMAIL_SERVER_INFO.TIME["10"]:
        return "10";
    }
  }

• 구독 리스트 노출을 위한 client 데이터 반환 관리

get SubscriptionMangementClientList(): SubscriptionManagementClientInfo[] {
    return this.subscriptionManagementServerList.map((subscriptionInfo) => ({
      workbookId: subscriptionInfo.id.toString(),
      isSubscription: true,
      dayInfo: {
        totalDay: subscriptionInfo.totalDay,
        currentDay: subscriptionInfo.currentDay,
      },
    }))

서버와 클라이언트 데이터 반환 과정

• types/emailInfo

import {
  SUBSCRIPTION_EMAIL_CLIENT_INFO,
  SUBSCRIPTION_EMAIL_SERVER_INFO,
} from "@main/constants/emailInfo";

export interface SubscriptionEmailClientInfo {
  time: keyof typeof SUBSCRIPTION_EMAIL_CLIENT_INFO.TIME;
  day: keyof typeof SUBSCRIPTION_EMAIL_CLIENT_INFO.DAY;
}
export interface SubscriptionEmailServerInfo {
  time: (typeof SUBSCRIPTION_EMAIL_SERVER_INFO.TIME)[keyof typeof SUBSCRIPTION_EMAIL_SERVER_INFO.TIME];
  date: string;
}

• constants/emailInfo.ts -> SUBSCRIPTION_DAYS,SUBSCRIPTION_EMAIL_CLIENT_INFO 의 키값으로 클라이언트/서버 데이터의 양방향 참조를 가능하게 구성

export const SUBSCRIPTION_DAYS = {
  EVERY_DAYS: "EVERY_DAYS",
  WEEK_DAYS: "WEEK_DAYS",
} as const;

export const SUBSCRIPTION_TIMES = {
  "06": "06",
  "07": "07",
  "08": "08",
  "09": "09",
  "10": "10",
} as const;

export const SUBSCRIPTION_EMAIL_CLIENT_INFO = {
  TIME: {
    "06": "6",
    "07": "7",
    "08": "8",
    "09": "9",
    "10": "10",
  },
  DAY: {
    [SUBSCRIPTION_DAYS.EVERY_DAYS]: "매일 받을래요",
    [SUBSCRIPTION_DAYS.WEEK_DAYS]: "주말에는 안 받을래요",
  },
} as const;

export const SUBSCRIPTION_EMAIL_SERVER_INFO = {
  TIME: {
    "06": "06:00",
    "07": "07:00",
    "08": "08:00",
    "09": "09:00",
    "10": "10:00",
  },
  DAY: {
    EVERY_DAYS: "1111111",
    WEEK_DAYS: "0011111",
  },
} as const;

[Happhee]

@soomin9106 테스트 코드까지 작성했습니다..! 확인부탁드려요!

[soomin9106]

Client Info 는 "6" 이고, Server Info 는 "06:00" 인 이유가 있나용??

[Happhee]

사실 이부분은 제가 스펙을 먼저 작성해서 클라쪽을 변경하기싫어서 분리하여 값을 만들었습니다!

[soomin9106]

private subscriptionManagementServerList: WorkbookSubscriptionInfo[];
=> 이거는 어떤 역할을 하나요??!

[Happhee]

구독리스트에 있는 데이터에는 각 객체별로 구독수, 아티클 정보 등등 토글컴포넌트에서는 사용하지 않는 데이터들이 들어있습니다. 그래서 토글 관리에서 보여주는 데이터만 가져와서 사용하도록 배열의 객체값을 변경하는 과정입니다!

[soomin9106]

이거 fixed 로 바꾸었군용!

[Happhee]

네 드롭다운 메뉴 펼쳤을때 뒷부분이 스크롤이 되어버리는 현상이 발견되어 수정했습니다ㅜㅜ

[soomin9106]

@Happhee
확인했습니다~