Skip to content

Conversation

@TAEINJEONG
Copy link
Collaborator

@TAEINJEONG TAEINJEONG commented Mar 6, 2025

요구사항

기본

  • 브라우저에 현재 보이는 화면의 영역(viewport) 너비를 기준으로 분기되는 반응형 디자인을 적용합니다.
    • PC: 1200px 이상
    • Tablet: 768px 이상 ~ 1199px 이하
    • Mobile: 375px 이상 ~ 767px 이하
    • 375px 미만 사이즈의 디자인은 고려하지 않습니다
  • Tablet 사이즈로 작아질 때 “판다마켓” 로고의 왼쪽에 여백 24px, “로그인” 버튼 오른쪽 여백 24px을 유지할 수 있도록 “판다마켓” 로고와 “로그인" 버튼의 간격이 가까워집니다.
  • Mobile 사이즈로 작아질 때 “판다마켓” 로고의 왼쪽에 여백 16px, “로그인” 버튼 오른쪽 여백 16px을 유지할 수 있도록 “판다마켓” 로고와 “로그인" 버튼의 간격이 가까워집니다.
  • 화면 영역이 줄어들면 “Privacy Policy”, “FAQ”, “codeit-2024”이 있는 영역과 SNS 아이콘들이 있는 영역의 간격이 줄어듭니다.
  • Tablet 사이즈에서 내부 디자인은 PC사이즈와 동일합니다.
  • Mobile 사이즈에서 좌우 여백 16px 제외하고 내부 요소들이 너비를 모두 차지합니다.
  • Mobile 사이즈에서 내부 요소들의 너비는 기기의 너비가 커지는 만큼 커지지만 400px을 넘지 않습니다.

심화

  • 페이스북, 카카오톡, 디스코드, 트위터 등 SNS에서 Linkbrary 랜딩 페이지(“/”) 공유 시 좌측 예시와 같은 미리보기를 볼 수 있도록 랜딩 페이지 메타 태그를 설정해 주세요.
  • 미리보기에서 제목은 “판다 마켓”, 설명은 “일상의 모든 물건을 거래해보세요”로 설정합니다.
  • 주소와 이미지는 자유롭게 설정하세요.

주요 변경사항

  • 렌딩 페이지 및 로그인, 회원가입 페이지 반응형 디자인 기능 추가
  • OG 태그를 활용하여 SNS 공유시 제목과, 설명, 이미지 설정

스크린샷

렌딩 페이지 tablet 비율 반응형

스크린샷 2025-03-06 오후 7 57 46

렌딩 페이지 mobile 비율 반응형

스크린샷 2025-03-06 오후 7 57 58

로그인 페이지 mobile 비율 반응형

스크린샷 2025-03-06 오후 7 58 09

시연 영상

2025-03-06.8.00.23.mov

카카오톡 공유시

스크린샷 2025-03-06 오후 7 26 24

디스코드 공유시

스크린샷 2025-03-06 오후 7 25 29

페이스북 공유시

스크린샷 2025-03-06 오후 7 26 46

배포 링크

https://spiffy-belekoy-52ef46.netlify.app/

멘토에게

  • 이번에도 잘 부탁드립니다!
  • 제가 놓친 부분이 있다면 과감하게 말씀 부탁드립니다!

@kiJu2 kiJu2 changed the base branch from main to Basic-정태인 March 10, 2025 01:38
@kiJu2
Copy link
Collaborator

kiJu2 commented Mar 10, 2025

스프리트 미션 하시느라 수고 많으셨어요.
학습에 도움 되실 수 있게 꼼꼼히 리뷰 하도록 해보겠습니다. 😊

@kiJu2 kiJu2 closed this Mar 10, 2025
@kiJu2 kiJu2 reopened this Mar 10, 2025
Comment on lines +1 to +12
* {
--blue: #3692FF;
--gray-50: #F9FAFB;
--gray-100: #F3F4F6;
--gray-200: #E5E7EB;
--gray-400: #9CA3AF;
--gray-500: #6B7280;
--gray-600: #4B5563;
--gray-700: #374151;
--gray-800: #1F2937;
--gray-900: #111827;
} No newline at end of file
Copy link
Collaborator

Choose a reason for hiding this comment

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

굿굿 ! 컬러 팔레트를 작성하셨군요 !

재사용하기 용이해보이네요 ㅎㅎ. 피드백 반영 좋습니다 ! 👍👍



/* tablet 사이즈 */
@media only screen and (max-width: 1199px) {
Copy link
Collaborator

Choose a reason for hiding this comment

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

굿굿 ~ 적절한 반응형 좋습니다 👍

@media only screen and (max-width: 1199px) {
.header-nav {
padding: 10px 24px;
width: calc(100% - 48px);
Copy link
Collaborator

Choose a reason for hiding this comment

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

(제안) 혹시 margin으로 대할 수 있지 않을까요?

Suggested change
width: calc(100% - 48px);
margin: 0 24px;

Comment on lines +13 to +25
<meta property="og:type" content="website">
<meta property="og:url" content="https://shiny-gnome-34241f.netlify.app/">
<meta property="og:title" content="판다마켓">
<meta property="og:description" content="일상의 모든 물건을 거래해보세요">
<meta property="og:image" content="./assets/images/logo.svg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:url" content="https://shiny-gnome-34241f.netlify.app/">
<meta name="twitter:title" content="판다마켓">
<meta name="twitter:description" content="일상의 모든 물건을 거래해보세요">
<meta name="twitter:image" content="./assets/images/logo.svg">
Copy link
Collaborator

Choose a reason for hiding this comment

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

크으 SEO에 잘 신경쓰고 계시군요 !

놓칠 수 있는 부분일 수 있는데 꼼꼼히 잘 작성하셨네요. 훌륭합니다 👍

<div class="input-container">
<label class="text-gray800 label-text">이메일</label>
<input class="text-gray800 gray100 styled-input" placeholder="이메일을 입력해 주세요"/>
<input class="text-gray800 gray100 styled-input" placeholder="이메일을 입력해 주세요" type="email"/>
Copy link
Collaborator

Choose a reason for hiding this comment

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

굿굿 ~ 타입도 적절히 적용 잘 변경하셨네요 !

다음과 같은 속성도 고려해볼 수 있겠어요:

  • name: name<form>을 사용해서 추 후 submit을 사용하여 접근할 때 사용될 수 있습니다.
  • required: required<form> 내부에서 서식을 작성하지 않았을 때 브라우저에서 유저에게 피드백을 줄 수 있습니다.

Copy link
Collaborator

Choose a reason for hiding this comment

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

저번에도 전달드리기는 했으나 한 번 다시 언급드립니다 😊

mdn 공식 문서

@kiJu2 kiJu2 merged commit 3fef37b into codeit-bootcamp-frontend:Basic-정태인 Mar 10, 2025
1 check failed
@kiJu2
Copy link
Collaborator

kiJu2 commented Mar 10, 2025

수고하셨습니다 태인님 !
칭찬만 하다가 끝난 느낌이네요 ㅎㅎㅎ..
이 전에 비해 필요한 부분들을 적절히 잘 수정하셨습니다 👍👍
꾸준히 미션 수행하시는 모습 보기 너무 좋네요 😊

미션 수행하시느라 정말 수고 많으셨습니다 !

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants