From 734e0a087a919582aada4e1ec51c503c563b2e79 Mon Sep 17 00:00:00 2001
From: sunhpark42 <67677561+sunhpark42@users.noreply.github.com>
Date: Fri, 29 Oct 2021 00:18:24 +0900
Subject: [PATCH 1/4] =?UTF-8?q?feat:=20=EC=83=81=EC=84=B8=ED=8E=98?=
=?UTF-8?q?=EC=9D=B4=EC=A7=80=20=EB=A7=81=ED=81=AC=20=EA=B3=B5=EC=9C=A0=20?=
=?UTF-8?q?=EA=B8=B0=EB=8A=A5=20=EC=B6=94=EA=B0=80=20(#541)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
* refactor: mainHeader 중앙정렬
* feat: 상세페이지 링크복사 기능 구현
* refactor: message 상수화
* refactor: 필요 없는 라인 삭제
---
frontend/src/components/@Icons/LinkIcon.tsx | 28 ++++++++++
frontend/src/components/@Icons/index.ts | 1 +
.../components/Header/MainHeader.styles.ts | 2 +
.../ShareLinks/CopyLinkButton.styles.ts | 18 +++++++
.../components/ShareLinks/CopyLinkButton.tsx | 54 +++++++++++++++++++
frontend/src/constants/messages.ts | 3 ++
frontend/src/pages/DrinksDetailPage/index.tsx | 8 +++
7 files changed, 114 insertions(+)
create mode 100644 frontend/src/components/@Icons/LinkIcon.tsx
create mode 100644 frontend/src/components/ShareLinks/CopyLinkButton.styles.ts
create mode 100644 frontend/src/components/ShareLinks/CopyLinkButton.tsx
diff --git a/frontend/src/components/@Icons/LinkIcon.tsx b/frontend/src/components/@Icons/LinkIcon.tsx
new file mode 100644
index 00000000..3c6e2715
--- /dev/null
+++ b/frontend/src/components/@Icons/LinkIcon.tsx
@@ -0,0 +1,28 @@
+import { COLOR } from 'src/constants';
+
+const LinkIcon = ({ width = '32px', height = '32px', color = COLOR.WHITE }: IconProps) => {
+ return (
+
+ );
+};
+
+export default LinkIcon;
diff --git a/frontend/src/components/@Icons/index.ts b/frontend/src/components/@Icons/index.ts
index b77b345c..f2a3819b 100644
--- a/frontend/src/components/@Icons/index.ts
+++ b/frontend/src/components/@Icons/index.ts
@@ -12,6 +12,7 @@ export { default as ExcitedEmojiIcon } from './ExcitedEmojiIcon';
export { default as HomeIcon } from './HomeIcon';
export { default as HumanIcon } from './HumanIcon';
export { default as KakaoIcon } from './KakaoIcon';
+export { default as LinkIcon } from './LinkIcon';
export { default as LoginIcon } from './LoginIcon';
export { default as LoveEmojiColorIcon } from './LoveEmojiColorIcon';
export { default as LoveEmojiIcon } from './LoveEmojiIcon';
diff --git a/frontend/src/components/Header/MainHeader.styles.ts b/frontend/src/components/Header/MainHeader.styles.ts
index 90189acb..be662d97 100644
--- a/frontend/src/components/Header/MainHeader.styles.ts
+++ b/frontend/src/components/Header/MainHeader.styles.ts
@@ -1,5 +1,6 @@
import styled from '@emotion/styled';
+import Flex from 'src/styles/Flex';
import Heading from '../@shared/Heading/Heading';
const envContent =
@@ -7,6 +8,7 @@ const envContent =
const Logo = styled(Heading.level1)`
position: relative;
+ ${Flex({ flexDirection: 'column', justifyContent: 'center', alignItems: 'center' })}
:after {
content: '${envContent}';
diff --git a/frontend/src/components/ShareLinks/CopyLinkButton.styles.ts b/frontend/src/components/ShareLinks/CopyLinkButton.styles.ts
new file mode 100644
index 00000000..324c7f6f
--- /dev/null
+++ b/frontend/src/components/ShareLinks/CopyLinkButton.styles.ts
@@ -0,0 +1,18 @@
+import styled from '@emotion/styled';
+import { SerializedStyles } from '@emotion/utils';
+
+import { COLOR } from 'src/constants';
+import Flex from 'src/styles/Flex';
+
+export const Container = styled.div<{ css: SerializedStyles }>`
+ ${Flex({ flexDirection: 'column', justifyContent: 'center', alignItems: 'center' })}
+
+ font-size: 0.8rem;
+ color: ${COLOR.BLACK};
+
+ > button {
+ cursor: copy;
+ }
+
+ ${({ css }) => css};
+`;
diff --git a/frontend/src/components/ShareLinks/CopyLinkButton.tsx b/frontend/src/components/ShareLinks/CopyLinkButton.tsx
new file mode 100644
index 00000000..99bf4dbe
--- /dev/null
+++ b/frontend/src/components/ShareLinks/CopyLinkButton.tsx
@@ -0,0 +1,54 @@
+import { useContext } from 'react';
+import { useLocation } from 'react-router';
+import { css as emotionCss } from '@emotion/react';
+import { SerializedStyles } from '@emotion/utils';
+
+import { COLOR, MESSAGE } from 'src/constants';
+import { LinkIcon } from '../@Icons';
+import IconButton from '../@shared/Button/IconButton';
+import { SnackbarContext } from '../@shared/Snackbar/SnackbarProvider';
+import { Container } from './CopyLinkButton.styles';
+
+const HOST_URL = 'http://jujeol-jujeol.com';
+
+const CopyLinkButton = ({ css }: { css: SerializedStyles }) => {
+ const location = useLocation();
+
+ const targetLink = HOST_URL + location.pathname;
+
+ const { setSnackbarMessage } = useContext(SnackbarContext) ?? {};
+
+ const copyLink = async () => {
+ const clipboard = navigator.clipboard;
+
+ try {
+ await clipboard.writeText(targetLink);
+
+ setSnackbarMessage?.({ type: 'CONFIRM', message: MESSAGE.COPY_LINK_SUCCESS });
+ } catch (error) {
+ setSnackbarMessage?.({ type: 'ERROR', message: MESSAGE.COPY_LINK_FAILED });
+ }
+ };
+
+ return (
+
+
+
+
+
+
+ );
+};
+
+export default CopyLinkButton;
diff --git a/frontend/src/constants/messages.ts b/frontend/src/constants/messages.ts
index 40c2b79f..0a9d9e08 100644
--- a/frontend/src/constants/messages.ts
+++ b/frontend/src/constants/messages.ts
@@ -18,6 +18,9 @@ const MESSAGE = {
EDIT_PROFILE_SUCCESS: '프로필을 수정하였습니다.',
+ COPY_LINK_SUCCESS: '클립보드에 복사 되었습니다.',
+ COPY_LINK_FAILED: '링크를 복사하지 못했습니다.',
+
SEARCH_INPUT_CANNOT_EMPTY: '공백이 아닌 검색어를 입력해주세요.',
};
diff --git a/frontend/src/pages/DrinksDetailPage/index.tsx b/frontend/src/pages/DrinksDetailPage/index.tsx
index e23047cc..59f0025b 100644
--- a/frontend/src/pages/DrinksDetailPage/index.tsx
+++ b/frontend/src/pages/DrinksDetailPage/index.tsx
@@ -14,6 +14,7 @@ import { confirmContext } from 'src/components/Confirm/ConfirmProvider';
import Property from 'src/components/Property/Property';
import RangeWithIcons from 'src/components/RangeWithIcons/RangeWithIcons';
import Review from 'src/components/Review/Review';
+import CopyLinkButton from 'src/components/ShareLinks/CopyLinkButton';
import DrinksDetailDescriptionSkeleton from 'src/components/Skeleton/DrinksDetailDescriptionSkeleton';
import {
APPLICATION_ERROR_CODE,
@@ -254,6 +255,13 @@ const DrinksDetailPage = () => {
/>
)}
+
From 2bb94c5ea4d059cdb650ee5597dffd8ffeb3f08a Mon Sep 17 00:00:00 2001
From: SungSiHyung <51393021+sihyung92@users.noreply.github.com>
Date: Fri, 29 Oct 2021 00:18:49 +0900
Subject: [PATCH 2/4] =?UTF-8?q?feat:=20=EC=97=90=EB=9F=AC=EC=BD=94?=
=?UTF-8?q?=EB=93=9C=20=EC=B5=9C=EC=8B=A0=ED=99=94=20(#458)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
backend/src/docs/asciidoc/error.adoc | 8 ++++++--
1 file changed, 6 insertions(+), 2 deletions(-)
diff --git a/backend/src/docs/asciidoc/error.adoc b/backend/src/docs/asciidoc/error.adoc
index f9f556d4..9f33bfa5 100644
--- a/backend/src/docs/asciidoc/error.adoc
+++ b/backend/src/docs/asciidoc/error.adoc
@@ -8,7 +8,6 @@
|코드|타입|메세지
|0001|NOT_FOUND_ERROR_CODE|"발생한 에러의 에러코드를 찾을 수 없습니다."
|0002|NOT_FOUND_API|"해당 경로에 대한 응답 API를 찾을 수 없습니다."
-|1001|NOT_ADULT_EXCEPTION|"만 18세 미만 가입 불가합니다."
|1002|KAKAO_ACCESS|"카카오 로그인 서버에 접근 중 예외가 발생했습니다."
|1003|INVALID_TOKEN|"access token이 유효하지 않습니다."
|1004|NO_SUCH_MEMBER|"해당 id의 유저가 없습니다."
@@ -27,6 +26,11 @@
|2007|CREATE_REVIEW_LIMIT|"동일 상품에 대한 리뷰는 하루에 하나만 작성할 수 있습니다."
|2008|INVALID_CONTENT_LENGTH|"리뷰는 빈 공백이거나 300자를 넘을 수 없습니다."
|2009|NOT_EXIST_CATEGORY|"해당 카테고리가 존재하지 않습니다."
-|2010|NOT_EXIST_PREFERENCE|"해당 선호도가 존재하지 않습니다."
|2011|NOT_FOUND_VIEW_COUNT|"해당 주류에 대한 조회수를 찾을 수 없습니다."
+|2012|CREATE_REVIEW_NO_PREFERENCE|"리뷰를 생성하려면 선호도를 입력해야합니다."
+|2013|INVALID_DESCRIPTION|"유효하지 않은 상세설명입니다."
+|2014|INVALID_SORT_BY|"유효하지 않은 정렬 기준입니다."
+|2015|IMAGE_RESIZE|"이미지를 리사이징 하는 도중 오류가 발생했습니다."
+|2016|IMAGE_IO|"이미지 파일을 다루는 과정에서 오류가 발생했습니다."
+|2017|AMAZON_CLIENT_EXCEPTION|"아마존 서버에 업로드하는 과정에서 오류가 발생했습니다."
|===
From 7db343eaa54967a7b9e7892c6c20c01f3d673767 Mon Sep 17 00:00:00 2001
From: sunhpark42 <67677561+sunhpark42@users.noreply.github.com>
Date: Fri, 29 Oct 2021 09:19:00 +0900
Subject: [PATCH 3/4] =?UTF-8?q?feat:=20=EC=B9=B4=EC=B9=B4=EC=98=A4?=
=?UTF-8?q?=ED=86=A1=EC=9C=BC=EB=A1=9C=20=EA=B3=B5=EC=9C=A0=ED=95=98?=
=?UTF-8?q?=EA=B8=B0=20=EA=B8=B0=EB=8A=A5=20=EC=B6=94=EA=B0=80=20(#545)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
* refactor: Arrow Icon transform 속성 삭제 및 방향별 path 등록
- because of mobile Safari
* fix: button reset.css 적용
- padding 삭제
* refactor: 아이콘 버튼 크기 조정
* fix: 특정 닉네임이 개행되는 이슈 수정
- ex. 진달래_001
* fix: 내가 남긴 리뷰 더보기 버튼 위치 조정 및 표시 행 제한 3줄로 변경
* chore: PROD 환경에서 로고에 beta 삭제
* feat: 카카오톡으로 공유하기 기능 추가
* refactor: 환경 별 카카오톡 공유 템플릿 설정
* feat: 카카오톡 공유 sdk 서버에서 카카오 모듈을 불러오지 못했을 때의 에러핸들링
* fix: 에러 발생시 얼리리턴 추가
* fix: 카카오 인앱 브라우저에서 clipboard API를 사용하지 못하는 이슈로 인한 execCommand 로직 추가 대응
* fix: 상세페이지 reviewInput 요소를 가져올 때 name 조건 추가
---
frontend/config.d.ts | 3 +
frontend/env/.env.development | 3 +
frontend/env/.env.local | 3 +
frontend/env/.env.prod | 3 +
frontend/public/index.html | 1 +
.../ShareLinks/CopyLinkButton.styles.ts | 7 ++
.../components/ShareLinks/CopyLinkButton.tsx | 18 ++++-
.../ShareLinks/KaKaoShareButton.tsx | 78 +++++++++++++++++++
frontend/src/constants/messages.ts | 1 +
frontend/src/pages/DrinksDetailPage/index.tsx | 9 +++
frontend/src/pages/DrinksDetailPage/test.tsx | 8 +-
11 files changed, 127 insertions(+), 7 deletions(-)
create mode 100644 frontend/src/components/ShareLinks/KaKaoShareButton.tsx
diff --git a/frontend/config.d.ts b/frontend/config.d.ts
index 291a7725..b6adf049 100644
--- a/frontend/config.d.ts
+++ b/frontend/config.d.ts
@@ -1,6 +1,9 @@
declare module 'dotenv';
declare module 'jujeol';
+interface Window {
+ Kakao: any;
+}
declare module '*.svg' {
const content: string;
export default content;
diff --git a/frontend/env/.env.development b/frontend/env/.env.development
index 3469eaee..a624e2ab 100644
--- a/frontend/env/.env.development
+++ b/frontend/env/.env.development
@@ -2,3 +2,6 @@ SNOWPACK_PUBLIC_LOGIN_REDIRECT_URL=https://dev.jujeol-jujeol.com/oauth
SNOWPACK_PUBLIC_API_URL=https://jujeol.kro.kr
SNOWPACK_PUBLIC_KAKAO_CLIENT_ID=838bcd43c3b007b4ef38c3da555c4806
SNOWPACK_PUBLIC_ENV=DEV
+SNOWPACK_PUBLIC_HOST_URL=https://dev.jujeol-jujeol.com
+SNOWPACK_PUBLIC_KAKAO_JS_KEY=67ab5f05c77a95d99a10ebba0f22abfb
+SNOWPACK_PUBLIC_KAKAO_SHARE_TEMPLATE_ID=64335
diff --git a/frontend/env/.env.local b/frontend/env/.env.local
index a3d94196..7eff0ba7 100644
--- a/frontend/env/.env.local
+++ b/frontend/env/.env.local
@@ -2,3 +2,6 @@ SNOWPACK_PUBLIC_LOGIN_REDIRECT_URL=http://localhost:3000/oauth
SNOWPACK_PUBLIC_API_URL=http://localhost:8080
SNOWPACK_PUBLIC_KAKAO_CLIENT_ID=838bcd43c3b007b4ef38c3da555c4806
SNOWPACK_PUBLIC_ENV=LOCAL
+SNOWPACK_PUBLIC_HOST_URL=http://localhost:3000
+SNOWPACK_PUBLIC_KAKAO_JS_KEY=67ab5f05c77a95d99a10ebba0f22abfb
+SNOWPACK_PUBLIC_KAKAO_SHARE_TEMPLATE_ID=64336
diff --git a/frontend/env/.env.prod b/frontend/env/.env.prod
index 5b8405a2..053197a0 100644
--- a/frontend/env/.env.prod
+++ b/frontend/env/.env.prod
@@ -3,3 +3,6 @@ SNOWPACK_PUBLIC_API_URL=https://api.jujeol-jujeol.com
SNOWPACK_PUBLIC_KAKAO_CLIENT_ID=838bcd43c3b007b4ef38c3da555c4806
SNOWPACK_PUBLIC_ENV=PROD
SNOWPACK_PUBLIC_SENTRY_DSN=https://8b3f61b8a18b4cb5901a5ac6447c7c8f@o954214.ingest.sentry.io/5903219
+SNOWPACK_PUBLIC_HOST_URL=https://jujeol-jujeol.com
+SNOWPACK_PUBLIC_KAKAO_JS_KEY=67ab5f05c77a95d99a10ebba0f22abfb
+SNOWPACK_PUBLIC_KAKAO_SHARE_TEMPLATE_ID=59769
diff --git a/frontend/public/index.html b/frontend/public/index.html
index 7b53ce3a..5a60ba9b 100644
--- a/frontend/public/index.html
+++ b/frontend/public/index.html
@@ -72,6 +72,7 @@
+