[이형준]sprint2 #41

leehj322 · 2024-05-31T01:55:15Z

요구사항

기본

Github에 PR(Pull Request)을 만들어서 미션을 제출합니다.
Netlify에 파일 배포가 아닌 포크한 Github 레포지토리로 연결합니다.
피그마 디자인에 맞게 페이지를 만들어 주세요.
React와 같은 UI 라이브러리를 사용하지 않고 진행합니다.

메인페이지

메인 페이지 상단 nav바 스크롤시에도 상단에 고정되도록 변경합니다.

로그인 페이지, 회원가입 페이지 공통

"판다마켓" 로고 클릭 시 루트 페이지("/")로 이동합니다.
로그인 페이지, 회원가입 페이지 모두 로고 위 상단 여백이 동일합니다.
input 요소에 focus in 일 때, 테두리 색상은 #3692FF 입니다.
input 요소에 focus out 일 때, 테두리는 없습니다.
SNS 아이콘들은 클릭시 각각 실제 서비스 홈페이지로 이동합니다.

로그인 페이지

"회원가입"버튼 클릭 시 "/signup" 페이지로 이동합니다.

회원가입 페이지

"로그인"버튼 클릭 시 "/login" 페이지로 이동합니다.

심화

palette에 있는 color 값들을 css 변수로 등록하고 사용해 주세요.
비밀번호 input 요소 위에 비밀번호를 확인할 수 있는 아이콘을 추가해 주세요.

주요 변경사항

로그인/회원가입 페이지 배포
디렉토리 구조 변경
1차 피드백 반영
- 사용하지 않는 이미지 파일 제거
- meta, link, img 태그의 닫는기호(/>) 추가
- class 이름 케밥케이스로 수정
- px 정수값으로 수정
css 파일 구조 변경 (global.css + reset.css 적용)

사이트 배포 링크

https://leehj322-codeit.netlify.app/

스크린샷

멘토에게

Netlify에서 배포하는 과정에서 Base directory에 index.html을 따로 빼놓지 않으면 사이트가 제대로 배포되지 않았는데, 혹시 index.html을 폴더 최상단에 위치 시키는게 필수인가요?

1. Add prototype of login and sign-up page 2. Fix all directory structure 3. Fix html - Close symbol of link, meta and img tag

스프린트 미션1과 미션2의 branch 설정을 해주려 했으나 주강사님과의 질문을 통해 미션2까지는 Basic-이형준 branch에서 계속 진행하고 미션3부터 branch를 새로 생성해서 진행하는 것으로 함.

1. Add favicon 2. Separate homepage css (home.css -> global.css, reset.css, home.css) 3. Edit HTML class name to kebab case 4. Add error-red color value to global.css 5. Fix decimal unit px to int unit

Netlify에 배포할 경우 메인페이지의 index.html 파일이 base directory에 있어야 정상적으로 css와 image가 로드 됨을 확인하고 수정함.

jyh0521

과제 하느라 고생하셨습니다! 클래스 명 잘 작성해주셨네요.

jyh0521 · 2024-06-02T13:14:46Z

css/base/global.css

전역적으로 사용될 css들 따로 파일로 만드신거 좋네요!

jyh0521 · 2024-06-02T13:15:38Z

css/base/reset.css

reset css 부분을 하나로 합치지 않고 파일로 따로 구분해서 관리해주시는 것도 좋은 것 같습니다.

jyh0521 · 2024-06-02T13:16:18Z

css/home.css

  justify-content: space-between;
  align-items: center;
+  position: sticky;


sticky 사용하신거 좋네요! 추가로 sticky와 fixed의 차이점도 공부해보시면 좋을 것 같습니다.

jyh0521 · 2024-06-02T13:18:28Z

css/home.css

