Skip to content

Commit 1b8a1bc

Browse files
saseungminsaseungmin
authored
Merge pull request #8 from CodeSoom/add-styled-component-study-list
Apply css to study list
2 parents b66f50a + effb3e5 commit 1b8a1bc

File tree

15 files changed

+218
-37
lines changed

15 files changed

+218
-37
lines changed

‎src/App.test.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@ describe('App', () => {
3535
it('renders the study list page', () => {
3636
const { container } = renderApp({ path: '/' });
3737

38-
expect(container).toHaveTextContent('스터디 목록');
38+
expect(container).toHaveTextContent('지금 바로 시작하세요!');
3939
});
4040
});
4141

‎src/components/common/Tags.jsx‎

Lines changed: 30 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,29 @@ import React from 'react';
22

33
import styled from '@emotion/styled';
44

5-
const TagsWrapper = styled.div``;
5+
import { Link } from 'react-router-dom';
6+
7+
import palette from '../../styles/palette';
8+
9+
const TagsWrapper = styled.div`
10+
margin-top: 1rem;
11+
.lang {
12+
display: inline-flex;
13+
align-items: center;
14+
padding-left: .6em;
15+
padding-right: .6em;
16+
height: 3em;
17+
font-weight: bold;
18+
font-size: .6em;
19+
border-radius: .6em;
20+
margin-right: 0.5rem;
21+
color: ${palette.teal[7]};
22+
background:${palette.gray[1]};
23+
&:hover {
24+
color: ${palette.teal[5]};
25+
}
26+
}
27+
`;
628

