[김승석] Sprint11

src/components/form/form-input.tsx

@@ -4,16 +4,18 @@ interface Props {
   type: string;
   placeholder: string;
   value?: string;
+  name?: string;
   onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
 }
 
-const FormInput = ({ type, placeholder, value, onChange }: Props) => {
+const FormInput = ({ type, placeholder, value, name, onChange }: Props) => {
   return (
     <input
       className={styles.input}
       type={type}
       placeholder={placeholder}
       value={value}
+      name={name}
       onChange={onChange}
     />
   );

src/components/header-layout.tsx

@@ -27,8 +27,11 @@ export default function HeaderLayout() {
             <Link href="">중고마켓</Link>
           </li>
         </ul>
-        <Link className={styles.my} href="">
+        {/* <Link className={styles.my} href="">
           <img src="/assets/img/icon_my.svg" alt="마이페이지" />
+        </Link> */}
+        <Link href="/login" className={`btn ${styles.my}`}>
+          로그인
         </Link>
       </div>
     </header>

src/pages/login/index.tsx

@@ -0,0 +1,92 @@
+import FormInput from "@/components/form/form-input";
+import styles from "./../signup/signup.module.css";
+import { useState } from "react";
+import Link from "next/link";
+
+export default function Page() {
+  const [loginValue, setLoginValue] = useState({
+    email: "",
+    password: "",
+  });
+
+  const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const { name, value } = e.target;
+    setLoginValue((prev) => ({
+      ...prev,
+      [name]: value,
+    }));
+  };
+
+  return (
+    <div className={styles.login_wrap}>
+      <div className={styles.logo}>
+        <Link href="/">
+          <img src="/assets/img/logo.svg" alt="로고" />
+        </Link>
+      </div>
+      <form action="">
+        <ul className={styles.login_list}>
+          <li>
+            <div className={styles.title}>이메일</div>
+            <div className={styles.content}>
+              <FormInput
+                type="email"
+                name="email"
+                placeholder="이메일을 입력해주세요"
+                onChange={onChange}
+                value={loginValue.email}
+              />
+            </div>
+          </li>
+          <li>
+            <div className={styles.title}>비밀번호</div>
+            <div className={styles.content}>
+              <FormInput
+                type="password"
+                name="password"
+                placeholder="비밀번호를 입력해주세요"
+                onChange={onChange}
+                value={loginValue.password}
+              />
+            </div>
+          </li>
+          <li>
+            <button className="btn round block large" disabled={true}>
+              로그인
+            </button>
+          </li>
+          <li>
+            <div className={styles.sns}>
+              <h3>간편 로그인하기</h3>
+              <ul>
+                <li>
+                  <Link href="">
+                    <img
+                      src="/assets/img/icon_google.svg"
+                      alt="구글 간편로그인"
+                    />
+                  </Link>
+                </li>
+                <li>
+                  <Link href="">
+                    <img
+                      src="/assets/img/icon_kakao.svg"
+                      alt="카카오 간편로그인"
+                    />
+                  </Link>
+                </li>
+              </ul>
+            </div>
+          </li>
+          <li>
+            <div className={styles.link}>
+              <p>
+                판다마켓이 처음이신가요? <Link href="/signup">회원가입</Link>
+              </p>
+            </div>
+          </li>
+        </ul>
+      </form>
+    </div>
+  );
+}

src/pages/signup/index.tsx

@@ -0,0 +1,118 @@
+import FormInput from "@/components/form/form-input";
+import styles from "./signup.module.css";
+import { useState } from "react";
+import Link from "next/link";
+
+export default function Page() {
+  const [signupValue, setSignupValue] = useState({
+    email: "",
+    nickname: "",
+    password: "",
+    passwordConfirmation: "",
+  });
+
+  const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const { name, value } = e.target;
+    setSignupValue((prev) => ({
+      ...prev,
+      [name]: value,
+    }));
+  };
+
+  return (
+    <div className={styles.login_wrap}>
+      <div className={styles.logo}>
+        <Link href="/">
+          <img src="/assets/img/logo.svg" alt="로고" />
+        </Link>
+      </div>
+      <form action="">
+        <ul className={styles.login_list}>
+          <li>
+            <div className={styles.title}>이메일</div>
+            <div className={styles.content}>
+              <FormInput
+                type="email"
+                name="email"
+                placeholder="이메일을 입력해주세요"
+                onChange={onChange}
+                value={signupValue.email}
+              />
+            </div>
+          </li>
+          <li>
+            <div className={styles.title}>닉네임</div>
+            <div className={styles.content}>
+              <FormInput
+                type="text"
+                name="nickname"
+                placeholder="닉네임 입력해주세요"
+                onChange={onChange}
+                value={signupValue.nickname}
+              />
+            </div>
+          </li>
+          <li>
+            <div className={styles.title}>비밀번호</div>
+            <div className={styles.content}>
+              <FormInput
+                type="password"
+                name="password"
+                placeholder="비밀번호를 입력해주세요"
+                onChange={onChange}
+                value={signupValue.password}
+              />
+            </div>
+          </li>
+          <li>
+            <div className={styles.title}>비밀번호 확인</div>
+            <div className={styles.content}>
+              <FormInput
+                type="password"
+                name="passwordConfirmation"
+                placeholder="비밀번호를 다시 한 번 입력해주세요"
+                onChange={onChange}
+                value={signupValue.passwordConfirmation}
+              />
+            </div>
+          </li>
+          <li>
+            <button className="btn round block large" disabled={true}>
+              회원가입
+            </button>
+          </li>
+          <li>
+            <div className={styles.sns}>
+              <h3>간편 로그인하기</h3>
+              <ul>
+                <li>
+                  <Link href="">
+                    <img
+                      src="/assets/img/icon_google.svg"
+                      alt="구글 간편로그인"
+                    />
+                  </Link>
+                </li>
+                <li>
+                  <Link href="">
+                    <img
+                      src="/assets/img/icon_kakao.svg"
+                      alt="카카오 간편로그인"
+                    />
+                  </Link>
+                </li>
+              </ul>
+            </div>
+          </li>
+          <li>
+            <div className={styles.link}>
+              <p>
+                이미 회원이신가요? <Link href="/login">로그인</Link>
+              </p>
+            </div>
+          </li>
+        </ul>
+      </form>
+    </div>
+  );
+}

src/pages/signup/signup.module.css

@@ -0,0 +1,59 @@
+.login_wrap {
+  max-width: 640px;
+  width: 100%;
+  margin: 0 auto;
+}
+.logo {
+  margin-bottom: 40px;
+  text-align: center;
+}
+.login_list {
+}
+.login_list > li {
+}
+.login_list > li + li {
+  margin-top: 24px;
+}
+.login_list > li .title {
+  margin-bottom: 16px;
+  font-size: 18px;
+  font-weight: 700;
+}
+.login_list > li .content {
+}
+.login_list > li .sns {
+  padding: 16px 23px;
+  background-color: #e6f2ff;
+  border-radius: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.login_list > li .sns h3 {
+  font-size: 16px;
+  font-weight: 500;
+  line-height: 1;
+}
+.login_list > li .sns ul {
+  display: flex;
+  align-items: center;
+}
+.login_list > li .sns ul > li {
+}
+.login_list > li .sns ul > li + li {
+  margin-left: 16px;
+}
+.login_list > li .sns ul > li img {
+  height: 42px;
+}
+.login_list > li .link > p {
+  text-align: center;
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 1.7142;
+}
+.login_list > li .link p > a {
+  color: #3182f6;
+  text-decoration: underline;
+  text-underline-offset: 3px;
+}

src/styles/globals.css

@@ -162,6 +162,14 @@ body {
   font-size: 16px;
   font-weight: 600;
 }
+.btn.large {
+  height: 56px;
+  font-size: 20px;
+}
+.btn.block {
+  display: block;
+  width: 100%;
+}
 .btn.round {
   border-radius: 999px;
 }