+.right-main .content-block h3,
+.right-main .content-block p {


이런 경우, 새로운 class 명을 하나 추가해서 해당 h3와 p 태그에 적용시켜주는 것도 좋습니다.

jyh0521 · 2024-06-02T16:07:16Z

css/login.css

+}
+
+.simple-login {
+  background-color: #e6f2ff;


이 색깔도 변수로 사용해주시면 좋겠네요!

jyh0521 · 2024-06-02T16:08:01Z

index.html

@@ -3,33 +3,41 @@
 <html lang="ko">
  <head>
    <meta charset="utf-8">
+    <link rel="icon" href="/images/logo.png?v=2"/>


v=2는 어떤 의미인가요?

파비콘이 제대로 적용되지 않아서 사용하였습니다. 참고한 링크입니다.
https://stackoverflow.com/questions/19104795/browser-doesnt-show-favicon-ico-but-it-exists

jyh0521 · 2024-06-02T16:09:09Z

index.html

          <div>
-            <img class="main-page-img" src="/images/img_home_01@3x.png" alt="홈 이미지 1">
+            <img class="main-page-img" src="/images/img_home_01.png" alt="홈 이미지 1" />


홈 화면에 이미지를 01, 02, 03 이런식으로 관리해주셨는데, 좀 더 구체적인 이름을 지어주시면 나중에 유지보수할 때 더 수월해집니다!

jyh0521 · 2024-06-02T16:10:26Z

pages/login/index.html

+          <h3>이메일</h3>
+          <input type="email"
+           placeholder="이메일을 입력해주세요"
+           onfocus="this.placeholder=''"


무엇인가 입력하면 placeholder는 자동으로 사라져서 이 로직은 넣어주시지 않아도 괜찮습니다!

jyh0521 · 2024-06-02T16:12:57Z

Netlify에서 배포하는 과정에서 Base directory에 index.html을 따로 빼놓지 않으면 사이트가 제대로 배포되지 않았는데, 혹시 index.html을 폴더 최상단에 위치 시키는게 필수인가요?

저도 Netlify에 html 파일만 배포해본 적은 없어서 정확히는 모르겠지만, 루트 경로에 페이지를 포함해줘야 할 수도 있을 것 같네요. 혹시 에러 화면 같은게 있으시면 같이 첨부해주시면 좋을 것 같습니다.

leehj322 · 2024-06-03T02:31:53Z

Netlify에서 배포하는 과정에서 Base directory에 index.html을 따로 빼놓지 않으면 사이트가 제대로 배포되지 않았는데, 혹시 index.html을 폴더 최상단에 위치 시키는게 필수인가요?

저도 Netlify에 html 파일만 배포해본 적은 없어서 정확히는 모르겠지만, 루트 경로에 페이지를 포함해줘야 할 수도 있을 것 같네요. 혹시 에러 화면 같은게 있으시면 같이 첨부해주시면 좋을 것 같습니다.

Netlify 자체에서 별도로 에러가 발생하진 않았고 웹페이지 상에서 404 error 아니면 css와 img 폴더가 로드되지 않았습니다.

leehj322 and others added 7 commits May 28, 2024 14:53

Add login and sign-up page and Fix directory structure

7323f15

1. Add prototype of login and sign-up page 2. Fix all directory structure 3. Fix html - Close symbol of link, meta and img tag

Add visibility button at password input

48e528b

refactor: 브랜치를 요구 양식대로 수정하기 위해 모두 delete

5bba38c

Merge branch 'codeit-bootcamp-frontend:Basic-이형준' into Basic-이형준

6d5c7aa

refactor(all): Recover all flies

f6e4a88

스프린트 미션1과 미션2의 branch 설정을 해주려 했으나 주강사님과의 질문을 통해 미션2까지는 Basic-이형준 branch에서 계속 진행하고 미션3부터 branch를 새로 생성해서 진행하는 것으로 함.

refactor(homepage): Add favicon and Reflect code review received

5602ddf

1. Add favicon 2. Separate homepage css (home.css -> global.css, reset.css, home.css) 3. Edit HTML class name to kebab case 4. Add error-red color value to global.css 5. Fix decimal unit px to int unit

build(mainpage): Move mainpage(index.html) to base directory

37b06e4

Netlify에 배포할 경우 메인페이지의 index.html 파일이 base directory에 있어야 정상적으로 css와 image가 로드 됨을 확인하고 수정함.

leehj322 requested a review from jyh0521 May 31, 2024 01:55

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

jyh0521 approved these changes Jun 2, 2024

View reviewed changes

jyh0521 merged commit 037e182 into codeit-bootcamp-frontend:Basic-이형준 Jun 2, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[이형준]sprint2 #41

[이형준]sprint2 #41

leehj322 commented May 31, 2024 •

edited

Loading

jyh0521 left a comment

jyh0521 Jun 2, 2024

jyh0521 Jun 2, 2024

jyh0521 Jun 2, 2024

jyh0521 Jun 2, 2024

jyh0521 Jun 2, 2024

jyh0521 Jun 2, 2024

leehj322 Jun 3, 2024

jyh0521 Jun 2, 2024

jyh0521 Jun 2, 2024

jyh0521 commented Jun 2, 2024

leehj322 commented Jun 3, 2024

Netlify에서 배포하는 과정에서 Base directory에 index.html을 따로 빼놓지 않으면 사이트가 제대로 배포되지 않았는데, 혹시 index.html을 폴더 최상단에 위치 시키는게 필수인가요?

		.right-main .content-block h3,
		.right-main .content-block p {

[이형준]sprint2 #41

[이형준]sprint2 #41

Conversation

leehj322 commented May 31, 2024 • edited Loading

요구사항

기본

메인페이지

로그인 페이지, 회원가입 페이지 공통

로그인 페이지

회원가입 페이지

심화

주요 변경사항

사이트 배포 링크

스크린샷

멘토에게

jyh0521 left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jyh0521 commented Jun 2, 2024

Netlify에서 배포하는 과정에서 Base directory에 index.html을 따로 빼놓지 않으면 사이트가 제대로 배포되지 않았는데, 혹시 index.html을 폴더 최상단에 위치 시키는게 필수인가요?

leehj322 commented Jun 3, 2024

Netlify에서 배포하는 과정에서 Base directory에 index.html을 따로 빼놓지 않으면 사이트가 제대로 배포되지 않았는데, 혹시 index.html을 폴더 최상단에 위치 시키는게 필수인가요?

leehj322 commented May 31, 2024 •

edited

Loading