Skip to content
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
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 .vscode/settings.json
Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

IDE 설정 파일은 Git에 올리지 않는게 좋습니다. 각자의 개발 환경이 다르기 때문에 팀 전체에 영향을 줍니다. .gitignore에 추가해서 개인작업환경에서만 적용될 수 있도록 하는게 좋습니다

Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{
"liveServer.settings.port": 5501
}
26 changes: 23 additions & 3 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -27,18 +27,15 @@ _위 이미지는 판다마켓의 대표 이미지입니다._ 📸
### 브랜치 설명

1. **basic (part1): 스프린트 미션 1 ~ 3 FE 요구사항**

- 기본적인 웹 애플리케이션 기능 구현을 위한 초기 브랜치입니다. HTML, CSS, JavaScript 등을 사용해 기본을 다집니다.
- **스프린트 미션 1부터 4까지**의 프론트엔드 내용을 포함하고 있어요.

2. **react (part2): 스프린트 미션 5 ~ 6 FE 요구사항**

- React 라이브러리를 사용해 프론트엔드 기능을 구현하는 브랜치입니다. 컴포넌트 기반 아키텍처와 상태 관리를 배웁니다.
- **스프린트 미션 5부터 6까지, 그 이후**의 프론트엔드 내용을 포함하고 있어요.
- 만약 스프린트 미션 9부터 프론트엔드 코드를 Next가 아닌 React로 구현하고 싶다면 react 브랜치를 사용해요.

3. **next (part3,4): 스프린트 미션 7 FE 요구사항~**

- Next.js를 사용해 서버 사이드 렌더링(SSR)과 정적 사이트 생성(SSG) 등 고급 기능을 구현합니다.
- **스프린트 미션 7부터** 시작하는 프론트엔드 내용을 포함하고 있어요.
- 만약 스프린트 미션 8부터 프론트엔드 코드를 React가 아닌 Next로 구현하고 싶다면 next 브랜치를 사용해요.
Expand All @@ -48,3 +45,26 @@ _위 이미지는 판다마켓의 대표 이미지입니다._ 📸
---

본 프로젝트는 [코드잇](https://www.codeit.kr)의 소유이며, 교육 목적으로만 사용됩니다. © 2026 Codeit. All rights reserved.

# 🐼 판다마켓 프로젝트

판다마켓 로그인과 회원가입 페이지를 구현한 프로젝트입니다. 앞으로 추가되는 사항은 꾸준히 업데이트 예정입니다.

## 프로젝트 소개

안녕하세요! 판다마켓 프로젝트에 오신 것을 환영합니다! 🥳
HTML과 CSS를 사용하여 로그인과 회원가입 페이지를 구현했습니다.
앞으로의 판다마켓 프로젝트를 지켜봐 주세요!

## 주요 기능 ✨

1. **이메일 입력**
2. **비밀번호 입력**
3. **비밀번호 보기 버튼**
4. **간편 로그인 버튼**

## 학습 목표

1. HTML 시멘틱 구조 이해
2. CSS를 활용한 레이아웃 구성
3. 입력 폼 UI 구현
203 changes: 203 additions & 0 deletions css/auth.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,203 @@
* {
box-sizing: border-box;
}

body {
display: flex;
flex-direction: column;
min-height: 100vh;
}

.login-section {
display: flex;
max-width: 640px;
max-height: 618px;
flex-direction: column;
align-items: center;
gap: 40px;
flex-shrink: 0;
margin: 120px auto;
}

.login-btn a {
text-decoration: none;
color: inherit;
}

.signup-section {
display: flex;
max-width: 640px;
max-height: 842px;
flex-direction: column;
align-items: center;
gap: 40px;
flex-shrink: 0;
margin: 60px auto;
margin-bottom: 200px;
}

.signup-btn a {
text-decoration: none;
color: inherit;
}

.login-btn {
display: flex;
width: 640px;
height: 56px;
padding: 16px 124px;
justify-content: center;
align-items: center;
gap: 10px;
border-radius: 40px;
background: var(--Primary-100, #3692ff);
color: var(--Cool-Gray-100, #f3f4f6);
text-align: center;
border: none;
font-family: Pretendard;
font-size: 20px;
font-style: normal;
font-weight: 600;
line-height: 32px;
}

.signup-btn {
display: flex;
padding: 16px 124px;
justify-content: center;
align-items: center;
gap: 10px;
align-self: stretch;
border-radius: 40px;
background: var(--Cool-Gray-400, #9ca3af);
color: #fff;
text-align: center;
font-family: Pretendard;
font-size: 20px;
font-style: normal;
font-weight: 600;
line-height: 24px;
border: none;
}

.logo-section {
margin-bottom: 40px;
}

.auth-input-area {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 16px;
}

.auth-input-wrapper {
position: relative;
}

.auth-input {
display: flex;
max-width: 640px;
max-height: 56px;
padding: 16px 24px;
align-items: center;
border-radius: 12px;
background: var(--Cool-Gray-100, #f3f4f6);
color: var(--Secondary-400, #9ca3af);
font-family: Pretendard;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 26px;
}

.auth-label {
color: var(--Secondary-800, #1f2937);
font-family: Pretendard;
font-size: 18px;
font-style: normal;
font-weight: 700;
line-height: 26px;
}

input {
display: flex;
width: 640px;
height: 56px;
padding: 16px 24px;
align-items: center;
gap: 10px;
border: none;
}

.social-login {
display: flex;
width: 640px;
height: 74px;
padding: 16px 23px;
align-items: flex-start;
gap: 10px;
border-radius: 8px;
background: #e6f2ff;
display: flex;
justify-content: space-between;
align-items: center;
}

.social-login p {
color: var(--Secondary-800, #1f2937);
height: 42px;

font-family: Pretendard;
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: 26px;
display: flex;
align-items: center;
}

.social-icons {
display: flex;
align-items: flex-start;
gap: 16px;
}

.hide-btn {
position: absolute;
right: 24px;
top: 50%;
transform: translateY(-50%);
border: none;
background: none;
cursor: pointer;
padding-right: 0px;
}

.signup {
color: var(--Secondary-800, #1f2937);
font-family: Pretendard;
font-size: 14px;
font-style: normal;
font-weight: 500;
line-height: 24px;
display: flex;
justify-content: center;
align-items: center;
}

.signup-click {
margin-left: 4px;
display: flex;
justify-content: center;
align-items: center;
}

.login-form {
display: flex;
width: 640px;
height: 56px;
padding: 16px 24px;
align-items: center;
gap: 10px;
}
129 changes: 129 additions & 0 deletions css/reset.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,129 @@
/* 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;
}
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;
}
Loading