[정인재] Sprint2 #51

Injaeeee · 2024-05-31T08:35:19Z

요구사항

기본

아래로 스크롤 해도 상단 네비게이션 바(Global Navigation Bar)가 최상단에 고정됩니다.
“판다마켓" 클릭 시 루트 페이지(“/”)로 이동합니다.
로그인 페이지, 회원가입 페이지 모두 로고 위 상단 여백이 동일합니다.
input 요소에 focus in 일 때, 테두리 색상은 #3692FF입니다.
input 요소에 focus out 일 때, 테두리는 없습니다.
SNS 아이콘들은 클릭시 각각 아래 페이지로 이동합니다.
“회원 가입”버튼 클릭 시 “/signup” 페이지로 이동합니다.
“로그인”버튼 클릭 시 (“/login”) 페이지로 이동합니다.

심화

palette에 있는 color값들을 css 변수로 등록하고 사용합니다.
비밀번호 input 요소 오른쪽에 눈모양 아이콘을 추가합니다.

주요 변경사항

로그인 페이지와 회원가입 페이지

스크린샷

멘토에게

화면안의 요소들 배치가 제대로 된건지 잘 모르겠습니다. 제가 사용하는 맥북환경에선 모니터 크기가 작은 탓인지 피그마가 제시한 px 대로 설정하려하면 전체화면보다 지나치게 커져서 가로,세로 스크롤이 무한정하게 넓어져 전체화면은 vw, vh를 사용하여 맞춰보았습니다.
이러한 차이점까지 확인하며 작업하고싶은데 방법이있을까요?
Sprint1을 pull 받지 못해서 1번 요구사항이 여기에 없는데 Sprint1 pr에 해당요구사항을 미리 반영해 놓았습니다

wlgns2223 · 2024-06-02T08:02:23Z

화면안의 요소들 배치가 제대로 된건지 잘 모르겠습니다. 제가 사용하는 맥북환경에선 모니터 크기가 작은 탓인지 피그마가 제시한 px 대로 설정하려하면 전체화면보다 지나치게 커져서 가로,세로 스크롤이 무한정하게 넓어져 전체화면은 vw, vh를 사용하여 맞춰보았습니다.
이러한 차이점까지 확인하며 작업하고싶은데 방법이있을까요?

크롬 개발자 모드에서 반응형 모드로 뷰포트의 너비를 1920px 사이즈로 맞춰서 작업을 하시면 시안대로 작업이 가능합니다.

wlgns2223 · 2024-06-02T09:12:15Z

sprint1에 관한 피드백은 #13 을 참고해주세요 !
merge가 안되어 있어서 sprint2 부분만 완성을 해주셨네요.
이런 경우

로컬에서

Basic-정인재-sprint1에서 Basic-정인재 merge
Basic-정인재로부터 Basic-정인재-sprint2 브랜치 만듦
스프린트 미션 2 완료 후 PR

위의 과정을 거치면 스프린트 미션 1에 이어서 미션2를 할 수 있습니다.

wlgns2223 · 2024-06-02T09:15:05Z

PR을 올리는 과정에서 충돌이 일어났는데 이 부분 해결하시고 다시 PR 올려주시겠어요 ?

wlgns2223 · 2024-06-02T09:17:14Z

signup/index.html

