feat: 페이지라우터로 설정된 파일

codeit-bootcamp-frontend · Apr 7, 2024 · 08fc14a · 08fc14a
1 parent 9be0f61
commit 08fc14a
Show file tree

Hide file tree

Showing 14 changed files with 3,565 additions and 34 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -14,7 +14,8 @@
     "date-fns": "^2.30.0",
     "next": "13.5.6",
     "react": "^18",
-    "react-dom": "^18"
+    "react-dom": "^18",
+    "react-hook-form": "^7.51.2"
   },
   "devDependencies": {
     "@svgr/webpack": "^8.1.0",

diff --git a/pages/index.tsx b/pages/index.tsx
@@ -50,6 +50,26 @@ export default function Home() {
           shared
         </h1>
       </Link>
+      <Link href="/signin">
+        <h1
+          style={{
+            display: "inline-block",
+            padding: "10px 20px",
+            marginRight: "10px",
+            backgroundColor: "#4CAF50",
+            color: "white",
+            textAlign: "center",
+            textDecoration: "none",
+            fontSize: "16px",
+            borderRadius: "5px",
+            border: "none",
+            cursor: "pointer",
+          }}
+        >
+          signin
+        </h1>
+      </Link>
+
       <main></main>
     </>
   );

diff --git a/pages/signin/index.js b/pages/signin/index.js
@@ -0,0 +1,9 @@
+import { SignInLayout } from "../../src/page-layout/SignInLayout/SignInLayout.jsx";
+
+export default function SignInPage() {
+  return (
+    <>
+      <SignInLayout></SignInLayout>
+    </>
+  );
+}
diff --git a/public/images/eye-off.svg b/public/images/eye-off.svg
diff --git a/public/images/eye-on.svg b/public/images/eye-on.svg
diff --git a/public/images/google.png b/public/images/google.png
diff --git a/public/images/kakao.svg b/public/images/kakao.svg
diff --git a/src/page-layout/SignInLayout/SignInLayout.jsx b/src/page-layout/SignInLayout/SignInLayout.jsx
@@ -0,0 +1,82 @@
+import classNames from "classnames/bind";
+import styles from "./SigninLayout.module.css";
+import Link from "next/link";
+
+const LOGO_IMAGE = "images/linkbrary.svg";
+export function SignInLayout() {
+  const cx = classNames.bind(styles);
+  return (
+    <body className={cx("body")}>
+      <header>
+        <Link className={cx("logo-link")} href="/">
+          <img
+            className={cx("header-logo")}
+            src={LOGO_IMAGE}
+            alt="홈으로 연결된 Linkbrary 로고"
+          />
+        </Link>
+        <p className={cx("header-message")}>
+          회원이 아니신가요?
+          <a className={cx("header-link")} href="signup.html">
+            회원 가입하기
+          </a>
+        </p>
+      </header>
+      <div className={cx("sign-box")}>
+        <form id="form" className={cx("sign-form")}>
+          <div className={cx("sign-inputs")}>
+            <div className={cx("sign-input-box")}>
+              <label className={cx("sign-input-label")}>이메일</label>
+              <input
+                id="email"
+                className={cx("sign-input")}
+                placeholder="이메일을 입력해 주세요"
+              />
+              <p id="email-error-message" className={cx("error-message")}></p>
+            </div>
+            <div className={cx("sign-input-box", "sign-password")}>
+              <label className={cx("sign-input-label")}>비밀번호</label>
+              <input
+                id="password"
+                className={cx("sign-input")}
+                type="password"
+                placeholder="영문, 숫자를 조합해 8자 이상 입력해 주세요."
+              />
+              <p
+                id="password-error-message"
+                className={cx("error-message")}
+              ></p>
+              <button
+                id="password-toggle"
+                className={cx("eye-button")}
+                type="button"
+              >
+                <img src="./images/eye-off.svg" />
+              </button>
+            </div>
+          </div>
+          <button className={cx("cta")} type="submit">
+            로그인
+          </button>
+        </form>
+        <div className={cx("sns-box")}>
+          <span className={cx("sns-text")}>소셜 로그인</span>
+          <div className={cx("sns-links")}>
+            <a
+              className={cx("sns-link", "google-link")}
+              href="https://www.google.com/"
+            >
+              <img src="./images/google.png" />
+            </a>
+            <a
+              className={cx("sns-link", "kakao-link")}
+              href="https://www.kakaocorp.com/page/"
+            >
+              <img src="./images/kakao.svg" />
+            </a>
+          </div>
+        </div>
+      </div>
+    </body>
+  );
+}
diff --git a/src/page-layout/SignInLayout/SigninLayout.module.css b/src/page-layout/SignInLayout/SigninLayout.module.css
@@ -0,0 +1,184 @@
+.body {
+  height: 98.2rem;
+  background: #f0f6ff;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  row-gap: 3rem;
+  padding: 12rem 3.2rem 0;
+
+  @media (min-width: 768px) {
+    padding: 20rem 0 0;
+  }
+
+  @media (min-width: 1200px) {
+    padding: 23.8rem 0 0;
+  }
+}
+
+.header {
+  display: flex;
+  flex-direction: column;
+  row-gap: 1.6rem;
+}
+
+.logo-link {
+  display: flex;
+  justify-content: center;
+}
+
+.header-logo {
+  height: 3.8rem;
+}
+
+.header-message {
+  display: flex;
+  column-gap: 0.8rem;
+  font-size: 1.6rem;
+  font-weight: 400;
+  line-height: 150%;
+}
+
+.header-link {
+  height: fit-content;
+  font-size: 1.6rem;
+  font-weight: 600;
+  line-height: normal;
+  color: #6d6afe;
+  border-bottom: 0.1rem solid #6d6afe;
+}
+
+.sign-box {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  row-gap: 3.2rem;
+  width: 100%;
+  max-width: 40rem;
+
+  @media (min-width: 768px) {
+    width: 40rem;
+  }
+}
+
+.sign-form {
+  display: flex;
+  flex-direction: column;
+  row-gap: 3rem;
+  width: 100%;
+}
+
+.sign-inputs {
+  display: flex;
+  flex-direction: column;
+  row-gap: 2.4rem;
+}
+
+.sign-input-box {
+  display: flex;
+  flex-direction: column;
+  row-gap: 1.2rem;
+}
+
+.sign-password {
+  position: relative;
+}
+
+.sign-input-label {
+  font-size: 1.4rem;
+  font-weight: 400;
+}
+
+.sign-input {
+  padding: 1.8rem 1.5rem;
+  border-radius: 0.8rem;
+  border: 0.1rem solid #ccd5e3;
+  font-size: 1.6rem;
+  line-height: 150%;
+}
+
+.sign-input:focus {
+  border-color: #6d6afe;
+}
+
+.sign-input.sign-input-error {
+  border-color: #ff5b56;
+}
+
+.sign-input.sign-input-error:focus {
+  border-color: #ff5b56;
+}
+
+.error-message {
+  display: none;
+  margin-top: -0.4rem;
+  font-size: 1.4rem;
+  font-weight: 400;
+  color: #ff5b56;
+}
+
+.error-message.error-message-on {
+  display: inline-block;
+}
+
+.eye-button {
+  position: absolute;
+  top: 5.1rem;
+  right: 1.5rem;
+  width: 1.6rem;
+  height: 1.6rem;
+}
+
+.cta {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 5.4rem;
+  background-image: linear-gradient(135deg, #6d6afe 0%, #6ae3fe 100%);
+  border-radius: 0.8rem;
+  color: #f5f5f5;
+  font-size: 1.8rem;
+  font-weight: 600;
+}
+
+.sns-box {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  padding: 1.2rem 2.4rem;
+  border-radius: 0.8rem;
+  border: 0.1rem solid #ccd5e3;
+  background-color: #e7effb;
+}
+
+.sns-links {
+  display: flex;
+  column-gap: 1.6rem;
+}
+
+.sns-link {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 4.2rem;
+  height: 4.2rem;
+  border-radius: 50%;
+}
+
+.sns-text {
+  font-size: 1.4rem;
+  font-weight: 400;
+  color: var(--gray100);
+}
+
+.google-link {
+  background-color: #ffffff;
+  border: 0.1rem solid #d3d4dd;
+}
+
+.kakao-link {
+  padding-top: 0.2rem;
+  background-color: #f5e14b;
+}
diff --git a/src/page-layout/SignInLayout/index.js b/src/page-layout/SignInLayout/index.js
@@ -0,0 +1 @@
+export * from "./SignInLayout";
diff --git a/src/sign/SignHeader.jsx b/src/sign/SignHeader.jsx
@@ -0,0 +1,3 @@
+export function SignHeader() {
+  return <></>;
+}
diff --git a/src/sign/signin/index.js b/src/sign/signin/index.js
diff --git a/yarn.lock b/yarn.lock
@@ -3244,12 +3244,17 @@ react-dom@^18, react-dom@^18.2.0:
     loose-envify "^1.1.0"
     scheduler "^0.23.0"
 
+react-hook-form@^7.51.2:
+  version "7.51.2"
+  resolved "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.51.2.tgz"
+  integrity sha512-y++lwaWjtzDt/XNnyGDQy6goHskFualmDlf+jzEZvjvz6KWDf7EboL7pUvRCzPTJd0EOPpdekYaQLEvvG6m6HA==
+
 react-is@^16.13.1:
   version "16.13.1"
   resolved "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
 
-react@^18, react@^18.2.0, "react@>= 16.8.0 || 17.x.x || ^18.0.0-0":
+"react@^16.8.0 || ^17 || ^18", react@^18, react@^18.2.0, "react@>= 16.8.0 || 17.x.x || ^18.0.0-0":
   version "18.2.0"
   resolved "https://registry.npmjs.org/react/-/react-18.2.0.tgz"
   integrity sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==