내 Next.js AeroPress 커피 도우미 앱에서 마무리하기

안녕 친구들!

열심히 AeroPress Tracker 앱을 만들고 있는데, 거의 완성 단계에 다다랐습니다!

당신은 그것에 대한 내 첫 번째 게시물을 확인할 수 있으며, 내가 엄청난 발전을 이루었다는 것을 보고하게 되어 기쁩니다... 그것은 단지 하나의 총 devlog를 갖는 것입니다.

다음은 제가 작업한 몇 가지 사항입니다.

다크 모드

내가 시간을 투자한 첫 번째 기능은 내 눈과 사용자의 눈을 위해... 어두운 모드를 구현하는 것이었습니다!

라이트 모드 애호가는 여전히 지원되므로 걱정하지 마세요! (비록 나는 당신을 결코 이해하지 못할 것입니다)

나는 귀여운 작은 테마 전환 버튼을 구현했습니다. 어두운 모드의 달입니다.

그리고 밝은 모드의 태양!


useDarkMode 및 TailwindCSS 을 사용하여 이것을 구현했습니다. 구현하기 쉬웠고 버튼에 대한 코드도 매우 간단했습니다.

interface Props {
    toggleDarkMode: () => void;
    isDarkMode: boolean;
}

const ThemeSwitchButton = ({ toggleDarkMode, isDarkMode }: Props) => {
    return (
        <button
            onClick={toggleDarkMode}
            className="self-center text-neutral-700 dark:text-neutral-100"
        >
            <VisuallyHidden>Toggle dark mode</VisuallyHidden>
            {isDarkMode && <Icon id="moon" strokeWidth={2.5} />}
            {!isDarkMode && <Icon id="sun" strokeWidth={2.5} />}
        </button>
    );
};

깜박임 처리

지난 포스팅에서 SessionMounter 구성요소로 깜박임을 처리하는 방법에 대해 언급했습니다.

나는 그것이 끔찍한 사용자 경험을 만들어 냈다고 생각하기 때문에 그 구성 요소를 삭제했습니다. 로드하는 데 시간이 오래 걸립니다!

그래서 세션의 유효성을 검사한 후 클라이언트 측에서 페이지를 수화하기로 선택했습니다. 버튼을 약간 다시 구현해야 했지만 결과가 만족스럽고 깜박임이 발생하면 보기에 역겹거나 끔찍하지 않습니다.

UI 업데이트

UI는 이전에 비해 대대적인 개편을 거쳤습니다. BrewCard에 디자인을 조금 더 추가하는 것부터:


양식을 훨씬 더 멋지게 보이게 하려면:


모든 것이 훨씬 더 나은 방식으로 결합되어 더욱 멋진 앱을 사용할 수 있습니다!

Tailwind가 진행되는 한 나는 그것을 즐기고 있지만 약간 실망스럽습니다. Tailwind가 제공하는 기능을 좋아하지만 원시 CSS를 작성하는 것이 그리워집니다. 운 좋게도 이 프로젝트를 위해 나는 Tailwind의 잡초에 너무 많이 들어갈 필요가 없었습니다. UI가 정말 복잡하면 좋은 친구인 Styled Components에 다시 손을 뻗을 수 있을 것 같습니다.

그래서 지금은?

이 앱은 내가 원하는 것에 가까워지고 있으므로 포트폴리오 페이지를 업데이트하고 다른 프로젝트로 이동할 수도 있습니다.

하지만 앞으로 구현될 몇 가지 기능이 아직 남아 있습니다.

페이지 매김

양조주 편집

생성 후 양조에 주석 추가

정렬

당분간은 이것들을 선택 사항으로 봅니다. 하지만 앱의 규모가 커지고 사용자층이 늘어남에 따라 필요한 추가 기능입니다. 하루나 이틀의 작업으로 이러한 문제는 확실히 해결되지만, 당분간 다른 몇 가지 작업을 수행할 수 있게 되어 더욱 기쁩니다. 앱은 제가 만족하는 위치에 있습니다.

모두 앱 사용을 즐기시기 바라며 앱에 대한 여러분의 의견을 듣고 싶습니다! 과거에 많이 활용하지 못했던 일부 기술을 활용하는 것은 재미있는 학습 경험이었고 이 스택을 다시 활용하기를 고대하고 있습니다!

즐겁게 코딩하세요! 👩‍💻