) => {
+ setFormData((prevData) => {
+ const nextData = { ...prevData };
+ nextData[e.target.name as keyof PostSignUpParams] = e.target.value;
+ return nextData;
+ });
+ };
+
+ return (
+
+ );
+}
diff --git a/src/components/pages/account/SocialLogIn.module.css b/src/components/pages/account/SocialLogIn.module.css
new file mode 100644
index 00000000..c1279301
--- /dev/null
+++ b/src/components/pages/account/SocialLogIn.module.css
@@ -0,0 +1,24 @@
+.container {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: 16px 23px;
+ border-radius: 8px;
+ background-color: var(--blue-50);
+ font-size: var(--size-lg);
+}
+
+.socialList {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ gap: 16px;
+}
+
+.social {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 42px;
+ height: 42px;
+}
diff --git a/src/components/pages/account/SocialLogIn.tsx b/src/components/pages/account/SocialLogIn.tsx
new file mode 100644
index 00000000..7745fb46
--- /dev/null
+++ b/src/components/pages/account/SocialLogIn.tsx
@@ -0,0 +1,35 @@
+import Image from "next/image";
+import Link from "next/link";
+import googleLogo from "#/icons/google.svg";
+import kakaoLogo from "#/icons/kakaotalk.svg";
+import styles from "./SocialLogIn.module.css";
+
+export default function SocialLogIn() {
+ return (
+
+ );
+}
diff --git a/src/components/pages/boards/BestItems.tsx b/src/components/pages/boards/BestItems.tsx
index f44e3c17..ea439bd3 100644
--- a/src/components/pages/boards/BestItems.tsx
+++ b/src/components/pages/boards/BestItems.tsx
@@ -1,5 +1,5 @@
import { useState, useEffect } from "react";
-import { useMedia } from "@/hooks/useMedia";
+import { useMedia } from "@/store/MediaContext";
import { getArticles } from "@/apis/apis";
import { GetArticlesParams, GetArticlesRes } from "@/apis/apis.type";
import { useQuery } from "@/hooks/useQuery";
diff --git a/src/hooks/useMedia.ts b/src/hooks/useMedia.ts
deleted file mode 100644
index 2d7b3459..00000000
--- a/src/hooks/useMedia.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import { useContext } from "react";
-import { MediaContext } from "@/store/MediaContext";
-
-export function useMedia() {
- const media = useContext(MediaContext);
- return media;
-}
diff --git a/src/pages/login.module.css b/src/pages/login.module.css
new file mode 100644
index 00000000..bd12af7e
--- /dev/null
+++ b/src/pages/login.module.css
@@ -0,0 +1,57 @@
+.header {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ margin: 36px 0;
+}
+@media (max-width: 767px) {
+ .header {
+ margin: 24px 0;
+ }
+}
+
+.logo {
+ width: 396px;
+}
+@media (max-width: 767px) {
+ .logo {
+ width: 198px;
+ }
+}
+
+.main {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+}
+@media (max-width: 767px) {
+ .main {
+ padding: 0 16px;
+ }
+}
+
+.wrapper {
+ display: flex;
+ flex-direction: column;
+ gap: 24px;
+ width: 640px;
+}
+@media (max-width: 767px) {
+ .wrapper {
+ width: min(100%, 400px);
+ }
+}
+
+.switch {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ gap: 4px;
+ margin-bottom: 48px;
+ font-size: var(--size-md);
+}
+
+.switchLink {
+ text-decoration-line: underline;
+ color: var(--blue-100);
+}
diff --git a/src/pages/login.tsx b/src/pages/login.tsx
new file mode 100644
index 00000000..1dfe0a21
--- /dev/null
+++ b/src/pages/login.tsx
@@ -0,0 +1,36 @@
+import Head from "next/head";
+import Link from "next/link";
+import Image from "next/image";
+import LogInForm from "@/components/pages/account/LogInForm";
+import SocialLogIn from "@/components/pages/account/SocialLogIn";
+import logo from "#/images/logo_w153x3.png";
+import styles from "./login.module.css";
+
+export default function LogIn() {
+ return (
+ <>
+
+ 로그인 - 판다마켓
+
+
+
+
+
+
+
+ 판다마켓이 처음이신가요?
+
+ 회원가입
+
+
+
+
+
+ );
+}
+
+LogIn.isNotLayout = true;
diff --git a/src/pages/signup.module.css b/src/pages/signup.module.css
new file mode 100644
index 00000000..bd12af7e
--- /dev/null
+++ b/src/pages/signup.module.css
@@ -0,0 +1,57 @@
+.header {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ margin: 36px 0;
+}
+@media (max-width: 767px) {
+ .header {
+ margin: 24px 0;
+ }
+}
+
+.logo {
+ width: 396px;
+}
+@media (max-width: 767px) {
+ .logo {
+ width: 198px;
+ }
+}
+
+.main {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+}
+@media (max-width: 767px) {
+ .main {
+ padding: 0 16px;
+ }
+}
+
+.wrapper {
+ display: flex;
+ flex-direction: column;
+ gap: 24px;
+ width: 640px;
+}
+@media (max-width: 767px) {
+ .wrapper {
+ width: min(100%, 400px);
+ }
+}
+
+.switch {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ gap: 4px;
+ margin-bottom: 48px;
+ font-size: var(--size-md);
+}
+
+.switchLink {
+ text-decoration-line: underline;
+ color: var(--blue-100);
+}
diff --git a/src/pages/signup.tsx b/src/pages/signup.tsx
new file mode 100644
index 00000000..38103f6c
--- /dev/null
+++ b/src/pages/signup.tsx
@@ -0,0 +1,36 @@
+import Head from "next/head";
+import Link from "next/link";
+import Image from "next/image";
+import SignUpForm from "@/components/pages/account/SignUpForm";
+import SocialLogIn from "@/components/pages/account/SocialLogIn";
+import logo from "#/images/logo_w153x3.png";
+import styles from "./signup.module.css";
+
+export default function SignUp() {
+ return (
+ <>
+
+ 회원가입 - 판다마켓
+
+
+
+
+
+
+
+ 이미 회원이신가요?
+
+ 로그인
+
+
+
+
+
+ );
+}
+
+SignUp.isNotLayout = true;
diff --git a/src/store/MediaContext.tsx b/src/store/MediaContext.tsx
index f27717d2..1a79f0ba 100644
--- a/src/store/MediaContext.tsx
+++ b/src/store/MediaContext.tsx
@@ -1,8 +1,15 @@
-import { createContext, useState, useEffect, ReactNode } from "react";
+import {
+ createContext,
+ useState,
+ useCallback,
+ useEffect,
+ useContext,
+ ReactNode,
+} from "react";
export type MediaType = "PC" | "TABLET" | "MOBILE";
-export const MediaContext = createContext(undefined);
+const MediaContext = createContext(undefined);
interface MediaProviderProps {
children: ReactNode;
@@ -11,26 +18,31 @@ interface MediaProviderProps {
export function MediaProvider({ children }: MediaProviderProps) {
const [media, setMedia] = useState();
- useEffect(() => {
- const checkMedia = (width: number): MediaType => {
- if (width >= 1200) return "PC";
- if (width >= 768) return "TABLET";
- return "MOBILE";
- };
+ const checkMedia = (width: number): MediaType => {
+ if (width >= 1200) return "PC";
+ if (width >= 768) return "TABLET";
+ return "MOBILE";
+ };
- const handleWindowResize = () => {
- setMedia(checkMedia(window.innerWidth));
- };
+ const handleWindowResize = useCallback(() => {
+ setMedia(checkMedia(window.innerWidth));
+ }, []);
+ useEffect(() => {
handleWindowResize();
window.addEventListener("resize", handleWindowResize);
return () => {
window.removeEventListener("resize", handleWindowResize);
};
- }, []);
+ }, [handleWindowResize]);
return (
{children}
);
}
+
+export function useMedia() {
+ const media = useContext(MediaContext);
+ return media;
+}