Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[7주차] Notes App 만들기 (리액트) #4

Open
wants to merge 11 commits into
base: main
Choose a base branch
from
Open

[7주차] Notes App 만들기 (리액트) #4

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
5a2cb0a
initial commit : 벨로그 클론코딩
JaeHyun137 Oct 6, 2023
4f91986
feat : dropdown 구현
JaeHyun137 Nov 1, 2023
c764330
feat : 카드 클릭시 이미지 원본이 나오는 모달창 구현
JaeHyun137 Nov 1, 2023
e63a2f5
feat
JaeHyun137 Nov 1, 2023
f7487f1
feat : 새 글 작성 아이콘 클릭시 연결되는 태그 추가/삭제 페이지 구현
JaeHyun137 Nov 2, 2023
1f02963
chore : modal창 이미지 변경 + 포스팅 수 늘림
JaeHyun137 Nov 3, 2023
59fae14
feat : 메뉴 클릭 시 글자색 변화 구현
JaeHyun137 Nov 3, 2023
af791c0
Initial commit : 벨로그 기본 화면 구성
JaeHyun137 Nov 23, 2023
b1dd25e
feat : 모달창(+스크롤제어) 구현
JaeHyun137 Nov 24, 2023
c1a4865
feat : dropdown 구현
JaeHyun137 Nov 25, 2023
f4d3709
initial commit
JaeHyun137 Jan 7, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
261 changes: 261 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,261 @@
<!DOCTYPE html>
<html lang="en">
<head>
<script defer src="main1.js"></script>
<script defer src="modal.js"></script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css" />
<script src="https://kit.fontawesome.com/688ec50e73.js" crossorigin="anonymous"></script>

</head>
<body>
<header>

<h1>velog </h1>
<button><i class="fa-solid fa-magnifying-glass"></i>

</button>
<button> <i class="fa-solid fa-user"></i>
</button>
<!--새 글 작성 아이콘 클릭시 새 html 파일로 이동!-->
<button><i class="fa-solid fa-pen-nib" onclick="location.href='write.html'"></i>
</button>
</header>
<nav>
<div class="dropdown-label">

<span > </span>
</div>
<div class="dropdown">
<button class="dropbtn">
<span class="dropbtn_icon"></span>
<span class="dropbtn_content">오늘</span>
<span class="dropbtn_click" style="font-family: Material Icons; font-size : 16px; color : #3b3b3b; float:right;"
onclick="dropdown()">arrow_drop_down</span>
</button>
<div class="dropdown-content">
<span class="dropdown_click">
<div class="date" onclick="showMenu(this.innerText)">오늘</div>
<div class="date" onclick="showMenu(this.innerText)">이번주</div>
<div class="date" onclick="showMenu(this.innerText)">이번달</div>
<div class="date" onclick="showMenu(this.innerText)">올해</div>
</span>
</div>
</nav>
<main>
<article>
<ul>
<div class = "posting-card">
<img id="image" src = "캡처3.PNG"onclick="openModal()">
<div class = "box">
<div class = "text-box">
<p id="title">프론트엔드 개발자의 끝? V0.dev 사용법</p>
<p id="content">프론트엔드 개발자의 일자리를 위협하는 V0의 등장</p>
</div>
</div>
</div>
<div class="modal" id="modal">
<span class="close" onclick="closeModal()">&times;</span>
<img class="modal-content" id="modal-image" src = "모달이미지.PNG">
</div>
<div class = "posting-card">
<img id="image" src = "캡처3.PNG"onclick="openModal()">
<div class = "box">
<div class = "text-box">
<p id="title">프론트엔드 개발자의 끝? V0.dev 사용법</p>
<p id="content">프론트엔드 개발자의 일자리를 위협하는 V0의 등장</p>
</div>
</div>
</div>
<div class="modal" id="modal">
<span class="close" onclick="closeModal()">&times;</span>
<img class="modal-content" id="modal-image">
</div>
<div class = "posting-card">
<img id="image" src = "캡처3.PNG"onclick="openModal()">
<div class = "box">
<div class = "text-box">
<p id="title">프론트엔드 개발자의 끝? V0.dev 사용법</p>
<p id="content">프론트엔드 개발자의 일자리를 위협하는 V0의 등장</p>
</div>
</div>
</div>
<div class="modal" id="modal">
<span class="close" onclick="closeModal()">&times;</span>
<img class="modal-content" id="modal-image">
</div>
<div class = "posting-card">
<img id="image" src = "캡처3.PNG"onclick="openModal()">
<div class = "box">
<div class = "text-box">
<p id="title">프론트엔드 개발자의 끝? V0.dev 사용법</p>
<p id="content">프론트엔드 개발자의 일자리를 위협하는 V0의 등장</p>
</div>
</div>
</div>
<div class="modal" id="modal">
<span class="close" onclick="closeModal()">&times;</span>
<img class="modal-content" id="modal-image">
</div>
<div class = "posting-card">
<img id="image" src = "캡처3.PNG"onclick="openModal()">
<div class = "box">
<div class = "text-box">
<p id="title">프론트엔드 개발자의 끝? V0.dev 사용법</p>
<p id="content">프론트엔드 개발자의 일자리를 위협하는 V0의 등장</p>
</div>
</div>
</div>
<div class="modal" id="modal">
<span class="close" onclick="closeModal()">&times;</span>
<img class="modal-content" id="modal-image">
</div>


