[오세진] sprint 3 #100

sejin5 · 2025-08-04T08:02:39Z

요구사항

기본

공통

브라우저에 현재 보이는 화면의 영역(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 랜딩 페이지(“/”) 공유 시 좌측 예시와 같은 미리보기를 볼 수 있도록 랜딩 페이지 메타 태그를 설정해 주세요.
미리보기에서 제목은 “판다 마켓”, 설명은 “일상의 모든 물건을 거래해보세요”로 설정합니다.
주소와 이미지는 자유롭게 설정하세요.

스크린샷

main-tablet	main-mobile	login-mobile

멘토에게

셀프 코드 리뷰를 통해 질문 이어가겠습니다.

sejin5 · 2025-08-04T08:05:20Z

css/main-style.css

+  .main-top > .container > .main-core-img {
+    width: 120%;
+    object-fit: contain;
+    overflow: hidden;
+  }


figma를 기준으로 봤을때 일상의 모든 물건을 거래해 보세요 하단의 이미지가 PC, tablet에 비해서 조금 확장된것 처럼 보였씁니다. 그래서 120%로 width 값을 주었는데, 개발자 도구를 통해서 확인할때 저 이미지가 body width보다 더 튀어나올때도 있고, 아닐때도 있더라고요. 120%로 설정하지 않는게 더 나았을까요?

음 ~ 해당 사항은 디자이너분과 소통하면서 "확장을 의도한 것인지"를 먼저 확정하고 스타일링 해야될 것으로 보이네요 ! 😉
배경이미지를 의도한 것인지 아니면 이미지를 의도한 것인지도 알아두면 좋을 것 같네요 !

미션 진행 관점에서는 출력되는 UI가 유사하다면 문제 없을 것으로 사료됩니다. 😊

kiJu2 · 2025-08-06T02:45:24Z

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

kiJu2 · 2025-08-06T02:50:08Z

css/main-style.css

+  .main-top > .container > .main-core-img {
+    width: 120%;
+    object-fit: contain;
+    overflow: hidden;
+  }


음 ~ 해당 사항은 디자이너분과 소통하면서 "확장을 의도한 것인지"를 먼저 확정하고 스타일링 해야될 것으로 보이네요 ! 😉
배경이미지를 의도한 것인지 아니면 이미지를 의도한 것인지도 알아두면 좋을 것 같네요 !

미션 진행 관점에서는 출력되는 UI가 유사하다면 문제 없을 것으로 사료됩니다. 😊

kiJu2 · 2025-08-06T02:51:09Z

css/main-style.css

+  }
+}
+
+@media (max-width: 767px) and (min-width: 375px) {


굿굿 ! 반응형을 잘 적용하셨군요 👍👍

kiJu2 · 2025-08-06T02:52:06Z

css/main-style.css

+  header .navi {
+    margin: 0 16px;
+    padding: 12px 0;
+  }


(제안) header의 경우 한 문서에 여러개가 있을 수 있으므로 왠만하면 class로 만들어두는걸 추천드려봅니다 😉

클래스는 재사용이 가능하며, 자유롭게 태그에 스타일을 붙일 수 있어서 유지보수에 용이하므로 단순히 스타일을 위해서라면 class를 추천드려요 !

좀 더 자세히 🤔

유지보수가 어려워질 수 있어요.

특정 p 태그에만 다른 스타일을 적용하려면 추가적인 선택자를 작성하거나 기존 스타일을 덮어써야 하므로 유지보수가 어려워집니다.

태그 의미를 명확히 부여하기 어려워요.

스타일링을 태그에 직접 적용하면, 태그가 어떤 의미를 가지는지 어렵기에 가독성이 보다 좋지 못할 수 있어요.

만약 다음 코드의 스타일을 태그 선택자로만 지정한다면 ?

<p class="error-message">오류가 발생했습니다.</p>

물론 전역적인 것을 의미한다면 일정 허용될 수 있어요.

예를 들어서 p의 기본 마진을 없애고 싶다면 다음과 같이 작성할 수 있을거예요:

p { margin: 0; }

그렇지만 특정 스타일을 지정하고 싶다면 다음과 같이 작성해볼 수 있어요:

.paragraph { font-size: 16px; color: #333; } .highlight { background-color: yellow; }

kiJu2 · 2025-08-06T02:52:40Z

css/main-style.css

+  footer {
+    height: 160px;
+  }


footer 또한 방금 코멘트와 동일합니다 😊

kiJu2 · 2025-08-06T02:52:57Z

css/main-style.css

+  footer .footer-list {
+    display: grid;
+    grid-template-areas:
+      "policy sns"
+      ". ."
+      "copyright .";
+    grid-template-columns: 1fr 1fr;
+    gap: 16px;
+    padding: 20px 16px;
+    align-items: center;


크으 ~ 그리드를 잘 활용하셨네요 👍

kiJu2 · 2025-08-06T02:54:14Z

index.html

    <title>판다마켓</title>
    <link rel="stylesheet" href="css/reset.css" />
    <link rel="stylesheet" href="css/main-style.css" />
+    <meta property="og:image" content="./images/5d7d01ce3d5d3c8c.jpg" />


혹시 해당 이미지 정상적으로 동작이 될까요?

Suggested change

<meta property="og:image" content="./images/5d7d01ce3d5d3c8c.jpg" />

<meta property="og:image" content="/images/5d7d01ce3d5d3c8c.jpg" />

. 때문에 잘못된 경로로 인식하지 않을까 싶어서요. 🤔
js의 경우 ./를 하면 잘 인식하는데 html의 경우 {baseULR}./images처럼 동작되지 않을까 염려되어 확인 요청드립니다 😉

kiJu2 · 2025-08-06T02:54:44Z

index.html

+    <meta property="og:image" content="./images/5d7d01ce3d5d3c8c.jpg" />
+    <meta property="og:title" content="판다 마켓" />
+    <meta property="og:description" content="일상의 모든 물건을 거래해보세요" />
+    <meta property="og:url" content="https://www.codeit.kr" />


og:url은 세진님께서 배포하신 링크로 작성하시는게 올바릅니다 😉

Suggested change

<meta property="og:url" content="https://www.codeit.kr" />

<meta property="og:url" content="https://세진님판다마켓URL" />

kiJu2 · 2025-08-06T02:56:34Z

index.html

-              인기 상품을 <br />
-              확인해 보세요
-            </h2>
+            <h2 class="main-title">인기 상품을 <br class="invisible" />확인해 보세요</h2>


invisible이 반응형에 따라 활성화 되는게 의도된거라면 그 조건도 함께 이름에 포함해볼 수 있습니다 !

Suggested change

<h2 class="main-title">인기 상품을 <br class="invisible" />확인해 보세요</h2>

<h2 class="main-title">인기 상품을 <br class="mobile-invisible" />확인해 보세요</h2>

혹은 sm-invisible, md-invisible과 같이 작성해볼 수도 있겠네요 😊

kiJu2 · 2025-08-06T02:57:05Z

images/5d7d01ce3d5d3c8c.jpg

ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ 햄스터가 참 귀엽네요 😂😂

kiJu2 · 2025-08-06T02:59:33Z

수고하셨습니다 세진님 !
항상 열심히 하시는 모습이 보기 좋습니다 !
아마 금방 리액트 미션까지 수행하실 수 있을 것으로 보이네요.
기초 프로젝트 전까지 꼭 리액트 미션도 수행해보셨으면 합니다 ! 세진님이라면 충분히 하실 수 있으실거라 생각되어서요 😊😊

무튼, 무쪼록 미션 수행하시느라 정말 수고 많으셨습니다.
궁금하신 점 있으시면 편하게 DM주세요 세진님 !

sejin5 added 8 commits July 14, 2025 17:43

Style: 간편로그인 div 에서 ul로 변경

85f1ba2

Design: CSS color 변수명 변경

eca1d79

Style: input tag 속성 추가

194e14e

Design: 비밀번호 input img 속성 변경

f6718b3

Design: main index tablet UI edit

001e464

Design: main index UI mobile UI edit

0658554

Design: sign.css mobile UI edit

34f3214

Feat: og meta add

7bbcf83

sejin5 self-assigned this Aug 4, 2025

sejin5 added the 매운맛🔥 뒤는 없습니다. 그냥 필터 없이 말해주세요. 책임은 제가 집니다. label Aug 4, 2025

sejin5 commented Aug 4, 2025

View reviewed changes

sejin5 requested a review from kiJu2 August 4, 2025 08:31

kiJu2 approved these changes Aug 6, 2025

View reviewed changes

kiJu2 merged commit 93dba34 into codeit-bootcamp-frontend:Basic-오세진 Aug 6, 2025

	<meta property="og:image" content="./images/5d7d01ce3d5d3c8c.jpg" />
	<meta property="og:image" content="/images/5d7d01ce3d5d3c8c.jpg" />

	<meta property="og:url" content="https://www.codeit.kr" />
	<meta property="og:url" content="https://세진님판다마켓URL" />

	<h2 class="main-title">인기 상품을 <br class="invisible" />확인해 보세요</h2>
	<h2 class="main-title">인기 상품을 <br class="mobile-invisible" />확인해 보세요</h2>

[오세진] sprint 3 #100

[오세진] sprint 3 #100

Uh oh!

Conversation

sejin5 commented Aug 4, 2025

요구사항

기본

공통

랜딩 페이지

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

심화

스크린샷

멘토에게

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

kiJu2 commented Aug 6, 2025

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

굿굿 ! 반응형을 잘 적용하셨군요 👍👍

Uh oh!

Choose a reason for hiding this comment

(제안) header의 경우 한 문서에 여러개가 있을 수 있으므로 왠만하면 class로 만들어두는걸 추천드려봅니다 😉

좀 더 자세히 🤔

유지보수가 어려워질 수 있어요.

태그 의미를 명확히 부여하기 어려워요.

물론 전역적인 것을 의미한다면 일정 허용될 수 있어요.

Uh oh!

Choose a reason for hiding this comment

footer 또한 방금 코멘트와 동일합니다 😊

Uh oh!

Choose a reason for hiding this comment

크으 ~ 그리드를 잘 활용하셨네요 👍

Uh oh!

Choose a reason for hiding this comment

혹시 해당 이미지 정상적으로 동작이 될까요?

Uh oh!

Choose a reason for hiding this comment

og:url은 세진님께서 배포하신 링크로 작성하시는게 올바릅니다 😉

Uh oh!

Choose a reason for hiding this comment

invisible이 반응형에 따라 활성화 되는게 의도된거라면 그 조건도 함께 이름에 포함해볼 수 있습니다 !

Uh oh!

Choose a reason for hiding this comment

ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ 햄스터가 참 귀엽네요 😂😂

Uh oh!

kiJu2 commented Aug 6, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

(제안) `header`의 경우 한 문서에 여러개가 있을 수 있으므로 왠만하면 `class`로 만들어두는걸 추천드려봅니다 😉

`footer` 또한 방금 코멘트와 동일합니다 😊

`og:url`은 세진님께서 배포하신 링크로 작성하시는게 올바릅니다 😉

`invisible`이 반응형에 따라 활성화 되는게 의도된거라면 그 조건도 함께 이름에 포함해볼 수 있습니다 !