+        <div class="signup">
+            <div class="signup-input">
+                <label>이메일</label>
+                <input name="email" type="email" placeholder="이메일을 입력해주세요" />
+            </div>
+            <div class="signup-input">
+                <label>닉네임</label>
+                <input name="nickname" type="nickname" placeholder="닉네임을 입력해주세요" />
+            </div>
+            <div class="signup-input">
+                <label>비밀번호</label>
+                <input name="password" type="password" placeholder="비밀번호를 입력해주세요" />
+                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
+                    class="bi bi-eye-slash" viewBox="0 0 16 16">
+                    <path
+                        d="M13.359 11.238C15.06 9.72 16 8 16 8s-3-5.5-8-5.5a7 7 0 0 0-2.79.588l.77.771A6 6 0 0 1 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13 13 0 0 1 14.828 8q-.086.13-.195.288c-.335.48-.83 1.12-1.465 1.755q-.247.248-.517.486z" />
+                    <path
+                        d="M11.297 9.176a3.5 3.5 0 0 0-4.474-4.474l.823.823a2.5 2.5 0 0 1 2.829 2.829zm-2.943 1.299.822.822a3.5 3.5 0 0 1-4.474-4.474l.823.823a2.5 2.5 0 0 0 2.829 2.829" />
+                    <path
+                        d="M3.35 5.47q-.27.24-.518.487A13 13 0 0 0 1.172 8l.195.288c.335.48.83 1.12 1.465 1.755C4.121 11.332 5.881 12.5 8 12.5c.716 0 1.39-.133 2.02-.36l.77.772A7 7 0 0 1 8 13.5C3 13.5 0 8 0 8s.939-1.721 2.641-3.238l.708.709zm10.296 8.884-12-12 .708-.708 12 12z" />
+                </svg>
+            </div>
+
+            <div class="signup-input">
+                <label>비밀번호 확인</label>
+                <input name="password-check" type="password-check" placeholder="비밀번호를 다시 한 번 입력해주세요" />
+                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
+                    class="bi bi-eye-slash" viewBox="0 0 16 16">
+                    <path
+                        d="M13.359 11.238C15.06 9.72 16 8 16 8s-3-5.5-8-5.5a7 7 0 0 0-2.79.588l.77.771A6 6 0 0 1 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13 13 0 0 1 14.828 8q-.086.13-.195.288c-.335.48-.83 1.12-1.465 1.755q-.247.248-.517.486z" />
+                    <path
+                        d="M11.297 9.176a3.5 3.5 0 0 0-4.474-4.474l.823.823a2.5 2.5 0 0 1 2.829 2.829zm-2.943 1.299.822.822a3.5 3.5 0 0 1-4.474-4.474l.823.823a2.5 2.5 0 0 0 2.829 2.829" />
+                    <path
+                        d="M3.35 5.47q-.27.24-.518.487A13 13 0 0 0 1.172 8l.195.288c.335.48.83 1.12 1.465 1.755C4.121 11.332 5.881 12.5 8 12.5c.716 0 1.39-.133 2.02-.36l.77.772A7 7 0 0 1 8 13.5C3 13.5 0 8 0 8s.939-1.721 2.641-3.238l.708.709zm10.296 8.884-12-12 .708-.708 12 12z" />
+                </svg>
+
+            </div>
+
+            <button class="signup-button">회원가입</button>


input 및 button과 같이 서버에 제출하는 form요소는 form태그로 감싸주어야합니다.

Suggested change

<div class="signup">

<div class="signup-input">

<label>이메일</label>

<input name="email" type="email" placeholder="이메일을 입력해주세요" />

</div>

<div class="signup-input">

<label>닉네임</label>

<input name="nickname" type="nickname" placeholder="닉네임을 입력해주세요" />

</div>

<div class="signup-input">

<label>비밀번호</label>

<input name="password" type="password" placeholder="비밀번호를 입력해주세요" />

<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"

class="bi bi-eye-slash" viewBox="0 0 16 16">

<path

d="M13.359 11.238C15.06 9.72 16 8 16 8s-3-5.5-8-5.5a7 7 0 0 0-2.79.588l.77.771A6 6 0 0 1 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13 13 0 0 1 14.828 8q-.086.13-.195.288c-.335.48-.83 1.12-1.465 1.755q-.247.248-.517.486z" />

<path

d="M11.297 9.176a3.5 3.5 0 0 0-4.474-4.474l.823.823a2.5 2.5 0 0 1 2.829 2.829zm-2.943 1.299.822.822a3.5 3.5 0 0 1-4.474-4.474l.823.823a2.5 2.5 0 0 0 2.829 2.829" />

<path

d="M3.35 5.47q-.27.24-.518.487A13 13 0 0 0 1.172 8l.195.288c.335.48.83 1.12 1.465 1.755C4.121 11.332 5.881 12.5 8 12.5c.716 0 1.39-.133 2.02-.36l.77.772A7 7 0 0 1 8 13.5C3 13.5 0 8 0 8s.939-1.721 2.641-3.238l.708.709zm10.296 8.884-12-12 .708-.708 12 12z" />

</svg>

</div>

<div class="signup-input">

<label>비밀번호 확인</label>

<input name="password-check" type="password-check" placeholder="비밀번호를 다시 한 번 입력해주세요" />

<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"

class="bi bi-eye-slash" viewBox="0 0 16 16">

<path

d="M13.359 11.238C15.06 9.72 16 8 16 8s-3-5.5-8-5.5a7 7 0 0 0-2.79.588l.77.771A6 6 0 0 1 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13 13 0 0 1 14.828 8q-.086.13-.195.288c-.335.48-.83 1.12-1.465 1.755q-.247.248-.517.486z" />

