Skip to content

Commit

Permalink
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Feat: #5 회원가입 페이지 생성 및 마크업, CSS 스타일링
Browse files Browse the repository at this point in the history
Yoonyesol committed Jun 11, 2024
1 parent 525019e commit f032d71
Showing 12 changed files with 630 additions and 14 deletions.
2 changes: 2 additions & 0 deletions package.json
Original file line number Diff line number Diff line change
@@ -20,6 +20,8 @@
"react-dom": "^18.2.0",
"react-hook-form": "^7.51.4",
"react-router-dom": "^6.23.1",
"tailwind-scrollbar-hide": "^1.1.7",
"vite-plugin-svgr": "^4.2.0",
"zustand": "^4.5.2"
},
"devDependencies": {
7 changes: 7 additions & 0 deletions src/assets/authGULogo.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
10 changes: 10 additions & 0 deletions src/index.css
Original file line number Diff line number Diff line change
@@ -1,3 +1,13 @@
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
.auth-btn {
@apply h-[4.38rem] bg-[#E1F4D9] rounded-[10px] text-base font-bold;
}

.auth-input {
@apply h-[4.38rem] bg-white rounded-[10px] p-4 placeholder:text-[#5E5E5E] text-sm;
}
}
11 changes: 11 additions & 0 deletions src/layouts/AuthLayout.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
import AuthGULogo from '@assets/authGULogo.svg?react';
import { Outlet } from 'react-router-dom';

export default function AuthLayout() {
return (
<div className="flex flex-row justify-evenly items-center h-[100vh]">
<AuthGULogo />
<Outlet />
</div>
);
}
Loading

1 comment on commit f032d71

@Yoonyesol
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

설치한 라이브러리

  1. svgr: svg 적용과 svg 커스텀을 자유자재로 할 수 있게 도와주는 라이브러리
  2. tailwind-scrollbar-hide: 스크롤바를 숨길 수 있게 해주는 tailwind 패키지

tailwind

  1. @layer components 키워드로 재사용 가능한 컴포넌트의 스타일을 정의
  2. @apply 키워드를 이용해 재사용 가능한 스타일 정의

Please sign in to comment.