Merge pull request #7 from APPS-sookmyung/feat/add-card-page

feat: 명함 추가 페이지 구현
APPS-sookmyung · Jul 9, 2024 · b0c5981 · b0c5981
2 parents c2906d5 + 6e9f6b6
commit b0c5981
Show file tree

Hide file tree

Showing 7 changed files with 284 additions and 8 deletions.
diff --git a/icon-add-card-dot.svg b/icon-add-card-dot.svg
diff --git a/src/icons/icon-add-card-dot.svg b/src/icons/icon-add-card-dot.svg
diff --git a/src/icons/icon-add-card.svg b/src/icons/icon-add-card.svg
diff --git a/src/pages/AddCardPage/AddCardPage.jsx b/src/pages/AddCardPage/AddCardPage.jsx
@@ -1,5 +1,83 @@
 import * as S from './AddCardPage.style';
+import { useState } from 'react';
+import magnifyingGlassIcon from '../../icons/icon-magnifying-glass.svg';
+import addCard from '../../icons/icon-add-card.svg';
+import addCardDot from '../../icons/icon-add-card-dot.svg';
 
 export default function AddCardPage() {
-  return <S.Container></S.Container>;
+  const [activeButton, setActiveButton] = useState('이미지로 입력');
+
+  return (
+    <S.AddCardPage>
+      <S.SearchBar>
+        <S.SearchIcon>
+          <img src={magnifyingGlassIcon} alt='돋보기' />
+        </S.SearchIcon>
+        <S.SearchInput placeholder='명함을 검색해주세요' />
+      </S.SearchBar>
+
+      <S.TitleContainer>
+        <S.Title>명함 추가하기</S.Title>
+        <S.Subtitle>사진을 첨부하거나 직접 입력하여 명함 추가하기</S.Subtitle>
+      </S.TitleContainer>
+
+      <S.ButtonContainer>
+        <S.GroupBtnWrapper>
+          <S.GroupBtn
+            isActive={activeButton === '이미지로 입력'}
+            onClick={() => setActiveButton('이미지로 입력')}
+          >
+            이미지로 입력
+          </S.GroupBtn>
+          <S.GroupBtn
+            isActive={activeButton === '직접 입력'}
+            onClick={() => {
+              setActiveButton('직접 입력');
+            }}
+          >
+            직접 입력
+          </S.GroupBtn>
+        </S.GroupBtnWrapper>
+      </S.ButtonContainer>
+
+      {/* 명함 추가 */}
+      <S.AddBoxContainer>
+        <S.AddBoxTitle>등록할 명함첩을 선택하세요</S.AddBoxTitle>
+        <S.AddBoxIconWrapper>
+          <img src={addCard} alt='도트' />
+        </S.AddBoxIconWrapper>
+        <S.AddBoxSubTitle>
+          아래 버튼을 클릭하거나, <br />
+          이미지 파일을 여기에 끌어다 놓으세요.
+        </S.AddBoxSubTitle>
+        <S.AddBoxDescWrapper>
+          <S.AddBoxDesc>
+            <S.DotIconWrapper>
+              <img src={addCardDot} alt='도트' />
+            </S.DotIconWrapper>
+            <S.AddBoxText>
+              선택한 모든 명함 이미지는 앞면으로 인식합니다.
+            </S.AddBoxText>
+          </S.AddBoxDesc>
+          <S.AddBoxDesc>
+            <S.DotIconWrapper>
+              <img src={addCardDot} alt='도트' />
+            </S.DotIconWrapper>
+            <S.AddBoxText>
+              이미지는 한 번에 100장까지 업로드할 수 있습니다.
+            </S.AddBoxText>
+          </S.AddBoxDesc>
+          <S.AddBoxDesc>
+            <S.DotIconWrapper>
+              <img src={addCardDot} alt='' />
+            </S.DotIconWrapper>
+            <S.AddBoxText>이미지 한 장 당 최대 크기는 1MB 입니다.</S.AddBoxText>
+          </S.AddBoxDesc>
+        </S.AddBoxDescWrapper>
+        <S.ImportFileBtnWrapper>
+          <S.ImportFileBtn>파일 가져오기</S.ImportFileBtn>
+        </S.ImportFileBtnWrapper>
+      </S.AddBoxContainer>
+    </S.AddCardPage>
+  );
 }
diff --git a/src/pages/AddCardPage/AddCardPage.style.jsx b/src/pages/AddCardPage/AddCardPage.style.jsx
@@ -1,7 +1,186 @@
 import styled from '@emotion/styled';
 
