+
+
+
+
+
+ */}
+
+ );
+}
diff --git a/pages/Login.module.css b/pages/Login.module.css
new file mode 100644
index 000000000..a7f182e48
--- /dev/null
+++ b/pages/Login.module.css
@@ -0,0 +1,148 @@
+/* * {
+ font-family: "Pretendard", sans-serif;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ word-break: keep-all;
+} */
+
+.container {
+ margin: 0 auto;
+ padding: 16px;
+ color: #1f2937;
+
+ @media (min-width: 768px) {
+ max-width: 640px;
+ padding: 53px;
+ }
+}
+
+.header {
+ display: block;
+ text-align: center;
+ margin-bottom: 24px;
+
+ @media (min-width: 768px) {
+ margin-bottom: 40px;
+ }
+}
+
+.logo {
+ width: 198px;
+ height: 66px;
+
+ @media (min-width: 768px) {
+ width: 396px;
+ height: 132px;
+ }
+}
+
+.formDiv {
+ display: block;
+ position: relative;
+ margin-bottom: 16px;
+
+ @media (min-width: 768px) {
+ margin-bottom: 24px;
+ }
+}
+
+.formLabel {
+ font-weight: 700;
+ font-size: 14px;
+ line-height: 17px;
+ color: #1f2937;
+
+ @media (min-width: 768px) {
+ font-size: 18px;
+ line-height: 21px;
+ }
+}
+
+.formInput {
+ background-color: #f3f4f6;
+ width: 100%;
+ margin-top: 8px;
+ padding: 16px 24px;
+ border: none;
+ border-radius: 12px;
+ font-weight: 400;
+ font-size: 16px;
+ line-height: 26px;
+
+ @media (min-width: 768px) {
+ margin-top: 16px;
+ }
+}
+
+.toggleTag {
+ position: absolute;
+ top: 43px;
+ right: 24px;
+
+ @media (min-width: 768px) {
+ top: 53px;
+ }
+}
+
+.toggleImg {
+ cursor: pointer;
+ width: 24px;
+ height: 24px;
+}
+
+.button {
+ display: flex;
+ justify-content: center;
+ cursor: pointer;
+ background-color: #9ca3af;
+ width: 100%;
+ padding: 16px 124px;
+ border: none;
+ border-radius: 40px;
+ font-weight: 600;
+ font-size: 20px;
+ line-height: 32px;
+ color: #f3f4f6;
+ margin-bottom: 24px;
+}
+
+.disabled {
+ background-color: #3692ff;
+}
+
+.loginBox {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ background-color: #e6f2ff;
+ border: none;
+ border-radius: 8px;
+ padding: 16px 24px;
+ margin-bottom: 25px;
+}
+
+.loginImgBox {
+ display: flex;
+ gap: 16px;
+}
+
+.loginLink {
+ font-weight: 500;
+ font-size: 14px;
+ line-height: 24px;
+ text-align: center;
+}
+
+.errorMessage {
+ margin-top: 8px;
+ padding-left: 16px;
+ font-weight: 600;
+ font-size: 14px;
+ line-height: 24px;
+ color: #f74747;
+}
+
+.errorInput {
+ border: 1px solid #f74747;
+}
diff --git a/pages/Login.tsx b/pages/Login.tsx
new file mode 100644
index 000000000..57d2268bb
--- /dev/null
+++ b/pages/Login.tsx
@@ -0,0 +1,195 @@
+import { ChangeEvent, FormEvent, useEffect, useState } from "react";
+import styles from "./Login.module.css";
+import Link from "next/link";
+import { useRouter } from "next/router";
+import { postUserLoginData } from "../src/api/api";
+import Image from "next/image";
+
+const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
+const PASSWORD_MIN_LEN = 8;
+
+export default function Signup() {
+ const [email, setEmail] = useState
+
+
+
+
+
+ {/* 페이지네이션 영역 구현하지않음 */}
+ {/* 베스트 상품
+
+
+
+
+
+ 전체 상품
+
+
+
+
+
+
+
+
+
+
+
+
+ {itemList?.map((item) => (
+
+ Notfound
;
+}
diff --git a/pages/Signup.module.css b/pages/Signup.module.css
new file mode 100644
index 000000000..25883b35e
--- /dev/null
+++ b/pages/Signup.module.css
@@ -0,0 +1,140 @@
+.container {
+ margin: 0 auto;
+ padding: 16px;
+ color: #1f2937;
+
+ @media (min-width: 768px) {
+ max-width: 640px;
+ padding: 53px;
+ }
+}
+
+.header {
+ display: block;
+ text-align: center;
+ margin-bottom: 24px;
+
+ @media (min-width: 768px) {
+ margin-bottom: 40px;
+ }
+}
+
+.logo {
+ width: 198px;
+ height: 66px;
+
+ @media (min-width: 768px) {
+ width: 396px;
+ height: 132px;
+ }
+}
+
+.formDiv {
+ display: block;
+ position: relative;
+ margin-bottom: 16px;
+
+ @media (min-width: 768px) {
+ margin-bottom: 24px;
+ }
+}
+
+.formLabel {
+ font-weight: 700;
+ font-size: 14px;
+ line-height: 17px;
+ color: #1f2937;
+
+ @media (min-width: 768px) {
+ font-size: 18px;
+ line-height: 21px;
+ }
+}
+
+.formInput {
+ background-color: #f3f4f6;
+ width: 100%;
+ margin-top: 8px;
+ padding: 16px 24px;
+ border: none;
+ border-radius: 12px;
+ font-weight: 400;
+ font-size: 16px;
+ line-height: 26px;
+
+ @media (min-width: 768px) {
+ margin-top: 16px;
+ }
+}
+
+.toggleTag {
+ position: absolute;
+ top: 43px;
+ right: 24px;
+
+ @media (min-width: 768px) {
+ top: 53px;
+ }
+}
+
+.toggleImg {
+ cursor: pointer;
+ width: 24px;
+ height: 24px;
+}
+
+.button {
+ display: flex;
+ justify-content: center;
+ cursor: pointer;
+ background-color: #9ca3af;
+ width: 100%;
+ padding: 16px 124px;
+ border: none;
+ border-radius: 40px;
+ font-weight: 600;
+ font-size: 20px;
+ line-height: 32px;
+ color: #f3f4f6;
+ margin-bottom: 24px;
+}
+
+.disabled {
+ background-color: #3692ff;
+}
+
+.loginBox {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ background-color: #e6f2ff;
+ border: none;
+ border-radius: 8px;
+ padding: 16px 24px;
+ margin-bottom: 25px;
+}
+
+.loginImgBox {
+ display: flex;
+ gap: 16px;
+}
+
+.loginLink {
+ font-weight: 500;
+ font-size: 14px;
+ line-height: 24px;
+ text-align: center;
+}
+
+.errorMessage {
+ margin-top: 8px;
+ padding-left: 16px;
+ font-weight: 600;
+ font-size: 14px;
+ line-height: 24px;
+ color: #f74747;
+}
+
+.errorInput {
+ border: 1px solid #f74747;
+}
diff --git a/pages/Signup.tsx b/pages/Signup.tsx
new file mode 100644
index 000000000..9c0660a96
--- /dev/null
+++ b/pages/Signup.tsx
@@ -0,0 +1,294 @@
+import { ChangeEvent, FormEvent, useEffect, useState } from "react";
+import styles from "./Signup.module.css";
+import Link from "next/link";
+import { postUserData } from "../src/api/api";
+import { useRouter } from "next/router";
+import Image from "next/image";
+
+const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
+const PASSWORD_MIN_LEN = 8;
+
+export default function Signup() {
+ const [email, setEmail] = useState
- {limiteData.map((item) => {
- return (
-
- );
-};
-
-export default Bestitem;
diff --git a/src/components/Bestitem.tsx b/src/components/Bestitem.tsx
new file mode 100644
index 000000000..98e0215ee
--- /dev/null
+++ b/src/components/Bestitem.tsx
@@ -0,0 +1,47 @@
+import ItemCard from "./ItemCard";
+import { useEffect, useState } from "react";
+import { getProductData } from "../api/api";
+import styles from "./BestItem.module.css";
+
+interface Item {
+ id: number;
+ name: string;
+ price: number;
+ images: string[];
+ favoriteCount?: number;
+}
+
+interface ProductResponse {
+ list: Item[];
+}
+
+export default function Bestitem() {
+ const [itemList, setItemList] = useState
-
- );
- })}
- {
}
- {item.name}
- {item.price.toLocaleString()}원
-
- 
- {item.favoriteCount}
-
-
+ {itemList?.map((item) => (
+
+ );
+}
diff --git a/src/components/Button.jsx b/src/components/Button.jsx
deleted file mode 100644
index f3f8287e1..000000000
--- a/src/components/Button.jsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import './Button.css';
-
-const Button = ({ text, type }) => {
- return (
-
- );
-};
-
-export default Button;
diff --git a/src/components/Button.css b/src/components/Button.module.css
similarity index 51%
rename from src/components/Button.css
rename to src/components/Button.module.css
index baf648946..d014fd97d 100644
--- a/src/components/Button.css
+++ b/src/components/Button.module.css
@@ -1,4 +1,4 @@
-.Button {
+.button {
display: flex;
align-items: center;
justify-content: center;
@@ -7,34 +7,51 @@
background-color: #ffffff;
font-size: 18px;
line-height: 26px;
- font-weight: 700px;
+ font-weight: 700;
cursor: pointer;
}
-/* Nav 컴포넌트에서 사용할 버튼 */
-.Button_nav_activate {
- color: #3692ff;
-}
-
-/*type ItemAdd = 상품 등록하기에 쓸 버튼*/
-.Button_ItemAdd {
+/* 홈페이지 로그인에 사용할 버튼 */
+.button_Home {
+ width: 128px;
+ height: 48px;
background-color: #3692ff;
- color: #ffffff;
border-radius: 8px;
+ color: #fef4f6;
font-size: 16px;
font-weight: 600;
- line-height: 26px;
- padding: 8px 26px;
+}
+
+/* 홈페이지 구경하러가기에 사용할 버튼 */
+.button_itemsMove {
+ width: 357px;
+ height: 56px;
+ background-color: #3692ff;
+ border-radius: 40px;
+ margin-bottom: 60px;
+ color: #fef4f6;
+
+ @media (max-width: 1199px) {
+ margin-bottom: 0;
+ }
+ @media (max-width: 767px) {
+ width: 240px;
+ height: 48px;
+ }
+}
+
+/* Nav 컴포넌트에서 사용할 버튼 */
+.button_nav_activate {
+ color: #3692ff;
}
/* Additem페이지에서 사용할 등록 버튼 */
-.Button_register {
+.button_register {
background-color: #9ca3af;
color: #f3f4f6;
height: 42px;
border-radius: 8px;
font-size: 16px;
font-weight: 600;
- line-height: 26px;
padding: 12px 23px;
}
diff --git a/src/components/Button.tsx b/src/components/Button.tsx
new file mode 100644
index 000000000..7c1c73807
--- /dev/null
+++ b/src/components/Button.tsx
@@ -0,0 +1,21 @@
+import styles from "./Button.module.css";
+
+interface Props {
+ className?: string;
+ text: string;
+ useType: string;
+}
+
+const Button = ({ className, text, useType }: Props) => {
+ return (
+
+ );
+};
+
+export default Button;
diff --git a/src/components/Editinput.jsx b/src/components/Editinput.jsx
deleted file mode 100644
index a5a5424af..000000000
--- a/src/components/Editinput.jsx
+++ /dev/null
@@ -1,62 +0,0 @@
-import './Editinput.css';
-import img_up from '../assets/img_up.png';
-import { useRef, useState } from 'react';
-
-const Editinput = ({ type, info, placeholder }) => {
- const [imgFile, setImgFile] = useState('');
- const imgRef = useRef();
-
- const saveImgFile = () => {
- if (!imgRef.current || !imgRef.current.files[0]) {
- console.error('파일이 선택되지 않았습니다.');
- return;
- }
-
- const file = imgRef.current.files[0];
- const reader = new FileReader();
-
- reader.readAsDataURL(file);
-
- reader.onloadend = () => {
- if (reader.result) {
- setImgFile(reader.result); // reader.result는 base64 데이터 URL
- }
- };
-
- reader.onerror = () => {
- console.error('파일을 읽는 도중 에러가 발생했습니다.');
- };
- };
-
- if (type === 'img') {
- return (
-
-
- );
- } else {
- return (
-
- );
- }
-};
-
-export default Editinput;
diff --git a/src/components/Editinput.css b/src/components/Editinput.module.css
similarity index 78%
rename from src/components/Editinput.css
rename to src/components/Editinput.module.css
index 4670cf008..aa3797a38 100644
--- a/src/components/Editinput.css
+++ b/src/components/Editinput.module.css
@@ -1,4 +1,4 @@
-.Editinput {
+.editinput {
max-width: 1200px;
width: 100%;
background-color: #f3f4f6;
@@ -8,13 +8,13 @@
resize: none;
}
-.Editinput_name,
-.Editinput_price,
-.Editinput_tag {
+.editinput_name,
+.editinput_price,
+.editinput_tag {
height: 56px;
}
-.Editinput_info {
+.editinput_info {
height: 282px;
}
@@ -27,6 +27,11 @@
position: relative;
width: 282px;
height: 282px;
+
+ @media (max-width: 767px) {
+ width: 168px;
+ height: 168px;
+ }
}
.image_preview img {
@@ -48,6 +53,11 @@
height: 282px;
cursor: pointer;
border-radius: 12px;
+
+ @media (max-width: 767px) {
+ width: 168px;
+ height: 168px;
+ }
}
.upload_input {
diff --git a/src/components/Editinput.tsx b/src/components/Editinput.tsx
new file mode 100644
index 000000000..a0d372a07
--- /dev/null
+++ b/src/components/Editinput.tsx
@@ -0,0 +1,78 @@
+import styles from "./Editinput.module.css";
+import { useRef, useState } from "react";
+import Image from "next/image";
+
+interface Props {
+ type: "img" | "text";
+ info?: string;
+ placeholder?: string;
+}
+
+const Editinput = ({ type, info, placeholder }: Props) => {
+ const [imgFile, setImgFile] = useState
-
-
-
-
- 
-
-
+
+ );
+ } else {
+ return (
+
+ );
+ }
+};
+
+export default Editinput;
diff --git a/src/components/Editsection.jsx b/src/components/Editsection.jsx
deleted file mode 100644
index f406689c5..000000000
--- a/src/components/Editsection.jsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import './Editsection.css';
-
-const Editsection = ({ topChlid, center, bottonChild }) => {
- return (
-
+
+
+
+
+
+
-
-
- );
-};
-
-export default Editsection;
diff --git a/src/components/Editsection.css b/src/components/Editsection.module.css
similarity index 78%
rename from src/components/Editsection.css
rename to src/components/Editsection.module.css
index 70a97dcce..3652c17d9 100644
--- a/src/components/Editsection.css
+++ b/src/components/Editsection.module.css
@@ -1,10 +1,10 @@
-.Editsection {
+.editsection {
display: flex;
flex-direction: column;
margin-bottom: 32px;
}
-.Editsection .edit_text {
+.editsection .edit_text {
margin-bottom: 16px;
font-size: 18px;
font-weight: 700;
diff --git a/src/components/Editsection.tsx b/src/components/Editsection.tsx
new file mode 100644
index 000000000..abdeb6af7
--- /dev/null
+++ b/src/components/Editsection.tsx
@@ -0,0 +1,19 @@
+import styles from "./Editsection.module.css";
+
+interface Props {
+ topChild: string;
+ center: React.ReactNode;
+ bottonChild?: string[];
+}
+
+const Editsection = ({ topChild, center, bottonChild }: Props) => {
+ return (
+ {center}
- {bottonChild}
-
+
+
+ );
+};
+
+export default Editsection;
diff --git a/src/components/HomePageSection.module.css b/src/components/HomePageSection.module.css
new file mode 100644
index 000000000..73168561f
--- /dev/null
+++ b/src/components/HomePageSection.module.css
@@ -0,0 +1,101 @@
+.section_container {
+ margin-top: 138px;
+ margin-bottom: 138px;
+
+ @media (max-width: 1199px) {
+ margin-top: 0;
+ margin-bottom: 52px;
+ }
+ @media (max-width: 1199px) {
+ margin-bottom: 40px;
+ }
+}
+
+.container {
+ background-color: #fcfcfc;
+ border-radius: 12px;
+}
+
+.forward {
+ display: flex;
+ flex-direction: row;
+ gap: 64px;
+ justify-content: center;
+ align-items: center;
+
+ @media (max-width: 1199px) {
+ flex-direction: column;
+ align-items: normal;
+ gap: 24px;
+ }
+}
+
+.reverse {
+ display: flex;
+ flex-direction: row-reverse;
+ gap: 64px;
+ justify-content: center;
+ align-items: center;
+ text-align: right;
+
+ @media (max-width: 1199px) {
+ flex-direction: column;
+ align-items: normal;
+ gap: 24px;
+ }
+}
+
+.photo {
+ width: 50%;
+
+ @media (max-width: 1199px) {
+ width: 100%;
+ }
+}
+
+.item_info {
+ display: flex;
+ flex-direction: column;
+}
+
+.item_info > span {
+ color: #3692ff;
+ font-weight: 700;
+ line-height: 26px;
+ margin-bottom: 12px;
+
+ @media (max-width: 1199px) {
+ margin-bottom: 16px;
+ }
+ @media (max-width: 767px) {
+ font-size: 16px;
+ margin-bottom: 8px;
+ }
+}
+
+.item_info > h2 {
+ @media (max-width: 1199px) {
+ font-size: 32px;
+ line-height: 42px;
+ }
+ @media (max-width: 767px) {
+ font-size: 24px;
+ line-height: 32px;
+ }
+}
+
+.item_info > div {
+ font-weight: 500px;
+ font-size: 24px;
+ line-height: 32px;
+ margin-top: 24px;
+
+ @media (max-width: 1199px) {
+ font-size: 18px;
+ line-height: 26px;
+ }
+ @media (max-width: 767px) {
+ font-size: 16px;
+ margin-top: 16px;
+ }
+}
diff --git a/src/components/HomePageSection.tsx b/src/components/HomePageSection.tsx
new file mode 100644
index 000000000..d748d3ac1
--- /dev/null
+++ b/src/components/HomePageSection.tsx
@@ -0,0 +1,27 @@
+import styles from "./HomePageSection.module.css";
+
+interface Props {
+ image: string;
+ alt: string;
+ info: string;
+ title: string;
+ text: string;
+ useType: string;
+}
+
+const HomePageSection = ({ image, alt, info, title, text, useType }: Props) => {
+ return (
+ {center}
+ {bottonChild}
+
+ 
+
+
+ {info}
+
+ {title}
+{text}
+
+
+ );
+}
diff --git a/src/components/Itemtitle.jsx b/src/components/Itemtitle.jsx
deleted file mode 100644
index fd505d9f5..000000000
--- a/src/components/Itemtitle.jsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import './Itemtitle.css';
-
-const Itemtitle = ({ leftChild, searchInput, searchBtn, rightChild }) => {
- return (
-
+
+ {item.name}
+{item.price.toLocaleString()}원
+
+
+
-
- );
-};
-
-export default Itemtitle;
diff --git a/src/components/Itemtitle.css b/src/components/Itemtitle.module.css
similarity index 73%
rename from src/components/Itemtitle.css
rename to src/components/Itemtitle.module.css
index e7299e847..5c7dd99a0 100644
--- a/src/components/Itemtitle.css
+++ b/src/components/Itemtitle.module.css
@@ -1,4 +1,4 @@
-.Itemtitle {
+.itemtitle {
display: flex;
align-items: center;
gap: 12px;
@@ -12,27 +12,27 @@
.search {
height: 92px;
}
- .Item_text:nth-child(1) {
+ .item_text:nth-child(1) {
order: 1;
}
- .Item_input:nth-child(2) {
+ .item_input:nth-child(2) {
order: 3;
}
- .Item_button:nth-child(3) {
+ .item_button:nth-child(3) {
order: 2;
}
- .Item_select:nth-child(4) {
+ .item_select:nth-child(4) {
order: 4;
}
}
-.Itemtitle .Item_text {
+.itemtitle .item_text {
flex: 1;
}
-.Itemtitle .Item_input input {
+.itemtitle .item_input input {
width: 325px;
height: 42px;
padding: 9px 20px;
@@ -45,7 +45,7 @@
line-height: 26px;
}
-.Itemtitle .Item_select select {
+.itemtitle .item_select select {
border: 1px solid #e5e7eb;
border-radius: 12px;
width: 130px;
diff --git a/src/components/Itemtitle.tsx b/src/components/Itemtitle.tsx
new file mode 100644
index 000000000..3469297fe
--- /dev/null
+++ b/src/components/Itemtitle.tsx
@@ -0,0 +1,26 @@
+import styles from "./Itemtitle.module.css";
+
+interface Props {
+ leftChild: React.ReactNode;
+ searchInput?: React.ReactNode;
+ searchBtn?: React.ReactNode;
+ rightChild: React.ReactNode;
+}
+
+const Itemtitle = ({
+ leftChild,
+ searchInput,
+ searchBtn,
+ rightChild,
+}: Props) => {
+ return (
+ {leftChild}
- {searchInput}
- {searchBtn}
- {rightChild}
-
+
+ );
+};
+
+export default Itemtitle;
diff --git a/src/components/Nav.css b/src/components/Nav.css
deleted file mode 100644
index f5b84841e..000000000
--- a/src/components/Nav.css
+++ /dev/null
@@ -1,38 +0,0 @@
-.Nav {
- display: flex;
- align-items: center;
- border-bottom: 1px solid #dfdfdf;
- gap: 47px;
- padding: 10px 200px 9px 200px;
-
- @media (max-width: 1199px) {
- padding-left: 24px;
- padding-right: 24px;
- }
- @media (max-width: 767px) {
- padding-left: 16px;
- padding-right: 16px;
- }
-}
-
-.Nav .nav_button {
- display: flex;
- gap: 30px;
-}
-
-.Nav .nav_logo {
- justify-content: flex-start;
- cursor: pointer;
-}
-
-.Nav .nav_center {
- flex: 1;
- padding: 11px 0 12px;
- white-space: nowrap;
-}
-
-.Nav .nav_user {
- justify-content: flex-end;
- padding: 5px 0 6px;
- cursor: pointer;
-}
diff --git a/src/components/Nav.jsx b/src/components/Nav.jsx
deleted file mode 100644
index 45a1e9e03..000000000
--- a/src/components/Nav.jsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import './Nav.css';
-import Button from './Button';
-import Nav_logo from '../assets/nav_panda_logo_img.png';
-import Nav_user from '../assets/nav_user_img.png';
-import { Link } from 'react-router-dom';
-
-const Nav = () => {
- return (
- {leftChild}
+ {searchInput && {searchInput}
}
+ {searchBtn && {searchBtn}
}
+ {rightChild}
+
- 
- 
-
- );
-};
-
-export default Nav;
diff --git a/src/components/Nav.module.css b/src/components/Nav.module.css
new file mode 100644
index 000000000..3571489df
--- /dev/null
+++ b/src/components/Nav.module.css
@@ -0,0 +1,64 @@
+.nav {
+ display: flex;
+ align-items: center;
+ border-bottom: 1px solid #dfdfdf;
+ padding-left: 200px;
+ padding-right: 200px;
+ gap: 32px;
+
+ @media (max-width: 1199px) {
+ padding-left: 24px;
+ padding-right: 24px;
+ gap: 20px;
+ }
+ @media (max-width: 767px) {
+ margin: 0;
+ padding-left: 16px;
+ padding-right: 16px;
+ gap: 8px;
+ }
+}
+
+.logoImage {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+
+ @media (max-width: 767px) {
+ content: url("/image/NavLogoMobile.svg");
+ width: 80px;
+ }
+}
+
+.nav_center {
+ display: flex;
+ flex: 1;
+ align-items: center;
+
+ @media (max-width: 767px) {
+ gap: 8px;
+ }
+}
+
+.nav_button {
+ background-color: #ffffff;
+ border: none;
+ padding: 21px 15px;
+ font-weight: 700;
+ font-size: 18px;
+ line-height: 26px;
+ color: #4b5563;
+
+ @media (max-width: 1199px) {
+ padding: 21px 15px;
+ }
+ @media (max-width: 767px) {
+ padding: 25px 0px;
+ font-size: 16px;
+ }
+}
+
+.nav_user > img {
+ width: 40px;
+ height: 40px;
+}
diff --git a/src/components/Nav.tsx b/src/components/Nav.tsx
new file mode 100644
index 000000000..d54bf9c25
--- /dev/null
+++ b/src/components/Nav.tsx
@@ -0,0 +1,37 @@
+import styles from "./Nav.module.css";
+import Link from "next/link";
+import Image from "next/image";
+
+export default function Nav() {
+ return (
+
-
-
-
-
-
-
+
+
+ );
+}
diff --git a/src/components/Totalitem.css b/src/components/Totalitem.css
deleted file mode 100644
index 7540b9d21..000000000
--- a/src/components/Totalitem.css
+++ /dev/null
@@ -1,69 +0,0 @@
-.Totalitems {
- display: grid;
- grid-template-rows: 2fr;
- grid-template-columns: repeat(5, 1fr);
- gap: 24px;
- margin-top: 16px;
-
- @media (max-width: 1199px) {
- grid-template-columns: repeat(3, 1fr);
- .TotaliemContainer:nth-child(n + 7) {
- display: none;
- }
- padding-left: 24px;
- padding-right: 24px;
- }
-
- @media (max-width: 767px) {
- grid-template-columns: repeat(2, 1fr);
- .TotaliemContainer:nth-child(n + 5) {
- display: none;
- }
- padding-left: 16px;
- padding-right: 16px;
- }
-}
-
-.Totalitems > div {
- display: flex;
- flex-direction: column;
-}
-
-.TotaliemContainer .itemImg {
- cursor: pointer;
-}
-
-.Totalitems .itemImg img {
- width: 100%;
- height: auto;
- border-radius: 16px;
- margin-bottom: 10px;
- object-fit: cover;
- aspect-ratio: 1;
-}
-
-.itemName {
- font-size: 14px;
- font-weight: 500;
- line-height: 24px;
- cursor: pointer;
-}
-
-.itemPrice {
- font-size: 16px;
- font-weight: 700;
- line-height: 26px;
-}
-
-.Totalitems .itemTotal {
- display: flex;
- align-items: center;
- gap: 4px;
- font-size: 12px;
- font-weight: 500;
- line-height: 18px;
-}
-
-.Totalitems .TotaliemContainer div {
- margin-bottom: 6px;
-}
diff --git a/src/components/Totalitem.jsx b/src/components/Totalitem.jsx
deleted file mode 100644
index a2ba7ed7c..000000000
--- a/src/components/Totalitem.jsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import './Totalitem.css';
-import favorit_img from '../assets/heart_favorit.png';
-
-const Totalitem = ({ totalitems }) => {
- return (
-
+
+
+
+
+
+
+
- {totalitems.map((item) => {
- return (
-
- );
-};
-
-export default Totalitem;
diff --git a/src/index.css b/src/index.css
deleted file mode 100644
index 7125638ab..000000000
--- a/src/index.css
+++ /dev/null
@@ -1,15 +0,0 @@
-html {
- font-family: Pretendard, sans-serif;
-}
-
-* {
- box-sizing: border-box;
-}
-
-body {
- margin: 0;
-}
-
-#root {
- max-width: 1920px;
-}
diff --git a/src/index.js b/src/index.js
deleted file mode 100644
index 5c473efdd..000000000
--- a/src/index.js
+++ /dev/null
@@ -1,12 +0,0 @@
-import React from 'react';
-import ReactDOM from 'react-dom/client';
-import './index.css';
-import App from './App';
-import { BrowserRouter } from 'react-router-dom';
-
-const root = ReactDOM.createRoot(document.getElementById('root'));
-root.render(
-
-
- );
- })}
- {}
- {item.name}
- {item.price.toLocaleString()}원
-
-
- {item.favoriteCount}
-
-
-
- {/* 아래는 상품등록 페이지 구현 */}
-
-
- );
-};
-
-export default Additem;
diff --git a/src/pages/Home.css b/src/pages/Home.css
deleted file mode 100644
index 123509e68..000000000
--- a/src/pages/Home.css
+++ /dev/null
@@ -1,47 +0,0 @@
-.item_title {
- margin-top: 24px;
- font-size: 20px;
- font-weight: 700;
- line-height: 32px;
-
- @media (max-width: 1199px) {
- padding: 0 24px;
- }
-
- @media (max-width: 767px) {
- padding: 0 16px;
- }
-}
-
-.Home .item {
- max-width: 1201px;
- width: 100%;
- margin: 0 auto;
-}
-
-a:link {
- text-decoration: none;
-}
-
-.pagenation_box {
- display: flex;
- align-items: center;
- justify-content: center;
- gap: 4px;
- padding: 43px 0 53px;
-}
-
-.page_button {
- width: 40px;
- height: 40px;
- border-radius: 50%;
- border: 1px solid #e5e7eb;
- outline: none;
- color: #6b7280;
- cursor: pointer;
-}
-
-.active {
- background-color: #2f80ed;
- color: #f9fafb;
-}
diff --git a/src/pages/Home.jsx b/src/pages/Home.jsx
deleted file mode 100644
index 1c84827b3..000000000
--- a/src/pages/Home.jsx
+++ /dev/null
@@ -1,78 +0,0 @@
-import './Home.css';
-import Button from '../components/Button';
-import Nav from '../components/Nav';
-import Bestitem from '../components/Bestitem';
-import Totalitem from '../components/Totalitem';
-import items from '../mockdata.json';
-import totalitems from '../totalitems_data.json';
-import Itemtitle from '../components/Itemtitle';
-import { Link } from 'react-router-dom';
-import { useState } from 'react';
-import arrowLeft from '../assets/arrow_left.svg';
-import arrowRight from '../assets/arrow_right.svg';
-
-const Home = () => {
- const [sort, setSort] = useState('new');
-
- const onChangeSort = (e) => {
- setSort(e.target.value);
- };
-
- const getSortData = () => {
- return totalitems.toSorted((a, b) => {
- if (sort === 'new') {
- return Number(b.createdAt) - Number(a.createdAt);
- } else {
- return Number(b.favoriteCount) - Number(a.favoriteCount);
- }
- });
- };
- const sortData = getSortData();
-
- return (
-
-
- {/* 아래는 상품 */}
-
- );
-};
-
-export default Home;
diff --git a/src/pages/Notfound.jsx b/src/pages/Notfound.jsx
deleted file mode 100644
index d61307fb8..000000000
--- a/src/pages/Notfound.jsx
+++ /dev/null
@@ -1,5 +0,0 @@
-const Notfound = () => {
- return
-
- {/* 페이지네이션 영역 */}
-
-
-
-
-
-
-
-
-
-
-
-
-
- Notfound
;
-};
-
-export default Notfound;
diff --git a/styles/globals.css b/styles/globals.css
new file mode 100644
index 000000000..bc203d3a5
--- /dev/null
+++ b/styles/globals.css
@@ -0,0 +1,33 @@
+@font-face {
+ font-family: "Pretendard";
+ src: url("/fonts/PretendardVariable.woff2") format("woff2");
+ font-weight: 45 920;
+ font-style: normal;
+ font-display: swap;
+}
+
+* {
+ font-family: "Pretendard", sans-serif;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ word-break: keep-all;
+}
+
+body {
+ font-family: "Pretendard", sans-serif;
+ margin: 0;
+}
+
+a:link {
+ text-decoration: none;
+ cursor: pointer;
+}
+
+::placeholder {
+ color: #9ca3af;
+}
+
+#root {
+ max-width: 1920px;
+}
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 000000000..c3208e20a
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,29 @@
+{
+ "compilerOptions": {
+ "target": "ES2017",
+ "lib": [
+ "dom",
+ "dom.iterable",
+ "esnext"
+ ],
+ "allowJs": true,
+ "skipLibCheck": true,
+ "strict": false,
+ "noEmit": true,
+ "incremental": true,
+ "module": "esnext",
+ "esModuleInterop": true,
+ "moduleResolution": "node",
+ "resolveJsonModule": true,
+ "isolatedModules": true,
+ "jsx": "preserve"
+ },
+ "include": [
+ "next-env.d.ts",
+ "**/*.ts",
+ "**/*.tsx"
+ ],
+ "exclude": [
+ "node_modules"
+ ]
+}