codeit-bootcamp-frontend · GANGYIKIM · Mar 26, 2025 · Mar 21, 2025 · Mar 21, 2025 · Mar 21, 2025
diff --git a/auth.css b/auth.css
@@ -18,7 +18,12 @@
 	width: 100%;
 }
 
-.input_box {
+.input_container {
+	position: relative;
+	margin: 16px 0 24px;
+}
+
+.input_wrap {
 	position: relative;
 }
 
@@ -36,48 +41,75 @@
 	border: none;
 	background-color: var(--gray100);
 	padding: 16px 24px;
-	margin: 16px 0 24px;
 	border-radius: 12px;
 }
 
+.user_form .inputAlert {
+	border: 1px solid #f74747;
+}
+
+.email_alert,
+.password_alert,
+.nickname_alert,
+.pw_check_alert {
+	display: none;
+}
+
+.visible_alert {
+	display: block;
+	color: #f74747;
+	font-size: 14px;
+	font-weight: 600;
+	margin-top: 8px;
+	padding-left: 16px;
+}
+
 .visible_button {
 	width: 24px;
 	height: 24px;
 	position: absolute;
 	z-index: 1;
 	top: 50%;
 	right: 24px;
-	margin-top: -16px;
+	transform: translateY(-50%);
 	padding: 0;
 	border: none;
 	cursor: pointer;
 }
 
