[김서윤] 스프린트 미션 1,2 by seoyoon-k · Pull Request #26 · codeit-sprint-fullstack/13-sprint-mission-fe

seoyoon-k · 2026-04-01T05:36:18Z

요구사항

기본

미션 1️⃣

"판다마켓" 로고 클릭 시 루트 페이지로 이동합니다.
버튼 클릭 시 알맞은 페이지로 이동합니다. (/login, /items, /privacy, /faq)
페이스북, 트위터, 유튜브, 인스타그램 아이콘을 클릭 시 각각의 홈페이지로 새로운 창이 열리면서 이동합니다.
최상단에 GNB를 고정 및 레이아웃 반응형 설정을 합니다.
클릭으로 기능이 동작해야 하는 경우, 사용자가 클릭할 수 있는 요소임을 알 수 있도록 CSS 속성 cursor: pointer로 설정합니다.

미션 2️⃣

적절한 커밋 메시지를 남깁니다. (type에 따라 작성)
"판다마켓" 로고 클릭 시 루트 페이지로 이동합니다.
SNS 아이콘들은 클릭 시 각각 "https://www.google.com/", "https://www.kakaocorp.com/page/" 으로 이동합니다.
input 요소에 focus in 일 때, 테두리가 생기며 색상은 #3692FF입니다.
버튼 클릭 시 알맞은 페이지로 이동합니다. (/signup, /login)

심화

미션 1️⃣

reset.css를 설정합니다.
rem 을 사용하여 사용자의 브라우저 설정에 따라 기본 폰트 크기 설정이 변화함에 따라서 페이지의 요소 간 간격, 요소의 크기, font-size 등 모든 크기와 관련된 값이 크고 작아지도록 설정합니다.

미션 2️⃣

palette에 있는 color값들을 css 변수로 등록해서 사용합니다.
구글 애널리틱스로 방문자 수 확인하기 할 수 있도록 설정합니다.
비밀번호, 비밀번호 확인 input 요소 오른쪽에 비밀번호를 확인할 수 있는 눈 모양 아이콘을 추가합니다.

주요 변경사항

미션 1

메인 페이지 마크업 작업

미션 2

로그인/회원가입 페이지 마크업 작업
github와 netlify 연동 작업 -> 🔗바로가기

스크린샷

미션1 메인

미션2 로그인

미션2 회원가입

멘토에게

안녕하세요:)
처음 작업해본 만큼 부족함이 많습니다. ㅠㅜ
commit하고 수정한 부분들이 있어서 PR도 약간 너덜너덜합니다. 앞으로 더 깔끔하게 할 수 있게 확인하겠습니다..!
그리고 질문이 있는데, css에 class를 남용한게 아닌가 싶은데 class를 더 효율적으로 쓰는 방식이 있을까요?
디자인 시안 파일에 컴포넌트단위로 작업이 잘 되어 있지 않아서, 코드에서 구조화하는 방향이 해당 스프린트 프로젝트가 지향하는 방향인 것 같아 동일하거나 흡사한 코드를 효율적으로 재사용하는 방안이 궁금합니다.
그리고 페이지단위로 공통인 스타일과 로컬인 스타일이 있는데, 아직 코딩을 잘 몰라 정리가 두려워서 나누지 못했으나 추후엔 페이지 단위로 분리하는 것이 좋은가요?
감사합니다

kiJu2 · 2026-04-07T13:12:17Z

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

kiJu2 · 2026-04-08T01:30:55Z

안녕하세요:) 처음 작업해본 만큼 부족함이 많습니다. ㅠㅜ commit하고 수정한 부분들이 있어서 PR도 약간 너덜너덜합니다. 앞으로 더 깔끔하게 할 수 있게 확인하겠습니다..!

괜찮습니다 ! 처음엔 다 어렵죠 🥹🥹🥹

kiJu2 · 2026-04-08T01:31:00Z