</ul>

<ul>
<div class = "posting-card">
<img id="image" src = "캡처3.PNG"onclick="openModal()">
<div class = "box">
<div class = "text-box">
<p id="title">프론트엔드 개발자의 끝? V0.dev 사용법</p>
<p id="content">프론트엔드 개발자의 일자리를 위협하는 V0의 등장</p>
</div>
</div>
</div>
<div class="modal" id="modal">
<span class="close" onclick="closeModal()">&times;</span>
<img class="modal-content" id="modal-image">
</div>
<div class = "posting-card">
<img id="image" src = "캡처3.PNG"onclick="openModal()">
<div class = "box">
<div class = "text-box">
<p id="title">프론트엔드 개발자의 끝? V0.dev 사용법</p>
<p id="content">프론트엔드 개발자의 일자리를 위협하는 V0의 등장</p>
</div>
</div>
</div>
<div class="modal" id="modal">
<span class="close" onclick="closeModal()">&times;</span>
<img class="modal-content" id="modal-image">
</div>
<div class = "posting-card">
<img id="image" src = "캡처3.PNG"onclick="openModal()">
<div class = "box">
<div class = "text-box">
<p id="title">프론트엔드 개발자의 끝? V0.dev 사용법</p>
<p id="content">프론트엔드 개발자의 일자리를 위협하는 V0의 등장</p>
</div>
</div>
</div>
<div class="modal" id="modal">
<span class="close" onclick="closeModal()">&times;</span>
<img class="modal-content" id="modal-image">
</div>
<div class = "posting-card">
<img id="image" src = "캡처3.PNG"onclick="openModal()">
<div class = "box">
<div class = "text-box">
<p id="title">프론트엔드 개발자의 끝? V0.dev 사용법</p>
<p id="content">프론트엔드 개발자의 일자리를 위협하는 V0의 등장</p>
</div>
</div>
</div>
<div class="modal" id="modal">
<span class="close" onclick="closeModal()">&times;</span>
<img class="modal-content" id="modal-image">
</div>
<div class = "posting-card">
<img id="image" src = "캡처3.PNG"onclick="openModal()">
<div class = "box">
<div class = "text-box">
<p id="title">프론트엔드 개발자의 끝? V0.dev 사용법</p>
<p id="content">프론트엔드 개발자의 일자리를 위협하는 V0의 등장</p>
</div>
</div>
</div>
<div class="modal" id="modal">
<span class="close" onclick="closeModal()">&times;</span>
<img class="modal-content" id="modal-image">
</div>

