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.

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

[3주차 기본 과제] 🌼 몰티즈를 찾아라 💖 #9

Open
wants to merge 34 commits into
base: main
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
34 commits
Select commit Hold shift + click to select a range
01fd58a
Merge branch 'main' of https://github.com/GO-SOPT-WEB/JiMinYu into we…
urjimyu May 3, 2023
1bd8e81
chores: 불필요한 파일 제거
urjimyu May 4, 2023
1051f02
chores: reset css 추가
urjimyu May 4, 2023
c4f6d16
feature: 버튼 누르면 레벨에 맞게 그리드 생성
urjimyu May 4, 2023
cf5f5f8
style: 버튼 스타일 설정
urjimyu May 4, 2023
09fd76c
feature: 헤더 html 작성
urjimyu May 4, 2023
d3f7bc7
feature: 카드 이미지 데이터 상수 파일 생성
urjimyu May 4, 2023
9d2ea66
chore: 제목 변경
urjimyu May 4, 2023
1541530
chore: 문법 오류 수정
urjimyu May 4, 2023
57cf8ef
chores: react 프로젝트 설정
urjimyu May 5, 2023
efe970e
chores: 폴더 옮김
urjimyu May 5, 2023
53a078c
chores: styled 사용
urjimyu May 5, 2023
d0a9157
feature: 버튼 컴포넌트 생성
urjimyu May 5, 2023
f4f2fd6
feature: 메인페이지에서 동작할 것들 분리
urjimyu May 5, 2023
34e3ce4
chores: prop types 에러 해결
urjimyu May 5, 2023
aa6eccf
chores: prop types 에러 해결
urjimyu May 5, 2023
131a93b
feature: 레벨 선택에 따라 카드 개수가 달라지도록 설정
urjimyu May 5, 2023
1c05559
feature: 레벨 버튼들에 클릭 이벤트 지정
urjimyu May 5, 2023
53f1658
feature: header에 점수판 설정
urjimyu May 5, 2023
2401070
feature: 버튼 종류에 따라 스타일 다르게 적용
urjimyu May 5, 2023
9c288a2
feature: App에 메인페이지 넣어줌
urjimyu May 5, 2023
71055f2
refactor: 불필요한 변수 제거
urjimyu May 5, 2023
7e51b13
feature: 일치여부 판단 가능하도록 matched 추가
urjimyu May 5, 2023
16d36c7
feature: 게임 초기화 적용
urjimyu May 5, 2023
04d1758
feature: 조건에 맞게 카드 뿌려주기
urjimyu May 5, 2023
b60259b
feature: 레벨에 맞는 개수만큼 카드 랜덤하게 뽑는 함수 분리
urjimyu May 5, 2023
4355135
chores: 삭제했던 파일 복구
urjimyu May 5, 2023
0b85d28
feature: 리셋 버튼 기능 추가
urjimyu May 5, 2023
38825a0
feature: 카드에 이미지 넣어줌
urjimyu May 5, 2023
66256a8
chores: reset 파일 추가
urjimyu May 5, 2023
b99649c
feature: 카드 뒤집어지도록 설정
urjimyu May 5, 2023
11b328d
chores: 아직 사용 못한 부분 주석
urjimyu May 5, 2023
1f5479a
feature: 선택한 카드와 정답 카드 리스트 추가
urjimyu May 5, 2023
3525614
chores: 불필요한 폴더 삭제
urjimyu May 5, 2023
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
The table of contents is too big for display.
Diff view
Diff view
  •  
  •  
  •  
Binary file modified .DS_Store
Binary file not shown.
16 changes: 16 additions & 0 deletions cardgame/.eslintrc.cjs
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
module.exports = {
Copy link
Member

Choose a reason for hiding this comment

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

옹 언니 이런 과제에도 eslint 적용했구나!! 야무져잉

env: { browser: true, es2020: true },
extends: [
"eslint:recommended",
"plugin:react/recommended",
"plugin:react/jsx-runtime",
"plugin:react-hooks/recommended",
],
parserOptions: { ecmaVersion: "latest", sourceType: "module" },
settings: { react: { version: "18.2" } },
plugins: ["react-refresh"],
rules: {
"react-refresh/only-export-components": "warn",
"react/prop-types": "off",
},
};
File renamed without changes.
13 changes: 13 additions & 0 deletions cardgame/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + React</title>
Copy link
Member

Choose a reason for hiding this comment

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

타이틀 바꿔줘잉 ~~

Copy link
Member

Choose a reason for hiding this comment

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

타이틀 바꿔줘잉~~~ ❤️

