카테고리 없음

프론트엔드 - 리액트 (Aesop 결제 api)

리턴 투 개발 2023. 10. 15. 02:01

이제는 웹퍼블리싱 능력 말고 개발 능력을 높히기 위해서 api를 이용한 토이프로젝트를 해 볼 생각이다.

 

어떤 api를 이용한 개발들이 있을까 하다가 아마도 제일 중요한 결제 컴포넌트를 만들어 보는 것도 나쁘지 않다고 생각이들었다.

 

그래서 향수에 관심이 많아서 향수 홈페이지를 만들고 결제 api를 연동 해 볼 생각이다.

 

먼저 오늘은 이솝 홈페이지의 메인 화면과 향수를 고르는 카테고리까지 만들어 보았다.

 

아직까지는 퍼블리싱 능력이 포함되는 것들을 만들었다.

 

먼저 메인 웹페이지의 html 코드이다.

 

return(
        <div>
            {/*Header / Nav */}
            <div className={"header"}>
                <video autoPlay muted loop src={main_video}/>
                <nav className={"navigator"}>
                    <ul>
                        <li><a href="/perfume">향수</a></li>
                        <li><a href="/">바디&핸드</a></li>
                        <li><a href="/">스킨</a></li>
                        <li><a href="/">스토어</a></li>
                    </ul>
                    <ul>
                        <li>{user}</li>
                        <li>{cart}</li>
                    </ul>
                </nav>
            </div>
            {/*perfume btn*/}
            <div className={"perfume_container"}>
                <div>
                    <h1>나만의 프래그런스 찾기</h1>
                    <p>Aesop의 특별한 향들을 선택해보세요.</p>
                    <p>당신이 선택한 향이 곧 Aesop의 향입니다.</p>
                    <Link to="/perfume"><button>유형 선택하기</button></Link>
                </div>
            </div>
        </div>
    )

내가 생각한 ui디자인은 풀페이지를 생각했다. 이솝 홈페이지에 들어갔을때 이솝의 광고 동영상이 은은하게 나오면 좋을것같다고 생각했다. 그리고 위에 향수를 선택하러가는 버튼 태그를 하나 만들었다.

 

메인 홈페이지의 모습이다

 

다음은 버튼 태그를 눌렀을때 이동되는 웹페이지이다.

 

router를 사용하여 path로 연동을 해주었다.

 

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Home/>}></Route>
      </Routes>
      <Routes>
        <Route path="/perfume/" element={<Perfume/>}></Route>
      </Routes>
    </Router>
  );
}

 

return(
        <div>
            {/** */}
            <div className={"header"}>
                <nav className={"navigator"}>
                    <ul>
                        <li><a href="/perfume">향수</a></li>
                        <li><a href="/">바디&핸드</a></li>
                        <li><a href="/">스킨</a></li>
                        <li><a href="/">스토어</a></li>
                    </ul>
                    <ul>
                        <li>{user}</li>
                        <li>{cart}</li>
                    </ul>
                </nav>
            </div>
            <div className={"slide"}>
                <div className={"slide_box"}>
                    <div className={"slide_box_grid"} ref={slide}>
                        <Slide box_name="slide_box_item_a" img = {fresh} alt="Fresh" box_text="slide_box_text" perfume="Fresh"/>
                        <Slide box_name="slide_box_item_b" img = {flore} alt="Flore" box_text="slide_box_text" perfume="Flore"/>
                        <Slide box_name="slide_box_item_c" img = {woody} alt="Woody" box_text="slide_box_text" perfume="Woody"/>
                        <Slide box_name="slide_box_item_d" img = {citrus} alt="Citrus" box_text="slide_box_text" perfume="Citrus"/>
                        <Slide box_name="slide_box_item_e" img = {herb} alt="Herb" box_text="slide_box_text" perfume="Herb"/>
                        <Slide box_name="slide_box_item_f" img = {marine} alt="Marine" box_text="slide_box_text" perfume="Marine"/>
                        <Slide box_name="slide_box_item_g" img = {spicy} alt="Spicy" box_text="slide_box_text" perfume="Spicy"/>
                        <Slide box_name="slide_box_item_h" img = {green} alt="Green" box_text="slide_box_text" perfume="Green"/>
                        <Slide box_name="slide_box_item_i" img = {smoky} alt="Smoky" box_text="slide_box_text" perfume="Smoky"/>
                    </div>
                    <div className={"slide_btn"} ref={slidebtn}>
                        <button onClick={handle_Slide_Btn_Left}></button>
                        <button onClick={handle_Slide_Btn_Right}></button>
                    </div>
                </div>
            </div>
        </div>
    )

그리드로 만들어지는 향의 카테고리 코너가 있는데 이부분은 컴포넌트를 활용해서 간결화 시켜주었다 메뉴도 컴포넌트로 만들어서 진행 시켜도 좋을 것 같다.

 

Slide 컴포넌트의 모습은 이렇다.

 

import {Link} from "react-router-dom";

function Slide ({box_name, img, alt, box_text, perfume}) {
    return(
        <div className={box_name}>
            <Link to="/"><img src={img} alt={alt}/></Link>
            <div className={box_text}>
                <h2>{perfume}</h2>
            </div>
        </div>
    );
}

export default Slide;

이 코드를 맨처음에는 복붙해서 바뀌는 부분만 바꿔서 써줬는데 확실히 컴포넌트로 만드니 코드가 줄어들어서 보기에도 좋은것 같다.

 

 const [click, setClick] = useState(0);
    const handle_Slide_Btn_Right = () => {
        const slide_width = slide.current.offsetWidth
        if(click === 0){
            slide.current.style.transition = "transform 1s"
            slide.current.style.transform = `translate3d(${-slide_width - 60}px, 0, 0)`
            slidebtn.current.children[0].style.display = "flex";
            setClick(click + 1);
        }else if(click === 1) {
            slide.current.style.transform = `translate3d(${(-slide_width - 60)*2}px, 0, 0)`
            slidebtn.current.children[1].style.display = "none";
            setClick(click + 1);
        }
    }
    const handle_Slide_Btn_Left = () => {
        const slide_width = slide.current.offsetWidth
        if(click === 2){
            slide.current.style.transform = `translate3d(${-slide_width - 60}px, 0, 0)`
            slidebtn.current.children[1].style.display = "flex";
            setClick(click - 1);
        }else if(click === 1){
            slide.current.style.transform = `translate3d(0px, 0, 0)`
            slidebtn.current.children[0].style.display = "none";
            setClick(click - 1);
        }
    }

다음으로 슬라이드 배너의 스크립트 코드이다 버튼을 누르시 x좌표 어느 구간으로 이동시켜주는 작업을 진행하였다.

 

 

 

내일은 각각 카테고리에 해당되는 향수들을 배치해둘것이다.

나머지는 장바구니에 넣으면 장바구니가 변화되는 기능과

장바구니에 들어가서 결제를 누르면 결제 api까지 사용하여 결제를 진행하는 것을 해볼것이다.