Giter VIP home page Giter VIP logo

pairz's Introduction

๐Ÿƒ ์นด๋“œ๋’ค์ง‘๊ธฐ ์›น๊ฒŒ์ž„ ํ”„๋กœ์ ํŠธ PairZ

Hits

https://pairz.vercel.app/

node -v 16.19.0



๐Ÿ“‘ Page Detail


Home Page
home_page_gif

Game page
game_page_gif
  1. ๋ฐ์ดํ„ฐ๋ฒ ์ด์Šค์—์„œ ๋ฌด์ž‘์œ„๋กœ ๊ฒน์น˜์ง€ ์•Š๋Š” ๋ฌด์ž‘์œ„ ์นด๋“œ๋ฅผ 5์žฅ์„ ๋ฝ‘๋Š”๋‹ค
  2. ์ด 10์žฅ์˜ ์นด๋“œ๋กœ 2๊ฐœ์”ฉ ์ง์„ ๋งž์ถ”๋Š” ๋ผ์šด๋“œ๊ฐ€ ์‹œ์ž‘(์นด๋“œ ๋กœ๋”ฉ์ค‘์—๋Š” ์‹œ๊ฐ„์ด ๋ฉˆ์ถค)
  3. ์‹œ๊ฐ„์ œํ•œ์ด ์žˆ๊ณ  ๋ผ์ดํ”„๊ฐ€ 3๊ฐœ๊ฐ€ ์ฃผ์–ด์ง€๋ฉฐ ์†Œ๋ชจ์‹œ ๊ฒŒ์ž„์ด ์ข…๋ฃŒ
  4. ์นด๋“œ๋Š” 5์ดˆ๊ฐ„ ํ™•์ธ๊ฐ€๋Šฅํ•˜๊ณ  ์ดํ›„ ์ž๋™์œผ๋กœ ๋’ค์ง‘์–ด์ง
  5. ๊ฒŒ์ž„์ค‘ ์ด 3๋ฒˆ์˜ pause๊ฐ€ ๊ฐ€๋Šฅ
  6. ๊ฒŒ์ž„์˜ค๋ฒ„์‹œ ์Šค์ฝ”์–ด๋ฅผ ๊ธฐ๋ก๊ฐ€๋Šฅ (ํšŒ์›๊ฐ€์ž… ํ•„์š”)

Showcase page
showcase_page_gif
  1. ์ „์ฒด ์ด๋ฏธ์ง€๋ฅผ ์ตœ์‹ ์ˆœ์œผ๋กœ ์กฐํšŒ
  2. ์ด๋ฏธ์ง€ ํƒ€์ดํ‹€๋กœ ๊ฒ€์ƒ‰
  3. ๋ชจ๋“  ๊ฒ€์ƒ‰์€ 5๊ฐœ์”ฉ ์กฐํšŒ๋˜๊ณ  ๋”๋ณด๊ธฐ ๋ฒ„ํŠผ์œผ๋กœ ํŽ˜์ด์ง€๋„ค์ด์…˜์ด ๊ฐ€๋Šฅ
  4. ์ฒ˜์Œ 5๊ฐœ์˜ ์ด๋ฏธ์ง€๋Š” staticProps๋กœ ๋ฐ›์•„ 30์ดˆ๋งˆ๋‹ค static page ์ƒ์„ฑ (ISR์ ์šฉ)

Score page
score_page_gif
  1. ์ „์ฒด ์Šค์ฝ”์–ด๋ฅผ score๊ธฐ์ค€ ๋‚ด๋ฆผ์ฐจ์ˆœ์œผ๋กœ ์กฐํšŒ / score๊ฐ€ ๊ฐ™์„์‹œ ์ตœ์‹ ์ˆœ์œผ๋กœ ๋‚ด๋ฆผ์ฐจ์ˆœ ์ •๋ ฌ
  2. 10๊ฐœ์”ฉ pagenation ๊ฐ€๋Šฅ
  3. ์ฒ˜์Œ 10๊ฐœ์˜ ๊ธฐ๋ก์„ staticProps๋กœ ๋ฐ›์•„ 30์ดˆ๋งˆ๋‹ค static page ์ƒ์„ฑ (ISR์ ์šฉ)

Upload page
upload_page_gif
  1. Drag and Drop์œผ๋กœ ์ด๋ฏธ์ง€ ์—…๋กœ๋“œ ๊ฐ€๋Šฅ
  2. ์—…๋กœ๋“œ์‹œ ์‚ฌ์ด์ฆˆ ์กฐ์ •(ํฌ๋กญ)์ด ๊ฐ€๋Šฅ
  3. ์ด๋ฏธ์ง€ ํƒ€์ดํ‹€๋ฅผ ์ž„์˜๋กœ ์ง€์ •ํ•  ์ˆ˜ ์žˆ์œผ๋ฉฐ, ์ค‘๋ณต์ฒดํฌ ๊ฐ€๋Šฅ
  4. ์„œ๋ฒ„ ์—…๋กœ๋“œ์ „, ๋ฏธ๋ฆฌ๋ณด๊ธฐ๋ฅผ ํ†ตํ•ด ์นด๋“œ์— ์ ์šฉ์‹œ์ผœ ํ™•์ธ ๊ฐ€๋Šฅ