<path

d="M11.297 9.176a3.5 3.5 0 0 0-4.474-4.474l.823.823a2.5 2.5 0 0 1 2.829 2.829zm-2.943 1.299.822.822a3.5 3.5 0 0 1-4.474-4.474l.823.823a2.5 2.5 0 0 0 2.829 2.829" />

<path

d="M3.35 5.47q-.27.24-.518.487A13 13 0 0 0 1.172 8l.195.288c.335.48.83 1.12 1.465 1.755C4.121 11.332 5.881 12.5 8 12.5c.716 0 1.39-.133 2.02-.36l.77.772A7 7 0 0 1 8 13.5C3 13.5 0 8 0 8s.939-1.721 2.641-3.238l.708.709zm10.296 8.884-12-12 .708-.708 12 12z" />

</svg>

</div>

<button class="signup-button">회원가입</button>

<form class="signup">

<div class="signup-input">

<label>이메일</label>

<input name="email" type="email" placeholder="이메일을 입력해주세요" />

</div>

<div class="signup-input">

<label>닉네임</label>

<input name="nickname" type="nickname" placeholder="닉네임을 입력해주세요" />

</div>

<div class="signup-input">

<label>비밀번호</label>

<input name="password" type="password" placeholder="비밀번호를 입력해주세요" />

<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"

class="bi bi-eye-slash" viewBox="0 0 16 16">

<path

d="M13.359 11.238C15.06 9.72 16 8 16 8s-3-5.5-8-5.5a7 7 0 0 0-2.79.588l.77.771A6 6 0 0 1 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13 13 0 0 1 14.828 8q-.086.13-.195.288c-.335.48-.83 1.12-1.465 1.755q-.247.248-.517.486z" />

<path

d="M11.297 9.176a3.5 3.5 0 0 0-4.474-4.474l.823.823a2.5 2.5 0 0 1 2.829 2.829zm-2.943 1.299.822.822a3.5 3.5 0 0 1-4.474-4.474l.823.823a2.5 2.5 0 0 0 2.829 2.829" />

<path

d="M3.35 5.47q-.27.24-.518.487A13 13 0 0 0 1.172 8l.195.288c.335.48.83 1.12 1.465 1.755C4.121 11.332 5.881 12.5 8 12.5c.716 0 1.39-.133 2.02-.36l.77.772A7 7 0 0 1 8 13.5C3 13.5 0 8 0 8s.939-1.721 2.641-3.238l.708.709zm10.296 8.884-12-12 .708-.708 12 12z" />

</svg>

</div>

<div class="signup-input">

<label>비밀번호 확인</label>

<input name="password-check" type="password-check" placeholder="비밀번호를 다시 한 번 입력해주세요" />

<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"

class="bi bi-eye-slash" viewBox="0 0 16 16">

<path

d="M13.359 11.238C15.06 9.72 16 8 16 8s-3-5.5-8-5.5a7 7 0 0 0-2.79.588l.77.771A6 6 0 0 1 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13 13 0 0 1 14.828 8q-.086.13-.195.288c-.335.48-.83 1.12-1.465 1.755q-.247.248-.517.486z" />

<path

d="M11.297 9.176a3.5 3.5 0 0 0-4.474-4.474l.823.823a2.5 2.5 0 0 1 2.829 2.829zm-2.943 1.299.822.822a3.5 3.5 0 0 1-4.474-4.474l.823.823a2.5 2.5 0 0 0 2.829 2.829" />

<path

d="M3.35 5.47q-.27.24-.518.487A13 13 0 0 0 1.172 8l.195.288c.335.48.83 1.12 1.465 1.755C4.121 11.332 5.881 12.5 8 12.5c.716 0 1.39-.133 2.02-.36l.77.772A7 7 0 0 1 8 13.5C3 13.5 0 8 0 8s.939-1.721 2.641-3.238l.708.709zm10.296 8.884-12-12 .708-.708 12 12z" />

</svg>

</div>

<button class="signup-button">회원가입</button>

</form>

wlgns2223 · 2024-06-02T09:17:58Z

signup/index.html

+        <div class="signup">
+            <div class="signup-input">
+                <label>이메일</label>
+                <input name="email" type="email" placeholder="이메일을 입력해주세요" />


type을 잘 적어주셨네요 ! input type을 적어줌으로써 브라우저가 몇가지 유용한 동작을 기본제공하는데 어떤것들이 있을까요 ?

