밥팟 만들기 페이지 리펙토링 + 몇가지 자잘한 요청사항

[jihostudy]

(중요) ISOString 타입, DateString 타입을 만들어봤습니다.

문제점

1. util/date.ts 에서 필요할때마다 Date 관련 formatting 함수를 만드는것은 비효율적이고 가독성도 좋지 않은 것 같았습니다.

/**
 * "2025-03-18"을 "25.03.18 (수)" 형식으로 변환
 */
export const formatDateToFullString = (dateStr: string) => {
  const date = new Date(dateStr)

  // 연도 뒤 두 자리 가져오기
  const year = date.getFullYear().toString().slice(-2)
  const month = String(date.getMonth() + 1).padStart(2, '0') // 월 (01~12)
  const day = String(date.getDate()).padStart(2, '0') // 일 (01~31)

  // 요일 배열 (일 ~ 토)
  const days = ['일', '월', '화', '수', '목', '금', '토']
  const dayOfWeek = days[date.getDay()]

  return `${year}.${month}.${day} (${dayOfWeek})`
}

/**
   * "2025-03-17T22:57:58.758871"을 "25.02.10"으로 변경
   */
 export const formateISODate = (ISODateString: ISOString) => {
    const [fullYear, month, day] = ISODateString.split('T')[0].split('-')
    const shortYear = fullYear.slice(2) // 연도의 뒤 두 자리만 추출
    return `${shortYear}.${month}.${day}`
  }

2. babpatAt : string 이렇게 선언하면 어떤 형식으로 데이터가 넘어오는지 알 수가 없고 문서를 확인해야 했습니다.
   "2025-03-17T22:57:58.758871" / "2025-03-18" / "25.03.18 (수)" 등 넘어오는 방법이 형식화되어 있지 않은 상태여서

해결방법

1. 타입스크립트의 브랜디드 타입 활용 (string을 새로운 이름으로 정의해서 사용하는 방법) (참고링크)

export type DateString = Brand<string, 'string'>
export type ISOString = Brand<string, 'ISOString'>

2. 각 타입에 따른 정적 메소드 제공 클래스를 생성하여 제공

(예시)

export class FormatISOString {
  /**
   * "2025-03-17T22:57:58.758871"을 "25.02.10"으로 변경
   */
  static formateISODate = (ISODateString: ISOString) => {
    const [fullYear, month, day] = ISODateString.split('T')[0].split('-')
    const shortYear = fullYear.slice(2) // 연도의 뒤 두 자리만 추출
    return `${shortYear}.${month}.${day}`
  }
}

앞으로, 날짜에 대한 타입을 지정할때 구체적으로 명시해서 적어주세요!

밥팟 만들기 페이지 리펙토링

• 기존에는 Page.tsx 에서 PlaceList.tsx, PartCreationModal.tsx의 상태를 모두 관리하고 있었습니다.

이후, 상태 데이터와 상태관리 함수를 프롭스로 넘겨주었는데 쓸데없이 넘겨주지 않고 PlaceList에서만 사용하는 데이터라서 이관하였습니다.

• 또한, 모달 생성관련 useState가 아닌 useToggle을 사용하여 가독성을 높였습니다.

기존

// Page.tsx
// 밥팟 데이터
  const [partData, setPartData] = useState<PartDTO>({
    placeName: undefined,
    placeId: undefined,
    date: undefined,
    time: undefined,
    headCount: undefined,
    comment: undefined,
    mealSpeed: 'MIDDLE',
  })
  const [isModalOpen, setIsModalOpen] = useState<boolean>(false)
  const updatePartData = (partial: Partial<PartDTO>) => {
    setPartData(prev => ({ ...prev, ...partial }))
  }

...

 <PlaceList
          placeList={placeList}
          centerHandler={centerHandler}
          focusedPlaceId={focusedPlaceId}
          focusedPlaceIdHandler={focusedPlaceIdHandler}
          updatePartData={updatePartData}
          setIsModalOpen={setIsModalOpen}
        />

변경 이후

