From 2b9eafb3f792061fc297c88db3c6ec925b81e8ad Mon Sep 17 00:00:00 2001 From: JaeIn1 <97165077+JaeIn1@users.noreply.github.com> Date: Thu, 13 Jun 2024 11:06:43 +0900 Subject: [PATCH 1/3] =?UTF-8?q?=F0=9F=8E=A8=20design:=20=EB=B2=84=EB=B8=94?= =?UTF-8?q?=20=EC=8A=A4=ED=83=80=EC=9D=BC=20=EC=A0=81=EC=9A=A9=20=EC=99=84?= =?UTF-8?q?=EB=A3=8C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../common/bubble/KeywordBubble.style.js | 39 +++++++++++++++++++ 1 file changed, 39 insertions(+) create mode 100644 src/components/common/bubble/KeywordBubble.style.js diff --git a/src/components/common/bubble/KeywordBubble.style.js b/src/components/common/bubble/KeywordBubble.style.js new file mode 100644 index 0000000..9b89858 --- /dev/null +++ b/src/components/common/bubble/KeywordBubble.style.js @@ -0,0 +1,39 @@ +// Bubble.style.js +import styled from "styled-components"; + +export const StyledBubbleDiv = styled.div` + width: ${(props) => props.width || "100px"}; + height: ${(props) => props.height || "100px"}; + opacity: ${(props) => props.opacity || "1"}; + background: radial-gradient( + circle, + white 0%, + white 40%, + rgba(196, 196, 196, 0.1) 50%, + #bfe9f6 90%, + #bfe9f6 100% + ); + border: none; + border-radius: 50%; + display: flex; + justify-content: center; + align-items: center; + position: relative; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); + font-size: ${(props) => parseInt(props.width || "100px") * 0.12}px; + color: #2a5676; + + &:before { + content: ""; + width: calc(${(props) => props.width || "100px"} * 0.4); + height: calc(${(props) => props.height || "100px"} * 0.2); + backdrop-filter: blur(10px); + background: white; + position: absolute; + opacity: 0.45; + top: calc(${(props) => props.height || "100px"} * 0.11); + left: calc(50% - ${(props) => parseInt(props.width || "100px") * 0.4}px); + transform: rotate(-30deg); + border-radius: 50%; + } +`; From adabcf6de08d053c7c2baca601e0b5664bbc75ca Mon Sep 17 00:00:00 2001 From: JaeIn1 <97165077+JaeIn1@users.noreply.github.com> Date: Thu, 13 Jun 2024 11:06:58 +0900 Subject: [PATCH 2/3] =?UTF-8?q?=E2=9C=A8feat:=20=EB=B2=84=EB=B8=94=20?= =?UTF-8?q?=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EA=B5=AC=ED=98=84=20?= =?UTF-8?q?=EC=99=84=EB=A3=8C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/common/bubble/KeywordBubble.jsx | 14 ++++++++++++++ 1 file changed, 14 insertions(+) create mode 100644 src/components/common/bubble/KeywordBubble.jsx diff --git a/src/components/common/bubble/KeywordBubble.jsx b/src/components/common/bubble/KeywordBubble.jsx new file mode 100644 index 0000000..560c5b6 --- /dev/null +++ b/src/components/common/bubble/KeywordBubble.jsx @@ -0,0 +1,14 @@ +// Bubble.js +import { StyledBubbleDiv } from "./KeywordBubble.style"; + +export default function Bubble(props) { + return ( + + {props.content} + + ); +} From ce1aa581e81272cd4ffe8733f62b3f448a1750ab Mon Sep 17 00:00:00 2001 From: JaeIn1 <97165077+JaeIn1@users.noreply.github.com> Date: Thu, 13 Jun 2024 11:35:47 +0900 Subject: [PATCH 3/3] =?UTF-8?q?=F0=9F=8E=A8=20design:=20=ED=82=A4=EC=9B=8C?= =?UTF-8?q?=EB=93=9C=20=EB=B2=84=EB=B8=94=20=EB=B0=B0=EA=B2=BD=EC=83=89=20?= =?UTF-8?q?blur=EC=B2=98=EB=A6=AC=20=EB=B0=8F=20=ED=81=AC=EA=B8=B0=20?= =?UTF-8?q?=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../common/bubble/KeywordBubble.style.js | 33 +++++++++++++------ 1 file changed, 23 insertions(+), 10 deletions(-) diff --git a/src/components/common/bubble/KeywordBubble.style.js b/src/components/common/bubble/KeywordBubble.style.js index 9b89858..9ac1367 100644 --- a/src/components/common/bubble/KeywordBubble.style.js +++ b/src/components/common/bubble/KeywordBubble.style.js @@ -1,4 +1,3 @@ -// Bubble.style.js import styled from "styled-components"; export const StyledBubbleDiv = styled.div` @@ -8,8 +7,8 @@ export const StyledBubbleDiv = styled.div` background: radial-gradient( circle, white 0%, - white 40%, - rgba(196, 196, 196, 0.1) 50%, + white 30%, + rgba(196, 196, 196, 0.1) 40%, #bfe9f6 90%, #bfe9f6 100% ); @@ -25,15 +24,29 @@ export const StyledBubbleDiv = styled.div` &:before { content: ""; - width: calc(${(props) => props.width || "100px"} * 0.4); - height: calc(${(props) => props.height || "100px"} * 0.2); - backdrop-filter: blur(10px); + width: calc(${(props) => props.width || "100px"} * 0.35); + height: calc(${(props) => props.height || "100px"} * 0.13); + filter: blur(2px); background: white; position: absolute; - opacity: 0.45; - top: calc(${(props) => props.height || "100px"} * 0.11); - left: calc(50% - ${(props) => parseInt(props.width || "100px") * 0.4}px); - transform: rotate(-30deg); + opacity: 0.6; + top: calc(${(props) => props.height || "100px"} * 0.08); + left: calc(50% - ${(props) => parseInt(props.width || "100px") * 0.35}px); + transform: rotate(-27deg); + border-radius: 50%; + z-index: 2; + } + + &:after { + content: ""; + width: calc(${(props) => props.width || "100px"} * 0.43); + height: calc(${(props) => props.height || "100px"} * 0.1); + filter: blur(3px); + background-color: #ccf3ff; + position: absolute; + opacity: 0.6; + top: calc(${(props) => props.height || "100px"} * 0.01); + left: calc(50% - ${(props) => parseInt(props.width || "100px") * 0.2}px); border-radius: 50%; } `;