wlgns2223 · 2024-06-02T09:19:39Z

signup/index.html

+            </div>
+            <div class="signup-input">
+                <label>닉네임</label>
+                <input name="nickname" type="nickname" placeholder="닉네임을 입력해주세요" />


input type 속성에는 nickname이라는 속성은 없습니다.
input type 속성에 대해서 다시 한번 학습 부탁드립니다 ~ ㅎㅎ

https://tcpschool.com/html-tag-attrs/input-type#google_vignette

wlgns2223 · 2024-06-02T09:20:49Z

signup/index.html

+                <label>이메일</label>
+                <input name="email" type="email" placeholder="이메일을 입력해주세요" />


label과 input을 어떤 속성을 통해 연결시켜줘야합니다. 현재로써는 label이 어는 input 의 라벨인지 알 수 없습니다. 어떻게 할 수 있을까요?

wlgns2223 · 2024-06-02T09:21:31Z

signup/index.html

+            <div class="signup-input">
+                <label>비밀번호</label>
+                <input name="password" type="password" placeholder="비밀번호를 입력해주세요" />
+                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"


비밀번호가 보이도록 사용자로부터 이벤트를 유발시키는것이기 때문에 svg를 button으로 감싸주면 좀 더 좋다고 생각합니다.

wlgns2223 · 2024-06-02T09:22:11Z

signup/index.html

+
+            </div>
+
+            <button class="signup-button">회원가입</button>


폼을 서버로 제출하기 위해서는 form안에서 button은 어느 type을 가져야 할까요?

wlgns2223 · 2024-06-02T09:22:52Z

스프린트 미션 하시느라 수고많으셨습니다 !

Injaeeee added 6 commits May 23, 2024 17:05

Create index.html

4acbea9

Delete index.html

4917d4e

feat : panda main

13e2076

file 생성

cf3e191

login signup page

2ebcd23

login signup

236e1dd

Injaeeee added the 매운맛🔥 뒤는 없습니다. 그냥 필터 없이 말해주세요. 책임은 제가 집니다. label May 31, 2024

Injaeeee assigned Injaeeee and unassigned Injaeeee May 31, 2024

Injaeeee requested a review from wlgns2223 May 31, 2024 08:37

wlgns2223 reviewed Jun 2, 2024

View reviewed changes

Injaeeee added 4 commits June 3, 2024 15:19

feat

f6297b6

feat

4a43007

Merge branch 'Basic-정인재-sprint1' into Basic-정인재-sprint2

1f448a2

code modification

1ad5b17

Injaeeee closed this Jun 4, 2024

Injaeeee deleted the Basic-정인재-sprint2 branch June 4, 2024 06:46

Injaeeee restored the Basic-정인재-sprint2 branch June 4, 2024 06:46

wlgns2223 mentioned this pull request Jun 5, 2024

[정인재] Sprint2 #72

Merged

10 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[정인재] Sprint2 #51

[정인재] Sprint2 #51

Injaeeee commented May 31, 2024 •

edited

Loading

wlgns2223 commented Jun 2, 2024

wlgns2223 commented Jun 2, 2024

wlgns2223 commented Jun 2, 2024

wlgns2223 Jun 2, 2024

wlgns2223 Jun 2, 2024

wlgns2223 Jun 2, 2024

wlgns2223 Jun 2, 2024

wlgns2223 Jun 2, 2024

wlgns2223 Jun 2, 2024

wlgns2223 commented Jun 2, 2024

		<label>이메일</label>
		<input name="email" type="email" placeholder="이메일을 입력해주세요" />

[정인재] Sprint2 #51

[정인재] Sprint2 #51

Conversation

Injaeeee commented May 31, 2024 • edited Loading

요구사항

기본

심화

주요 변경사항

스크린샷

멘토에게

wlgns2223 commented Jun 2, 2024

wlgns2223 commented Jun 2, 2024

wlgns2223 commented Jun 2, 2024

wlgns2223 Jun 2, 2024

Choose a reason for hiding this comment

wlgns2223 Jun 2, 2024

Choose a reason for hiding this comment

wlgns2223 Jun 2, 2024

Choose a reason for hiding this comment

wlgns2223 Jun 2, 2024

Choose a reason for hiding this comment

wlgns2223 Jun 2, 2024

Choose a reason for hiding this comment

wlgns2223 Jun 2, 2024

Choose a reason for hiding this comment

wlgns2223 commented Jun 2, 2024

Injaeeee commented May 31, 2024 •

edited

Loading