Skip to content

๐ŸŽฎ ๊ฒŒ์ž„ ์ข‹์•„ํ•˜๋‹ˆ...? ์ด๊ฑฐ ๋„ˆ ๊ฐ€์ ธ... ์šฐ๋ฆฐ ๊ปจ๋ถ€์ž–์•„

Notifications You must be signed in to change notification settings

feel0321/FEDC2_Gamebu_Yohan

ย 
ย 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 

Repository files navigation

Gamebu(๊ปจ๋ถ€)

๋ฐฐํฌ ๋งํฌ ๋ฐฐํฌ๋Š” ์—ฌ๊ธฐ ์œ„ ๋งํฌ๋Š” ๋ชจ๋ฐ”์ผ์— ์ตœ์ ํ™”๋˜์–ด ์žˆ์Šต๋‹ˆ๋‹ค

ํ”ผ๊ทธ๋งˆ ๋งํฌ ํ”ผ๊ทธ๋งˆ๋Š” ์—ฌ๊ธฐ

image image image image image image image image image image image image image

๋ชฉ์ฐจ

  1. ํ”„๋กœ์ ํŠธ ์‹คํ–‰
  2. ํ”„๋กœ์ ํŠธ ์†Œ๊ฐœ
  3. ๊ทœ์น™
  4. ํด๋” ๊ตฌ์กฐ
  5. ๊ธฐ์ˆ  ์Šคํƒ
  6. ์ปค๋ฎค๋‹ˆ์ผ€์ด์…˜
  7. ํŒ€์›

ํ”„๋กœ์ ํŠธ ์‹คํ–‰

Node Version

v16.15.0

Package Manager

npm(version 8.5.5)

ํ™˜๊ฒฝ ๋ณ€์ˆ˜

.env ํŒŒ์ผ์— API_URL ๋ณ€์ˆ˜๋ฅผ ์ถ”๊ฐ€ํ•ด์•ผํ•ฉ๋‹ˆ๋‹ค.

REACT_APP_API_END_POINT=[API_URL]

์˜์กด์„ฑ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ ์„ค์น˜

npm i

๋˜๋Š”

npm install

develop

// ๊ฐœ๋ฐœ ๋ชจ๋“œ ์‹คํ–‰
npm run dev

production build

๋นŒ๋“œ

// mac
npm run mac-build

// window
npm run window-build

์‹คํ–‰

npm install -g serve
serve -s build

๋˜๋Š”

npx serve -s build

ํ”„๋กœ์ ํŠธ ์†Œ๊ฐœ

๊ปจ๋ถ€๋Š” ๊ธฐ์กด์˜ ํ•œ ๊ฒŒ์ž„์˜ ํŠน์ • ์ฝ˜ํ…์ธ ์˜ ์œ ์ €๋งŒ์„ ๋ชจ์ง‘ํ•˜๋Š” ๊ฒƒ์ด ์•„๋‹Œ, ์—ฌ๋Ÿฌ ๊ฒŒ์ž„, ์—ฌ๋Ÿฌ ์ฝ˜ํ…์ธ ๋ฅผ ํ•จ๊ป˜ ์ฆ๊ธธ ์œ ์ €๋ฅผ ๋ชจ์ง‘ํ•˜๋Š” ์ข…ํ•ฉ ๊ฒŒ์ž„ ํŒŒํ‹ฐ์› ๊ตฌ์ธ ์„œ๋น„์Šค๋ฅผ ๋ชฉํ‘œ๋กœ ํ•ฉ๋‹ˆ๋‹ค.

์—ฌ๋Ÿฌ ๊ฒŒ์ž„์˜ ์ปค๋ฎค๋‹ˆํ‹ฐ๋ฅผ ํ•˜๋‚˜ํ•˜๋‚˜ ์ฐพ์•„๋‹ค๋‹ ํ•„์š” ์—†์ด, ์—ฌ๋Ÿฌ ๊ฒŒ์ž„๊ณผ ์ฝ˜ํ…์ธ ๋ฅผ ํ•จ๊ป˜ ์ฆ๊ธธ ์‚ฌ๋žŒ์„ ์ข…ํ•ฉ์ ์œผ๋กœ ๊ตฌํ•˜๋Š” ์„œ๋น„์Šค๋ฅผ ์ด์šฉํ•  ์ˆ˜ ์žˆ๋Š” SNS ํ”Œ๋žซํผ์ž…๋‹ˆ๋‹ค.