그리고 질문이 있는데, css에 class를 남용한게 아닌가 싶은데 class를 더 효율적으로 쓰는 방식이 있을까요?

먼저, BEM 방식을 레퍼런스 해볼 수 있습니다 !
클래스를 잘 사용하는 방법에 대해서는 주관적인 의견이 포함될 수 있으나, 질문주신만큼 리뷰 하다가 코멘트 드릴게 있으면 적극적으로 의견드려볼게요 !

kiJu2 · 2026-04-08T01:50:16Z

디자인 시안 파일에 컴포넌트단위로 작업이 잘 되어 있지 않아서, 코드에서 구조화하는 방향이 해당 스프린트 프로젝트가 지향하는 방향인 것 같아 동일하거나 흡사한 코드를 효율적으로 재사용하는 방안이 궁금합니다.

피그마의 컴포넌트 & 이미지 페이지에서 컴포넌트가 어떻게 설정되어있는지 확인할 수 있습니다 !

재사용 하는 방법에 대해서는 리뷰하다가 도움드릴게 있으면 코멘트 드리도록 하겠습니다 😁

kiJu2 · 2026-04-08T01:54:41Z

그리고 페이지단위로 공통인 스타일과 로컬인 스타일이 있는데, 아직 코딩을 잘 몰라 정리가 두려워서 나누지 못했으나 추후엔 페이지 단위로 분리하는 것이 좋은가요?

오호.. 벌써부터 공통적인 스타일에 대해서 고민하기 시작했군요 !
정말 좋은 징조군요 ! 🥹🥹

페이지에서만 사용되는 스타일이라면 페이지 단위의 스타일 코드를 따로 만드시는게 좋고, 디자인 시스템(= button, input과 같은 컴포넌트 그리고 컬러 시스템 등)에 해당된다면 공통적인 스타일로 적용하시는게 좋겠군요 !

kiJu2 · 2026-04-08T01:56:39Z

commit 단위를 더욱 자주, 작게 해보시는건 어떠실까요?

git을 다룰 때 commit은 "언제 해야 하는가"를 생각해보신 적 있으신가요?
흔히 하는 말이 있습니다:

커밋은 합칠 수 있지만 나눌 수 없습니다.

그럼 커밋을 언제 해야 할까요?

저는 다음과 같은 룰을 지키며 커밋을 하는걸 권장 드립니다:

커밋을 하는 단위는 커밋 메시지 한 줄로 설명할 수 있는 행동
하나의 목표 혹은 액션이 달성될 때

커밋 타입도 한 번 고려해보세요 !

tl;dr:

커밋 메시지 형식

type: Subject

body

footer

기본적으로 3가지 영역(제목, 본문, 꼬리말)으로 나누어졌다.

메시지 type은 아래와 같이 분류된다. 아래와 같이 소문자로 작성한다.

| 태그       | 설명                                                       |
|------------|------------------------------------------------------------|
| `feat`     | 새로운 기능 추가                                           |
| `fix`      | 버그 수정                                                  |
| `docs`     | 문서 내용 변경                                             |
| `style`    | 포맷팅, 세미콜론 누락 등 코드 동작에 영향 없는 변경       |
| `refactor` | 코드 리팩토링                                              |
| `test`     | 테스트 코드 작성                                           |
| `chore`    | 빌드 수정, 패키지 설정 등 운영 코드 변경이 없는 작업       |

원문보기

kiJu2 · 2026-04-08T02:05:17Z

크으 ~ 파일 분류가 잘 되었네요.

assets/icon/ic-facebook.svg -> "svg 확장자를 가진 facebook 아이콘 에셋이다."
잘 읽혀집니다. 리소스 정리를 잘 하셨어요 !

(선택사항)

지극히 사견이지만, icon은 단수이며 아이콘들을 보관하고 있다 ~ 해서 icons로 지어도 될 것 같군요 !
또한, ic-*와 같은 파일 이름은 이미 경로 문맥(assets/icon/*) 상 잘 나타나있는 것으로 보이므로 빼셔도 될 것 같군요 ! 😉

kiJu2 · 2026-04-08T02:06:03Z

.gitignore를 작성해보시는게 어떨까요?

macos의 압축 과정에서 흔히 .DS_Store 파일이 들어가는 경우가 있습니다.
해당 파일은 프로젝트와 무관하므로 .gitignore에 다음과 같이 작성하시면 git의 추적을 무시할 수 있습니다.

.DS_Store

kiJu2 · 2026-04-08T02:06:36Z

굿굿 ! reset.css를 작성하셨군요 !

이제, 서윤님의 판다마켓은 대부분의 브라우저에서 동일한 UI를 제공해주겠어요 😁😁

kiJu2 · 2026-04-08T02:08:35Z

+:root {
+  --font-family-base: "PretendardVariable", sans-serif;
+
+  /* Font Size */
+  --font-size-3xl: 3.2rem;
+  --font-size-2xl: 2.4rem;
+  --font-size-xl: 2rem;
+  --font-size-2lg: 1.8rem;
+  --font-size-lg: 1.6rem;
+  --font-size-md: 1.4rem;
+  --font-size-sm: 1.3rem;
+  --font-size-xs: 1.2rem;
+
+  /* Line Height */
+  --line-height-3xl: 4.2rem;
+  --line-height-2xl: 3.2rem;
+  --line-height-xl: 3.2rem;
+  --line-height-2lg: 2.6rem;
+  --line-height-lg: 2.6rem;
+  --line-height-md: 2.4rem;
+  --line-height-sm: 2.2rem;
+  --line-height-xs-semibold: 2rem;
+  --line-height-xs: 1.8rem;
+
+  /* Font Weight */
+  --font-weight-bold: 700;
+  --font-weight-semibold: 600;
+  --font-weight-medium: 500;
+  --font-weight-regular: 400;
+
+  /* Primary Color */
+  --color-primary-100: #3692ff;
+  --color-primary-200: #1967d6;
+  --color-primary-300: #1251aa;
+
+  /* Error Color */
+  --color-error: #f74747;
+
+  /* Gray Color */
+  --color-secondary-900: #111827;
+  --color-secondary-800: #1f2937;
+  --color-secondary-700: #374151;
+  --color-secondary-600: #4b5563;
+  --color-secondary-500: #6b7280;
+  --color-secondary-400: #9ca3af;
+  --color-secondary-200: #e5e7eb;
+  --color-secondary-100: #f3f4f6;
+  --color-secondary-50: #f9fafb;
+}


크으 ~~ 디자인 시스템을 모두 미리 등록해두었다니.. 🫢🫢🫢

훌륭합니다 !
이렇게 해두면 생산성은 물론이고, 유지 관리비용도 현저히 줄어들 수 있겠네요 ! 멋진 방법입니다 !

kiJu2 · 2026-04-08T02:09:21Z

+.text-3xl-bold {
+  font-size: var(--font-size-3xl);
+  line-height: var(--line-height-3xl);
+  font-weight: var(--font-weight-bold);
+}
+.text-3xl-semibold {
+  font-size: var(--font-size-3xl);
+  line-height: var(--line-height-3xl);
+  font-weight: var(--font-weight-semibold);
+}
+
+.text-2xl-bold {
+  font-size: var(--font-size-2xl);
+  line-height: var(--line-height-2xl);
+  font-weight: var(--font-weight-bold);
+}


게다가, 타이포그래피도 클래스로 모두 정의해두셨군요 !

재사용하며 코드를 작성하기 정말 편해보입니다. 🤭🤭🤭
덤으로, 디자인 시스템이 추가되거나, 변경되어도 디자인 시스템이 중앙집중형으로 관리되고 있으므로 유지보수 관점에서도 돋보입니다 !
세팅을 잘 해두셨어요 ! 멋집니다 ! 👍

kiJu2 · 2026-04-08T02:16:08Z

+          <input
+            id="email"
+            class="account-input text-lg-regular"
+            type="email"
+            placeholder="이메일을 입력해주세요"
+          />


required나 name 속성도 고려해볼 수 있겠어요 !

name: name 은 <form>을 사용해서 추 후 submit을 사용하여 접근할 때 사용될 수 있습니다.

required: required는 <form> 내부에서 서식을 작성하지 않았을 때 브라우저에서 유저에게 피드백을 줄 수 있습니다.

추가로 사용성을 고려하신다면 autofocus라는 속성도 고려해볼 수 있겠어요 😉
[MDN - autofocus](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/autofocus)

(생각해보기)<input>에 대한 속성과 관련하여

<input>에는 용이한 속성들이 상당히 많습니다 !

숫자의 범위를 지정하는 max, min

글자 수를 제한하는 maxLenght, minLenght

그 외 의외의 type들 date, email, file, image ...
제공되는 유용한 속성들을 모르고 개발하게 되면 자바스크립트로 만들게 되는 경우도 있어요.

예를 들어서 max라는 속성을 모르면 input 값이 입력되었을 때 값에 대한 유효성 검사를 하고 input에 값을 넣어주는 번거로운 일도 할 수도 있어요.
(제가 처음 개발할 때 그랬습니다... 🥲)

특히 리액트로 넘어가게되면 javascript가 html 접근하는 허들이 낮아지면서 위와 같은 사례가 종종 보여요.

그래서 **특히 input과 관련하여서는 꼭 한번 즈음 [mdn 공식 문서](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input)를 처음부터 끝까지 러프하게라도 읽어보시는걸 추천드려요.

kiJu2 · 2026-04-08T02:16:52Z

+              <img
+                class="account-input-icon"
+                src="../assets/icon/ic-visibility_off.svg"
+                ㅍ


오타 발견 !

Suggested change

ㅍ

ㅍㅍㅍㅍ

kiJu2 · 2026-04-08T02:18:15Z

+    <main class="main">
+      <div class="banner">
+        <section class="banner-inner">
+          <div class="banner-txt">
+            <h1 class="banner-title">일상의 모든 물건을<br />거래해 보세요</h1>
+            <a href="./pages/items.html" class="banner-btn text-xl-semibold"
+              >구경하러 가기
+            </a>
+          </div>
+          <img
+            class="banner-img"
+            src="./assets/img/Img-home-top.svg"
+            alt="배너이미지"
+          />
+        </section>
+      </div>


크으 ~ html 코드가 시맨틱하게 잘 짜여져있네요.

main, section, h1 ... 서윤님께서 표현하고 싶은 태그를 적절히 사용하신 것으로 보여집니다 ! 👍👍

kiJu2 · 2026-04-08T02:19:05Z

+            <img
+              class="card-img"
+              src="./assets/img/Img-home-01.svg"
+              alt="home01이미지"


alt를 좀 더 구체적으로 작성해볼까요?

alt는 스크린 리더 사용자에 대한 보조 텍스트가 될 수 있으므로 "어떠한 이미지 인지"를 작성해주는 것이 좋아요 !

alt의 목적

인터넷 연결이 끊겼을 때 대체되는 이미지

스크린 리더 사용자를 위한 대체 텍스트

이미지를 볼 수 없는 환경에서 이미지를 대체하기 위한 텍스트
등 목적을 알게 된다면 alt를 어떻게 사용하시면 될지 알 수 있을 것 같아요.

다음은 하버드 에듀케이션에서 제안하는 alt 규칙입니다:

tl;dr

Write Good Alt Text

Add alt text all non-decorative images.

Keep it short and descriptive, like a tweet.

Don’t include “image of” or “photo of”.

Leave alt text blank if the image is purely decorative

