codeit-bootcamp-frontend · endmoseung · Jun 17, 2024 · Jun 6, 2024 · Jun 6, 2024 · Jun 6, 2024
diff --git a/.gitignore b/.gitignore
@@ -4,16 +4,18 @@
 /node_modules
 /.pnp
 .pnp.js
+.yarn/install-state.gz
 
 # testing
 /coverage
 
 # next.js
-/.next/
+# /.next/
 /out/
 
 # production
-/build
+# /build
+.next
 
 # misc
 .DS_Store

diff --git a/README.md b/README.md
@@ -1,40 +1,236 @@
-This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+# 💡Simple todo pwa
 
-## Getting Started
+스프린트 쇼핑몰 실습 과제
 
-First, run the development server:
+# 🖥️View web site
+
+https://6-sprint-mission-gules.vercel.app/
+
+<!--프로젝트 대문 이미지-->
+
+<!--목차-->
+
+# Table of Contents
+
+- [[1] About the Project](#1-about-the-project)
+  - [Features](#features)
+  - [Technologies](#technologies)
+- [[2] Getting Started](#2-getting-started)
+  - [Prerequisites](#prerequisites)
+  - [Installation](#installation)
+  - [Configuration](#configuration)
+- [[3] Usage](#3-usage)
+- [[4] Contribution](#4-contribution)
+- [[5] Acknowledgement](#5-acknowledgement)
+- [[6] Contact](#6-contact)
+- [[7] License](#7-license)
+
+# [1] About the Project
+
+스프린트 실습 과제입니다.
+
+## Features
+
+## Technologies
+
+- React js
+- Typescript
+- Next.js
+- scss
+
+# [2] Getting Started
+
+## Prerequisites
+
+- npm
+
+```bash
+npm install npm@latest -g
+```
+
+## Installation
+
+1. Repository 클론
 
 ```bash
-npm run dev
-# or
-yarn dev
-# or
-pnpm dev
-# or
-bun dev
+git clone https://github.com/your-username/project-repository
 ```
 
-Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+2. NPM packages 설치
+
+```bash
+npm install
+```
+
+# [3] Usage
+
+로그인 유효성 검사
+
+```java
+import React, { useEffect, useState } from "react";
+import Head from "next/head";
+import Image from "next/image";
+import Link from "next/link";
+import styles from "@/styles/Home.module.scss";
+
+interface Input {
+  email: string;
+  password: string;
+}
+
+interface Message {
+  emailMsg: string;
+  passwordMsg: string;
+}
+
+interface Valid {
+  emailValid: boolean;
+  passwordValid: boolean;
+}
+
+const Login = () => {
+  const [input, setInput] = useState<Input>({
+    email: "",
+    password: "",
+  });
+  const [message, setMessage] = useState<Message>({
+    emailMsg: "",
+    passwordMsg: "",
+  });
+
+  const emailRegExp =
+    /^[A-Za-z0-9]([-_.]?[A-Za-z0-9])*@[A-Za-z0-9]([-_.]?[A-Za-z0-9])*\.[A-Za-z]{2,3}$/;
+
+  const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setInput({ ...input, [e.target.name]: e.target.value });
+  };
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    const { email, password } = input;
+    if (emailRegExp.test(input.email) && input.password.length > 7) {
+      //로극인 로직
+      alert("로그인");
+    } else {
+      alert("유효한 이메일과 비밀번호를 입력해주세요.");
+    }
+  };
+
+  const handleEmailError = () => {
+    if (input.email.length < 1) {
+      alert("이메일을 입력해주세요.");
+    }
+    setMessage({
+      ...message,
+      emailMsg: emailRegExp.test(input.email) ? "" : "잘못된 이메일입니다.",
+    });
+  };
+
+  const handlePasswordError = () => {
+    if (input.password.length < 1) {
+      alert("비밀번호를 입력해주세요.");
+    }
+    setMessage({
+      ...message,
+      passwordMsg:
+        input.password.length > 7 ? "" : "비밀번호 8글자 이상 입력해주세요.",
+    });
+  };
+
+  return (
+    <>
+      <Head>
+        <title>로그인</title>
+        <meta name="description" content="Generated by create next app" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <link rel="icon" href="/favicon.ico" />
+      </Head>
+      <main>
+        <header className={styles.sign_header}>
+          <h1>
+            <Link href="/">
+              <Image src="/logo.png" alt="로고" width="396" height="132" />
+            </Link>
+          </h1>
+        </header>
+        <div className={styles.sign_wrap}>
+          <form onSubmit={handleSubmit}>
+            <div className={styles.sign_input}>
+              <label>이메일</label>
+              <input
+                placeholder="이메일을 입력해주세요"
+                value={input.email}
+                name="email"
+                onChange={onChange}
+                onBlur={handleEmailError}
+              />
+              <span>{message.emailMsg}</span>
+            </div>
+            <div className={styles.sign_input}>
+              <label>비밀번호</label>
+              <input
+                type="password"
+                placeholder="비밀번호를 입력해주세요"
+                value={input.password}
+                name="password"
+                onChange={onChange}
+                onBlur={handlePasswordError}
+              />
+              <span>{message.passwordMsg}</span>
+            </div>
+            <button className={styles.btn_style}>로그인</button>
+          </form>
+        </div>
+        <div className={styles.sign_notice}>
+          <p>
+            판다마켓이 처음이신가요? <Link href="./signup">회원가입</Link>
+          </p>
+        </div>
+      </main>
+    </>
+  );
+};
+
+
+```
+
+# [4] Contribution
+
+버그 수정에 🐞, 아이디어 제공에 💡, 새로운 기능 구현에 ✨를 사용할 수 있습니다.\*
+
+- (예시) 🐞 [YUMEEKIM](https://github.com/yumi-kim-0827): 메인페이지 버그 수정
+
+# [5] Acknowledgement
 
-You can start editing the page by modifying `pages/index.tsx`. The page auto-updates as you edit the file.
+- design https://www.figma.com/design/IVkRlYWHY74QlgmxqA99Ym/%EC%8A%A4%ED%94%84%EB%A6%B0%ED%8A%B8-%EB%AF%B8%EC%85%98?node-id=541-21096&t=P95cJXwaUwd214sk-0
 
-[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.ts`.
+# [6] Contact
 
-The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
+- 📧 [email protected]
+- 📋 [https://github.com/yumi-kim-0827](https://github.com/yumi-kim-0827)
 
-This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
+# [7] License
 
-## Learn More
+MIT 라이센스
 
-To learn more about Next.js, take a look at the following resources:
+<!--Url for Badges-->
 
-- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
-- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+[license-shield]: https://img.shields.io/github/license/dev-ujin/readme-template?labelColor=D8D8D8&color=04B4AE
+[repository-size-shield]: https://img.shields.io/github/repo-size/dev-ujin/readme-template?labelColor=D8D8D8&color=BE81F7
+[issue-closed-shield]: https://img.shields.io/github/issues-closed/dev-ujin/readme-template?labelColor=D8D8D8&color=FE9A2E
 
-You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+<!--Url for Buttons-->
 
-## Deploy on Vercel
+[readme-eng-shield]: https://img.shields.io/badge/-readme%20in%20english-2E2E2E?style=for-the-badge
+[view-demo-shield]: https://img.shields.io/badge/-%F0%9F%98%8E%20view%20demo-F3F781?style=for-the-badge
+[view-demo-url]: https://dev-ujin.github.io
+[report-bug-shield]: https://img.shields.io/badge/-%F0%9F%90%9E%20report%20bug-F5A9A9?style=for-the-badge
+[report-bug-url]: https://github.com/dev-ujin/readme-template/issues
+[request-feature-shield]: https://img.shields.io/badge/-%E2%9C%A8%20request%20feature-A9D0F5?style=for-the-badge
+[request-feature-url]: https://github.com/dev-ujin/readme-template/issues
 
-The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+<!--URLS-->
 
-Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
+[license-url]: LICENSE.md
+[contribution-url]: CONTRIBUTION.md
+[readme-eng-url]: ../README.md
diff --git a/components/Button.module.scss b/components/Button.module.scss
@@ -0,0 +1,17 @@
+$primary-color: #5179fa;
+$secondary-color: #94b1ff;
+$sub1-color: #ffffff;
+$sub2-color: #000000;
+.btn_style {
+  padding: 15px 20px;
+  border-radius: 200px;
+  max-width: 150px;
+  width: 100%;
+  background-color: $primary-color;
+  border: 1px solid $secondary-color;
+  color: $sub1-color;
+  font-weight: bold;
+  &:hover {
+    background-color: $secondary-color;
+  }
+}
diff --git a/components/Button.tsx b/components/Button.tsx
@@ -0,0 +1,18 @@
+import React from "react";
+import styles from "@/components/Button.module.scss";
+
+type ButtonProps = {
+  text: string;
+  className: string;
+  onClick?: () => void;
+};
+
+const Button: React.FC<ButtonProps> = ({ text, className, onClick }) => {
+  return (
+    <button className={styles[className]} onClick={onClick}>
+      {text}
+    </button>
+  );
+};
+
+export default Button;
diff --git a/components/Header.module.scss b/components/Header.module.scss
@@ -0,0 +1,38 @@
+$primary-color: #5179fa;
+$secondary-color: #94b1ff;
+$sub1-color: #ffffff;
+$sub2-color: #000000;
+/*  Header */
+.header {
+  padding: 10px;
+  border-bottom: 1px solid $secondary-color;
+  .header_wrap {
+    margin: 0 auto;
+    max-width: 1200px;
+    display: flex;
+    justify-content: space-between;
+    gap: 50px;
+    align-items: center;
+    width: 100%;
+    .header_logo {
+      a {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+      }
+    }
+    .header_menu {
+      display: flex;
+      gap: 20px;
+      font-size: 22px;
+      li {
+        &:hover {
+          font-weight: bold;
+        }
+      }
+    }
+    .header_button {
+      margin-left: auto;
+    }
+  }
+}
diff --git a/components/Header.tsx b/components/Header.tsx
@@ -0,0 +1,33 @@
+import React from "react";
+import Image from "next/image";
+import Link from "next/link";
+import { useRouter } from "next/router";
+import styles from "@/components/Header.module.scss";
+import Button from "@/components/Button";
+import Menu from "@/components/Menu";
+import { MenuDataProps } from "@/types/menu";
+
+const Header: React.FC<MenuDataProps> = ({ menuData }) => {
+  const router = useRouter();
+  return (
+    <header className={styles.header}>
+      <div className={styles.header_wrap}>
+        <h1 className={styles.header_logo}>
+          <Link href="/">
+            <Image src="/logo.png" alt="로고" width="150" height="51" />
+          </Link>
+        </h1>
+        {menuData ? <Menu menuData={menuData} /> : null}
+        <div className={styles.header_button}>
+          <Button
+            text={"로그인"}
+            className={"btn_style"}
+            onClick={() => router.push("/login")}
+          />
+        </div>
+      </div>
+    </header>
+  );
+};
+
+export default Header;