</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.jsx"></script>
</body>
</html>
28 changes: 28 additions & 0 deletions cardgame/package.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
{
"name": "cardgame",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build",
"lint": "eslint src --ext js,jsx --report-unused-disable-directives --max-warnings 0",
"preview": "vite preview"
},
"dependencies": {
"prop-types": "^15.8.1",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"styled-components": "^5.3.10"
},
"devDependencies": {
"@types/react": "^18.0.28",
"@types/react-dom": "^18.0.11",
"@vitejs/plugin-react": "^4.0.0",
"eslint": "^8.38.0",
"eslint-plugin-react": "^7.32.2",
"eslint-plugin-react-hooks": "^4.6.0",
"eslint-plugin-react-refresh": "^0.3.4",
"vite": "^4.3.2"
}
}
File renamed without changes
42 changes: 42 additions & 0 deletions cardgame/src/App.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
#root {
max-width: 1280px;
margin: 0 auto;
padding: 2rem;
text-align: center;
}

.logo {
height: 6em;
padding: 1.5em;
will-change: filter;
transition: filter 300ms;
}
.logo:hover {
filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.react:hover {
filter: drop-shadow(0 0 2em #61dafbaa);
}

@keyframes logo-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}

@media (prefers-reduced-motion: no-preference) {
a:nth-of-type(2) .logo {
animation: logo-spin infinite 20s linear;
}
}

.card {
padding: 2em;
}

.read-the-docs {
color: #888;
}
12 changes: 12 additions & 0 deletions cardgame/src/App.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
import MainPage from "./pages/main/MainPage";
import "./App.css";

function App() {
return (
<>
<MainPage />
</>
Comment on lines +6 to +8
Copy link
Member

Choose a reason for hiding this comment

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

언니 인덴트 설정 볼 때 마다 신기하네..

Copy link
Contributor Author

Choose a reason for hiding this comment

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

ㅋㅋㅋ저거 잘못된 거 나중에 알았음ㅠ

Copy link
Member

Choose a reason for hiding this comment

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

언니 인덴트 볼 떄 마다 신기해..

);
}

export default App;
74 changes: 74 additions & 0 deletions cardgame/src/assets/CHUNSIK_DATA.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,74 @@
const CHUNSIK_DATA = [
{
id: 1,
matched: false,
alt: "인사하는-춘식",
imgSrc:
"https://item.kakaocdn.net/do/c5c470298d527ef65eb52883f0f186c48f324a0b9c48f77dbce3a43bd11ce785",
},
{
id: 2,
alt: "안마해주는-춘식",
matched: false,
imgSrc:
"https://item.kakaocdn.net/do/c5c470298d527ef65eb52883f0f186c4f604e7b0e6900f9ac53a43965300eb9a",
},
{
id: 3,
alt: "손뽀뽀-춘식",
matched: false,
imgSrc:
"https://item.kakaocdn.net/do/c5c470298d527ef65eb52883f0f186c49f5287469802eca457586a25a096fd31",
},
{
id: 4,
alt: "좋아하는-춘식",
matched: false,
imgSrc:
"https://item.kakaocdn.net/do/c5c470298d527ef65eb52883f0f186c49f17e489affba0627eb1eb39695f93dd",
},
{
id: 5,
alt: "훌라후프-춘식",
matched: false,
imgSrc:
"https://item.kakaocdn.net/do/c5c470298d527ef65eb52883f0f186c44022de826f725e10df604bf1b9725cfd",
},
{
id: 6,
alt: "라이언과-춘식",
matched: false,
imgSrc:
"https://item.kakaocdn.net/do/c5c470298d527ef65eb52883f0f186c482f3bd8c9735553d03f6f982e10ebe70",
},
{
id: 7,
alt: "팝콘-먹는-춘식",
matched: false,
imgSrc:
"https://item.kakaocdn.net/do/c5c470298d527ef65eb52883f0f186c4effd194bae87d73dd00522794070855d",
},
{
id: 8,
alt: "소듕한-춘식",
matched: false,
imgSrc:
"https://item.kakaocdn.net/do/c5c470298d527ef65eb52883f0f186c47f9f127ae3ca5dc7f0f6349aebcdb3c4",
},
{
id: 9,
alt: "배부른-춘식",
matched: false,
imgSrc:
"https://item.kakaocdn.net/do/c5c470298d527ef65eb52883f0f186c47e6f47a71c79378b48860ead6a12bf11",
},
{
id: 10,
alt: "고구마-들고-달리는-춘식",
matched: false,
imgSrc:
"https://item.kakaocdn.net/do/c5c470298d527ef65eb52883f0f186c4616b58f7bf017e58d417ccb3283deeb3",
},
];

export default CHUNSIK_DATA;
1 change: 1 addition & 0 deletions cardgame/src/assets/react.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
134 changes: 134 additions & 0 deletions cardgame/src/assets/reset.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,134 @@
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
display: block;
}
body {
line-height: 1;
}
ol,
ul {
list-style: none;
}
blockquote,
q {
quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
content: "";
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}

a {
color: inherit;
text-decoration: none;
}
Loading