- 
+ 
Hot Item
-인기 상품을
확인해 보세요
+ 인기 상품을 확인해 보세요
가장 HOT한 중고거래 물품을
판다 마켓에서 확인해 보세요
@@ -44,12 +74,10 @@
인기 상품을
확인해 보세요
- 
+ 
- 구매를 원하는
+
diff --git a/html/login.html b/html/login.html
index b40c099f2..df01a3d4b 100644
--- a/html/login.html
+++ b/html/login.html
@@ -40,11 +40,9 @@
/>
-
+
Search
-
- 구매를 원하는
상품을 검색하세요
-
+ 구매를 원하는 상품을 검색하세요
구매하고 싶은 물품은 검색해서
쉽게 찾아보세요
@@ -60,12 +88,10 @@
- 
+ 
Register
-
- 판매를 원하는
상품을 등록하세요
-
+ 판매를 원하는 상품을 등록하세요
어떤 물건이든 판매하고 싶은 상품을
쉽게 등록하세요
@@ -80,6 +106,7 @@
믿을 수 있는
판다마켓 중고거래
+
- Privacy Policy
- FAQ
-
-
+
+ -
+
+
+ -
+
+
+ -
+
+
+ -
+
+
+
-
+
- 판매를 원하는
+
+
+
Register
-
- 판매를 원하는
상품을 등록하세요
-
+ 판매를 원하는 상품을 등록하세요
어떤 물건이든 판매하고 싶은 상품을
쉽게 등록하세요
@@ -80,6 +106,7 @@
믿을 수 있는
판다마켓 중고거래
판다마켓 중고거래
- Privacy Policy
- FAQ
-
-
+ 
-
+
-
+
+
+
-
+
+
+
-
+
+
+
-
+
+
+
-
-
+
diff --git a/scss/common.scss b/scss/common.scss
new file mode 100644
index 000000000..0170207b2
--- /dev/null
+++ b/scss/common.scss
@@ -0,0 +1,81 @@
+@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css");
+@import url("https://fonts.googleapis.com/css2?family=Abel&display=swap");
+
+* {
+ font-family: Pretendard, sans-serif;
+ box-sizing: border-box;
+ padding: 0;
+ margin: 0;
+}
+
+:root {
+ --brand-blue: #3692ff;
+ --brand-blue-hover: #1967d6;
+ --brand-blue-active: #1251aa;
+ --brand-red: #f74747;
+ --error: var(--brand-red);
+ --gray900: #111827;
+ --gray800: #1f2937;
+ --gray700: #374151;
+ --gray600: #4b5563;
+ --gray500: #6b7280;
+ --gray400: #9ca3af;
+ --disabled: var(--gray400);
+ --gray300: #d1d5db;
+ --gray200: #e5e7eb;
+ --gray100: #f3f4f6;
+ --gray50: #f9fafb;
+}
+
+html {
+ font-size: 16px;
+ color: var(--gray800);
+}
+
+body {
+ position: relative;
+ font-family: "Pretendard", "sans-serif";
+ font-weight: 400;
+ word-break: keep-all;
+}
+
+/* Buttons */
+.button {
+ display: inline-block;
+ background-color: var(--brand-blue);
+ color: #ffffff;
+ text-decoration: none;
+ text-align: center;
+ cursor: pointer;
+ font-weight: 600;
+ border: 0;
+}
+
+.btn-small {
+ width: 128px;
+ height: 48px;
+ border-radius: 8px;
+ padding: 12px 20px;
+ line-height: 24px;
+}
+
+.btn-large {
+ width: 355px;
+ height: 56px;
+ border-radius: 40px;
+ padding: 16px 114px;
+ line-height: 24px;
+ font-size: 1.25rem; // 20px;
+}
+
+.button:hover {
+ background-color: var(--brand-blue-hover);
+}
+
+.button:active {
+ background-color: var(--brand-blue-active);
+}
+
+.button:disabled {
+ background-color: var(--disabled);
+}
diff --git a/scss/index.scss b/scss/index.scss
new file mode 100644
index 000000000..4b53cca85
--- /dev/null
+++ b/scss/index.scss
@@ -0,0 +1,368 @@
+/* Heading nav */
+header#gnb {
+ display: flex;
+ justify-content: space-between;
+
+ border-bottom: #dfdfdf 1px solid;
+ position: fixed;
+ top: 0;
+ left: 0;
+
+ width: 100%;
+ height: 70px;
+ padding: 10px 200px;
+ background-color: #ffffff;
+
+ z-index: 999;
+}
+
+nav#heading-nav {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ width: 100%;
+}
+
+.logo {
+ width: 153px;
+}
+
+.logo-mobile {
+ display: none;
+}
+
+/* Banners */
+.banner {
+ position: relative;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ background-color: #cfe5ff;
+ background-repeat: no-repeat;
+ background-size: auto;
+ background-position: 80% bottom;
+
+ &.home-main-top {
+ background-image: url("../assets/index/Img_home_top.png");
+ margin-top: 70px;
+ padding: 0 200px;
+ }
+
+ &.home-main-bottom {
+ background-image: url("../assets/index/Img_home_bottom.png");
+ padding: 0 200px;
+ }
+}
+
+.home-main-desc {
+ width: 100%;
+ max-width: 1200px;
+ height: 540px;
+
+ display: flex;
+ justify-content: center;
+ align-items: flex-start;
+ flex-direction: column;
+
+ text-align: left;
+ gap: 32px;
+}
+
+.home-main-title {
+ display: inline-block;
+ font-size: 2.5rem; // 40px
+ font-weight: 700;
+ line-height: 56px;
+ letter-spacing: 0.02em; // 2%
+ color: var(--gray700);
+}
+
+h1.home-main-title {
+ width: 320px;
+}
+
+/* Contents */
+.home-main-section {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+
+ width: 100%;
+ max-width: 1920px;
+ height: 720px;
+ margin: 0 auto;
+ margin-bottom: 24px;
+}
+
+.home-main-content {
+ display: flex;
+ justify-content: flex-start;
+ align-items: center;
+
+ width: 1200px;
+ padding: 0 0;
+ gap: 64px;
+}
+
+.home-main-service {
+ display: flex;
+ flex-direction: column;
+ gap: 18px;
+}
+
+.home-main-reverse {
+ &.home-main-content {
+ flex-direction: row-reverse;
+ text-align: right;
+ }
+ & .home-main-service {
+ align-items: flex-end;
+ }
+}
+
+p.service-title {
+ font-size: 1.125rem; // 18px
+ font-weight: 700;
+ color: var(--brand-blue);
+}
+
+h2.home-main-title {
+ width: 300px;
+}
+
+p.service-desc {
+ font-size: 1.5rem; // 24px
+ font-weight: 500;
+ letter-spacing: 0.08em; // 8%
+}
+
+/* Footer */
+footer {
+ display: flex;
+ justify-content: center;
+ width: 100%;
+ max-width: 100vw;
+ height: 160px;
+ padding: 30px 200px;
+ background-color: var(--gray900);
+
+ & .home-main-footer-content {
+ width: 100%;
+ max-width: 1520px;
+ display: flex;
+ justify-content: space-between;
+ }
+
+ & .footer-left {
+ flex: 1;
+ text-align: left;
+ p {
+ color: var(--gray400);
+ font-family: "Abel", sans-serif;
+ }
+ }
+
+ & .footer-center {
+ display: flex;
+ flex: 1;
+ justify-content: center;
+ text-align: center;
+ gap: 30px;
+
+ a {
+ text-align: center;
+ text-decoration: none;
+ color: var(--gray200);
+ font-family: "Abel", sans-serif;
+ }
+ }
+
+ & .footer-right {
+ display: flex;
+ justify-content: right;
+ align-items: flex-start;
+ flex: 1;
+ }
+
+ & .footer-icons {
+ li {
+ display: flex;
+ justify-content: flex-start;
+ align-items: center;
+ margin-left: 10px;
+ }
+
+ img {
+ width: 20px;
+ height: 20px;
+ }
+ }
+}
+
+/* =============================== */
+/* ========= Tablet Size ========= */
+/* =============================== */
+
+@media (max-width: 1199px) {
+ header#gnb {
+ padding: 10px 24px;
+ }
+
+ .logo {
+ width: 153px;
+ }
+
+ h1.home-main-title {
+ width: 100%;
+ }
+
+ /* Banners */
+ .banner {
+ background-position: center bottom;
+
+ &.home-main-top {
+ padding: 0 24px 0 24px;
+ height: 771px;
+ }
+
+ &.home-main-bottom {
+ height: 927px;
+ }
+ }
+
+ .home-main-desc {
+ padding-top: 60px;
+ justify-content: flex-start;
+ align-items: center;
+ text-align: center;
+ height: 771px;
+ gap: 32px;
+ }
+
+ /* Contents */
+ .home-main-section {
+ height: auto;
+ padding: 24px;
+ }
+
+ .home-main-content {
+ flex-direction: column;
+ justify-content: flex-start;
+ align-items: center;
+
+ width: 100%;
+ max-width: 1200px;
+ height: auto;
+ gap: 36px;
+
+ &.home-main-reverse {
+ text-align: right;
+ flex-direction: column;
+ }
+
+ & img {
+ width: 100%;
+ }
+ }
+
+ .home-main-service {
+ width: 100%;
+ }
+
+ p.service-title {
+ font-size: 1.125rem; // 18px
+ font-weight: 700;
+ color: var(--brand-blue);
+ }
+
+ h2.home-main-title {
+ width: 100%;
+ font-size: 2rem; // 32px
+ line-height: 44.8px;
+ }
+
+ p.service-desc {
+ font-size: 1.125rem; // 18px
+ font-weight: 500;
+ letter-spacing: 0.08em; // 8%
+ }
+
+ /* Footer */
+ footer {
+ padding: 30px 160px;
+ }
+}
+
+/* =============================== */
+/* ========= Mobile Size ========= */
+/* =============================== */
+
+@media (max-width: 767px) {
+ /* Heading nav */
+ .logo {
+ display: none;
+ }
+
+ .logo-mobile {
+ display: block;
+ }
+
+ h1.home-main-title {
+ width: 310px;
+ font-size: 2rem; // 32px
+ line-height: 44.8px;
+ }
+
+ /* Banners */
+ .banner {
+ &.home-main-top {
+ padding: 0 24px 0 24px;
+ height: 540px;
+ background-size: auto 50%;
+ }
+
+ &.home-main-bottom {
+ height: 540px;
+ background-size: auto 50%;
+
+ & .home-main-desc {
+ padding-top: 84px;
+ }
+ }
+ }
+
+ .home-main-desc {
+ padding-top: 44px;
+ justify-content: flex-start;
+ align-items: center;
+ text-align: center;
+ height: 540px;
+ gap: 32px;
+
+ & .btn-large {
+ width: 154px;
+ height: 48px;
+ border-radius: 40px;
+ padding: 12px 20px;
+ font-size: 1rem; // 16px
+ }
+ }
+
+ /* Footer */
+ footer {
+ padding: 0px;
+
+ & .home-main-footer-content {
+ padding: 30px 30px 30px 30px;
+ }
+
+ & .footer-left {
+ position: absolute;
+ left: 30px;
+ bottom: 30px;
+ }
+ & .footer-center {
+ justify-content: flex-start;
+ }
+ }
+}
diff --git a/scss/login.scss b/scss/login.scss
new file mode 100644
index 000000000..fc42e7c3a
--- /dev/null
+++ b/scss/login.scss
@@ -0,0 +1,195 @@
+body,
+main {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ flex-direction: column;
+ gap: 24px;
+}
+
+header {
+ margin: 60px 24px 24px 24px;
+}
+
+.logo {
+ width: 396px;
+}
+
+/* Form */
+form {
+ display: flex;
+ flex-direction: column;
+ width: 640px;
+ gap: 24px;
+}
+
+.form-group {
+ position: relative;
+ display: flex;
+ flex-direction: column;
+ gap: 16px;
+}
+
+form label {
+ font-weight: 700;
+ font-size: 1.125rem; // 18px
+ display: inline-block;
+}
+
+.form-input {
+ width: 100%;
+ height: 56px;
+ padding: 16px 24px 16px 24px;
+ border-radius: 12px;
+ border: 0;
+ gap: 10px;
+ background-color: var(--gray100);
+}
+
+.form-input:focus {
+ border: #3692ff 1px solid;
+}
+
+.form-input::placeholder {
+ color: var(--gray400);
+}
+
+a.password-inv {
+ position: absolute;
+ bottom: 16px;
+ right: 24px;
+
+ display: inline-block;
+ width: 24px;
+ height: 24px;
+
+ background-image: url("../assets/login/btn_visibility_off_24px.svg");
+ background-repeat: no-repeat;
+ background-position: center;
+}
+
+.button.btn-large.login-button {
+ width: 640px;
+}
+
+/* Social Login */
+.social-login-div {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+
+ width: 640px;
+ height: 74px;
+ border-radius: 8px;
+ padding: 0 24px;
+ background-color: #e6f2ff;
+}
+
+.social-login-div span {
+ display: inline-block;
+ flex: 1;
+ font-weight: 600;
+}
+
+.circular-button {
+ display: inline-block;
+ border-radius: 9999px;
+ width: 42px;
+ height: 42px;
+}
+
+.google-social-login {
+ border: 1px solid #f9fafb;
+ background-color: #ffffff;
+ background-image: url("../assets/login/Google-icon.svg");
+ background-repeat: no-repeat;
+ background-position: center;
+}
+
+.kakao-social-login {
+ background-color: #f5e14b;
+ background-image: url("../assets/login/kakao-icon.svg");
+ background-repeat: no-repeat;
+ background-position: center;
+}
+
+.bottom-link {
+ color: #3182f6;
+}
+
+/* =============================== */
+/* ========= Mobile Size ========= */
+/* =============================== */
+
+@media (max-width: 767px) {
+ body {
+ padding: 0 24px;
+ }
+
+ main {
+ width: 100%;
+ max-width: 400px;
+ }
+
+ header {
+ margin: 47px 24px 24px 24px;
+ }
+
+ .logo {
+ width: 198px;
+ }
+
+ /* Form */
+ form {
+ width: 100%;
+ max-width: 400px;
+ }
+
+ .form-group {
+ gap: 12px;
+ }
+
+ form label {
+ font-weight: 700;
+ font-size: 0.875rem; // 14px
+ display: inline-block;
+ }
+
+ .form-input {
+ width: 100%;
+ height: 56px;
+ padding: 16px 24px 16px 24px;
+ border-radius: 12px;
+ border: 0;
+ gap: 10px;
+ background-color: var(--gray100);
+ }
+
+ .form-input:focus {
+ border: #3692ff 1px solid;
+ }
+
+ .form-input::placeholder {
+ color: var(--gray400);
+ }
+
+ a.password-inv {
+ position: absolute;
+ bottom: 16px;
+ right: 24px;
+
+ display: inline-block;
+ width: 24px;
+ height: 24px;
+ }
+
+ .button.btn-large.login-button {
+ width: 100%;
+ font-size: 16px;
+ }
+
+ /* Social Login */
+ .social-login-div {
+ width: 100%;
+ }
+}