Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Part3 장문원 week14 #465

Closed
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
23 commits
Select commit Hold shift + click to select a range
87e3f15
chore: 머지 후 브랜치 삭제 github action 추가
withyj-codeit Sep 3, 2023
1472169
Initial commit from Create Next App
withyj-codeit Nov 23, 2023
d759d59
reset
hanseulhee Oct 10, 2023
b94fe16
fix: 머지 후 브랜치 삭제 github action 수정
hanseulhee Oct 10, 2023
0c228dc
env: workflows 폴더로 이동
hanseulhee Oct 10, 2023
291f1f0
feat: 기초 세팅
jangmoonwon May 18, 2024
60c1636
chore: 라이브러리 설치
jangmoonwon May 18, 2024
f91cb50
feat: scss 설정
jangmoonwon May 18, 2024
ef2710e
feat: 이미지 추가
jangmoonwon May 18, 2024
8fdff1c
feat: axios 인스턴스 생성
jangmoonwon May 18, 2024
dfc234d
feat: 로그인 페이지 레이아웃 생성
jangmoonwon May 18, 2024
faa6a8d
feat: 로그인 페이지 생성
jangmoonwon May 18, 2024
4cc8273
feat: 회원가입 페이지 생성
jangmoonwon May 18, 2024
084aca3
feat: 메인 페이지 생성
jangmoonwon May 18, 2024
571644d
feat: 폴더 페이지 생성
jangmoonwon May 18, 2024
d777873
Refactor: 불필요 코드 삭제
jangmoonwon May 19, 2024
a74df59
feat: LoginHeader 컴포넌트 생성
jangmoonwon May 19, 2024
fbf5e9f
feat: SocialBox 컴포넌트 생성
jangmoonwon May 19, 2024
ad2251a
chore: 불필요 라인 삭제
jangmoonwon May 19, 2024
78b5907
Refactor: schema 유효성 검사 유틸 분리
jangmoonwon May 19, 2024
65a5858
refactor: 분리한 schema, 컴포넌트들 적용
jangmoonwon May 19, 2024
6d4d8f6
style: 불필요 스타일 코드 삭제
jangmoonwon May 19, 2024
b539176
Merge branch 'codeit-bootcamp-frontend:main' into part3-장문원-week14
jangmoonwon May 23, 2024
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions .eslintrc.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{
"extends": "next/core-web-vitals"
}
35 changes: 35 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.

# dependencies
/node_modules
/.pnp
.pnp.js

# testing
/coverage

# next.js
/.next/
/out/

# production
/build

# misc
.DS_Store
*.pem

# debug
npm-debug.log*
yarn-debug.log*
yarn-error.log*

# local env files
.env*.local

# vercel
.vercel

# typescript
*.tsbuildinfo
next-env.d.ts
40 changes: 40 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
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).

## Getting Started

First, run the development server:

```bash
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev
```

Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.

You can start editing the page by modifying `pages/index.tsx`. The page auto-updates as you edit the file.

