[#45] Readme 정리중

bithumbNFT · Oct 8, 2021 · 9ad126f · 9ad126f
1 parent 5cf1ebe
commit 9ad126f
Show file tree

Hide file tree

Showing 8 changed files with 91 additions and 79 deletions.
diff --git a/README.md b/README.md
@@ -1,6 +1,6 @@
 # ✨ BTS (Bithumb NTF SNS) 💰
 
-## 👉 프로젝트 소개
+## 🎨 프로젝트 소개
 
 - 프로젝트명은 **Bithumb의 NFT와 SNS 서비스를 결합하여 BTS로 지었습니다.** 다양한 작가들의 그림과 아트를 NFT 코인 경매로 만나볼 수 있으며 빗썸 코인 유저들과 열린 소통을 할 수 있도록 SNS 커뮤니티도 활성화 시켰습니다.
 
@@ -53,7 +53,7 @@
 ## 👉 `로딩화면`
 
 - 크롬 다이노도 즐기는 빗썸 NFT 경매장으로 뛰어들어가는 모습으로 로딩 화면 시작 <br>
-  (활발하게 경매가 이루어질 수 있도록 밝은 분위기로 구현했습니다.)
+  (활발하게 경매가 이루어질 수 있도록 유쾌하고 밝은 분위기로 시작됩니다.)
 
 ![](https://images.velog.io/images/leemember/post/c35472c9-c3ad-4bce-b8b7-2f9a48ea6b18/bts1.gif)
 
@@ -62,56 +62,66 @@
 ## 👉 `메인페이지`
 
 ### **Header** (로고, 검색바, 로그인 & 로그아웃, 마이페이지)
+
 ### **Intro**
 
 1. 트레이딩뷰 그래프로 클레이튼 현재 시세 불러오기
-2. 하락 상승 색깔로 표시 (상승시 빨간색 / 하락시 파란색)
-3. 아래 화살표 클릭 시 NFT 경매 섹션으로 이동)
+2. 하락 상승시 색깔로 표시 (상승시 빨간색 / 하락시 파란색)
+3. 아래 화살표 클릭 시 NFT 경매 섹션으로 이동
+
+![](https://images.velog.io/images/leemember/post/68a0cbd5-173c-43da-826d-9c49dc4b117c/%E1%84%86%E1%85%A6%E1%84%8B%E1%85%B5%E1%86%AB.gif)
 
 ### **NFT 경매 섹션**
 
-1. BTS 회원 유저들이 업로드한 NFT 경매 판매중인 게시글 불러오기
-2. 페이징네이션 (최대 9개 게시물까지 보이도록 ! 초과시 다음 페이지 번수가 생긴다)
+1. BTS 회원 유저들이 업로드한 모든 NFT 경매 게시글 불러오기
+2. 페이징네이션 (최대 9개의 게시물이 보이도록 구현. 초과시 다음 페이지 번수가 생긴다.)
+
+### **Footer**
 
-### **Footer** 
-1. 4주동안 함께했던 팀 멤버들 소개
-2. 깃허브 주소 클릭시 해당 멤버 깃허브 주소로 페이지 새창 열리기
+1. 4주동안 함께 열심히 프로젝트 달렸던 팀 멤버들 소개
+2. 깃허브 주소 클릭시 해당 멤버 깃허브 페이지로 새창 열리기
 
-![](https://images.velog.io/images/leemember/post/27e1d2ea-3234-47f7-aba9-6ecb7c58cb90/main.gif)
+![](https://images.velog.io/images/leemember/post/5f8e4e67-9a4e-49cb-9334-8b31c807dade/%E1%84%86%E1%85%A6%E1%84%8B%E1%85%B5%E1%86%AB2.gif)
 
 <br />
 
-### 👉 `로그인`
+## 👉 `로그인`
 
-- 카카오, 네이버 Auth 로그인 구현
+- 상단 헤더에 로그인 버튼 클릭
+
+1. 카카오 auth 로그인
+2. 네이버 auth 로그인
+
+![](https://images.velog.io/images/leemember/post/e491a246-aa14-48bc-8a9a-053f2368ea87/login.gif)
 
 <br />
 
-### 👉 `NFT 아이템`
+## 👉 `NFT 카드 아이템`
 
 - 좋아요 & 좋아요 해제 기능 (좋아요 시 마이페이지 `좋아요한 작품` 에 저장)
 - 삭제 기능 (마이페이지 `나의 NFT 작품` 페이지에서만 삭제 가능하도록 구현)
 
 <br />
 
-### 👉 `NFT 경매 업로드`
+## 👉 `NFT 경매 업로드`
 
 <br />
 
-### 👉 `NFT 경매 게시글`
+## 👉 `NFT 경매 게시글`
 
 <br />
 
-### 👉 `커뮤니티`
+## 👉 `커뮤니티`
 
 <br />
 
-### 👉 `마이페이지`
+## 👉 `마이페이지`
 
 <br />
 
-### 👉 `검색페이지`
-- 헤더 검색바에 해당 키워드 검색시 검색한 단어의 NFT 경매 게시글 출력
+## 👉 `검색페이지`
+
+- 헤더 검색바에 해당 키워드 검색시, 검색한 키워드의 NFT 경매 게시글 출력
 
 ![](https://images.velog.io/images/leemember/post/e5989934-70e9-4e88-b9a8-a551ed963faa/search.gif)
 <br />
diff --git a/src/components/Common/Member/index.js b/src/components/Common/Member/index.js
@@ -51,13 +51,18 @@ const MemberInfo = styled.div`
   margin-top: 16px;
   text-align: center;
   h3 {
-    font-size: 1rem;
+    font-size: 1.1rem;
     line-height: 1.75;
     font-weight: 700;
+    letter-spacing: -0.8px;
   }
   p {
-    font-size: 0.75rem;
+    font-size: 0.9rem;
     line-height: 1.75;
     font-weight: 500;
+    margin-bottom: 0.5rem;
+  }
+  svg {
+    font-size: 1.3rem;
   }
 `;
diff --git a/src/components/Common/Pagination/index.js b/src/components/Common/Pagination/index.js
@@ -1,5 +1,5 @@
 /* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
-import React from 'react';
+import React, { useState } from 'react';
 import styled from '@emotion/styled';
 
 const Pagination = ({ postsPerPage, totalPosts, paginate }) => {
@@ -20,7 +20,11 @@ const Pagination = ({ postsPerPage, totalPosts, paginate }) => {
     <Paging>
       {pageNumbers.map(number => (
         <li className="page-item" key={number}>
-          <a onClick={e => NextPage(number, e)} href="#" className="page-link">
+          <a
+            onClick={e => NextPage(number, e)}
+            href="#"
+            active={number === paginate}
+          >
             {number}
           </a>
         </li>
@@ -32,26 +36,29 @@ const Pagination = ({ postsPerPage, totalPosts, paginate }) => {
 export default Pagination;
 
 const Paging = styled.ul`
-  display: flex;
-  justify-content: center;
-  margin: 2rem 0 7rem 0;
+  margin: 100px 0 20px;
+  padding: 0;
+  list-style: none;
+  text-align: center;
   li {
-    width: 30px;
-    height: 30px;
-    border: 1px solid #ccc;
-    justify-content: center;
-    align-items: center;
-    font-size: 1rem;
-    display: flex;
+    display: inline-block;
+    margin-right: 5px;
     a {
-      width: 100%;
-      height: 100%;
-      display: flex;
-      justify-content: center;
-      align-items: center;
+      color: #666;
+      padding: 5px 10px;
+      text-decoration: none;
+      border: 1px solid #eee;
+      background-color: #fff;
+      box-shadow: 0px 0px 10px 0px #eee;
       &:active {
-        background: #fe5000;
         color: #fff;
+        background-color: #fe5000;
+        border-color: #fe5000;
+      }
+      &.current {
+        color: #fff;
+        background-color: #fe5000;
+        border-color: #fe5000;
       }
     }
   }

diff --git a/src/components/MyPage/Profile/index.js b/src/components/MyPage/Profile/index.js
@@ -74,10 +74,11 @@ function Profile() {
         </UserInfo>
 
         <UserEmail>
-          <p>- 이메일</p> <span>{userInfo.email}</span>
+          <p>이메일</p>
+          <strong className="desc">{userInfo.email}</strong>
         </UserEmail>
         <UserEmail>
-          <p>- 지갑 정보</p>
+          <p>지갑 정보</p>
           {!userInfo.coin_wallet ? (
             <>
               <span className="warn-msg">등록된 지갑이 없습니다.</span>
@@ -94,7 +95,7 @@ function Profile() {
                 ref={dropdownRef}
                 className={`menu ${isActive ? 'active' : 'inactive'}`}
               >
-                <div>👤{userInfo.name}님의 지갑정보</div>
+                <div className="me">👤 {userInfo.name}님의 지갑정보</div>
                 <CopyInputBtn>
                   <input
                     type="text"
@@ -123,11 +124,11 @@ function Profile() {
         </UserEmail>
         {!userInfo.coin_wallet ? null : (
           <UserEmail>
-            <div>- 현재 잔액</div>{' '}
+            <p>현재 나의 잔액</p>
             {checkBalanceLoading ? (
               <span>로딩중</span>
             ) : (
-              <span>{balanceData} KLAY</span>
+              <strong>{balanceData} KLAY</strong>
             )}
           </UserEmail>
         )}

diff --git a/src/components/MyPage/Profile/styles.js b/src/components/MyPage/Profile/styles.js
@@ -7,7 +7,7 @@ export const Wrapper = styled.div`
 export const UserInfo = styled.div`
   display: grid;
   place-items: center;
-  margin: 2rem 0 1.5rem 0;
+  margin: 2rem 0;
 `;
 export const ProfileImage = styled.div`
   width: 160px;
@@ -28,16 +28,16 @@ export const UserName = styled.span`
 `;
 
 export const UserEmail = styled.div`
-  margin: 1rem 2rem 2rem 2rem;
+  margin: 2rem;
   font-weight: 400;
   p {
     font-weight: 700;
-    margin-right: 5px;
     color: #9c9c9c;
-    margin-bottom: 20px;
+    margin-bottom: 15px;
+    font-size: 16px;
   }
-  span {
-    padding-left: 10px;
+  .desc {
+    font-size: 16px;
   }
   .warn-msg {
     font-size: 16px;
@@ -46,15 +46,13 @@ export const UserEmail = styled.div`
     display: inline-block;
   }
   button {
-    margin: 0 1rem 0 1rem;
     position: relative;
     font-weight: 500;
   }
   svg {
     vertical-align: middle;
     font-size: 1rem;
   }
-
   .menu {
     margin-top: 10px;
     padding: 20px 20px 0 20px;
@@ -78,6 +76,10 @@ export const UserEmail = styled.div`
   }
 
   nav {
+    .me {
+      font-size: 16px;
+      margin-bottom: 1.5rem;
+    }
     div {
       &:nth-of-type(1) {
         color: #4a4a4a;
@@ -89,14 +91,14 @@ export const UserEmail = styled.div`
 export const CopyInputBtn = styled.div`
   display: flex;
   justify-content: space-between;
-  border: 1px solid;
   border-radius: 5px;
-  margin-bottom: 0;
+  margin-bottom: 1.5rem;
+  border: 1px solid #d1d1d1;
   input {
     width: 100%;
     padding: 7px;
     color: #000000;
-    border-right: 1px solid #9c9c9c;
+    border-right: 1px solid #d1d1d1;
     background-color: #f6f6f6;
     border-radius: 5px;
     border-top-right-radius: 0;
@@ -118,7 +120,7 @@ export const EditButton = styled.button`
   background-color: #f6f6f6;
   text-align: center;
   width: 90%;
-  padding: 5px 0;
+  padding: 8px 15px;
   border-radius: 5px;
   margin: 0 1rem 1rem 1.2rem;
 `;
@@ -128,7 +130,6 @@ export const SaveButton = styled.button`
   text-align: center;
   padding: 10px 0;
   border-radius: 5px;
-  margin: 0 0.3rem 1rem 0.3rem;
   color: white;
   font-weight: 600;
   width: 100%;
@@ -141,8 +142,7 @@ export const CancelButton = styled.button`
   text-align: center;
   padding: 5px 0;
   border-radius: 5px;
-  margin: 0 0.3rem 1rem 0.3rem;
-  width: 90%;
+  width: 100%;
 `;
 
 export const ButtonContainer = styled.div`

diff --git a/src/pages/home/index.js b/src/pages/home/index.js
@@ -41,7 +41,7 @@ function home() {
   // 현재 페이지
   const [currentPage, setCurrentPage] = useState(1);
   // 전체 페이지 (게시물 개수)
-  const [postsPerPage, setPostsPerPage] = useState(6);
+  const [postsPerPage, setPostsPerPage] = useState(9);
   // 해당 페이지에서 마지막 post의 index 번호를 가르킵니다.
   const indexOfLastPost = currentPage * postsPerPage;
   //  해당 페이지에서 첫번째 post의 index 번호를 가르킵니다.

diff --git a/src/pages/home/styles.js b/src/pages/home/styles.js
@@ -27,20 +27,7 @@ export const CardListBox = styled.article`
 export const BottomMailn = styled.section`
   height: 100%;
   position: relative;
-
-  .ant-pagination {
-    text-align: right;
-    margin-right: 3%;
-    margin: 70px 35px 140px;
-  }
-  .ant-pagination-item-active a {
-    color: #fe5000;
-  }
-  .ant-pagination-item-active {
-    font-weight: 500;
-    background: #fff;
-    border-color: #fe5000;
-  }
+  padding-bottom: 200px;
 `;
 
 export const EmptyWrap = styled.section`

diff --git a/src/pages/mypage/styles.js b/src/pages/mypage/styles.js
@@ -21,17 +21,19 @@ export const Content = styled.div`
 export const MyPageLink = styled.div`
   display: flex;
   flex-direction: column;
-  margin-top: 1rem;
-  margin-left: 2rem;
 `;
 
 export const TabList = styled.li`
-  padding: 1.2rem 10px;
   color: ${props => (props.current ? '#4a4a4a' : '#9a9a9a')};
   font-weight: ${props => (props.current ? 600 : 400)};
-  font-size: 1.1rem;
   border-radius: 5px;
-
+  text-align: center;
+  a {
+    display: inline-block;
+    font-size: 1.2rem;
+    width: 100%;
+    padding: 1.2rem 10px;
+  }
   &:hover {
     background-color: #f8f8f8;
   }