๊ทœ์น™

Git Branch

  • main branch๋ฅผ default๋กœ ํ•œ๋‹ค.
  • ๊ฐœ๋ฐœ์€ develop์—์„œ ํŒŒ์ƒ๋œ working branch์—์„œ ์ž‘์—…ํ•œ๋‹ค.
  • ์ž‘์—… ํ›„ develop branch์— mergeํ•œ๋‹ค.
    • merge ์ „ ํŒ€์› ๊ฒ€์ˆ˜ ์ง„ํ–‰ํ•˜๊ณ  develop branch๋กœ merge๋ฅผ ํ•œ๋‹ค.
    • merge๋Š” page ๋‹จ์œ„๋กœ ์ง„ํ–‰ํ•œ๋‹ค.

Git Commit

Commit Types Descriptions
feat ์ƒˆ๋กœ์šด ๊ธฐ๋Šฅ ์ถ”๊ฐ€
fix ๋ฒ„๊ทธ ์ˆ˜์ •
style ์ฝ”๋“œ ํฌ๋งทํŒ…
refactor ๋ฆฌํŒฉํ„ฐ๋ง
design CSS ๋ฐ ๋””์ž์ธ ์ˆ˜์ •
chore JSON ์„ค์ •, ๋””๋ ‰ํ„ฐ๋ฆฌ ์ˆ˜์ •, File Name ์ˆ˜์ • ๋“ฑ
docs README ๊ฐ™์€ ๋ฌธ์„œ ์ˆ˜์ •

Commit Template

[type]: header // ex. feat: ๋กœ๊ทธ์ธ ๊ธฐ๋Šฅ์„ ์ถ”๊ฐ€ํ–ˆ๋‹ค.

body

1. header

hrader๋Š” ์™„์„ฑํ˜• ๋ฌธ์žฅ์œผ๋กœ ์ž‘์„ฑํ•œ๋‹ค.

โŒ feat: ๋กœ๊ทธ์ธ ๊ธฐ๋Šฅ ์ถ”๊ฐ€
โœ… feat: ๋กœ๊ทธ์ธ ๊ธฐ๋Šฅ์„ ์ถ”๊ฐ€ํ–ˆ๋‹ค.

2. types

type์€ ์†Œ๋ฌธ์ž๋กœ๋งŒ ์ž‘์„ฑํ•œ๋‹ค.
์ฝœ๋ก (:) ๊ธฐํ˜ธ๋กœ type๊ณผ description์„ ๊ตฌ๋ถ„ํ•œ๋‹ค.
์ฝœ๋ก (:) ์ดํ›„์— ํ•œ ์นธ ๋„์–ด์“ฐ๊ธฐ ํ›„ description์„ ์ž‘์„ฑํ•œ๋‹ค.

โŒ feat:๋กœ๊ทธ์ธ ๊ธฐ๋Šฅ ์ถ”๊ฐ€ํ–ˆ๋‹ค.
โœ… feat: ๋กœ๊ทธ์ธ ๊ธฐ๋Šฅ์„ ์ถ”๊ฐ€ํ–ˆ๋‹ค.
3. body
โŒ refactor: ๋กœ๊ทธ์ธ ํ•จ์ˆ˜๋ฅผ ๋ถ„๋ฆฌํ–ˆ๋‹ค.

โœ… ์•„๋ž˜์ฒ˜๋Ÿผ ๊ฐœํ–‰ ํ›„ ์ƒ์„ธํ•œ ์„ค๋ช…์„ ์ ๋Š”๋‹ค.
refactor: ๋กœ๊ทธ์ธ ํ•จ์ˆ˜๋ฅผ ๋ถ„๋ฆฌํ–ˆ๋‹ค.

๊ธฐ์กด ๋กœ๊ทธ์ธ ํ•จ์ˆ˜๋ฅผ ๋กœ๊ทธ์ธ ์ •๋ณด ์ž…๋ ฅ ์–‘์‹ ํ™•์ธ ํ•จ์ˆ˜์™€ ๋กœ๊ทธ์ธ ์ •๋ณด ์ธ์ฆ ํ•จ์ˆ˜๋กœ ๋ถ„๋ฆฌํ–ˆ๋‹ค.

Code Rules

  • ๊ฐ€๊ธ‰์  ์•ฝ์–ด ์‚ฌ์šฉ์„ ์ง€์–‘ํ•˜๊ณ  full name์„ ์‚ฌ์šฉํ•œ๋‹ค.