[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`.

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.

This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.

## Learn More

To learn more about Next.js, take a look at the following resources:

- [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.

You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!

## Deploy on Vercel

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.

Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
12 changes: 12 additions & 0 deletions components/layout/login-layout/LoginLayout.module.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
@import "@/styles/global.scss";

.container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 3rem;
width: 100%;
height: 100vh;
background-color: $color-background;
}
13 changes: 13 additions & 0 deletions components/layout/login-layout/LoginLayout.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
import { ReactNode } from "react";
import styles from "./LoginLayout.module.scss";
import classNames from "classnames/bind";

interface LoginLayoutProps {
children: ReactNode;
}

const cx = classNames.bind(styles);

export const LoginLayout = ({ children }: LoginLayoutProps) => {
return <div className={cx("container")}>{children}</div>;
};
24 changes: 24 additions & 0 deletions components/login-header/LoginHeader.module.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
@import "@/styles/global.scss";

.header-container {
display: flex;
flex-direction: column;
gap: 1.6rem;
}

.header-content {
display: flex;
gap: 0.8rem;
}

.header-message {
font-size: 1.6rem;
font-weight: 400;
}

.header-link {
font-size: 1.6rem;
font-weight: 600;
color: $color-primary;
border-bottom: 0.1rem solid $color-primary;
}
33 changes: 33 additions & 0 deletions components/login-header/LoginHeader.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
import styles from "./LoginHeader.module.scss";
import classNames from "classnames/bind";
import Link from "next/link";
import Image from "next/image";
import Logo from "@/public/logo.svg";

const cx = classNames.bind(styles);

interface LoginHeaderProps {
href: string;
message: string;
linkName: string;
}

export default function LoginHeader({
href,
message,
linkName,
}: LoginHeaderProps) {
return (
<header className={cx("header-container")}>
<Link href="/">
<Image src={Logo} alt="Logo" width={210} height={38} priority />
</Link>
<div className={cx("header-content")}>
<span className={cx("header-message")}>{message}</span>
<Link href={href} className={cx("header-link")}>
{linkName}
</Link>
</div>
</header>
);
}
24 changes: 24 additions & 0 deletions components/login-social-box/SocialBox.module.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
@import "@/styles/global.scss";

.social-login-container {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
max-width: 40rem;
padding: 1.2rem 2.4rem;
border: 0.1rem solid $color-grey20;
border-radius: 0.8rem;
background-color: $color-grey10;
}

.social-login-text {
font-size: 1.4rem;
font-weight: 400;
color: $color-grey100;
}

.social-login-icon {
display: flex;
gap: 1.6rem;
}
24 changes: 24 additions & 0 deletions components/login-social-box/SocialBox.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
import Image from "next/image";
import Link from "next/link";
import styles from "./SocialBox.module.scss";
import classNames from "classnames/bind";
import Googlelogin from "@/public/Googlelogin.svg";
import Kakaologin from "@/public/Kakaologin.svg";

const cx = classNames.bind(styles);

export default function SocialBox({ text }: { text: string }) {
return (
<div className={cx("social-login-container")}>
<span className={cx("social-login-text")}>{text}</span>
<div className={cx("social-login-icon")}>
<Link href="https://www.google.com">
<Image src={Googlelogin} width={42} height={42} alt="google" />
</Link>
<Link href="https://www.kakaocorp.com/page">
<Image src={Kakaologin} width={42} height={42} alt="kakao" />
</Link>
</div>
</div>
);
}
64 changes: 64 additions & 0 deletions lib/schema.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,64 @@
import { z } from "zod";

const PWD_VALIDATION = /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,}$/;

function emailSchema() {
return z
.string()
.min(1, { message: "이메일을 입력해 주세요." })
.email({ message: "올바른 이메일 주소가 아닙니다." });
}

function emailCheckSchema() {
return z
.string()
.min(1, { message: "이메일을 입력해 주세요." })
.email({ message: "올바른 이메일 주소가 아닙니다." })
.refine((data) => data !== "[email protected]", {
message: "이미 사용 중인 이메일입니다.",
path: ["email"],
});
}

function passwordSchema() {
return z
.string()
.min(1, { message: "비밀번호를 입력해 주세요." })
.max(16, { message: "최대 16자리입니다." });
}

function passwordCheckSchema() {
return z
.string()
.min(1, { message: "비밀번호를 입력해 주세요." })
.max(16, { message: "최대 16자리입니다." })
.regex(PWD_VALIDATION, {
message: "영문, 숫자를 조합해 8자 이상 입력해 주세요.",
});
}

//signin schema
export type FormFields = z.infer<typeof schema>;

export const schema = z.object({
email: emailSchema(),
password: passwordSchema(),
});

//signup schema
export type FormFieldsCheck = z.infer<typeof schemaCheck>;

export const schemaCheck = z
.object({
email: emailCheckSchema(),
password: passwordCheckSchema(),
passwordCheck: passwordCheckSchema(),
})
.refine((data) => data.email !== "[email protected]", {
message: "이미 사용 중인 이메일입니다.",
path: ["email"],
})
.refine((data) => data.password === data.passwordCheck, {
message: "비밀번호가 일치하지 않아요.",
path: ["passwordCheck"],
});
6 changes: 6 additions & 0 deletions next.config.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
/** @type {import('next').NextConfig} */
const nextConfig = {
reactStrictMode: true,
}

module.exports = nextConfig
Loading
Loading