-.visible_on,
-.visible_off {
+.visible_password {
 	width: 100%;
-	height: 100%;
 }
 
 .login_button,
 .signup_button {
-	font-size: 20px;
-	color: var(--gray100);
-	line-height: 32px;
-	font-weight: 600;
-	font-family: Pretendard;
-	background-color: var(--gray400);
 	width: 100%;
 	height: 56px;
 	border-radius: 9999px;
 	border: none;
 	margin-bottom: 24px;
 	cursor: pointer;
+	background-color: var(--gray400);
 	transition: all 300ms ease;
 }
 
-.login_button:hover,
-.signup_button:hover {
+.auth_button a {
+	font-size: 20px;
+	color: var(--gray100);
+	line-height: 32px;
+	font-weight: 600;
+	font-family: Pretendard;
+	display: inline-flex;
+	justify-content: center;
+	align-items: center;
+	width: 100%;
+	height: 100%;
+}
+.btn_disable {
+	background-color: var(--gray400);
+}
+
+.btn_active {
 	background-color: var(--blue);
 }
 
@@ -116,7 +148,7 @@
 	color: var(--blue);
 }
 
-@media (min-width: 375px) and (max-width: 767px) {
+@media (max-width: 767px) {
 	.user_form_logo {
 		width: unset;
 		height: 95px;

diff --git a/common.css b/common.css
@@ -11,139 +11,6 @@
 	--blue: #3692ff;
 }
 
-/* Reset CSS: start - body에 폰트 추가 */
-/* http://meyerweb.com/eric/tools/css/reset/ 
-   v2.0 | 20110126
-   License: none (public domain)
-*/
-
-html,
-body,
-div,
-span,
-applet,
-object,
-iframe,
-h1,
-h2,
-h3,
-h4,
-h5,
-h6,
-p,
-blockquote,
-pre,
-a,
-abbr,
-acronym,
-address,
-big,
-cite,
-code,
-del,
-dfn,
-em,
-img,
-ins,
-kbd,
-q,
-s,
-samp,
-small,
-strike,
-strong,
-sub,
-sup,
-tt,
-var,
-b,
-u,
-i,
-center,
-dl,
-dt,
-dd,
-ol,
-ul,
-li,
-fieldset,
-form,
-label,
-legend,
-table,
-caption,
-tbody,
-tfoot,
-thead,
-tr,
-th,
-td,
-article,
-aside,
-canvas,
-details,
-embed,
-figure,
-figcaption,
-footer,
-header,
-hgroup,
-menu,
-nav,
-output,
-ruby,
-section,
-summary,
-time,
-mark,
-audio,
-video {
-	margin: 0;
-	padding: 0;
-	border: 0;
-	font-size: 100%;
-	font: inherit;
-	vertical-align: baseline;
-}
-/* HTML5 display-role reset for older browsers */
-article,
-aside,
-details,
-figcaption,
-figure,
-footer,
-header,
-hgroup,
-menu,
-nav,
-section {
-	display: block;
-}
-body {
-	line-height: 1;
-	font-family: Pretendard;
-}
-ol,
-ul {
-	list-style: none;
-}
-blockquote,
-q {
-	quotes: none;
-}
-blockquote:before,
-blockquote:after,
-q:before,
-q:after {
-	content: '';
-	content: none;
-}
-table {
-	border-collapse: collapse;
-	border-spacing: 0;
-}
-/* Reset CSS: end */
-
 * {
 	box-sizing: border-box;
 }

diff --git a/image/ogImage.png b/image/ogImage.png
diff --git a/index.css b/index.css
@@ -344,25 +344,17 @@ main {
 		margin-right: 104px;
 	}
 
-	.privacy_faq {
-		font-family: 'Abel', sans-serif;
-	}
 	/* footer: end */
 }
 
-@media (min-width: 375px) and (max-width: 767px) {
+@media (max-width: 767px) {
 	/* header: start */
 	.navbar_wrap {
 		width: 100%;
 		margin: 0 16px;
 	}
 
 	.logo {
-		display: none;
-	}
-
-	.m_logo {
-		display: inline-block;
 		width: 103px;
 	}
 
@@ -371,11 +363,6 @@ main {
 		margin-right: 30px;
 	}
 
-	.logo {
-		width: 123px;
-		height: 41px;
-	}
-
 	.login {
 		width: 100px;
 	}
@@ -461,14 +448,15 @@ main {
 	/* main ad: start */
 	.ad {
 		height: 124.597vw;
+		min-height: 540px;
 		overflow: hidden;
 		flex-direction: column;
 		align-items: center;
 		justify-content: flex-end;
 	}
 
 	.ad > .title {
-		margin-top: 131px;
+		bottom: 29.167vw;
 		margin-right: 0;
 		text-align: center;
 		font-size: 32px;

diff --git a/index.html b/index.html
@@ -5,31 +5,41 @@
 		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
 		<title>판다마켓</title>
 
-		<link rel="stylesheet" href="index.css" />
+		<link rel="stylesheet" href="reset.css" />
 		<link rel="stylesheet" href="common.css" />
+		<link rel="stylesheet" href="index.css" />
 		<link
 			rel="stylesheet"
 			as="style"
 			crossorigin
 			href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css" />
 		<link rel="preconnect" href="https://fonts.googleapis.com" />
-		<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-		<link href="https://fonts.googleapis.com/css2?family=Abel&display=swap" rel="stylesheet" />
-		<meta property="og:title" content="판다마켓" />
-		<meta property="og:type" content="website" />
+		<meta name="description" content="일상의 모든 물건을 거래해보세요." />
+
+		<!-- Facebook Meta Tags -->
 		<meta property="og:url" content="https://pandaamarket.netlify.app/" />
-		<meta property="og:image" content="https://pandaamarket.netlify.app/image/logo.png" />
-		<meta property="og:image:type" content="image/png" />
-		<meta property="og:image:width" content="792" />
-		<meta property="og:image:height" content="264" />
+		<meta property="og:type" content="website" />
+		<meta property="og:title" content="판다마켓" />
 		<meta property="og:description" content="일상의 모든 물건을 거래해보세요." />
+		<meta property="og:image" content="https://pandaamarket.netlify.app/image/ogImage.png" />
+		<meta property="og:image:width" content="300" />
+
+		<!-- Twitter Meta Tags -->
+		<meta name="twitter:card" content="summary_large_image" />
+		<meta property="twitter:domain" content="pandaamarket.netlify.app" />
+		<meta property="twitter:url" content="https://pandaamarket.netlify.app/" />
+		<meta name="twitter:title" content="판다마켓" />
+		<meta name="twitter:description" content="일상의 모든 물건을 거래해보세요." />
+		<meta name="twitter:image" content="https://pandaamarket.netlify.app/image/ogImage.png" />
 	</head>
 	<body>
 		<header class="navbar">
 			<div class="navbar_wrap">
 				<a href="/">
-					<img src="/image/logo.png" alt="판다마켓 로고" class="logo" />
-					<img src="./image/mobile_logo.png" alt="판다마켓 모바일 로고" class="m_logo" />
+					<picture>
+						<source srcset="/image/mobile_logo.png" media="(max-width: 767px)" />
+						<img src="/image/logo.png" alt="판다마켓 로고" class="logo" />
+					</picture>
 				</a>
 				<a href="/login.html" class="login">로그인</a>
 			</div>
@@ -38,7 +48,7 @@
 			<div class="heading">
 				<div class="text_box">
 					<h1 class="heading_title">
-						<span>일상의 모든 물건을 </span>
+						<span>일상의 모든 물건을</span>
 						<span>거래해 보세요</span>
 					</h1>
 					<a href="/items.html" class="view_button">구경하러 가기</a>
@@ -66,7 +76,7 @@ <h2 class="title"><span>인기 상품을 </span>확인해 보세요</h2>
 					<div class="category_description">
 						<h3 class="category_title">Search</h3>
 						<h2 class="title">
-							<span>구매를 원하는 </span>
+							<span>구매를 원하는</span>
 							상품을 검색하세요
 						</h2>
 						<p class="description">
@@ -83,7 +93,7 @@ <h2 class="title">
 					<div class="category_description">
 						<h3 class="category_title">Register</h3>
 						<h2 class="title">
-							<span>판매를 원하는 </span>
+							<span>판매를 원하는</span>
 							상품을 등록하세요
 						</h2>
 						<p class="description">