2025년 3월 개발 회고

• 화면 너비와 스크롤 여부에 따라 UI가 달라지는 GNB 만들었다.

화면 기록 2025-05-02 오후 1.21.52.mov

2.19MB

 

• Swiper를 사용해 유저들의 작업물들이 자동으로 스크롤되고 마우스 호버 시 멈추는 UI를 만들었다.

화면 기록 2025-05-02 오후 1.23.05.mov

9.73MB

 

• 모바일에서는 유저들의 리뷰를 하나하나 넘겨볼 수있게, 그리고 '@ramonak/react-progress-bar' 를 사용해 몇개나 넘겨봤는지를 확인할 수 있게 프로그레스 바를 만들었다.

화면 기록 2025-05-02 오후 1.28.59.mov

1.44MB

 

• 유저들의 리뷰 또한 자동스크롤, 호버 시 멈추도록 했다.

화면 기록 2025-05-02 오후 1.24.17.mov

7.81MB

 

• 버튼 클릭 시 파일 다운로드 받을 수 있게 했다.

    const serviceDownloadHandler = () => {
        if(router.locale == 'ko') {
            const link = document.createElement('a');
            link.href = '/docs/서비스 소개서_galleries_v2.0.pdf';
            link.download = '서비스_소개서_갤러리.pdf';
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
        } else {
            enqueueSnackbar(t('home:AnyQuestions.notyet') , {variant:'success'})
        }
    };

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

• \n과 미디어 쿼리, white-space: pre-line을 적용해, 화면 너비에 따라 줄바꿈을 만들었다 없앴다 했다.
• 자연수만 입력 가능하던 필드에 소숫점 입력도 가능하게 했다. 단, 무한소수 입력 막고 1조 이하로만 입력가능하게 했고 소숫점 여러개 넣는 것도 막았다.

          if (!/^\d*\.?\d*$/.test(newValue)) return; // 소숫점 여러개 넣는 거 막기
          if (newValue.length > 13) return; // 무한소수 입력하는거 막기 ㅋ >_<
          const parsedValue = newValue === '' ? 0 : parseFloat(newValue); // 빈 문자열일 땐 0으로 만들기
          if (!isNaN(parsedValue) && parsedValue > 1_000_000_000_000) return; // 1조 이하로만 입력가능하게하기
          apiRef.current.setEditCellValue({ id, field, value: newValue });

• 유저가 자신의 설정 페이지에서 인스타그램 아이디만 입력해도 인스타그램 주소로 자동 연결되도록 인스타그램 연결했다.

화면 기록 2025-05-02 오후 1.36.43.mov

0.18MB

 

• dayjs를 사용해, 기본 오픈시간과 기본 클로즈시간이 없을 경우는 오픈시간과 클로즈시간을 10시, 18시로 기본세팅했다.

        setOpeningTime(user.gallery.openingTime ? dayjs(user.gallery.openingTime) : dayjs().hour(10).minute(0))
        setClosingTime(user.gallery.closingTime ? dayjs(user.gallery.closingTime) : dayjs().hour(18).minute(0))

 

• DateChanger라는 함수를 만들어, unix timestamp로 표기되던 시간을, 2024-05-02 이런 식으로 인간이 보기 편한 방식으로 보여줬다.

      const DateChanger = (item) => {
        const startAt = new Date(item?.startAt);
        const endAt = new Date(item?.endAt);
        const startDate = `${startAt.getFullYear()}.${startAt.getMonth() + 1}.${startAt.getDate()}`
        const endDate = `${endAt.getFullYear()}.${endAt.getMonth() + 1}.${endAt.getDate()}`

        return startDate + ` - ` + endDate
      }