Web

[Carrot Market] #5 TAILWIND CLONING UI - 3

Streams UI 이제 비디오를 스트리밍할 페이지를 만들어 보도록 하겠습니다. pages/streams/index.tsx import type { NextPage } from "next"; const Live: NextPage = () => { return ( {[...Array(5)].map((_i, i) => ( Let's try potatos ))} ); }; export default Live; 여기서도 마찬가지로 Home screen에서 사용한 부유 버튼을 사용하였습니다. 이를 FAB라고 합니다. 여기서 Heroicons.dev에 들어가서 svg icon만 바꾸었습니다. 다음으로는 비디오를 클릭했을 떄 비디오를 보며 채팅할 수 있는 페이지를 만들어 보겠습니다. Streams Detai..

[Carrot Market] #5 TAILWIND CLONING UI - 2

Chats UI 이제 어떠한 상대방과 채팅을 할떄의 UI를 구축해 보도록 하겠습니다. pages/chats/index.tsx import type { NextPage } from "next"; const Write: NextPage = () => { return ( {[...Array(5)].map((_, i) => ( Steve Jebs See you dtomorrow in the corner at 2pm ))} ); }; export default Write; 여기서 중요한 점은 divide modifier입니다. 만약 border-b-1을 하게되면 맨 마지막 component에도 border가 생기는데 우리는 이를 없애주고 싶다면 상위 컴포넌트에 last:border-b-0을 해주면 됩니다. 하지만..

[Carrot Market] #5 TAILWIND CLONING UI - 1

이제 Carrot Market에 필요한 UI들을 만들기 위한 Tailwind코드를 본격적으로 짜보겠습니다. Auth UI pages/enter.tsx import { useState } from "react"; type MethodType = "email" | "phone"; function cls(...classnames: string[]) { return classnames.join(" "); } export default function Enter() { const [method, setMethod] = useState("email"); const onEmailClick = () => setMethod("email"); const onPhoneClick = () => setMethod("phone"..

[Carrot-Market] #4 TAILWIND - 2

저번 Tailwind포스팅에서는 JS없이 구현할 수 있는 엄청난 기능들에 대해서 알아보았습니다. 이어서 엄청난 UI 패턴들에 대해서 알아보갰숩나더. ( 지금부터 습니다... 체 쓰겠습니다.. ) More Modifiers src/index.js import type { NextPage } from "next"; import tw from "tailwind-styled-components"; const Container = tw.div` flex flex-col space-y-5 bg-slate-400 py-20 px-20 flex min-h-screen `; const Home: NextPage = () => { return ( What is my fav. food. 김치 hi hi hi Lorem, i..