Web/CloneCoding

[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..

[Carrot-Market] #4 TAILWIND - 1

TailwindCss TailwindCss는 아주 크고, 대빵 큰 CSS파일이라고 보면 됩니다. 많은 클래스 네임을 가지고 있는 겁니다. 이를 가지고 우리는 아름다운 많은 것을 만드는 겁니다. 먼저 vscode에서 tailwind intelisence를 설치 해야지 개발에 수월하다. TailwindCss Utils 일단 기초적인 TailwindCss의 문법에 대해서 알아보겠다. 그리고 내가 알아낸 것인데, Tailwindcss도 styled-component처럼 작성할 수 있다. 바로 tailwind-styled-components를 깔면 된다. npm i -D tailwind-styled-components 그리고 아래와 같이 import해서 사용 가능하다. import tw from "tailwind..