// Page.tsx
 <PlaceList
          placeList={placeList}
          centerHandler={centerHandler}
          focusedPlaceId={focusedPlaceId}
          focusedPlaceIdHandler={focusedPlaceIdHandler}


// PlaceList
const PlaceList = ({ placeList, centerHandler, focusedPlaceId, focusedPlaceIdHandler }: PlaceListProps): ReactNode => {
/** 밥팟 생성 모달 열렸는지 여부  */
  const { status: isModalOpen, toggleStatus: toggleModal } = useToggle()

  /** 관리할 밥팟 데이터 */
  const [partData, setPartData] = useState<Partial<PartDTO>>(INITIAL_PARTDATA)
  const updatePartData = (partial: Partial<PartDTO>) => {
    setPartData(prev => ({ ...prev, ...partial }))
  }

}

자잘한 요청

• 알람 왔으면 헤더에 알림 왔다고 깜빡이기

• 알림에 은행이 무엇인지 표시가 안되었던 휴먼 에러
• 로그아웃하면 강제로 메인페이지로 이동 (마이페이지 -> 메인페이지)

[flydog98]

밥풀이 변경 추가와 빌드 에러만 해결해 주시면 되겠습니다!

[jihostudy]

가와 빌드 에러

아 제가 ray한테 리퀘 요청 한다는것을 실수로 기네스한테 했네요.. 죄송함다!! 밥풀이 되었습니다.

[Jinviz]

noah, 수고하셨습니다 👍
브랜디드 타입에 대해선 처음 알게 되었는데 특정한 상황에서 유용하게 쓰일 것 같네요.
날짜 파싱을 위한 로직을 따로 분리한 내용도 확인했습니다. 궁금한 것은, 유틸리티 함수를 정적 메소드로 바꾼 것은 어떤 의도가 있었는지 알 수 있을까요?

[jihostudy]

noah, 수고하셨습니다 👍 브랜디드 타입에 대해선 처음 알게 되었는데 특정한 상황에서 유용하게 쓰일 것 같네요. 날짜 파싱을 위한 로직을 따로 분리한 내용도 확인했습니다. 궁금한 것은, 유틸리티 함수를 정적 메소드로 바꾼 것은 어떤 의도가 있었는지 알 수 있을까요?

의도: format 관련된 코드를 생성한 타입 DateString / ISOString 끼리 묶어서 사용함에 있었습니다.

단, 해당 방법의 단점은

1. 불필요한 인스턴스를 계속 만들어야 한다.
2. 하나의 format 함수만 사용해도 객체 전부를 로딩해야 함 -> 트리 쉐이킹 에 부적절

하지만, 함수 형식으로 묶어서 사용해도 트리 쉐이킹 되지 않는 것은 동일하니, 1번의 단점만을 극복하기 위해서 다음과 같이 함수형으로 바꿔보겠습니다.

import { Brand } from '../typeUtils'

/** ISOString✅ 형식임을 구체적으로 명시합니다. */
export type ISOString = Brand<string, 'ISOString'>

export const FormatString = { 
     formateISODate : (ISODateString: ISOString) => {
        const [fullYear, month, day] = ISODateString.split('T')[0].split('-')
        const shortYear = fullYear.slice(2) // 연도의 뒤 두 자리만 추출
        return `${shortYear}.${month}.${day}`
    }
}

사용방법
FormatString.formateISODate(input : ISOString)

[S2UZY]

버튼 더 잘보이도록 변경 된 사항이면 style 커밋 메세지가 더 적절해보이는데 어떻게 생각하실까요?
물론 사소한 문제라 생각 들어서 다음부턴 어떻게 할 지 저희끼리 컨벤션 정해봐도 좋을 것 같습니다. 😀

[jihostudy]

동의합니다. 커밋 컨벤션 다음 FE 회의에 정하도록 해봅시다!

[S2UZY]

노아덕에 brand 타입 처음 알게 되었네요 고민한 흔적이 보입니다 고생하셨습니다. 👏🏻

[S2UZY]

폴더 구조 정리 잘 봤습니다 굿