729
const Tags = ({ tags }) => {
830
if (!tags || !tags.length) {
@@ -12,7 +34,13 @@ const Tags = ({ tags }) => {
1234
return (
1335
<TagsWrapper>
1436
{tags.map((tag) => (
15-
<small key={tag}>{`#${tag}`}</small>
37+
<Link
38+
key={tag}
39+
to="/#"
40+
className="lang"
41+
>
42+
{`#${tag}`}
43+
</Link>
1644
))}
1745
</TagsWrapper>
1846
);

‎src/components/common/Tags.test.jsx‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,18 @@
11
import React from 'react';
22

3+
import { MemoryRouter } from 'react-router-dom';
4+
35
import { render } from '@testing-library/react';
46

57
import Tags from './Tags';
68

79
describe('Tags', () => {
810
const renderTags = (tags) => render((
9-
<Tags
10-
tags={tags}
11-
/>
11+
<MemoryRouter>
12+
<Tags
13+
tags={tags}
14+
/>
15+
</MemoryRouter>
1216
));
1317

1418
context('with tags', () => {

‎src/components/introduce/StudyIntroduceForm.test.jsx‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,18 @@
11
import React from 'react';
22

3+
import { MemoryRouter } from 'react-router-dom';
4+
35
import { render } from '@testing-library/react';
46

57
import StudyIntroduceForm from './StudyIntroduceForm';
68

79
describe('StudyIntroduceForm', () => {
810
const renderStudyIntroduceForm = ({ group }) => render((
9-
<StudyIntroduceForm
10-
group={group}
11-
/>
11+
<MemoryRouter>
12+
<StudyIntroduceForm
13+
group={group}
14+
/>
15+
</MemoryRouter>
1216
));
1317

1418
it('renders study group title and contents', () => {

‎src/components/main/StudyGroup.jsx‎

Lines changed: 48 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,55 @@
11
import React from 'react';
2+
23
import { Link } from 'react-router-dom';
34

45
import styled from '@emotion/styled';
6+
57
import Tags from '../common/Tags';
8+
import palette from '../../styles/palette';
69

7-
const StudyGroupWrapper = styled.div``;
10+
const StudyGroupWrapper = styled.div`
11+
margin: 1em .5em 1em .5em;
12+
padding: 2em 0 1em 1em;
13+
width: 28%;
14+
border: 2px solid ${palette.gray[4]};
15+
border-radius: 1rem;
16+
`;
817

918
const HeaderLink = styled(Link)`
10-
font-size: 1.5em;
11-
margin-bottom: 0;
12-
margin-top: 0;
13-
font-weight: bold;
19+
display: flex;
20+
align-items: center;
21+
justify-content: center;
22+
font-size: 2rem;
23+
font-weight: 500;
24+
font-family: 'Nanum Pen Script', cursive;
1425
&:hover {
15-
color: gray;
26+
color: ${palette.gray[6]};
27+
}
28+
`;
29+
30+
const StudyInfoWrapper = styled.div`
31+
margin: 1rem 0 1rem 0;
32+
.moderator{
33+
margin-bottom: 1rem;
34+
color: ${palette.gray[5]};
35+
font-weight: bold;
1636
}
1737
`;
1838

39+
const DateTimeChange = styled.div`
40+
margin-left: 1.5rem;
41+
font-weight: 600;
42+
font-size: 1.1rem;
43+
font-family: 'Gamja Flower', cursive;
44+
padding: .1rem .5rem .1rem .5rem;
45+
display: inline-flex;
46+
color: white;
47+
border-radius: 0.5rem;
48+
margin-top: 1rem;
49+
margin-bottom: 1rem;
50+
background: ${palette.cyan[4]};
51+
`;
52+
1953
const StudyGroup = ({ group }) => {
2054
const {
2155
id, moderatorId, title, personnel, applyEndDate, tags, participants,
@@ -26,14 +60,17 @@ const StudyGroup = ({ group }) => {
2660
<HeaderLink to={`/introduce/${id}`}>
2761
{title}
2862
</HeaderLink>
29-
<div>
30-
<small>{moderatorId}</small>
31-
<div>{`모집 인원: ${participants.length} / ${personnel}`}</div>
63+
<StudyInfoWrapper>
64+
<div className="moderator">{moderatorId}</div>
65+
<div>
66+
{`모집 인원: ${participants.length} / ${personnel}`}
67+
<DateTimeChange>모집중</DateTimeChange>
68+
</div>
3269
<div>
33-
<div>{`마감 일자: ${applyEndDate}`}</div>
70+
{`마감 일자: ${applyEndDate}`}
3471
</div>
3572
<Tags tags={tags} />
36-
</div>
73+
</StudyInfoWrapper>
3774
</StudyGroupWrapper>
3875
);
3976
};

‎src/components/main/StudyGroups.jsx‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,12 @@ import styled from '@emotion/styled';
44

55
import StudyGroup from './StudyGroup';
66

7-
const StudyGroupsWrapper = styled.div``;
7+
const StudyGroupsWrapper = styled.div`
8+
display: flex;
9+
flex-direction: row;
10+
flex-wrap: wrap;
11+
align-content: space-between;
12+
`;
813

914
const StudyGroups = ({ groups }) => (
1015
<StudyGroupsWrapper>

‎src/containers/groups/StudyGroupsContainer.jsx‎

Lines changed: 1 addition & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,9 @@ import React from 'react';
22

33
import { useSelector } from 'react-redux';
44

5-
import styled from '@emotion/styled';
6-
75
import StudyGroups from '../../components/main/StudyGroups';
86
import { get } from '../../../utils';
97

10-
const StudyGroupsContainerBlock = styled.div``;
11-
128
const StudyGroupsContainer = () => {
139
const groups = useSelector(get('groups'));
1410

@@ -17,9 +13,7 @@ const StudyGroupsContainer = () => {
1713
}
1814

1915
return (
20-
<StudyGroupsContainerBlock>
21-
<StudyGroups groups={groups} />
22-
</StudyGroupsContainerBlock>
16+
<StudyGroups groups={groups} />
2317
);
2418
};
2519

‎src/containers/introduce/IntroduceContainer.test.jsx‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import { useDispatch, useSelector } from 'react-redux';
44

55
import { render } from '@testing-library/react';
66

7+
import { MemoryRouter } from 'react-router-dom';
78
import IntroduceContainer from './IntroduceContainer';
89

910
describe('IntroduceContainer', () => {
@@ -19,9 +20,11 @@ describe('IntroduceContainer', () => {
1920
}));
2021
});
2122

22-
const renderIntroduceContainer = ({ id }) => render(
23-
<IntroduceContainer groupId={id} />,
24-
);
23+
const renderIntroduceContainer = ({ id }) => render((
24+
<MemoryRouter>
25+
<IntroduceContainer groupId={id} />
26+
</MemoryRouter>
27+
));
2528

2629
context('with group', () => {
2730
given('group', () => ({

‎src/index.css‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,9 @@
1+
@import url('https://fonts.googleapis.com/css2?family=Gamja+Flower&family=Nanum+Pen+Script&display=swap');
2+
/*
3+
font-family: 'Gamja Flower', cursive;
4+
font-family: 'Nanum Pen Script', cursive;
5+
*/
6+
17
* {
28
box-sizing: inherit;
39
}
@@ -6,3 +12,7 @@ a {
612
color: inherit;
713
text-decoration: none;
814
}
15+
16+
body {
17+
margin: 0;
18+
}

‎src/pages/IntroducePage.jsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import React from 'react';
33
import { useParams } from 'react-router-dom';
44

55
import styled from '@emotion/styled';
6+
67
import IntroduceContainer from '../containers/introduce/IntroduceContainer';
78

89
const IntroducePageWrapper = styled.div``;

0 commit comments

Comments
 (0)