Merge pull request #9 from HYDongBang/feature/#5

마크업 수정
HYDongBang · Aug 17, 2020 · 6a5f49a · 6a5f49a
2 parents fd1545b + 7a0955e
commit 6a5f49a
Show file tree

Hide file tree

Showing 6 changed files with 322 additions and 221 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/Routes/ClubInfo/ClubActivity.js b/src/Routes/ClubInfo/ClubActivity.js
@@ -1,18 +1,24 @@
 import React from "react";
 import styled from "styled-components";
 
+const NoScroll = styled.div`
+  width: 90%;
+  overflow-x: hidden;
+  margin: 0 auto;
+`;
+
 const Container = styled.div`
   height: 700px;
-  width: 100%;
+  width: 102%;
   margin-top: 50px;
   padding: 10px;
   display: flex;
   flex-wrap: wrap;
-  overflow: scroll;
+  overflow-y: scroll;
 `;
 
 const ClubContainer = styled.div`
-  height: 300px;
+  height: 280px;
   width: 48%;
   overflow: hidden;
   padding: 10px;
@@ -27,30 +33,25 @@ const ClubImg = styled.div`
   border: 1px solid black;
 `;
 
-const ClubName = styled.div`
-  padding-bottom: 5px;
-  text-align: center;
-`;
-
-const TopContainer = styled.div`
-  width: 200px;
-  margin: 50px auto 0 auto;
-  display: flex;
-  flex-direction: row;
-  padding-bottom: 30px;
-`;
-
 const Title = styled.div`
   font-size: 1.3em;
   text-align: center;
-  padding-bottom: 10px;
+  margin-top: 10px;
+  font-weight: 600;
 `;
 
 const Context = styled.div`
+  line-height: 1.4em;
+  font-size: 0.8em;
   padding: 10px;
-  height: 100px;
+  height: 60px;
   text-align: center;
   border-radius: 0px 0px 10px 10px;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  overflow: hidden;
+  -webkit-box-orient: vertical;
 `;
 
 const Answer = styled.div`
@@ -68,36 +69,41 @@ const QuestionContainer = styled.div`
 `;
 
 export default ({}) => (
-  <Container>
-    <ClubContainer>
-      <ClubImg />
-      <Title> 활동이름</Title>
-      <Context>활동내용</Context>
-    </ClubContainer>
-    <ClubContainer>
-      <ClubImg />
-      <Title> 활동이름</Title>
-      <Context>활동내용</Context>
-    </ClubContainer>
-    <ClubContainer>
-      <ClubImg />
-      <Title> 활동이름</Title>
-      <Context>활동내용</Context>
-    </ClubContainer>
-    <ClubContainer>
-      <ClubImg />
-      <Title> 활동이름</Title>
-      <Context>활동내용</Context>
-    </ClubContainer>
-    <ClubContainer>
-      <ClubImg />
-      <Title> 활동이름</Title>
-      <Context>활동내용</Context>
-    </ClubContainer>
-    <ClubContainer>
-      <ClubImg />
-      <Title> 활동이름</Title>
-      <Context>활동내용</Context>
-    </ClubContainer>
-  </Container>
+  <NoScroll>
+    <Container>
+      <ClubContainer>
+        <ClubImg />
+        <Title> 활동이름</Title>
+        <Context>
+          활동내용활동내용활동내용활동내용활동내용활동내용활동내용활동내용활동내용활동내용활동내용활동내용활동내용활동내용활동내용활동내용활동내용활동내용활동내용활동내용활동내용활동내용
+          활동내용활동내용활동내용활동내용활동내용활동내용활동내용활동내용활동내용활동내용활동내용활동내용활동내용활동내용활동내용활동내용활동내용활동내용활동내용활동내용활동내용활동내용
+        </Context>
+      </ClubContainer>
+      <ClubContainer>
+        <ClubImg />
+        <Title> 활동이름</Title>
+        <Context>활동내용</Context>
+      </ClubContainer>
+      <ClubContainer>
+        <ClubImg />
+        <Title> 활동이름</Title>
+        <Context>활동내용</Context>
+      </ClubContainer>
+      <ClubContainer>
+        <ClubImg />
+        <Title> 활동이름</Title>
+        <Context>활동내용</Context>
+      </ClubContainer>
+      <ClubContainer>
+        <ClubImg />
+        <Title> 활동이름</Title>
+        <Context>활동내용</Context>
+      </ClubContainer>
+      <ClubContainer>
+        <ClubImg />
+        <Title> 활동이름</Title>
+        <Context>활동내용</Context>
+      </ClubContainer>
+    </Container>
+  </NoScroll>
 );
diff --git a/src/Routes/ClubInfo/ClubInfoPresenter.js b/src/Routes/ClubInfo/ClubInfoPresenter.js
@@ -15,7 +15,8 @@ const Wrapper = styled.div`
 
 const ClubContainer = styled.div`
   height: 700px;
-  width: 100%;
+  width: 90%;
+  margin: 0 auto;
 `;
 
 const ClubImg = styled.div`
@@ -28,28 +29,44 @@ const ClubImg = styled.div`
 const ClubName = styled.div`
   padding-bottom: 5px;
   text-align: center;
+  font-weight: 600;
+  margin: auto 0 auto 10px;
+  font-size: 1.5em;
+  min-width: 100px;
+  max-width: 200px;
 `;
 
 const TopContainer = styled.div`
-  width: 200px;
+  max-width: 300px;
   margin: 50px auto 0 auto;
   display: flex;
   flex-direction: row;
-  padding-bottom: 30px;
+  padding-bottom: 10px;
 `;
 
 const ClubText = styled.div`
-  font-size: 0.8em;
+  font-size: 0.9em;
+  width: 80%;
+  min-height: 40px;
+  margin: 0 auto;
+
   text-align: center;
-  padding-bottom: 10px;
 `;
 
 const Context = styled.div`
   padding: 10px;
   text-align: center;
   border: 1px solid ${(props) => props.theme.lightGrayColor};
   box-shadow: ${(props) => props.theme.lightGrayShadow};
-  border-radius: 0px 0px 10px 10px;
+  border-radius: 10px;
+  line-height: 1.4em;
+`;
+
+const ContextClubImg = styled.div`
+  height: 150px;
+  width: 100%;
+  border: 1px solid black;
+  margin-top: 10px;
 `;
 
 const Header = styled.header`
@@ -92,9 +109,13 @@ export default ({ action, setAction }) => (
       <ClubContainer>
         <TopContainer>
           <ClubImg />
+          <ClubName>동아리명</ClubName>
         </TopContainer>
         <ClubText>한줄소개</ClubText>
-        <Context>내용입니다</Context>
+        <Context>
+          내용입니다
+          <ContextClubImg />
+        </Context>
       </ClubContainer>
     )}