개인프로젝트: VarGen(5.4)-버튼 디자인 및 결괏값 디자인

윤뿔소·2023년 3월 28일

Vargen tailwind

개인프로젝트: VarGen

목록 보기

12/15

이제 디자인을 해보자.

디자인 하기!

이제 전 결괏값을 보고, 피그마로 계획한 디자인으로 수정하겠다!

제목 및 소제목 생성

메인 제목과 소제목을 작성하고 꾸며보자! 태그 생성 수 다크모드 적용시킨 디자인을 적용해보자.

globals.css

hN 태그에 대한 기본적인 css를 적용해보자.

h1,
h2,
h3,
h4,
h5,
h6,
.hN {
  @apply text-slate-900 dark:text-slate-50 ease-in-out;
}

PromptInput.tsx

기본적인 디자인은 적용됐으니, 크기와 위치를 조정해보자.

<h1 className="text-6xl">VarGen</h1>
<h3 className="text-3xl mt-5">변수를 생성해보세요!</h3>

완성!

메뉴 디자인 하기

사실 여기는 설명이 필요 없고 자기 입맛대로 만들면 되는 거라 코드만 적겠다.

<form onSubmit={handleSubmit} className="flex flex-col items-center justify-center">
  {/* <input type="text" value={inputValue} onChange={(e) => setInputValue(e.target.value)} /> */}
  <div className="flex flex-row justify-center items-center space-x-4 mb-10">
    <div className="flex flex-col px-2">
      <label htmlFor="count" className="text-gray-700 flex justify-center">
        Count
      </label>
      <select
        id="count"
        value={countVariable}
        onChange={handleCountChange}
        className="px-4 py-2 rounded-md shadow-sm outline-none"
      >
        <option value="5">5</option>
        <option value="10">10</option>
        <option value="20">20</option>
      </select>
    </div>

    <div className="flex flex-col px-2">
      <label htmlFor="namingConvention" className="text-gray-700 flex justify-center">
        Naming Convention
      </label>
      <select
        id="namingConvention"
        value={namingConvention}
        onChange={handleNamingConventionChange}
        className="px-4 py-2  rounded-md shadow-sm outline-none"
      >
        <option value="camelCase">🐪 camelCase</option>
        <option value="PascalCase">⚙️ PascalCase</option>
        <option value="snake_case">🐍 snake_case</option>
      </select>
    </div>

    <div className="flex flex-col px-2">
      <label htmlFor="subject" className="text-gray-700 flex justify-center">
        Subject
      </label>
      <input
        type="text"
        id="subject"
        value={subject}
        onChange={handleSubjectChange}
        placeholder="e.g. list, 게시판"
        className="px-4 py-2 rounded-md shadow-sm outline-none"
      />
    </div>
  </div>

  <button type="submit" className="px-6 py-4 submit-button text-2xl ">
    생성하기
  </button>
</form>

간단한 디자인이 완성됐다!

문제 충돌

뒤늦게 보니 라이트모드에서 식별이 어렵다는 문제가 발견됐다.

나는 다크모드로 해서 몰랐는데 배경도 완전 화이트이기도 하고, 메뉴도 화이트라 메뉴 분간이 안간다. 설정해주자.

여기서 문제가 발생한다. 화이트 배경과 구분한다고 bg-slate-100를 클래스로 넣었다.
className="px-4 py-2 rounded-md shadow-sm outline-none bg-slate-100"

그러면 문제가 dark 모드일 땐, dark:를 써서 원래 색으로 다시 정해주는 것이 없다는 것. 그래서 그냥 비슷한 색인 bg-zinc-800를 썼다.

참고로 저번에 테일윈드 cheetsheet 사이트를 알려줬는데, 거기 단점이 컬러 변수들이 많이 없다는 것이다;; 그래서 공식사이트에서 맘에 드는 배경색을 골라 가져오면 된다.

완스엉

반환값 데이터 가공 및 디자인

이제 반환하면 못생기게 나오는 것이 아닌 예쁘게 나오도록 해보자! 근데 어떻게 해야 변수가 나오면 이쁘게 나오는 걸까..

일단 복습으로 저번에 데이터를 가져오고, 1. 2. 등 쓸데없는 숫자를 뺀 나머지 내용만 가져오는 코드가 있었다.

  const variableArr = data?.resText
    .replace(/^\d+\./gm, "")
    .replace(/\n/g, "")
    .trim()
    .split(/\s+/)
    .slice(0, 10);

이것만 있으면 이제 배열로 가져올 수 있다는 것!!!

요렇게 말이다. 얘를 가지고 map을 쓴 다음 디자인 해보이겠다!

1. map()

맵을 쓰고, 그 안에 반환 요소와 그 디자인을 입력했다.

variableArr?.map((vari) => (
  <div key={vari} className="lg:w-1/4 md:w-1/2 p-4 w-full">
    <div className="mt-4">
      <h2 className="text-gray-900 title-font text-3xl font-medium text-center">{vari}</h2>
    </div>
  </div>
));

2. 맵요소 감싸는 요소 제작

  return (
    <div>
      <section className="text-gray-600 body-font">
        <div className="container p-10 mx-auto">
          <div className="flex flex-wrap -m-4">{variableList}</div>
        </div>
      </section>
    </div>
  );

짠! 이렇게 감쌌다. lg:, md:로 최소한의 반응형까지 구현했다. 이걸 합치면!?

const variableList = variableArr?.map((vari) => (
  <div key={vari} className="lg:w-1/4 md:w-1/2 p-4 w-full">
    <div className="mt-4">
      <h2 className="text-gray-900 title-font text-3xl font-medium text-center">{vari}</h2>
    </div>
  </div>
));

return (
  <div>
    <section className="text-gray-600 body-font">
      <div className="container p-10 mx-auto">
        <div className="flex flex-wrap -m-4">{variableList}</div>
      </div>
    </section>
  </div>
);