// BAD
let el;
// GOOD
let element;
  • event, handler function ๊ทœ์น™ ๋…ผ์˜ ํ›„ ์ง€์ •(2022-06-09)

Pull Requests

  • ๋ฆฌ๋ทฐ์–ด๊ฐ€ ํ™•์‹คํžˆ ์•Œ์•„๋ณผ ์ˆ˜ ์žˆ๋„๋ก ์ฝ”๋“œ ์ž‘์„ฑ์ž๊ฐ€ PR์„ ์ƒ์„ธํ•˜๊ฒŒ ์ ๋Š”๋‹ค.
  • ๋ฆฌ๋ทฐ๊ฐ€ ๋๋‚˜๊ณ  merge๊ฐ€ ๋˜์—ˆ๋‹ค๋ฉด, ํ•ต์‹ฌ ๊ธฐ๋Šฅ์€ ๋”ฐ๋กœ ๋ฌธ์„œํ™” ํ•œ๋‹ค.

ํด๋” ๊ตฌ์กฐ

๐ŸŽฎ ๊ปจ๋ถ€(Gamebu)
โ”œโ”€ .eslintrc.js
โ”œโ”€ .gitignore
โ”œโ”€ .prettierrc.js
โ”œโ”€ .storybook
โ”œโ”€ craco.config.js
โ”œโ”€ jsconfig.json
โ”œโ”€ package-lock.json
โ”œโ”€ package.json
โ”œโ”€ public
โ”œโ”€ README.md
โ””โ”€ src
   โ”œโ”€ App.js
   โ”œโ”€ App.test.js
   โ”œโ”€ assets
   โ”‚  โ”œโ”€ ChannelIcons
   โ”‚  โ”‚  โ”œโ”€ Icon_๋กœ์ŠคํŠธ์•„ํฌ.png
   โ”‚  โ”‚  โ”œโ”€ Icon_๋ฆฌ๊ทธ์˜ค๋ธŒ๋ ˆ์ „๋“œ.png
   โ”‚  โ”‚  โ”œโ”€ Icon_๋ฉ”์ดํ”Œ์Šคํ† ๋ฆฌ.png
   โ”‚  โ”‚  โ”œโ”€ Icon_๋ฐฐํ‹€๊ทธ๋ผ์šด๋“œ.png
   โ”‚  โ”‚  โ”œโ”€ Icon_์˜ค๋ฒ„์›Œ์น˜.png
   โ”‚  โ”‚  โ””โ”€ index.js
   โ”‚  โ”œโ”€ ChannelImages
   โ”‚  โ”‚  โ”œโ”€ ChannelBanner_LOL.jpeg
   โ”‚  โ”‚  โ”œโ”€ ChannelBanner_LostArk.jpg
   โ”‚  โ”‚  โ”œโ”€ ChannelBanner_MapleStory.jpg
   โ”‚  โ”‚  โ”œโ”€ ChannelBanner_Overwatch.png
   โ”‚  โ”‚  โ”œโ”€ ChannelBanner_PUBG.png
   โ”‚  โ”‚  โ””โ”€ index.js
   โ”‚  โ”œโ”€ img
   โ”‚  โ”‚  โ”œโ”€ battleground.png
   โ”‚  โ”‚  โ”œโ”€ index.js
   โ”‚  โ”‚  โ”œโ”€ lol.png
   โ”‚  โ”‚  โ”œโ”€ lostark.png
   โ”‚  โ”‚  โ”œโ”€ maple.png
   โ”‚  โ”‚  โ””โ”€ overwatch.png
   โ”‚  โ””โ”€ TagAvatars
   โ”‚     โ”œโ”€ Competition.png
   โ”‚     โ”œโ”€ Dealer.png
   โ”‚     โ”œโ”€ Duo.png
   โ”‚     โ”œโ”€ FPS.png
   โ”‚     โ”œโ”€ Healer.png
   โ”‚     โ”œโ”€ index.js
   โ”‚     โ”œโ”€ Party.png
   โ”‚     โ”œโ”€ Raid.png
   โ”‚     โ”œโ”€ RPG.png
   โ”‚     โ”œโ”€ Support.png
   โ”‚     โ””โ”€ Tanker.png
   โ”œโ”€ components
   โ”‚  โ”œโ”€ AlarmCard
   โ”‚  โ”‚  โ”œโ”€ Comment.js
   โ”‚  โ”‚  โ”œโ”€ index.js
   โ”‚  โ”‚  โ”œโ”€ Like.js
   โ”‚  โ”‚  โ””โ”€ Message.js
   โ”‚  โ”œโ”€ AlarmMenu
   โ”‚  โ”‚  โ””โ”€ index.js
   โ”‚  โ”œโ”€ Avatar
   โ”‚  โ”‚  โ”œโ”€ AvatarGroup.js
   โ”‚  โ”‚  โ””โ”€ index.js
   โ”‚  โ”œโ”€ Badge
   โ”‚  โ”‚  โ””โ”€ index.js
   โ”‚  โ”œโ”€ BottomNavBar
   โ”‚  โ”‚  โ””โ”€ index.js
   โ”‚  โ”œโ”€ Card
   โ”‚  โ”‚  โ”œโ”€ Author.js
   โ”‚  โ”‚  โ”œโ”€ Comment.js
   โ”‚  โ”‚  โ”œโ”€ index.js
   โ”‚  โ”‚  โ”œโ”€ Post.js
   โ”‚  โ”‚  โ””โ”€ User.js
   โ”‚  โ”œโ”€ Categories
   โ”‚  โ”‚  โ”œโ”€ GameIcon.js
   โ”‚  โ”‚  โ”œโ”€ GameImage.js
   โ”‚  โ”‚  โ”œโ”€ GameTitle.js
   โ”‚  โ”‚  โ”œโ”€ index.js
   โ”‚  โ”‚  โ””โ”€ MessageTitle.js
   โ”‚  โ”œโ”€ CategoryItem
   โ”‚  โ”‚  โ””โ”€ index.js
   โ”‚  โ”œโ”€ Channels
   โ”‚  โ”‚  โ”œโ”€ ChannelImageContainer.js
   โ”‚  โ”‚  โ”œโ”€ ChannelPostCard.js
   โ”‚  โ”‚  โ””โ”€ index.js
   โ”‚  โ”œโ”€ ClickAwayPopper
   โ”‚  โ”‚  โ””โ”€ index.js
   โ”‚  โ”œโ”€ Comment
   โ”‚  โ”‚  โ”œโ”€ CommetInput.js
   โ”‚  โ”‚  โ””โ”€ index.js
   โ”‚  โ”œโ”€ CommentInput
   โ”‚  โ”‚  โ””โ”€ index.js
   โ”‚  โ”œโ”€ Divider
   โ”‚  โ”‚  โ””โ”€ index.js
   โ”‚  โ”œโ”€ EditFullNameModal
   โ”‚  โ”‚  โ””โ”€ index.js
   โ”‚  โ”œโ”€ GoBack
   โ”‚  โ”‚  โ””โ”€ index.js
   โ”‚  โ”œโ”€ Header
   โ”‚  โ”‚  โ””โ”€ index.js
   โ”‚  โ”œโ”€ Image
   โ”‚  โ”‚  โ”œโ”€ BannerImage.js
   โ”‚  โ”‚  โ””โ”€ index.js
   โ”‚  โ”œโ”€ InterestedChannelModal
   โ”‚  โ”‚  โ””โ”€ index.js
   โ”‚  โ”œโ”€ LoginModal
   โ”‚  โ”‚  โ””โ”€ index.js
   โ”‚  โ”œโ”€ PostForm
   โ”‚  โ”‚  โ”œโ”€ index.js
   โ”‚  โ”‚  โ”œโ”€ MultiLineTextInput.js
   โ”‚  โ”‚  โ”œโ”€ SelectInput.js
   โ”‚  โ”‚  โ””โ”€ TextInput.js
   โ”‚  โ”œโ”€ SkeletonMessage
   โ”‚  โ”‚  โ”œโ”€ Card.js
   โ”‚  โ”‚  โ”œโ”€ Detail.js
   โ”‚  โ”‚  โ””โ”€ index.js
   โ”‚  โ”œโ”€ Tag
   โ”‚  โ”‚  โ””โ”€ index.js
   โ”‚  โ”œโ”€ TagChip
   โ”‚  โ”‚  โ”œโ”€ index.js
   โ”‚  โ”‚  โ”œโ”€ ShortTagList.js
   โ”‚  โ”‚  โ””โ”€ TagList.js
   โ”‚  โ”œโ”€ Thumbnail
   โ”‚  โ”‚  โ””โ”€ index.js
   โ”‚  โ””โ”€ Topbar
   โ”‚     โ”œโ”€ index.js
   โ”‚     โ”œโ”€ Sidebar.js
   โ”‚     โ””โ”€ UserSidebar.js
   โ”œโ”€ contexts
   โ”‚  โ””โ”€ ContextProvider.js
   โ”œโ”€ hooks
   โ”‚  โ”œโ”€ useActionContext.js
   โ”‚  โ”œโ”€ useAsync.js
   โ”‚  โ”œโ”€ useAsyncFn.js
   โ”‚  โ”œโ”€ useCheckAuth.js
   โ”‚  โ”œโ”€ useCookieToken.js
   โ”‚  โ”œโ”€ useForm.js
   โ”‚  โ”œโ”€ useInterval.js
   โ”‚  โ”œโ”€ useOurSnackbar.js
   โ”‚  โ”œโ”€ usePostForm.js
   โ”‚  โ””โ”€ useValueContext.js
   โ”œโ”€ index.css
   โ”œโ”€ index.js
   โ”œโ”€ pages
   โ”‚  โ”œโ”€ AlramPage.js
   โ”‚  โ”œโ”€ CategoriesPage.js
   โ”‚  โ”œโ”€ ChannelPage.js
   โ”‚  โ”œโ”€ DetailMessage.js
   โ”‚  โ”œโ”€ Footer.js
   โ”‚  โ”œโ”€ Heading.js
   โ”‚  โ”œโ”€ HomePage.js
   โ”‚  โ”œโ”€ index.js
   โ”‚  โ”œโ”€ LoginPage.js
   โ”‚  โ”œโ”€ MessagePage.js
   โ”‚  โ”œโ”€ NotFoundPage.js
   โ”‚  โ”œโ”€ PostDetailPage.js
   โ”‚  โ”œโ”€ PostEditPage.js
   โ”‚  โ”œโ”€ PostWritePage.js
   โ”‚  โ”œโ”€ ProfilePage.js
   โ”‚  โ”œโ”€ SearchAllPage.js
   โ”‚  โ”œโ”€ SearchPage.js
   โ”‚  โ”œโ”€ SearchPostPage.js
   โ”‚  โ”œโ”€ SearchUserPage.js
   โ”‚  โ””โ”€ SignupPage.js
   โ”œโ”€ reportWebVitals.js
   โ”œโ”€ setupTests.js
   โ”œโ”€ stories
   โ”‚  โ”œโ”€ Avatar.stories.js
   โ”‚  โ”œโ”€ Badge.stories.js
   โ”‚  โ”œโ”€ Card.stories.js
   โ”‚  โ”œโ”€ ClickAwayPopper.stories.js
   โ”‚  โ”œโ”€ Divider.stories.js
   โ”‚  โ”œโ”€ Header.stories.js
   โ”‚  โ”œโ”€ Image.stories.js
   โ”‚  โ”œโ”€ PostInput.stories.js
   โ”‚  โ”œโ”€ TagChip.stories.js
   โ”‚  โ””โ”€ TagList.stories.js
   โ””โ”€ utils
      โ”œโ”€ alarm
      โ”‚  โ””โ”€ index.js
      โ”œโ”€ color.js
      โ”œโ”€ constants.js
      โ”œโ”€ fetch.js
      โ”œโ”€ likes
      โ”‚  โ””โ”€ index.js
      โ”œโ”€ message
      โ”‚  โ””โ”€ index.js
      โ”œโ”€ search
      โ”‚  โ””โ”€ index.js
      โ”œโ”€ time.js
      โ””โ”€ user
         โ””โ”€ index.js

๊ธฐ์ˆ  ์Šคํƒ



์ปค๋ฎค๋‹ˆ์ผ€์ด์…˜

ํŒ€์›

์กฐ์ฑ„์šฐ ๊ณ ๊ด‘ํ•„ ๊น€๋™์–ธ ๋ฐ•๋ฏผ์ œ ์ด์ƒ์ง„
Github Github Github Github Github

About

๐ŸŽฎ ๊ฒŒ์ž„ ์ข‹์•„ํ•˜๋‹ˆ...? ์ด๊ฑฐ ๋„ˆ ๊ฐ€์ ธ... ์šฐ๋ฆฐ ๊ปจ๋ถ€์ž–์•„

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 99.4%
  • Other 0.6%