diff --git a/birthday_funding/src/pages/LoginPage/RegisterPage/RegisterPage.jsx b/birthday_funding/src/pages/LoginPage/RegisterPage/RegisterPage.jsx
index cba043f..141935f 100644
--- a/birthday_funding/src/pages/LoginPage/RegisterPage/RegisterPage.jsx
+++ b/birthday_funding/src/pages/LoginPage/RegisterPage/RegisterPage.jsx
@@ -1,7 +1,36 @@
-import React from 'react';
+import Header from '../../../Layout/Header';
+import './RegisterPage.scss';
const RegisterPage = () => {
- return
RegisterPage
;
+ return (
+ <>
+
+
+
+ );
};
export default RegisterPage;
diff --git a/birthday_funding/src/pages/LoginPage/RegisterPage/RegisterPage.scss b/birthday_funding/src/pages/LoginPage/RegisterPage/RegisterPage.scss
new file mode 100644
index 0000000..ad1ebb5
--- /dev/null
+++ b/birthday_funding/src/pages/LoginPage/RegisterPage/RegisterPage.scss
@@ -0,0 +1,61 @@
+@import '../../../styles/color.scss';
+@import '../../../styles/utils.scss';
+
+.register-container {
+ height: 90vh;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+
+ margin-top: 10rem;
+
+ max-width: 380px;
+
+ margin: auto;
+
+ .title {
+ margin-top: 0.5rem;
+ font-size: 20px;
+
+ text-align: center;
+ }
+
+ .form-container {
+ .input-container {
+ margin-top: 0.5rem;
+ margin-bottom: 0.5rem;
+
+ // display: flex;
+ // flex-direction: column;
+
+ .input-title {
+ margin-bottom: 0.5rem;
+ font-size: 14px;
+ }
+
+ .input-item {
+ height: 2rem;
+ border: 1px solid #e5e5e5;
+ border-radius: 4px;
+ padding-left: 0.3rem;
+
+ font-size: 14px;
+ }
+ label {
+ margin-right: 0.5rem;
+ }
+ #bir_wrap {
+ display: grid;
+ grid-template-columns: repeat(３, 10px);
+ }
+ }
+
+ .button-container {
+ button {
+ width: 100%;
+ height: 2rem;
+ }
+ }
+ }
+}
diff --git a/birthday_funding/src/pages/MyPage/MyPage.jsx b/birthday_funding/src/pages/MyPage/MyPage.jsx
index 29d42be..46f1556 100644
--- a/birthday_funding/src/pages/MyPage/MyPage.jsx
+++ b/birthday_funding/src/pages/MyPage/MyPage.jsx
@@ -1,7 +1,41 @@
import React from 'react';
+import Header from '../../Layout/Header';
+import Linkpage from '../../components/linkPage';
+import './MyPage.scss';
+import { request } from "../../utils/api";
+
+const user1 = {
+ "id" : 1,
+ "name" : "홍길동",
+ "birthday" : "2000-01-01",
+ "nickname" : "미정",
+ "point" : 150000,
+ "userImageUrl" : "../../public/images/intro/gift-box.png",
+}
+const user = await request(`/user`, {methods: 'GET'})
const MyPage = () => {
- return
MyPage
;
+ return (
+ <>
+
+
+
+
+ );
};
export default MyPage;
diff --git a/birthday_funding/src/pages/MyPage/MyPage.scss b/birthday_funding/src/pages/MyPage/MyPage.scss
new file mode 100644
index 0000000..8495cfb
--- /dev/null
+++ b/birthday_funding/src/pages/MyPage/MyPage.scss
@@ -0,0 +1,29 @@
+@import '../../styles/color.scss';
+@import '../../styles/utils.scss';
+.mypage-container {
+ background-color: white;
+ display: grid;
+ place-items: center;
+ grid-template-columns: repeat(2, 1fr);
+ margin-top: 10px;
+ .mypage-user {
+ img {
+ width: 100px;
+ border-radius: 100px;
+ }
+ .mypage-birthday {
+ margin-top: 5px;
+ font-size: 13px;
+ margin-bottom: 20px;
+ }
+ }
+ .mypage-point {
+ border: 1px solid $color-gray-01;
+ border-radius: 10px;
+ height: 70%;
+ width: 150px;
+ .mypage-pointname {
+ margin-top: 40px;
+ }
+ }
+}
\ No newline at end of file
diff --git a/birthday_funding/src/pages/MyPage/MygiftPage/MygiftPage.jsx b/birthday_funding/src/pages/MyPage/MygiftPage/MygiftPage.jsx
new file mode 100644
index 0000000..129a643
--- /dev/null
+++ b/birthday_funding/src/pages/MyPage/MygiftPage/MygiftPage.jsx
@@ -0,0 +1,29 @@
+import React from 'react';
+import Header from '../../../Layout/Header';
+import './MygiftPage.scss';
+import Product from '../../../components/Product';
+import { request } from "../../../utils/api";
+
+const gift = await request(`/user/gifticon?page=0`, {methods: 'GET'})
+
+const MyPage = () => {
+ console.log(gift)
+ return (
+ <>
+
+ 내 기프티콘
+
+ {gift.data.map(product =>
+
+ )}
+
+
+ );
+};
+
+export default MyPage;
diff --git a/birthday_funding/src/pages/MyPage/MygiftPage/MygiftPage.scss b/birthday_funding/src/pages/MyPage/MygiftPage/MygiftPage.scss
new file mode 100644
index 0000000..b13b255
--- /dev/null
+++ b/birthday_funding/src/pages/MyPage/MygiftPage/MygiftPage.scss
@@ -0,0 +1,7 @@
+@import '../../../styles/color.scss';
+@import '../../../styles/utils.scss';
+.gift-container {
+ margin-top: 70px;
+ display: grid;
+ grid-template-columns: repeat(2, 1fr);
+}
\ No newline at end of file
diff --git a/birthday_funding/src/pages/NavigatePage/NavigatePage.jsx b/birthday_funding/src/pages/NavigatePage/NavigatePage.jsx
index 4b4f9bb..c5846fc 100644
--- a/birthday_funding/src/pages/NavigatePage/NavigatePage.jsx
+++ b/birthday_funding/src/pages/NavigatePage/NavigatePage.jsx
@@ -1,7 +1,20 @@
import React from 'react';
+import Header from '../../Layout/Header';
+import Linkpage from '../../components/linkPage'
+import './NavigatePage.scss';
const NavigatePage = () => {
- return NavigatePage
;
+ return (
+ <>
+
+
+
+ );
};
export default NavigatePage;
diff --git a/birthday_funding/src/pages/NavigatePage/NavigatePage.scss b/birthday_funding/src/pages/NavigatePage/NavigatePage.scss
new file mode 100644
index 0000000..48457ec
--- /dev/null
+++ b/birthday_funding/src/pages/NavigatePage/NavigatePage.scss
@@ -0,0 +1,6 @@
+@import '../../styles/color.scss';
+@import '../../styles/utils.scss';
+.navigate-container {
+ background-color: $color-pink-04;
+ margin-top: 10px;
+}
\ No newline at end of file
diff --git a/birthday_funding/src/pages/StorePage/StorePage.jsx b/birthday_funding/src/pages/StorePage/StorePage.jsx
index 075b53a..aa702f8 100644
--- a/birthday_funding/src/pages/StorePage/StorePage.jsx
+++ b/birthday_funding/src/pages/StorePage/StorePage.jsx
@@ -1,7 +1,100 @@
import React from 'react';
+import Header from '../../Layout/Header';
+import Product from '../../components/Product'
+import './StorePage.scss';
+
+const User = {
+ "id" : 1,
+ "name" : "홍길동",
+ "birthday" : "2000-01-01",
+ "nickname" : "미정",
+ "point" : 150000,
+ "userImageUrl" : "aa.xxx.png"
+}
+
+const product = [
+ {
+ "hasNext" : false,
+ "data" : [
+ {
+ "id" : 1,
+ "category": "CAFE",
+ "name" : "에어팟",
+ "price" : 10000,
+ "brand" : "스타벅스",
+ "imageUrl" : "../../public/images/intro/gift-box.png"
+ },
+ {
+ "id" : 2,
+ "category": "CAFE",
+ "name" : "하",
+ "price" : 10000,
+ "brand" : "스타벅스",
+ "imageUrl" : "../../public/images/intro/gift-box.png"
+ },
+ {
+ "id" : 3,
+ "category": "CHICKEN",
+ "name" : "에어팟",
+ "price" : 10000,
+ "brand" : "스타벅스",
+ "imageUrl" : "../../public/images/intro/gift-box.png"
+ },
+ {
+ "id" : 4,
+ "category": "CAFE",
+ "name" : "에어팟",
+ "price" : 10000,
+ "brand" : "스타벅스",
+ "imageUrl" : "../../public/images/intro/gift-box.png"
+ },
+ {
+ "id" : 5,
+ "category": "CHICKEN",
+ "name" : "에어팟",
+ "price" : 10000,
+ "brand" : "스타벅스",
+ "imageUrl" : "../../public/images/intro/gift-box.png"
+ },
+ {
+ "id" : 6,
+ "name" : "에어팟",
+ "category": "CHICKEN",
+ "price" : 10000,
+ "brand" : "스타벅스",
+ "imageUrl" : "../../public/images/intro/gift-box.png"
+ }
+ ]
+ }
+]
const StorePage = () => {
- return StorePage
;
+ return (
+ <>
+
+
+
내 포인트 : {User.point}
+
+
상품 카테고리 분류
+
+ 상품 목록
+
+ {product[0].data.map(product =>
+
+ )}
+
+
+ );
};
export default StorePage;
diff --git a/birthday_funding/src/pages/StorePage/StorePage.scss b/birthday_funding/src/pages/StorePage/StorePage.scss
new file mode 100644
index 0000000..250db2b
--- /dev/null
+++ b/birthday_funding/src/pages/StorePage/StorePage.scss
@@ -0,0 +1,26 @@
+@import '../../styles/color.scss';
+@import '../../styles/utils.scss';
+.point-container {
+ margin-top: 20px;
+ .point-name {
+ margin-bottom: 10px;
+ }
+}
+
+.ul-category {
+ margin-top: 55px;
+ margin-left: 60px;
+ display: grid;
+ grid-template-columns: repeat(3, 70px);
+ .category-button {
+ border-radius: 10px;
+ height: 25px;
+ width: 60px;
+ }
+}
+
+.ul-product {
+ margin-top: 55px;
+ display: grid;
+ grid-template-columns: repeat(2, 155px);
+}
\ No newline at end of file
diff --git a/birthday_funding/src/styles/utils.scss b/birthday_funding/src/styles/utils.scss
index ad6549e..02b810e 100644
--- a/birthday_funding/src/styles/utils.scss
+++ b/birthday_funding/src/styles/utils.scss
@@ -32,3 +32,19 @@
align-items: center;
text-align: center;
}
+
+.title {
+ float: left;
+ margin-top: 20px;
+ margin-left: 20px;
+ margin-bottom: 10px;
+}
+
+.pink-button {
+ width: 200px;
+ height: 30px;
+ border-radius: 15px;
+ background-color: $color-pink-01;
+ color: white;
+ border: 1px solid $color-gray-01;
+}
\ No newline at end of file
diff --git a/birthday_funding/src/utils/api.js b/birthday_funding/src/utils/api.js
new file mode 100644
index 0000000..21cc018
--- /dev/null
+++ b/birthday_funding/src/utils/api.js
@@ -0,0 +1,15 @@
+// 통신 관련 코드가 작성 될 파일입니다.
+export const API_END_POINT = 'http://52.79.95.147:8080'
+
+export const request = async(url, options) => {
+ try {
+ const res = await fetch(`${API_END_POINT}${url}`, options);
+
+ if (res.ok) {
+ return await res.json();
+ }
+ throw new Error('api error');
+ } catch (e) {
+ alert(e.message);
+ }
+}
\ No newline at end of file
diff --git a/birthday_funding/src/utils/axios.js b/birthday_funding/src/utils/axios.js
deleted file mode 100644
index e8019a3..0000000
--- a/birthday_funding/src/utils/axios.js
+++ /dev/null
@@ -1 +0,0 @@
-// 통신 관련 코드가 작성 될 파일입니다.