Timeout page
  1. idToken์ด ๋งŒ๋ฃŒ ๋˜๋Š” ์œ ํšจํ•˜์ง€ ์•Š์„๊ฒฝ์šฐ ์„œ๋ฒ„๋กœ๋ถ€ํ„ฐ ๋ฆฌ๋‹ค์ด๋ ‰์…˜ ๋˜๋Š” ํŽ˜์ด์ง€
  2. ์ ‘๊ทผ์‹œ ๊ฐ•์ œ๋กœ ๋กœ๊ทธ์•„์›ƒ


๐Ÿ“ฆ Stack

"next": "13.2.3",
"typescript": "4.9.5"
"sass": "^1.58.3",
"recoil": "^0.7.7",
"axios": "^1.3.4",
"firebase": "^9.17.2",
"firebase-admin": "^11.5.0",
"@aws-sdk/client-s3": "^3.289.0",
"formidable": "^2.1.1",
"react-cropper": "^2.3.1",
"gravatar": "^1.8.2",


๐Ÿงญ API


Member
ํšŒ์›๊ฐ€์ž…/ํšŒ์›์ •๋ณด๊ฐฑ์‹ 
POST /api/member.add
headers: { authoriztion: "Bearer $idToken"; }
body: {
  uid: string;
  email?: string | null;
  emailId?: string | null;
  displayName?: string | null;
  photoURL?: string | null;
}
response: {
  result: boolean;
  message: string;
}

์ด๋ฏธ ๋“ฑ๋ก๋œ ์‚ฌ์šฉ์ž์ผ ๊ฒฝ์šฐ body data๋ฅผ ํ†ตํ•ด ํšŒ์›์ •๋ณด ๊ฐฑ์‹ 

Image
์ด๋ฏธ์ง€ ์—…๋กœ๋“œ
POST /api/image.add
headers: { authoriztion: "Bearer $idToken"; }
body/formData {
  image: File;
  imageName: string;
  imageType: "image/png" | "image/jpeg";
  uid: "string";
}
response: {
  result: boolean;
  imageName: string;
  message: string;
}
์ด๋ฏธ์ง€๊ฒ€์ƒ‰(์ตœ์‹ ์ˆœ)
GET /api/image.get
query: {
  idx?: string;
}
response: {
  imageData: ImageInfo[];
  lastIdx: number;
}

idx๊ฐ€ ์žˆ์„์‹œ ํ•ด๋‹น idx์ดํ›„ ์ด๋ฏธ์ง€๋ฅผ ์ตœ์‹ ์ˆœ์œผ๋กœ ๊ฐ€์ ธ์˜ด(ํŽ˜์ด์ง€๋„ค์ด์…˜)
๋žœ๋ค ์ด๋ฏธ์ง€๊ฒ€์ƒ‰
GET /api/image.random
response: {
  imageData: ImageInfo[];
}

๊ฒน์น˜์ง€ ์•Š๋Š” ์ด๋ฏธ์ง€ 5์žฅ์„ ๊ฐ€์ ธ์˜จ๋‹ค.
*์ด DB ์ด๋ฏธ์ง€๊ฐ€ 5์žฅ์ดํ•˜์ผ ๊ฒฝ์šฐ์—๋Š” ์„œ๋ฒ„์—๋Ÿฌ๋ฐœ์ƒ
์ด๋ฏธ์ง€๊ฒ€์ƒ‰(ํƒ€์ดํ‹€/imageName)
GET /api/image.find
query)
name: string;
next?: "true" | "false"
response)
{
  imageData: ImageInfo[];
  lastName: string | null;
  lastIdx: number;
}

imageName์œผ๋กœ ์—…๋กœ๋“œํ•œ ์ด๋ฏธ์ง€ ๊ฒ€์ƒ‰, imageName์ˆœ์œผ๋กœ ์ •๋ ฌ
next๊ฐ€ "true"์ผ์‹œ name์˜ ๋‹ค์Œ ์ด๋ฏธ์ง€ 5์žฅ์„ ๊ฐ€์ง€๊ณ  ์˜ด(ํŽ˜์ด์ง€๋„ค์ด์…˜)
์ด๋ฏธ์ง€ ํƒ€์ดํ‹€(imageName) ์ค‘๋ณต์ฒดํฌ
GET /api/image.check
query: {
  name: string;
}
response: {
  result: boolean;
}