-export const Container = styled.div`
-  border: 1px solid black;
-  height: 350px;
-  background-color: gray;
+export const AddCardPage = styled.div`
+  padding: 20px;
+`;
+
+// 검색창
+export const SearchBar = styled.div`
+  display: flex;
+  height: 36px;
+  margin-bottom: 16px;
+  padding: 10px 18px;
+  align-items: center;
+  flex-shrink: 0;
+  border-radius: 10px;
+  background: #efefef;
+  gap: 10px;
+`;
+
+export const SearchIcon = styled.div`
+  width: 10px;
+  height: 14px;
+  transform: rotate(-47.353deg);
+  flex-shrink: 0;
+  fill: var(--grey2, #949494);
+`;
+
+export const SearchInput = styled.input`
+  border: none;
+  outline: none;
+  background: transparent;
+  width: 100%;
+  color: var(--grey3, #555);
+  font-size: 9px;
+  line-height: 150%;
+  letter-spacing: -0.5px;
+
+  &::placeholder {
+    color: #999;
+  }
+`;
+
+// 타이틀
+export const TitleContainer = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  margin-bottom: 4px;
+`;
+
+export const Title = styled.h1`
+  color: var(--grey4, #1a1a1a);
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 150%;
+  letter-spacing: -0.5px;
+`;
+
+export const Subtitle = styled.p`
+  color: var(--grey3, #555);
+  font-size: 9px;
+  line-height: 150%;
+  letter-spacing: -0.5px;
+`;
+
+// 버튼
+export const ButtonContainer = styled.div`
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 16px;
+`;
+
+export const GroupBtnWrapper = styled.div`
+  display: flex;
+  gap: 5px;
+`;
+
+export const GroupBtn = styled.button`
+  display: inline-flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 8px;
+  border-radius: 10px;
+  background: ${(props) =>
+    props.isActive ? 'var(--primary, #2d29ff)' : 'var(--color-1, #ebf3fe)'};
+  padding: 4px 10px;
+  color: ${(props) =>
+    props.isActive ? 'var(--white, #fff)' : 'var(--primary, #2d29ff)'};
+  font-size: 9px;
+  line-height: 150%;
+  letter-spacing: -0.5px;
+  border: none;
+  outline: none;
+
+  &:hover {
+    cursor: pointer;
+  }
+`;
+
+// 명함 추가
+export const AddBoxContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  height: 256px;
+  flex-shrink: 0;
+  border-radius: 20px;
+  border: 0.5px dashed #2d29ff;
+  padding: 26px;
+`;
+
+export const AddBoxTitle = styled.h3`
+  margin-bottom: 16px;
+  color: var(--primary, #2d29ff);
+  text-align: center;
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 150%;
+  letter-spacing: -0.5px;
+`;
+
+export const AddBoxIconWrapper = styled.div`
+  display: flex;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  flex-shrink: 0;
+`;
+
+export const AddBoxSubTitle = styled.p`
+  padding: 10px 0;
+  color: var(--grey2, #949494);
+  text-align: center;
+  font-size: 11px;
+  line-height: 150%;
+  letter-spacing: -0.5px;
+`;
+
+export const AddBoxDescWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 8px 0;
+`;
+
+export const AddBoxDesc = styled.div`
+  display: flex;
+  gap: 5px;
+`;
+
+export const DotIconWrapper = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;
+
+export const AddBoxText = styled.p`
+  color: var(--grey2, #949494);
+  text-align: center;
+  font-size: 9px;
+  line-height: 150%;
+  letter-spacing: -0.5px;
+`;
+
+export const ImportFileBtnWrapper = styled.div`
+  display: flex;
+  justify-content: center;
+  padding: 2px 0;
+`;
+
+export const ImportFileBtn = styled.button`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  width: 77px;
+  padding: 4px 8px;
+  gap: 8px;
+  border-radius: 10px;
+  background: var(--primary, #2d29ff);
+  color: var(--white, #fff);
+  font-size: 11px;
+  line-height: 150%;
+  letter-spacing: -0.5px;
 `;
diff --git a/src/pages/ViewCardPage/ViewCardPage.jsx b/src/pages/ViewCardPage/ViewCardPage.jsx
@@ -40,12 +40,12 @@ export default function ViewCardPage() {
             음식점
           </S.GroupBtn>
         </S.GroupBtnWrapper>
-        <S.EditBtn>
+        <S.EditBtnWrapper>
           <S.EditText>그룹 수정</S.EditText>
           <S.MoreIcon>
             <img src={more} alt='더보기' />
           </S.MoreIcon>
-        </S.EditBtn>
+        </S.EditBtnWrapper>
       </S.ButtonContainer>
 
       {/* 명함 */}

diff --git a/src/pages/ViewCardPage/ViewCardPage.style.jsx b/src/pages/ViewCardPage/ViewCardPage.style.jsx
@@ -74,7 +74,7 @@ export const GroupBtn = styled.button`
   }
 `;
 
-export const EditBtn = styled.button`
+export const EditBtnWrapper = styled.button`
   display: inline-flex;
   padding: 4px 10px;
   align-items: center;