feat: Component - WantedList

soma-miniproject22 · Apr 23, 2022 · e444549 · e444549
1 parent 155784a
commit e444549
Show file tree

Hide file tree

Showing 8 changed files with 123 additions and 52 deletions.
diff --git a/README.md b/README.md
@@ -17,17 +17,21 @@ API 초안 작성하기
 로그인
 
 글 CRUD
+
 - 필터링 포함
-- 목록 조회 시 사진(섬네일) 표시
+- 목록 조회 시 사진(섬네일) 표시 - (`WantedList` 컴포넌트)
 
 댓글 CRUD (QnA)
+
 - (ex) `제가 5분 정도 늦을 것 같아요 ㅠㅠ`
 
 참석 여부 표시
+
 - :white_check_mark: : 참석
 - :eyes: : 관심
 
 ### 게시글 필드 정리
+
 - 제목: string
 - 장소(optional): string - 추후 지도 상의 위치로 변경될 수 있음
 - 약속 시각: datetime
@@ -36,6 +40,7 @@ API 초안 작성하기
 - 모집 상태: enum(모집중|모집완료) - 모집 인원이 차거나 약속 시간이 지나면 '모집 완료'로 자동으로 변경
 
 ### 기타 결정 내용
+
 - Mobile UI 먼저 만들기
 - 글 작성 시 Placeholder 제공하기 (ex: `이렇게 글을 쓰면 더 좋아요!`)
-- 추후 PWA 기반 알림을 제공할 수 있음
+- 추후 PWA 기반 알림을 제공할 수 있음
diff --git a/public/index.html b/public/index.html
@@ -5,13 +5,12 @@
     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
-    <meta
-      name="description"
-      content="Web site created using create-react-app"
-    />
+    <meta name="description" content="소마 밥약" />
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-
+    <style>
+      @import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+KR&display=swap');
+    </style>
     <link
       async
       rel="stylesheet"
@@ -22,7 +21,6 @@
     <title>소마 밥약</title>
   </head>
   <body>
-    <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
   </body>
 </html>
diff --git a/src/App.css b/src/App.css
@@ -1,38 +1,51 @@
 .App {
-  text-align: center;
+  height: 300px;
 }
 
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
+.b-list-item {
+  padding: 0.5em !important;
+  display: flex !important;
 }
 
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
+.b-list-item-header {
+  font-family: inherit !important;
 }
 
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
+.b-list-item-content {
+  display: flex !important;
+  flex-direction: column !important;
+  justify-content: space-around;
 }
 
-.App-link {
-  color: #61dafb;
+.thumb-container {
+  width: 74px;
+  height: 74px;
+  position: relative;
+  vertical-align: top;
+
+  margin-right: 0.5em;
+}
+
+.thumb {
+  width: 74px;
+  height: 74px;
+  aspect-ratio: auto 74 / 74;
+
+  border-radius: 36%;
+  background-size: 74px 74px;
 }
 
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
+/* radius를 비선형적으로 깎는 방법 (안드로이드 앱 아이콘 같이) */
+/* bg가 감싸지는 원리는 모르겠음 */
+/* 출처: 네이버 카페 모바일 페이지 CSS */
+.thumb-container::after {
+  background-image: url(https://ca-fe.pstatic.net/web-mobile/static/img/ios-cover-mask-47.svg?e93387ec0d01d47c3139b99acbd95cf3https://ca-fe.pstatic.net/web-mobile/static/img/io…over-mask-47.svg?e93387ec0d01d47c3139b99acbd95cf3);
+  opacity: 100%;
+  background-size: 74px 74px;
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
 }
diff --git a/src/App.js b/src/App.js
@@ -1,23 +1,53 @@
-import logo from './logo.svg';
 import './App.css';
+import WantedList from './components/WantedList';
+
+// 이미지는 추후 백엔드/CDN에서 이미지 주소를 전달 받아야.
+import coffee from './assets/img/coffee.png';
+import kSoup from './assets/img/k-soup.png';
+
+const tempOriginal = [
+  {
+    thumbnailImage: kSoup,
+    authorName: '김성빈',
+    messageBody: `나는 배가 고프다 ! 나는 배가 고프다 ! 나는 배가 고프다 ! 나는 배가
+    고프다 ! 나는 배가 고프다 ! 나는 배가 고프다 ! 나는 배가 고프다 !
+    나는 배가 고프다 ! 나는 배가 고프다 ! 나는 배가 고프다 ! 나는 배가
+    고프다 ! 나는 배가 고프다 ! 나는 배가 고프다 ! 나는 배가 고프다 !
+    나는 배가 고프다 ! 나는 배가 고프다 ! 나는 배가 고프다 ! 나는 배가
+    고프다 ! 나는 배가 고프다 ! 나는 배가 고프다 ! 나는 배가 고프다 !
+    나는 배가 고프다 ! 나는 배가 고프다 ! 나는 배가 고프다 ! 나는 배가
+    고프다 !`,
+    beginAt: '오늘 오후 1시',
+  },
+  {
+    id: 2,
+    thumbnailImage: coffee,
+    authorName: '김성빈',
+    messageBody: '소마 센터 주변에 맛있는 카페 탐방하러 가요',
+    beginAt: '다음 주 수요일(4/27) 오후 2시',
+  },
+  {
+    id: 3,
+    thumbnailImage: coffee,
+    authorName: '김성빈',
+    messageBody: "카페에서 객체지향 얘기하실 분 구합니다 '-'",
+    beginAt: '상시 예약 문의',
+  },
+];
+
+// 대충 늘리기 위함 ㅠㅠ
+const tempWantedListData = [
+  ...tempOriginal,
+  ...tempOriginal.map((e) => ({ ...e, id: e.id * 2 })),
+  ...tempOriginal.map((e) => ({ ...e, id: e.id * 3 })),
+  ...tempOriginal.map((e) => ({ ...e, id: e.id * 4 })),
+  ...tempOriginal.map((e) => ({ ...e, id: e.id * 5 })),
+];
 
 function App() {
   return (
     <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
+      <WantedList list={tempWantedListData} />
     </div>
   );
 }

diff --git a/src/assets/img/coffee.png b/src/assets/img/coffee.png
diff --git a/src/assets/img/k-soup.png b/src/assets/img/k-soup.png
diff --git a/src/components/WantedList.jsx b/src/components/WantedList.jsx
@@ -0,0 +1,27 @@
+import React from 'react';
+import { List } from 'semantic-ui-react';
+
+const WantedList = ({ list }) => {
+  return (
+    <List divided relaxed>
+      {list.map(({ id, thumbnailImage, authorName, messageBody, beginAt }) => {
+        return (
+          <List.Item className="b-list-item" key={id}>
+            <div className="thumb-container">
+              <img src={thumbnailImage} className="thumb" alt="thumbnail" />
+            </div>
+            <List.Content className="b-list-item-content">
+              <List.Header className="b-list-item-header">
+                {authorName}
+              </List.Header>
+              <div>{messageBody}</div>
+              <List.Description>{beginAt}</List.Description>
+            </List.Content>
+          </List.Item>
+        );
+      })}
+    </List>
+  );
+};
+
+export default WantedList;
diff --git a/src/index.css b/src/index.css
@@ -1,8 +1,6 @@
 body {
   margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif;
+  font-family: 'IBM Plex Sans KR', sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }