[류재은] 스프린트 미션 1,2 #31
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,50 +1,28 @@ | ||
| ```markdown | ||
| # 스프린트미션 | ||
|
|
||
| ## 🐼 판다마켓 프로젝트 | ||
|
|
||
| ## 소개 | ||
|
|
||
| 💁🏽♀️ 판다마켓 - 따뜻한 중고거래를 위한 커뮤니티 플랫폼 | ||
|
|
||
| --- | ||
|
|
||
| ## 사용한 기술 | ||
|
|
||
| - html | ||
| - css | ||
|
|
||
| --- | ||
|
|
||
| 🐼판다마켓 [보러가기](https://panda-market-codeit.netlify.app/) | ||
|
|
||
| --- | ||
|
|
||
| ## 주요기능 | ||
|
|
||
| 1. **메인** - 판다마켓이 어떤 곳인지 한눈에 알 수 있어요! | ||
| 2. **로그인** - 로그인 하셔서 쉽게 이용해 보세요! | ||
| 3. **회원가입** - 간편 로그인을 통한 쉬운 회원가입! | ||
| ``` |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,50 @@ | ||
| # 🐼 판다마켓 프로젝트 | ||
|
|
||
| > _이 저장소는 판다마켓 프로젝트의 프론트엔드 코드를 관리하는 곳입니다. 프로젝트를 클론하여 개발 환경을 설정하고, 각 브랜치에서 해당 스프린트 미션을 수행해 주세요!_ 🛠️ | ||
|
|
||
| ## 소개 | ||
|
|
||
| 안녕하세요! 판다마켓 프로젝트에 오신 것을 환영합니다! 🥳 | ||
| 판다마켓은 따뜻한 중고거래를 위한 커뮤니티 플랫폼이에요. 여러분은 이곳에서 상품을 등록하고, 다른 사용자들과 소통하며, 자유롭게 이야기를 나눌 수 있어요. 매주 스프린트 미션을 통해 기능을 하나씩 만들어 가며 성장해 나가는 여정을 함께해요. 🚀 | ||
|
|
||
|  | ||
| _위 이미지는 판다마켓의 대표 이미지입니다._ 📸 | ||
|
|
||
| ## 스프린트 미션이란? 🤔 | ||
|
|
||
| 스프린트 미션은 **하나의 개인 프로젝트를 길게 진행하면서, 그 과정에서 주기적으로 피드백을 받을 수 있는 시스템**이에요. 각 스프린트마다 배운 이론을 적용해 보고, **멘토님께 코드 리뷰를 받아가며 실력을 쑥쑥 키워갈 수 있는 중요한 개인 과제**랍니다. 💪 | ||
|
|
||
| ## 주요 기능 ✨ | ||
|
|
||
| 1. **상품 등록**: 내가 가진 물건을 올리고, 사진과 설명을 추가해 직접 판매할 수 있어요! | ||
| 2. **문의 댓글**: 상품에 대한 궁금한 점이나 의견을 자유롭게 남길 수 있답니다. 📝 | ||
| 3. **자유게시판**: 다양한 주제로 친구들과 이야기를 나누고, 정보를 공유할 수 있는 공간이에요! 🗣️ | ||
|
|
||
| ## 프로젝트 브랜치 구조 🏗️ | ||
|
|
||
| 프로젝트는 단계별로 나뉘어 있고, 각 스프린트 미션에 맞는 브랜치가 있어요. 각 브랜치를 통해 체계적으로 개발하며 학습할 수 있어요. 🎯 | ||
|
|
||
| ### 브랜치 설명 | ||
|
|
||
| 1. **basic (part1): 스프린트 미션 1 ~ 3 FE 요구사항** | ||
|
|
||
| - 기본적인 웹 애플리케이션 기능 구현을 위한 초기 브랜치입니다. HTML, CSS, JavaScript 등을 사용해 기본을 다집니다. | ||
| - **스프린트 미션 1부터 4까지**의 프론트엔드 내용을 포함하고 있어요. | ||
|
|
||
| 2. **react (part2): 스프린트 미션 5 ~ 6 FE 요구사항** | ||
|
|
||
| - React 라이브러리를 사용해 프론트엔드 기능을 구현하는 브랜치입니다. 컴포넌트 기반 아키텍처와 상태 관리를 배웁니다. | ||
| - **스프린트 미션 5부터 6까지, 그 이후**의 프론트엔드 내용을 포함하고 있어요. | ||
| - 만약 스프린트 미션 9부터 프론트엔드 코드를 Next가 아닌 React로 구현하고 싶다면 react 브랜치를 사용해요. | ||
|
|
||
| 3. **next (part3,4): 스프린트 미션 7 FE 요구사항~** | ||
|
|
||
| - Next.js를 사용해 서버 사이드 렌더링(SSR)과 정적 사이트 생성(SSG) 등 고급 기능을 구현합니다. | ||
| - **스프린트 미션 7부터** 시작하는 프론트엔드 내용을 포함하고 있어요. | ||
| - 만약 스프린트 미션 8부터 프론트엔드 코드를 React가 아닌 Next로 구현하고 싶다면 next 브랜치를 사용해요. | ||
|
|
||
| > _스프린트 미션 내 백엔드 요구사항은 [백엔드 레포지토리](https://github.com/codeit-sprint-fullstack/11-sprint-mission-be)의 브랜치에서 관리해주세요_ | ||
|
|
||
| --- | ||
|
|
||
| 본 프로젝트는 [코드잇](https://www.codeit.kr)의 소유이며, 교육 목적으로만 사용됩니다. © 2026 Codeit. All rights reserved. |
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
|
Collaborator
There was a problem hiding this comment. 해당 이미지파일은 필요 없을 것으로 보이는군요 !버튼은 |
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| @@ -0,0 +1,128 @@ | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| <!doctype html> | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| <html lang="ko"> | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| <head> | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| <!-- Google Tag Manager --> | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| <script> | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| (function (w, d, s, l, i) { | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| w[l] = w[l] || []; | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| w[l].push({ "gtm.start": new Date().getTime(), event: "gtm.js" }); | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| var f = d.getElementsByTagName(s)[0], | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| j = d.createElement(s), | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| dl = l != "dataLayer" ? "&l=" + l : ""; | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| j.async = true; | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| j.src = "https://www.googletagmanager.com/gtm.js?id=" + i + dl; | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| f.parentNode.insertBefore(j, f); | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| })(window, document, "script", "dataLayer", "GTM-M985TVM3"); | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| </script> | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| <!-- End Google Tag Manager --> | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| <meta charset="UTF-8" /> | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| <link rel="stylesheet" href="./style/reset.css" /> | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| <link rel="stylesheet" href="./style.css" /> | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| <title>판다마켓</title> | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| <link rel=" shortcut icon " href="./img/main/판다 얼굴.svg" /> | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| <link rel="icon" href="./img/main/판다 얼굴.svg" /> | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| </head> | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| <body> | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| <header class="header"> | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| <div class="logo-box"> | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| <a href="./index.html"> | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| <img src="./img/login/logo.png" alt="판다마켓 로고" /> | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| </a> | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| </div> | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| <div class="btn-login"> | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| <a href="./pages.html/login.html"> 로그인 </a> | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| </div> | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| </header> | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| <!-- main --> | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| <main> | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| <div class="main-blue"> | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| <div class="blue-frame"> | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| <div class="txt-box1"> | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| <h2 class="main-txt">일상의 모든 물건을 <br />거래해 보세요</h2> | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| <a href="./pages.html/items.html" class="btn-look">구경하러 가기</a> | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| </div> | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| <img src="./img/main/box1-img.png" alt="손흔드는 판다" /> | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| </div> | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| </div> | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
Comment on lines
+39
to
+48
Collaborator
There was a problem hiding this comment.
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| <main> | |
| <div class="main-blue"> | |
| <div class="blue-frame"> | |
| <div class="txt-box1"> | |
| <h2 class="main-txt">일상의 모든 물건을 <br />거래해 보세요</h2> | |
| <a href="./pages.html/items.html" class="btn-look">구경하러 가기</a> | |
| </div> | |
| <img src="./img/main/box1-img.png" alt="손흔드는 판다" /> | |
| </div> | |
| </div> | |
| <main> | |
| <div class="main-blue"> | |
| <div class="blue-frame"> | |
| <div class="txt-box1"> | |
| <h1 class="main-txt">일상의 모든 물건을 <br />거래해 보세요</h1> | |
| <a href="./pages.html/items.html" class="btn-look">구경하러 가기</a> | |
| </div> | |
| <img src="./img/main/box1-img.png" alt="손흔드는 판다" /> | |
| </div> | |
| </div> |
h 태그는 순차적으로 기입하는 것을 권장드립니다 ! h1 다음은 h2. 그리고 h3...
이런식으로 순차적으로 기입할 것을 MDN에서 권장하고 있습니다. 😊
[MDN](https://developer.mozilla.org/ko/docs/Web/HTML/Reference/Elements/Heading_Elements#%EC%82%AC%EC%9A%A9_%EC%9D%BC%EB%9E%8C): 제목 단계를 건너뛰는 것을 피하세요. 언제나
<h1>로 시작해서,<h2>, 순차적으로 기입하세요.
Comment on lines
+39
to
+48
Collaborator
There was a problem hiding this comment.
(제안) 또한, 각 컨텐츠를 section 태그로 구분지어볼 수 있겠군요 ! 😉
Suggested change
| <main> | |
| <div class="main-blue"> | |
| <div class="blue-frame"> | |
| <div class="txt-box1"> | |
| <h2 class="main-txt">일상의 모든 물건을 <br />거래해 보세요</h2> | |
| <a href="./pages.html/items.html" class="btn-look">구경하러 가기</a> | |
| </div> | |
| <img src="./img/main/box1-img.png" alt="손흔드는 판다" /> | |
| </div> | |
| </div> | |
| <main> | |
| <section class="main-blue"> | |
| <div class="blue-frame"> | |
| <div class="txt-box1"> | |
| <h2 class="main-txt">일상의 모든 물건을 <br />거래해 보세요</h2> | |
| <a href="./pages.html/items.html" class="btn-look">구경하러 가기</a> | |
| </div> | |
| <img src="./img/main/box1-img.png" alt="손흔드는 판다" /> | |
| </div> | |
| </section> |
HTML
<section>요소는 HTML 문서의 독립적인 구획을 나타내며, 더 적합한 의미를 가진 요소가 없을 때 사용합니다. 보통<section>은 제목을 포함하지만, 항상 그런 것은 아닙니다.
정답은 없다지만, 재은님께서 나타내고 싶은 의미에 더욱 부합해보여서 제안드려봅니다 ! 😁
Collaborator
There was a problem hiding this comment.
<p> 태그는 단락을 나타냅니다 !
Suggested change
| <p class="point-txt">Hot item</p> | |
| <span class="point-txt">Hot item</span> |
저는
span을 제안드리기는 하였으나, 더 나은 태그가 있다고 생각하시면 적용해보시면 됩니다 ! 😉
HTML <p> 요소는 하나의 문단을 나타냅니다. 시각적인 매체에서, 문단은 보통 인접 블록과의 여백과 첫 줄의 들여쓰기로 구분하지만, HTML에서 문단은 이미지나 입력 폼 등 서로 관련있는 콘텐츠 무엇이나 될 수 있습니다.
예를 들어 다음과 같은 값이 <p>태그에 적절할 수 있어요 😊:
Geckos are a group of usually small, usually nocturnal lizards. They are found on every continent except Antarctica.
혹은:
헌법재판소는 법관의 자격을 가진 9인의 재판관으로 구성하며, 재판관은 대통령이 임명한다. 선거에 있어서 최고득표자가 2인 이상인 때에는 국회의 재적의원 과반수가 출석한 공개회의에서 다수표를 얻은 자를 당선자로 한다.
Comment on lines
+107
to
+123
Collaborator
There was a problem hiding this comment.
(제안/선택)요소들이 순서 없는 목록을 의미한다면 <ul>과 <li>로도 나타낼 수 있습니다 !
<ul class="footer-social">
<li>
<a target="_blank" href="https://www.facebook.com/">
<img src="images/ic_facebook.svg" alt="페이스북" />
</a>
</li>
<li>
<a target="_blank" href="https://www.twitter.com/">
<img src="images/ic_twitter.svg" alt="트위터" />
</a>
</li>
<li>
<a target="_blank" href="https://www.youtube.com/">
<img src="images/ic_youtube.svg" alt="유튜브" />
</a>
</li>
<li>
<a target="_blank" href="https://www.instagram.com/">
<img src="images/ic_instagram.svg" alt="인스타그램" />
</a>
<li>
</ul>MDN: HTML
<ul>요소는 정렬되지 않은 목록을 나타냅니다. 보통 불릿으로 표현합니다.
li 태그의 기본 스타일을 제거하고 싶다면 다음과 같이 작성할 수 있습니다 ! { list-style: none; }
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,13 @@ | ||
| <!doctype html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="UTF-8" /> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | ||
| <title>FAQ</title> | ||
| <link rel=" shortcut icon " href="./img/main/판다 얼굴.svg" /> | ||
| <link rel="icon" href="./img/main/판다 얼굴.svg" /> | ||
| </head> | ||
| <body> | ||
| FAQ | ||
| </body> | ||
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,13 @@ | ||
| <!doctype html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="UTF-8" /> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | ||
| <title>items</title> | ||
| <link rel=" shortcut icon " href="./img/main/판다 얼굴.svg" /> | ||
| <link rel="icon" href="./img/main/판다 얼굴.svg" /> | ||
| </head> | ||
| <body> | ||
| 아이템 페이지 | ||
| </body> | ||
| </html> |
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
(의견)경로 자체도 하나의 '설명'이 될 수 있겠네요 ! 👀
img/login/btn_eye.svg경로에login이 있군요 !img/login/...이 아이콘은 'login'에만 적용될 수 있는 아이콘일까요 ?아니면, 좀 더 범용적으로 사용될 수 있는 '눈 아이콘' 이라는
svg일까요 ?요구사항만을 본다면
login이라는 문맥이 파일 경로에 들어가도 문제가 되지 않습니다.근데, 만약 이 외의 페이지에 해당 아이콘이 필요하게 된다면
login이라는 문맥 상 이름이 어색해질 수 있겠군요. 😅