재시민

How To Eat

우리 매장은 맛있게 먹는 방법이 있다. 깻잎에 마요네즈가 섞인 천사채와 날치알, 환상의 마요네즈 소스까지 곁들여 쭈꾸미와 함께 쏙하면 기가막힌 천상의 맛이다. 하지만, 외국인들에게 이 맛있는 조합을 소개하기가 매우 어려운 사실.. 이를 해결하기 위해 만들어 보도록 하겠다.

이전 시간에 사용한 모달을 재활용해서 How To Eat 버튼과 모달창을 구현해보겠다.

const HowtoeatButton = () => {
    const [isModalOpen, setIsModalOpen] = useState(false);
    const [curPage, setCurPage] = useState(0);

    const navigatePage = (direction : Direction) => {
        setCurPage((prevPage) => {
            if (direction === 'prev' && prevPage > 0) {
                return prevPage - 1;
            } else if (direction === 'next' && prevPage < MAX_PAGE) {
                return prevPage + 1;
            }
            return prevPage;
        });
    };

    return (
        <div style={{ position: "fixed", bottom: "20px", zIndex: 1000 }} className="left-1/2 how-to-eat">
            <button className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded" onClick={() => setIsModalOpen(true)}>How To Eat</button>
            {isModalOpen && (
                <HowtoeatModal open={isModalOpen} onClose={() => setIsModalOpen(false)}>
                    <div className="flex h-11/12 bg-blue-700">
                        <NavigationButton direction="prev" onClick={() => navigatePage('prev')} />
                        <ContentDisplay img={img} description={desc[curPage]} pageNumber={curPage} />
                        <NavigationButton direction="next" onClick={() => navigatePage('next')} />
                    </div>
                </HowtoeatModal>
            )}
        </div>
    );
};

여기에서 두가지 버튼은 모달의 이미지를 넘기는 왼쪽, 오른쪽 버튼이다.

const navigatePage = (direction : Direction) => {
        setCurPage((prevPage) => {
            if (direction === 'prev' && prevPage > 0) {
                return prevPage - 1;
            } else if (direction === 'next' && prevPage < MAX_PAGE) {
                return prevPage + 1;
            }
            return prevPage;
        });
    };

위 함수를 통해 방향이 무엇인지에 따라 누른 버튼을 확인하고, 방향에 따른 페이지수 변화를 주는 역할이다.

대충 출력되는 화면을 확인해보자면

으 정말 멋없는 디자인.. 위의 색들은 화면 크기 조정을 위해 프레임을 만들어둔 것 이므로 뭐라하지 마세요!!

이제 여기에 찍어둔 사진을 적용해보겠다.

는 실패 (* 아직 사진 최신화가 되지 않아 불가능 ㅠㅠ)

사진 적용은 나중으로 미루고 디자인을 수정해야겠다. 기존 버튼 배치가 불편해보여서 하단으로 이동했다. 그리고 이미지와 컨텐츠 높이를 반반으로 수정했다.

무이스!!!! 확실히 이전보다 나아진 느낌!! 디자인 전공자 동생왈 매장의 메인 색 테마를 정하고 칠해라. 그리하여 색깔을 셀렉

해보았다. 전체적인 색 조합을 고려해보려고 이것저것 뒤져보았다.

요놈들이 뭔가 열정도 쭈꾸미의 유니폼 '검정' 과 열정도의 '빨강', 쭈꾸미의 '선홍' 이 어울리는 듯한 뭔가 그럴싸한 느낌을 받아서 셀렉!

확실히 디자인이 사는구만!! 좋습니다. 이거지 이거야. 이제 사진만 최신화하면 완성될 맛있게 먹는법 완성!