Toggle navigation
Toggle navigation
This project
Loading...
Sign in
khusat
/
khusat-front
Go to a project
Toggle navigation
Toggle navigation pinning
Projects
Groups
Snippets
Help
Project
Activity
Repository
Pipelines
Graphs
Issues
0
Merge Requests
0
Wiki
Snippets
Network
Create a new issue
Builds
Commits
Issue Boards
Authored by
이준호
2020-12-10 17:17:55 +0900
Browse Files
Options
Browse Files
Download
Email Patches
Plain Diff
Commit
ba50aad76afcc79b54c8b51bd84f23696a5eb9a9
ba50aad7
1 parent
a0a7f858
[UPDATE] 리드미 gif 추가 및 사용방법 수정
Hide whitespace changes
Inline
Side-by-side
Showing
5 changed files
with
11 additions
and
38 deletions
README.md
package.json
src/components/kakao/KakaoBtn.js
src/containers/KakaoBtnContainer.js
src/pages/ResultPage.js
README.md
View file @
ba50aad
...
...
@@ -8,7 +8,7 @@
20대 남자면 꼭 가야만 하는 군대, 어떤 보직이 알맞을지 미리 추천해 드리겠습니다.
> (이미지 추가 예정
)
![
쿠사트
](
https://khusinsa.s3.amazonaws.com/khusatmain.gif
)
## 🔖 프로그램 구조
...
...
@@ -18,8 +18,6 @@
-
`pages`
: 기능별 화면을 모아놓은 라우팅 페이지들 입니다.
-
`store`
: 상태관리를 위한 redux store 입니다.
`KHUSAT-SERVER`
## 🌏 개발환경 및 사용 언어
`KHUSAT-FRONT`
...
...
@@ -41,35 +39,11 @@
-
axios
-
react-router-dom
`KHUSAT-SERVER`
## 🔎 사용 방법
**(배포 이전) Local에서 동작하는 방법을 소개합니다.**
> 서버 및 클라이언트 배포 예정
1.
repository clone 하기
> 원하는 디렉토리에서 khusat-front 를 클론해옵니다.
```jsx
git clone http://khuhub.khu.ac.kr/khusat/khusat-front.git
```
2.
package 파일 설치하기
> 빌드를 위한 패키지 모듈들을 설치합니다. (yarn을 추천합니다)
```jsx
yarn // yarn 만 입력합니다.
npm install // npm 사용시 npm install을 입력합니다.
```
3.
application 실행하기
> `yarn start` 로 실행 후 [`localhost:3000`](http://localhost:3000) 으로 접속하여 테스트 할 수 있습니다!
-
별도의 설치 없이 http://khusat.herokuapp.com 에서 자유롭게 사용하실 수 있습니다!
```jsx
yarn start
https://localhost:3000
```
> [!지금 테스트 체험해보기](http://khusat.herokuapp.com)
## 👥 구성원 소개
...
...
@@ -86,5 +60,5 @@ MIT License Copyright(c) [Kyhong Park]
## ☎️ Contact
프로젝트에 문제가 있거나 궁금하신 사항은 메일로 연락주세요
-
Email: junolee7803@gmail.com
[
JunHo Lee
]
-
Email: kyhong222@naver.com
[
Kyhong Park
]
\ No newline at end of file
-
Email: junolee7803@gmail.com
-
Email: kyhong222@naver.com
\ No newline at end of file
...
...
package.json
View file @
ba50aad
...
...
@@ -27,7 +27,7 @@
"web-vitals"
:
"^0.2.4"
},
"scripts"
:
{
"start"
:
"react-scripts start
.env
"
,
"start"
:
"react-scripts start"
,
"build"
:
"react-scripts build"
,
"test"
:
"react-scripts test"
,
"eject"
:
"react-scripts eject"
...
...
src/components/kakao/KakaoBtn.js
View file @
ba50aad
import
React
,
{
useEffect
}
from
"react"
;
import
"./kakaoBtn.scss"
;
import
dotenv
from
"dotenv"
;
import
kakao
from
"../../assets/kakao.png"
;
dotenv
.
config
();
const
KakaoBtn
=
({
result
})
=>
{
useEffect
(()
=>
{
useEffect
(()
=>
{
createKakaoButton
();
},
[]);
},[]);
const
createKakaoButton
=
()
=>
{
// kakao sdk script이 정상적으로 불러와졌으면 window.Kakao로 접근이 가능합니다
if
(
window
.
Kakao
)
{
...
...
src/containers/KakaoBtnContainer.js
View file @
ba50aad
import
React
,{
useEffect
}
from
"react"
;
import
useScript
from
"../hooks/useScript"
;
import
KakaoBtn
from
"../components/kakao/KakaoBtn"
;
const
KakaoBtnContainer
=
({
result
})
=>
{
useScript
(
"https://developers.kakao.com/sdk/js/kakao.js"
);
return
(
<
div
className
=
"layout"
>
<
KakaoBtn
result
=
{
result
}
/
>
...
...
src/pages/ResultPage.js
View file @
ba50aad
import
React
from
"react"
;
import
React
,{
useEffect
}
from
"react"
;
import
styled
,
{
css
}
from
"styled-components"
;
import
{
lighten
,
darken
}
from
"polished"
;
import
KakaoBtn
from
"../containers/KakaoBtnContainer"
;
...
...
Please
register
or
login
to post a comment