Skip to content

Commit c8ab17f

Browse files
kiJu2kiJu2
authored
Merge pull request #120 from hyunhwa21/React-김현화-sprint6
[ 김현화 ] sprint6
2 parents c942d77 + e596928 commit c8ab17f

35 files changed

+938
-144
lines changed

‎.gitignore‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,3 +22,7 @@ dist-ssr
2222
*.njsproj
2323
*.sln
2424
*.sw?
25+
26+
27+
28+
.env

‎package-lock.json‎

Lines changed: 7 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@
1111
},
1212
"dependencies": {
1313
"axios": "^1.11.0",
14+
"lodash": "^4.17.21",
1415
"react": "^19.1.0",
1516
"react-dom": "^19.1.0",
1617
"react-helmet": "^6.1.0",

‎src/api/axios_instance.js‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
//axios instance
2+
3+
import axios from "axios";
4+
const BASE_URL=import.meta.env.VITE_PRODUCT_BASE_URL;
5+
const instance=axios.create({
6+
baseURL: BASE_URL,
7+
});
8+
9+
export default instance;

‎src/api/productApi.jsx‎

Lines changed: 18 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,21 @@
1-
import axios from "axios";
1+
import instance from "./axios_instance";
22

33
//베스트 상품
4-
const BASE_URL = "https://panda-market-api.vercel.app/products?page=";
5-
export async function getProductBest({ pageSize = 4 }) {
4+
const BASE_URL = import.meta.env.VITE_PRODUCT_BASE_URL;
5+
function createParams({ page, pageSize, orderBy }) {
6+
return new URLSearchParams({
7+
page: page.toString(),
8+
pageSize: pageSize.toString(),
9+
orderBy: orderBy,
10+
});
11+
}
12+
13+
14+
export async function getProductBest({ page, pageSize, orderBy }) {
615
try {
7-
const response = await axios.get(
8-
`${BASE_URL}1&pageSize=${pageSize}&orderBy=favorite`
16+
const params=createParams({page, pageSize,orderBy});
17+
const response = await instance.get(
18+
`/products?${params.toString()}`
919
);
1020
return response.data;
1121
} catch (error) {
@@ -16,8 +26,9 @@ export async function getProductBest({ pageSize = 4 }) {
1626
//리스트
1727
export async function getProductList({ page, pageSize, orderBy }) {
1828
try {
19-
const response = await axios.get(
20-
`${BASE_URL}${page}&pageSize=${pageSize}&orderBy=${orderBy}`
29+
const params=createParams({page, pageSize,orderBy});
30+
const response = await instance.get(
31+
`/products?${params.toString()}`
2132
);
2233
return response.data;
2334
} catch (error) {

‎src/assets/css/common.css‎

Lines changed: 38 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
@import url("../css/reset.css");
33
@import url("../css/variable.css");
44
body {
5-
width: 100%;
5+
width: calc(100vw - (100vw - 100%));
66
font-family: "Pretendard-Regular";
77
font-size: var(--common);
88
}
@@ -46,7 +46,8 @@ body {
4646
display: inline-flex;
4747
justify-content: center;
4848
align-items: center;
49-
padding: 1.2rem 2.3rem;
49+
padding: 1.3rem 2.229rem;
50+
line-height: 1;
5051
font-size: var(--common);
5152
font-weight: 600;
5253
color: var(--white100);
@@ -58,14 +59,48 @@ body {
5859
-o-border-radius: 9999px;
5960
white-space: nowrap;
6061
}
62+
.button[disabled] {
63+
background-color: var(--gray400);
64+
cursor: default;
65+
}
6166

6267
.medium-button {
6368
height: 4.8rem;
6469
}
6570

71+
.small-round {
72+
border-radius: 1.2rem;
73+
-webkit-border-radius: 1.2rem;
74+
-moz-border-radius: 1.2rem;
75+
-ms-border-radius: 1.2rem;
76+
-o-border-radius: 1.2rem;
77+
}
78+
79+
.sectionTitleWrap {
80+
display: flex;
81+
justify-content: flex-end;
82+
align-items: center;
83+
gap: 0 1.2rem;
84+
position: relative;
85+
z-index: 100;
86+
margin-bottom: 1.6rem;
87+
width: 100%;
88+
min-height: 3.2rem;
89+
}
90+
.sectionTitleWrap .sectionTitle {
91+
position: absolute;
92+
left: 0;
93+
font-size: var(--sectionTitle);
94+
}
95+
6696
@media all and (max-width: 47.9375rem) {
6797
.inner {
68-
padding: 0 2rem;
98+
padding: 0 1.5rem;
6999
width: 100%;
70100
}
101+
.sectionTitleWrap {
102+
flex-wrap: wrap;
103+
gap: 0.8rem 1.4rem;
104+
align-items: flex-start;
105+
}
71106
}/*# sourceMappingURL=common.css.map */

‎src/assets/css/common.css.map‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/assets/css/form.module.css‎

Lines changed: 154 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,154 @@
1+
.formWrap {
2+
display: flex;
3+
flex-direction: column;
4+
gap: 2.4rem 0;
5+
padding: 1rem 0;
6+
width: 100%;
7+
}
8+
9+
.inputGroup {
10+
display: flex;
11+
flex-direction: column;
12+
gap: 1.6rem 0;
13+
padding-bottom: 0.8rem;
14+
}
15+
16+
.inputTitle {
17+
font-size: var(--medium);
18+
}
19+
20+
.inputBox {
21+
display: flex;
22+
align-items: center;
23+
position: relative;
24+
width: 100%;
25+
height: fit-content;
26+
background-color: var(--gray100);
27+
border: 1px solid var(--gray50);
28+
border-radius: 1.2rem;
29+
-webkit-border-radius: 1.2rem;
30+
-moz-border-radius: 1.2rem;
31+
-ms-border-radius: 1.2rem;
32+
-o-border-radius: 1.2rem;
33+
}
34+
.inputBox input:not([type=checkbox]) {
35+
padding: 1.6rem 2.4rem 1.4rem;
36+
flex: 1 1 0;
37+
height: 5.6rem;
38+
font-size: var(--common);
39+
font-weight: 400;
40+
outline: 0 none;
41+
}
42+
.inputBox input:not([type=checkbox]).err {
43+
border: 1px solid var(--red) !important;
44+
}
45+
.inputBox input:not([type=checkbox]).focus {
46+
border: 1px solid var(--blue200);
47+
}
48+
.inputBox input:not([type=checkbox])::placeholder {
49+
font-size: inherit;
50+
font-weight: 400;
51+
color: var(--gray400);
52+
}
53+
.inputBox textarea {
54+
padding: 1.6rem 2.4rem 1.4rem;
55+
width: 100%;
56+
height: 28.2rem;
57+
line-height: 1.7;
58+
font-size: var(--common);
59+
font-weight: 400;
60+
outline: 0 none;
61+
}
62+
.inputBox textarea::placeholder {
63+
font-size: inherit;
64+
font-weight: 400;
65+
color: var(--gray400);
66+
}
67+
68+
.imageFileGroup {
69+
display: flex;
70+
flex-wrap: wrap;
71+
gap: 1.6rem 2.4rem;
72+
}
73+
.imageFileGroup .box {
74+
overflow: hidden;
75+
display: flex;
76+
justify-content: center;
77+
flex-direction: column;
78+
align-items: center;
79+
gap: 1.2rem 0;
80+
position: relative;
81+
width: 28.2rem;
82+
height: 28.2rem;
83+
font-weight: 400;
84+
color: var(--gray400);
85+
background-color: var(--gray100);
86+
border-radius: 1.6rem;
87+
-webkit-border-radius: 1.6rem;
88+
-moz-border-radius: 1.6rem;
89+
-ms-border-radius: 1.6rem;
90+
-o-border-radius: 1.6rem;
91+
cursor: pointer;
92+
}
93+
.imageFileGroup .box input {
94+
display: none;
95+
position: absolute;
96+
}
97+
.imageFileGroup .errorMessage {
98+
width: 100%;
99+
font-weight: 400;
100+
color: var(--red);
101+
}
102+
103+
input[type=file] {
104+
overflow: hidden;
105+
margin: -1px;
106+
width: 0;
107+
height: 0;
108+
}
109+
input[type=file]::file-selector-button {
110+
display: none;
111+
}
112+
113+
.imagePreview img {
114+
width: auto;
115+
height: 100%;
116+
object-fit: cover;
117+
}
118+
.imagePreview .deleteButton {
119+
z-index: 10;
120+
position: absolute;
121+
top: 1rem;
122+
right: 1rem;
123+
padding: 1rem;
124+
font-size: var(--large);
125+
color: var(--withe100);
126+
}
127+
128+
@media all and (max-width: 74.9375rem) {
129+
.imageFileGroup {
130+
gap: 1.6rem 1rem;
131+
}
132+
.imageFileGroup .box {
133+
width: 16.8rem;
134+
height: 16.8rem;
135+
}
136+
.imagePreview .deleteButton {
137+
top: 0.5rem;
138+
right: 0.5rem;
139+
}
140+
}
141+
@media all and (max-width: 47.9375rem) {
142+
.imageFileGroup {
143+
gap: 1.6rem 1rem;
144+
}
145+
.imageFileGroup .box {
146+
width: calc(50% - 0.5rem);
147+
max-width: 16.8rem;
148+
}
149+
}
150+
.tagWrap {
151+
display: flex;
152+
flex-direction: column;
153+
gap: 1.4rem 0;
154+
}/*# sourceMappingURL=form.module.css.map */

‎src/assets/css/form.module.css.map‎

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/assets/css/header.module.css‎

Lines changed: 18 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
position: fixed;
44
top: 0;
55
padding: 1rem 0 0.9rem;
6-
width: 100%;
6+
width: 100vw;
77
height: 7rem;
88
background-color: var(--white100);
99
border-bottom: 1px solid var(--line);
@@ -38,11 +38,26 @@
3838
}
3939
.nav a {
4040
display: block;
41+
position: relative;
4142
height: fit-content;
4243
padding: 1rem 1rem;
4344
}
44-
.nav a.active {
45-
border-bottom: 2px solid #3692ff;
45+
.nav a::after {
46+
position: absolute;
47+
left: 0;
48+
bottom: 0;
49+
width: 0;
50+
height: 2px;
51+
background-color: #3692ff;
52+
content: "";
53+
}
54+
.nav a.active::after {
55+
width: 100%;
56+
transition: width 0.3s 0.1s;
57+
-webkit-transition: width 0.3s 0.1s;
58+
-moz-transition: width 0.3s 0.1s;
59+
-ms-transition: width 0.3s 0.1s;
60+
-o-transition: width 0.3s 0.1s;
4661
}
4762

4863
@media all and (max-width: 47.9375rem) {

0 commit comments

Comments
 (0)