From 421abe7c5967de088e35562efb363070bfa05e49 Mon Sep 17 00:00:00 2001 From: from1to2 Date: Wed, 1 Nov 2023 14:49:46 +0900 Subject: [PATCH 1/8] feat: businesscardcontainer --- .../common/BusinessCardContainer/index.tsx | 112 ++++++++++++++++++ 1 file changed, 112 insertions(+) create mode 100644 src/components/common/BusinessCardContainer/index.tsx diff --git a/src/components/common/BusinessCardContainer/index.tsx b/src/components/common/BusinessCardContainer/index.tsx new file mode 100644 index 00000000..8708f84c --- /dev/null +++ b/src/components/common/BusinessCardContainer/index.tsx @@ -0,0 +1,112 @@ +import styled from '@emotion/styled' +import { useState } from 'react' +import { TiDelete } from 'react-icons/ti' + +import camera from '@/assets/images/camera.svg' +import { palette } from '@/styles/palette' + +import Spacing from '../Spacing' +import { Text } from '../Text' + +type BusinessCardContainerProps = { + isDarkMode: boolean +} + +const BusinessCardContainer = ({ isDarkMode }: BusinessCardContainerProps) => { + const [uploadedImage, setUploadedImage] = useState(null) + + const handleImageUpload = (event: React.ChangeEvent) => { + if (!uploadedImage) { + const file = event.target.files?.[0] + const reader = new FileReader() + + reader.onloadend = () => { + setUploadedImage(reader.result as string) + } + + if (file) { + reader.readAsDataURL(file) + } + } + } + + const handleRemoveImage = () => { + setUploadedImage(null) + } + + return ( + + + {'명함사진 업로드'} + + + + {uploadedImage ? ( + <> + + + + ) : ( + + )} + + + ) +} + +const Wrapper = styled.div` + position: relative; + width: 300px; +` + +const Placeholder = styled.div` + width: 88px; + height: 88px; + background-color: ${palette.WHITE}; + border-radius: 10px; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; +` + +const ImageContainer = styled.div` + width: 88px; + position: relative; +` + +const StyledImage = styled.img` + width: 88px; + height: 88px; + object-fit: cover; + position: relative; + border-radius: 10px; +` + +const CameraIcon = styled.img` + width: 38px; + height: 38px; +` + +export default BusinessCardContainer From 1702a25e2454cd87c625b972429316e8c5a1010a Mon Sep 17 00:00:00 2001 From: from1to2 Date: Wed, 1 Nov 2023 14:50:40 +0900 Subject: [PATCH 2/8] =?UTF-8?q?style:=20Text=20=EC=BB=B4=ED=8F=AC=EB=84=8C?= =?UTF-8?q?=ED=8A=B8=20textColor=20=EC=86=8D=EC=84=B1=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/common/Text/index.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/components/common/Text/index.tsx b/src/components/common/Text/index.tsx index 42dacb80..10aa093c 100644 --- a/src/components/common/Text/index.tsx +++ b/src/components/common/Text/index.tsx @@ -15,11 +15,13 @@ export const Text = styled.div<{ font: KeyOfTypo fontWeight: number letterSpacing: number + textColor?: string }>` - ${({ font, fontWeight, letterSpacing }) => { + ${({ font, fontWeight, letterSpacing, textColor }) => { const fontFunc = typo[font] return css` ${fontFunc(fontWeight, letterSpacing)} + color: ${textColor}; ` }} ` From aa71274a2c25353e19f4675426dd957e18c337e2 Mon Sep 17 00:00:00 2001 From: from1to2 Date: Wed, 1 Nov 2023 19:27:14 +0900 Subject: [PATCH 3/8] =?UTF-8?q?style:=20alerttext,=20countnumber=20?= =?UTF-8?q?=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/common/AlertText/index.tsx | 13 +++++++++-- src/components/common/CountNumber/index.tsx | 26 +++++++++++++++------ 2 files changed, 30 insertions(+), 9 deletions(-) diff --git a/src/components/common/AlertText/index.tsx b/src/components/common/AlertText/index.tsx index f3d3003b..6e3e4741 100644 --- a/src/components/common/AlertText/index.tsx +++ b/src/components/common/AlertText/index.tsx @@ -4,12 +4,19 @@ type AlertTextProps = { fontSize: string fontColor: string children?: React.ReactNode + padding?: string + textAlign?: string } -const AlertText = ({ fontSize, fontColor, children }: AlertTextProps) => { +const AlertText = ({ padding, textAlign, fontSize, fontColor, children }: AlertTextProps) => { return ( <> - + {children} @@ -19,6 +26,8 @@ const AlertText = ({ fontSize, fontColor, children }: AlertTextProps) => { const StyleAlertText = styled.div` font-size: ${(props) => props.fontSize}; color: ${(props) => props.fontColor}; + padding: ${(props) => props.padding}; + text-align: ${(props) => props.textAlign}; ` export default AlertText diff --git a/src/components/common/CountNumber/index.tsx b/src/components/common/CountNumber/index.tsx index 018aaf35..fd1dfa1a 100644 --- a/src/components/common/CountNumber/index.tsx +++ b/src/components/common/CountNumber/index.tsx @@ -4,26 +4,38 @@ type CountNumberProps = { currentLength: number maxLength: number color: string - right: number + right?: number + top?: number } type StyleCountNumberProps = { color: string - right: number + right?: number + top?: number } -const CountNumber = ({ right, currentLength, maxLength, color }: CountNumberProps): JSX.Element => { +const CountNumber = ({ + top, + right, + currentLength, + maxLength, + color, +}: CountNumberProps): JSX.Element => { return ( - {`${currentLength}/${maxLength}`} +
+ {`${currentLength}/${maxLength}`} +
) } const StyleCountNumber = styled.span` position: relative; right: ${(props) => props.right}px; + top: ${(props) => props.top}px; bottom: 3px; font-size: 12px; color: ${(props) => props.color}; From 9cb91a592bd3ef42fdc9e7aaaa06080038171810 Mon Sep 17 00:00:00 2001 From: from1to2 Date: Wed, 1 Nov 2023 19:43:25 +0900 Subject: [PATCH 4/8] =?UTF-8?q?style:=20selectorbutton=20=EC=88=98?= =?UTF-8?q?=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/common/SelectorButton/index.tsx | 17 ++++++++++++++--- 1 file changed, 14 insertions(+), 3 deletions(-) diff --git a/src/components/common/SelectorButton/index.tsx b/src/components/common/SelectorButton/index.tsx index 3cbcbbed..a28fac92 100644 --- a/src/components/common/SelectorButton/index.tsx +++ b/src/components/common/SelectorButton/index.tsx @@ -8,13 +8,15 @@ type SelectorButtonProps = { buttonName: string onClick?: (selected: boolean) => void isButtonselected?: boolean + maxLengthReached: boolean } const SelectorButton = ({ isDarkMode, buttonName, onClick, - isButtonselected = false, + isButtonselected: propIsButtonSelected = false, + maxLengthReached = false, }: SelectorButtonProps) => { const defaultSettings = isDarkMode ? { @@ -27,7 +29,7 @@ const SelectorButton = ({ defaultButtonColor: palette.TERTIARY, textColor: palette.WHITE, } - + const [isButtonselected, setIsButtonselected] = useState(propIsButtonSelected) const initialBackgroundColor = isButtonselected ? defaultSettings.selectedButtonColor : defaultSettings.defaultButtonColor @@ -36,6 +38,12 @@ const SelectorButton = ({ const handleButtonClick = () => { const isSelected = backgroundColor !== defaultSettings.selectedButtonColor + + if (maxLengthReached && !isButtonselected) { + onClick && onClick(true) + return + } + setIsButtonselected(!isButtonselected) setBackgroundColor( isSelected ? defaultSettings.selectedButtonColor : defaultSettings.defaultButtonColor, ) @@ -56,7 +64,10 @@ const SelectorButton = ({ ) } -const StyledButton = styled.button<{ backgroundColor: string; textColor: string }>` +const StyledButton = styled.button<{ + backgroundColor: string + textColor: string +}>` margin: 8px; height: 36px; padding: 10px 15px 10px 15px; From baada0a4aab9adb8b98c7543db1d48ea29b765cf Mon Sep 17 00:00:00 2001 From: from1to2 Date: Wed, 1 Nov 2023 20:35:56 +0900 Subject: [PATCH 5/8] style: customselectorbutton --- .../common/CustomSelectorButton/index.tsx | 121 ++++++++++++++++++ 1 file changed, 121 insertions(+) create mode 100644 src/components/common/CustomSelectorButton/index.tsx diff --git a/src/components/common/CustomSelectorButton/index.tsx b/src/components/common/CustomSelectorButton/index.tsx new file mode 100644 index 00000000..760368be --- /dev/null +++ b/src/components/common/CustomSelectorButton/index.tsx @@ -0,0 +1,121 @@ +import styled from '@emotion/styled' +import { useEffect, useState } from 'react' +import { TiDelete } from 'react-icons/ti' + +import { palette } from '@/styles/palette' + +type CustomSelectorButtonProps = { + isDarkMode: boolean + buttonName: string + onClick?: (selected: boolean) => void + onRemove?: () => void + isButtonselected: boolean + maxLengthReached: boolean +} + +const CustomSelectorButton = ({ + isDarkMode, + buttonName, + onClick, + onRemove, + isButtonselected: propIsButtonSelected, + maxLengthReached, +}: CustomSelectorButtonProps) => { + const defaultSettings = isDarkMode + ? { + selectedButtonColor: palette.SECONDARY, + defaultButtonColor: palette.WHITE, + textColor: palette.SECONDARY, + } + : { + selectedButtonColor: palette.BLUE, + defaultButtonColor: palette.TERTIARY, + textColor: palette.WHITE, + } + + const [isButtonSelected, setIsButtonSelected] = useState(propIsButtonSelected) + + useEffect(() => { + setIsButtonSelected(propIsButtonSelected) + }, [propIsButtonSelected]) + + const handleButtonClick = () => { + if (maxLengthReached && !isButtonSelected) { + onClick && onClick(true) + return + } + setIsButtonSelected((prevState) => !prevState) + if (onClick) onClick(!isButtonSelected) + } + + return ( + + + {buttonName} + + + + + + ) +} + +const StyledButtonWrapper = styled.div` + display: flex; + align-items: center; +` + +const RemoveButton = styled.button` + margin-left: 8px; + background-color: transparent; + border: none; + cursor: pointer; + &:focus { + outline: none; + } +` + +const StyledButton = styled.button<{ + backgroundColor: string + textColor: string +}>` + margin: 8px; + height: 36px; + padding: 10px 15px 10px 15px; + font-size: 12px; + cursor: pointer; + border: none; + border-radius: 10px; + background-color: ${(props) => props.backgroundColor}; + transition: background-color 0.3s; + &:hover { + opacity: 0.9; + } + &:focus { + outline: none; + } + color: ${(props) => props.textColor}; + display: inline-block; + vertical-align: middle; + line-height: 1; +` + +export default CustomSelectorButton From b101cdd8e7c49435b885682c7cdf6e8cb52f16fe Mon Sep 17 00:00:00 2001 From: from1to2 Date: Wed, 1 Nov 2023 20:54:10 +0900 Subject: [PATCH 6/8] =?UTF-8?q?refactor:=20=ED=95=84=EC=88=98=20prop=20?= =?UTF-8?q?=EC=84=A4=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/common/CustomSelectorButton/index.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/common/CustomSelectorButton/index.tsx b/src/components/common/CustomSelectorButton/index.tsx index 760368be..2c11bcff 100644 --- a/src/components/common/CustomSelectorButton/index.tsx +++ b/src/components/common/CustomSelectorButton/index.tsx @@ -7,8 +7,8 @@ import { palette } from '@/styles/palette' type CustomSelectorButtonProps = { isDarkMode: boolean buttonName: string - onClick?: (selected: boolean) => void - onRemove?: () => void + onClick: (selected: boolean) => void + onRemove: () => void isButtonselected: boolean maxLengthReached: boolean } From f4f4701da662fd4206b8637dd467d380a222ec2d Mon Sep 17 00:00:00 2001 From: from1to2 Date: Sun, 5 Nov 2023 19:13:55 +0900 Subject: [PATCH 7/8] =?UTF-8?q?refactor:=20pr=20=EC=88=98=EC=A0=95?= =?UTF-8?q?=EC=82=AC=ED=95=AD=20=EB=B0=98=EC=98=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../common/CustomSelectorButton/index.tsx | 24 +++++++++---------- 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/src/components/common/CustomSelectorButton/index.tsx b/src/components/common/CustomSelectorButton/index.tsx index 2c11bcff..d2e5cab7 100644 --- a/src/components/common/CustomSelectorButton/index.tsx +++ b/src/components/common/CustomSelectorButton/index.tsx @@ -7,19 +7,19 @@ import { palette } from '@/styles/palette' type CustomSelectorButtonProps = { isDarkMode: boolean buttonName: string - onClick: (selected: boolean) => void + isButtonClicked: (selected: boolean) => void onRemove: () => void - isButtonselected: boolean - maxLengthReached: boolean + isButtonSelected: boolean + isMaxLengthReached: boolean } const CustomSelectorButton = ({ isDarkMode, buttonName, - onClick, + isButtonClicked, onRemove, - isButtonselected: propIsButtonSelected, - maxLengthReached, + isButtonSelected: propIsButtonSelected, + isMaxLengthReached, }: CustomSelectorButtonProps) => { const defaultSettings = isDarkMode ? { @@ -40,12 +40,12 @@ const CustomSelectorButton = ({ }, [propIsButtonSelected]) const handleButtonClick = () => { - if (maxLengthReached && !isButtonSelected) { - onClick && onClick(true) + if (isMaxLengthReached && !isButtonSelected) { + isButtonClicked && isButtonClicked(true) return } setIsButtonSelected((prevState) => !prevState) - if (onClick) onClick(!isButtonSelected) + if (isButtonClicked) isButtonClicked(!isButtonSelected) } return ( @@ -61,7 +61,7 @@ const CustomSelectorButton = ({ > {buttonName} - + - + ) } @@ -83,7 +83,7 @@ const StyledButtonWrapper = styled.div` align-items: center; ` -const RemoveButton = styled.button` +const StyledRemoveButton = styled.button` margin-left: 8px; background-color: transparent; border: none; From c20cf1c4d21f8bd1bbab73a9431235974b8dba20 Mon Sep 17 00:00:00 2001 From: from1to2 Date: Mon, 6 Nov 2023 18:19:10 +0900 Subject: [PATCH 8/8] =?UTF-8?q?refactor:=20=EC=86=8D=EC=84=B1=EB=AA=85=20?= =?UTF-8?q?=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/common/SelectorButtonContainer/index.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/common/SelectorButtonContainer/index.tsx b/src/components/common/SelectorButtonContainer/index.tsx index 26d7c2b5..1e04d1b2 100644 --- a/src/components/common/SelectorButtonContainer/index.tsx +++ b/src/components/common/SelectorButtonContainer/index.tsx @@ -65,10 +65,10 @@ const SelectorButtonContainer = ({ key={index} isDarkMode={isDarkMode} buttonName={name} - onClick={(isSelected) => handleCustomButtonClick(isSelected)} + isButtonClicked={(isSelected) => handleCustomButtonClick(isSelected)} onRemove={() => handleCustomButtonRemove(name)} - maxLengthReached={selectedCount >= maxLength} - isButtonselected={false} + isMaxLengthReached={selectedCount >= maxLength} + isButtonSelected={false} /> ))} {showAlert && (