It's not necessary to add text in the Title field.

원문 보기

다만, 단순 장식용인 이미지의 경우 alt를 ""로 나타낼 수 있습니다 !

현재 주변 컨텐츠(h2, h3 등)에서 해당 section에서 전달해줄 내용들을 충분히 전달해주고 있으므로 장식용 이미지로 취급하셔도 무방해보여 제안드려봅니다.

Suggested change

alt="home01이미지"

alt=""

장식 이미지는 페이지 콘텐츠에 정보를 추가하지 않습니다. 예를 들어, 이미지에서 제공하는 정보는 인접한 텍스트를 사용하여 이미 제공될 수도 있고, 웹 사이트를 시각적으로 더욱 매력적으로 만들기 위해 이미지가 포함될 수도 있습니다.

이러한 경우 스크린 리더와 같은 보조 기술에서 무시할 수 있도록 null(빈) alt 텍스트를 제공해야 합니다( ). alt="" 이러한 유형의 이미지에 대한 텍스트 값은 화면 판독기 출력에 청각적 혼란을 추가하거나 주제가 인접한 텍스트의 주제와 다른 경우 사용자의 주의를 산만하게 할 수 있습니다. 속성 을 생략하는 alt것도 옵션이 아닙니다. 속성이 제공되지 않으면 일부 화면 판독기가 이미지의 파일 이름을 대신 알려주기 때문입니다.

Decorative Images

kiJu2 · 2026-04-08T02:21:01Z

+              alt="home01이미지"
+            />
+            <div class="card-contents">
+              <p class="card-subtitle text-2lg-bold">Hot item</p>


<p> 태그는 단락을 나타냅니다 !

HTML <p> 요소는 하나의 문단을 나타냅니다. 시각적인 매체에서, 문단은 보통 인접 블록과의 여백과 첫 줄의 들여쓰기로 구분하지만, HTML에서 문단은 이미지나 입력 폼 등 서로 관련있는 콘텐츠 무엇이나 될 수 있습니다.

예를 들어 다음과 같은 값이 <p>태그에 적절할 수 있어요 😊:

Geckos are a group of usually small, usually nocturnal lizards. They are found on every continent except Antarctica.

혹은:

헌법재판소는 법관의 자격을 가진 9인의 재판관으로 구성하며, 재판관은 대통령이 임명한다. 선거에 있어서 최고득표자가 2인 이상인 때에는 국회의 재적의원 과반수가 출석한 공개회의에서 다수표를 얻은 자를 당선자로 한다.

MDN <p>

kiJu2 · 2026-04-08T02:22:17Z

크으~ 수고하셨습니다 서윤님.
도전성이 풍부하고 아이디어가 참 좋았어요.
미션을 단순히 수행하는 것 뿐 아니라, 의심하고 탐구하신게 느껴집니다 !

덕분에 즐겁게 코드리뷰 했습니다. 수고 많으셨습니다 ! 👍👍

seoyoon-k added 3 commits April 1, 2026 11:27

스프린트 1,2

025ae0e

readme 수정

8a2ad96

스프린트 1,2 제출

79aacd0

seoyoon-k changed the title ~~Basic 김서윤~~ [김서윤] 스프린트 미션 1,2 Apr 1, 2026

seoyoon-k added 매운맛🔥 뒤는 없습니다. 그냥 필터 없이 말해주세요. 책임은 제가 집니다. 최종제출 스프린트 미션 최종 제출 PR입니다. 코드리뷰 및 평가해주세요! labels Apr 1, 2026

kiJu2 self-requested a review April 7, 2026 13:11

kiJu2 approved these changes Apr 8, 2026

View reviewed changes

kiJu2 merged commit 6685d00 into codeit-sprint-fullstack:basic-김서윤 Apr 8, 2026

Conversation

seoyoon-k commented Apr 1, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

요구사항

기본

심화

주요 변경사항

스크린샷