</ul>
<ul>
<div class = "posting-card">
<img id="image" src = "캡처3.PNG"onclick="openModal()">
<div class = "box">
<div class = "text-box">
<p id="title">프론트엔드 개발자의 끝? V0.dev 사용법</p>
<p id="content">프론트엔드 개발자의 일자리를 위협하는 V0의 등장</p>
</div>
</div>
</div>
<div class="modal" id="modal">
<span class="close" onclick="closeModal()">&times;</span>
<img class="modal-content" id="modal-image" src = "모달이미지.PNG">
</div>
<div class = "posting-card">
<img id="image" src = "캡처3.PNG"onclick="openModal()">
<div class = "box">
<div class = "text-box">
<p id="title">프론트엔드 개발자의 끝? V0.dev 사용법</p>
<p id="content">프론트엔드 개발자의 일자리를 위협하는 V0의 등장</p>
</div>
</div>
</div>
<div class="modal" id="modal">
<span class="close" onclick="closeModal()">&times;</span>
<img class="modal-content" id="modal-image">
</div>
<div class = "posting-card">
<img id="image" src = "캡처3.PNG"onclick="openModal()">
<div class = "box">
<div class = "text-box">
<p id="title">프론트엔드 개발자의 끝? V0.dev 사용법</p>
<p id="content">프론트엔드 개발자의 일자리를 위협하는 V0의 등장</p>
</div>
</div>
</div>
<div class="modal" id="modal">
<span class="close" onclick="closeModal()">&times;</span>
<img class="modal-content" id="modal-image">
</div>
<div class = "posting-card">
<img id="image" src = "캡처3.PNG"onclick="openModal()">
<div class = "box">
<div class = "text-box">
<p id="title">프론트엔드 개발자의 끝? V0.dev 사용법</p>
<p id="content">프론트엔드 개발자의 일자리를 위협하는 V0의 등장</p>
</div>
</div>
</div>
<div class="modal" id="modal">
<span class="close" onclick="closeModal()">&times;</span>
<img class="modal-content" id="modal-image">
</div>
<div class = "posting-card">
<img id="image" src = "캡처3.PNG"onclick="openModal()">
<div class = "box">
<div class = "text-box">
<p id="title">프론트엔드 개발자의 끝? V0.dev 사용법</p>
<p id="content">프론트엔드 개발자의 일자리를 위협하는 V0의 등장</p>
</div>
</div>
</div>
<div class="modal" id="modal">
<span class="close" onclick="closeModal()">&times;</span>
<img class="modal-content" id="modal-image">
</div>


</ul>
</article>

</main>

</body>
</html>
63 changes: 63 additions & 0 deletions main1.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,63 @@
window.onload=()=>{
document.querySelector('.dropbtn_click').onclick = ()=>{
dropdown();
}
document.getElementsByClassName('date').onclick = ()=>{
showMenu(value);
};
dropdown = () => {
var v = document.querySelector('.dropdown-content');
var dropbtn = document.querySelector('.dropbtn')
v.classList.toggle('show');
dropbtn.style.borderColor = 'rgb(94, 94, 94)';
}

showMenu=(value)=>{
var dropbtn_icon = document.querySelector('.dropbtn_icon');
var dropbtn_content = document.querySelector('.dropbtn_content');
var dropbtn_click = document.querySelector('.dropbtn_click');
var dropbtn = document.querySelector('.dropbtn');

dropbtn_icon.innerText = '';
dropbtn_content.innerText = value;
dropbtn_content.classList.contains('clicked');

dropbtn.style.borderColor = '#3992a8';

}
window.onclick= (e)=>{
if(!e.target.matches('.dropbtn_click')){
var dropdowns = document.getElementsByClassName("dropdown-content");

var dropbtn_icon = document.querySelector('.dropbtn_icon');
var dropbtn_content = document.querySelector('.dropbtn_content');
var dropbtn_click = document.querySelector('.dropbtn_click');
var dropbtn = document.querySelector('.dropbtn');


var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}



}
}

const dateElements = document.querySelectorAll('.dropdown_click .date');

function select(liEl) {
dateElements.forEach((el) => el.classList.remove('click'));
liEl.classList.add('click');
}

dateElements.forEach((dateElement) => {
dateElement.addEventListener('click', (e) => {
select(e.target);
});
});
18 changes: 18 additions & 0 deletions modal.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
function openModal() {
var modal = document.getElementById("modal");
var modalImage = document.getElementById("modal-image");
var image = document.getElementById("modal-image"); //

modal.style.display = "block";
modalImage.src = image.src;


// 스크롤을 막기 위한 추가
document.body.style.overflow = "hidden";
}

function closeModal() {
var modal = document.getElementById("modal");
modal.style.display = "none";
document.body.style.overflow = "auto";
}
20 changes: 20 additions & 0 deletions seminar4_test/.eslintrc.cjs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
module.exports = {
root: true,
env: { browser: true, es2020: true },
extends: [
'eslint:recommended',
'plugin:react/recommended',
'plugin:react/jsx-runtime',
'plugin:react-hooks/recommended',
],
ignorePatterns: ['dist', '.eslintrc.cjs'],
parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
settings: { react: { version: '18.2' } },
plugins: ['react-refresh'],
rules: {
'react-refresh/only-export-components': [
'warn',
{ allowConstantExport: true },
],
},
}
24 changes: 24 additions & 0 deletions seminar4_test/.gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*

node_modules
dist
dist-ssr
*.local

# Editor directories and files
.vscode/*
!.vscode/extensions.json
.idea
.DS_Store
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?
Loading