DB์— ์ ‘๊ทผํ•˜์—ฌ ํ•ด๋‹น name์˜ ์ด๋ฏธ์ง€๊ฐ€ ์žˆ๋Š” ์ง€ ํ™•์ธ, ์ค‘๋ณต์ผ์‹œ false์„ ๋ฐ˜ํ™˜

Score
์Šค์ฝ”์–ด ์ ์ˆ˜ ๊ธฐ๋ก
POST /api/score.add
headers: { authoriztion: "Bearer $idToken"; }
body: {
  uid: string;
  score: number;
  displayName: string;
}
response: {
  result: boolean;
}
์Šค์ฝ”์–ด ๋žญํ‚น ๊ฒ€์ƒ‰
GET /api/score.get
query: {
  idx?: string;
}
response: {
  scoreData: PasedScoreInfo[];
  lastIdx: number;
}

score id์ˆœ์œผ๋กœ ๋‚ด๋ฆผ์ฐจ์ˆœ 10๊ฐœ ์กฐํšŒ
idx๊ฐ€ ์žˆ์„์‹œ ํ•ด๋‹น idx์ดํ›„ ์Šค์ฝ”์–ด๋ฅผ ์ตœ์‹ ์ˆœ์œผ๋กœ ๊ฐ€์ ธ์˜ด(ํŽ˜์ด์ง€๋„ค์ด์…˜)


โš™๏ธ env

PROTOCOL=
HOST=
PORT=
LOCAL_TIME=32400000

/* S3 Bucket */
AWS_S3_ACCESSKEY_Id=
AWS_S3_SECRET_ACCESS_KEY=
AWS_S3_REGION=
AWS_S3_BUCKET=

/* Firebase Client */
FIREBASE_PROJECT_ID=
FIREBASE_AUTH_API_KEY=
FIREBASE_AUTH_AUTH_DOMAIN=

/* Firebase Admin */
FIREBASE_ADMIN_PROJECT_ID=
FIREBASE_ADMIN_CLIENT_EMAIL=
FIREBASE_ADMIN_PRIVATE_KEY=

/* Vercel temp Path */
IMAGE_STORAGE_PATH=/tmp

pairz's People

Contributors

yiminwook avatar

Watchers

 avatar

pairz's Issues

safari์—์„œ ์นด๋“œ์ƒ‰์ƒ์ด ์ œ๋Œ€๋กœ ๋ณด์ด์ง€ ์•Š๋Š”๋ฌธ์ œ

safari ๊ฐœ๋ฐœ์ž๋„๊ตฌ๋ฅผ ํ™•์ธํ–ˆ์„๋•Œ Card ์ปดํฌ๋„ŒํŠธ์— color className์ด ๋“ค์–ด๊ฐ€์ง€ ์•Š์•„์„œ ์ƒ‰์ƒ์ ์šฉ์ด ์•ˆ๋˜๋Š” ๋ฌธ์ œ๋ฅผ ๋ฐœ๊ฒฌ

๊ทธ๋Ÿฌ๋‚˜ ๊ฐœ๋ฐœ์žํƒ์ƒ‰์ฐฝ์„ ์—ด๊ณ  ์ƒˆ๋กœ๊ณ ์นจ์„ ํ–ˆ์„๋•Œ ์ œ๋Œ€๋กœ ๋ณด์ด๋Š” ๊ฒƒ์„ ๋ณด์•„ safari์—์„œ ์ผ์–ด๋‚˜๋Š” ๋ฒ„๊ทธ์ธ๋“ฏํ•จ

chrome, edge, firefox์—์„œ ํ™•์ธํ–ˆ์„๋• ํ•ด๋‹น ๋ฒ„๊ทธ๊ฐ€ ๋ฐœ์ƒ ํ•˜์ง€์•Š์Œ

๊ฒŒ์ž„์ง„ํ–‰์‹œ ์นด๋“œ์ƒ‰์€ ๋น„์Šทํ•œ ์ด๋ฏธ์ง€๋“ค์„ ์‚ฌ์šฉ์ž๋“ค์ด ์˜๋„์ ์œผ๋กœ ์˜ฌ๋ ธ์„๋•Œ ๋ถ„๋ณ„ํ•˜๊ฒŒ ํ•ด์ฃผ๋Š” ์žฅ์น˜์ด๋ฏ€๋กœ

ํ˜„์žฌ ๊ฒŒ์ž„์„ ์ง„ํ–‰ํ•˜๋Š”๋ฐ ์žˆ์–ด์„œ ์ค‘์š”ํ•œ ์š”์†Œ์ž„.

์ถ”ํ›„์— ์นด๋“œ์ƒ‰์ƒ์€ ์ธ๋ผ์ธ์Šคํƒ€์ผ๋กœ ๋ณ€๊ฒฝํ•ด์„œ ์ง์ ‘ ๋„ฃ์–ด๋ณด๋Š” ๋ฐฉํ–ฅ์œผ๋กœ ๋ณ€๊ฒฝํ•ด๋ณด๋ ค๊ณ ํ•จ.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.