Skip to content

Commit e9c6912

Browse files
kim-hyunhwakim-hyunhwa
committed
feat: React-김현화-sprint6 브랜치 생성 feat: css 경로 점검
 feat: header.jsx 네비게이션 경로 수정/ css 수정 : active 모션 수정, 페이지 이동시 가로 사이즈 변동이 있어 레이아웃 width 100vw 로 수정 feat: 섹션 제목 css itemsList->common 으로 이동
1 parent 93d86aa commit e9c6912

File tree

13 files changed

+88
-54
lines changed

13 files changed

+88
-54
lines changed

‎src/assets/css/common.css‎

Lines changed: 18 additions & 1 deletion
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: 100vw;
66
font-family: "Pretendard-Regular";
77
font-size: var(--common);
88
}
@@ -63,6 +63,23 @@ body {
6363
height: 4.8rem;
6464
}
6565

66+
.sectionTitleWrap {
67+
display: flex;
68+
justify-content: flex-end;
69+
align-items: center;
70+
gap: 0 1.2rem;
71+
position: relative;
72+
z-index: 100;
73+
margin-bottom: 1.6rem;
74+
width: 100%;
75+
min-height: 3.2rem;
76+
}
77+
.sectionTitleWrap .sectionTitle {
78+
position: absolute;
79+
left: 0;
80+
font-size: var(--sectionTitle);
81+
}
82+
6683
@media all and (max-width: 47.9375rem) {
6784
.inner {
6885
padding: 0 2rem;

‎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/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) {

‎src/assets/css/header.module.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/itemsList.module.css‎

Lines changed: 0 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,3 @@
1-
.sectionTitleWrap {
2-
display: flex;
3-
justify-content: flex-end;
4-
align-items: center;
5-
gap: 0 1.2rem;
6-
position: relative;
7-
z-index: 100;
8-
margin-bottom: 1.6rem;
9-
width: 100%;
10-
min-height: 3.2rem;
11-
}
12-
.sectionTitleWrap .sectionTitle {
13-
position: absolute;
14-
left: 0;
15-
font-size: var(--sectionTitle);
16-
}
17-
181
.formWrap {
192
width: 40%;
203
max-width: 32.5rem;

‎src/assets/css/itemsList.module.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/scss/common.scss‎

Lines changed: 19 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
@import "./_variables";
55

66
body {
7-
width: 100%;
7+
width: 100vw;
88
font-family: "Pretendard-Regular";
99
font-size: var(--common);
1010
}
@@ -65,6 +65,24 @@ body {
6565
height: 4.8rem;
6666
}
6767

68+
.sectionTitleWrap {
69+
display: flex;
70+
justify-content: flex-end;
71+
align-items: center;
72+
gap: 0 1.2rem;
73+
position: relative;
74+
z-index: 100;
75+
margin-bottom: 1.6rem;
76+
width: 100%;
77+
min-height: 3.2rem;
78+
79+
.sectionTitle {
80+
position: absolute;
81+
left: 0;
82+
font-size: var(--sectionTitle);
83+
}
84+
}
85+
6886
@include mobile {
6987
.inner {
7088
padding: 0 2rem;

‎src/assets/scss/header.module.scss‎

Lines changed: 15 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
position: fixed;
66
top: 0;
77
padding: 1rem 0 0.9rem;
8-
width: 100%;
8+
width: 100vw;
99
height: 7rem;
1010
background-color: var(--white100);
1111
border-bottom: 1px solid var(--line);
@@ -41,16 +41,27 @@
4141

4242
a {
4343
display: block;
44+
position: relative;
4445
height: fit-content;
4546
padding: 1rem 1rem;
47+
&::after {
48+
position: absolute;
49+
left: 0;
50+
bottom: 0;
51+
width: 0;
52+
height: 2px;
53+
background-color: #3692ff;
54+
content: "";
55+
}
4656
&.active {
47-
border-bottom: 2px solid #3692ff;
57+
&::after {
58+
width: 100%;
59+
@include transition(width, 0.3s, 0.1s);
60+
}
4861
}
4962
}
5063
}
5164

52-
53-
5465
@include mobile {
5566
.container {
5667
padding: 0 1.6rem;

‎src/assets/scss/itemsList.module.scss‎

Lines changed: 1 addition & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,6 @@
11
@import "./_variables";
22

3-
.sectionTitleWrap {
4-
display: flex;
5-
justify-content: flex-end;
6-
align-items: center;
7-
gap: 0 1.2rem;
8-
position: relative;
9-
z-index: 100;
10-
margin-bottom: 1.6rem;
11-
width: 100%;
12-
min-height: 3.2rem;
13-
14-
.sectionTitle {
15-
position: absolute;
16-
left: 0;
17-
font-size: var(--sectionTitle);
18-
}
19-
}
3+
204

215
.formWrap {
226
width: 40%;

‎src/components/header.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ function Header({ isLogin }) {
1616
<ul>
1717
<li>
1818
<NavLink
19-
to="/"
19+
to="/additem"
2020
className={({ isActive }) => (isActive ? header.active : "")}
2121
>
2222
자유게시판

0 commit comments

Comments
 (0)