멘토에게

Uh oh!

kiJu2 commented Apr 7, 2026

Uh oh!

kiJu2 commented Apr 8, 2026

안녕하세요:) 처음 작업해본 만큼 부족함이 많습니다. ㅠㅜ commit하고 수정한 부분들이 있어서 PR도 약간 너덜너덜합니다. 앞으로 더 깔끔하게 할 수 있게 확인하겠습니다..!

Uh oh!

kiJu2 commented Apr 8, 2026

그리고 질문이 있는데, css에 class를 남용한게 아닌가 싶은데 class를 더 효율적으로 쓰는 방식이 있을까요?

Uh oh!

kiJu2 commented Apr 8, 2026

디자인 시안 파일에 컴포넌트단위로 작업이 잘 되어 있지 않아서, 코드에서 구조화하는 방향이 해당 스프린트 프로젝트가 지향하는 방향인 것 같아 동일하거나 흡사한 코드를 효율적으로 재사용하는 방안이 궁금합니다.

Uh oh!

kiJu2 commented Apr 8, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

그리고 페이지단위로 공통인 스타일과 로컬인 스타일이 있는데, 아직 코딩을 잘 몰라 정리가 두려워서 나누지 못했으나 추후엔 페이지 단위로 분리하는 것이 좋은가요?

Uh oh!

kiJu2 commented Apr 8, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

commit 단위를 더욱 자주, 작게 해보시는건 어떠실까요?

그럼 커밋을 언제 해야 할까요?

관련하여 읽으시면 좋은 아티클을 추천드릴게요:

tl;dr

Uh oh!

kiJu2 commented Apr 8, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

커밋 타입도 한 번 고려해보세요 !

tl;dr:

Uh oh!

Choose a reason for hiding this comment

크으 ~ 파일 분류가 잘 되었네요.

(선택사항)

Uh oh!

Choose a reason for hiding this comment

.gitignore를 작성해보시는게 어떨까요?

Uh oh!

Choose a reason for hiding this comment

굿굿 ! reset.css를 작성하셨군요 !

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

required나 name 속성도 고려해볼 수 있겠어요 !

Uh oh!

Choose a reason for hiding this comment

(생각해보기)<input>에 대한 속성과 관련하여

Uh oh!

Choose a reason for hiding this comment

오타 발견 !

Uh oh!

Choose a reason for hiding this comment

크으 ~ html 코드가 시맨틱하게 잘 짜여져있네요.

Uh oh!

Choose a reason for hiding this comment

alt를 좀 더 구체적으로 작성해볼까요?

alt의 목적

다음은 하버드 에듀케이션에서 제안하는 alt 규칙입니다:

tl;dr

Uh oh!

Choose a reason for hiding this comment

다만, 단순 장식용인 이미지의 경우 alt를 ""로 나타낼 수 있습니다 !

Uh oh!

Choose a reason for hiding this comment

<p> 태그는 단락을 나타냅니다 !

Uh oh!

kiJu2 commented Apr 8, 2026

Uh oh!

Reviewers

seoyoon-k commented Apr 1, 2026 •

edited

Loading

kiJu2 commented Apr 8, 2026 •

edited

Loading

kiJu2 commented Apr 8, 2026 •

edited

Loading

kiJu2 commented Apr 8, 2026 •

edited

Loading

`.gitignore`를 작성해보시는게 어떨까요?

굿굿 ! `reset.css`를 작성하셨군요 !

`required`나 `name` 속성도 고려해볼 수 있겠어요 !

(생각해보기)`<input>`에 대한 속성과 관련하여

`alt`를 좀 더 구체적으로 작성해볼까요?

다음은 하버드 에듀케이션에서 제안하는 `alt` 규칙입니다:

다만, 단순 장식용인 이미지의 경우 `alt`를 `""`로 나타낼 수 있습니다 !

`<p>` 태그는 단락을 나타냅니다 !