Merge pull request #405 from Moadong/develop-fe

[release] v1.0.3

Author: seongwon030

frontend/.gitignore

@@ -16,4 +16,6 @@ build-storybook.log
 *.csr
 
 *storybook.log
-coverage/ 
+coverage/ 
+# Sentry Config File
+.env.sentry-build-plugin

frontend/package-lock.json

@@ -21,6 +21,8 @@
   "description": "",
   "dependencies": {
     "@channel.io/channel-web-sdk-loader": "^2.0.0",
+    "@sentry/react": "^9.18.0",
+    "@sentry/webpack-plugin": "^3.4.0",
     "@tanstack/react-query": "^5.66.0",
     "date-fns": "^4.1.0",
     "dotenv-webpack": "^8.1.0",

frontend/package.json

@@ -4,7 +4,8 @@ import styled, { keyframes, css } from 'styled-components';
 export interface ButtonProps {
   width?: string;
   children: React.ReactNode;
-  onClick: () => void;
+  type?: string;
+  onClick?: () => void;
   animated?: boolean;
 }
 
@@ -44,9 +45,10 @@ const Button = ({
   width,
   children,
   onClick,
+  type,
   animated = false,
 }: ButtonProps) => (
-  <StyledButton width={width} onClick={onClick} animated={animated}>
+  <StyledButton width={width} onClick={onClick} animated={animated} type={type}>
     {children}
   </StyledButton>
 );

frontend/src/assets/images/icons/sns/instagram_icon.png

@@ -19,27 +19,32 @@ export const InputWrapper = styled.div`
   align-items: center;
 `;
 
-export const Input = styled.input`
+export const Input = styled.input<{ hasError?: boolean }>`
   flex: 1;
   height: 45px;
   padding: 12px 80px 12px 18px;
-  border: 1px solid #c5c5c5;
+  border: 1px solid ${({ hasError }) => (hasError ? 'red' : '#c5c5c5')};
   border-radius: 6px;
   outline: none;
   font-size: 1.125rem;
   letter-spacing: 0;
-  color: rgba(0, 0, 0, 0.5);
+  color: rgba(0, 0, 0, 0.8);
 
   &:focus {
-    border-color: #007bff;
-    box-shadow: 0 0 3px rgba(0, 123, 255, 0.5);
+    border-color: ${({ hasError }) => (hasError ? 'red' : '#007bff')};
+    box-shadow: 0 0 3px
+      ${({ hasError }) =>
+        hasError ? 'rgba(255, 0, 0, 0.5)' : 'rgba(0, 123, 255, 0.5)'};
   }
 
   ${({ disabled }) =>
     disabled &&
     `
     background-color: rgba(0, 0, 0, 0.05); 
   `}
+  &::placeholder {
+    color: rgba(0, 0, 0, 0.3);
+  }
 `;
 
 export const ClearButton = styled.button`
@@ -85,3 +90,15 @@ export const CharCount = styled.span`
   font-size: 12px;
   letter-spacing: -0.96px;
 `;
+
+export const HelperText = styled.div`
+  position: absolute;
+  left: 0;
+  top: 100%;
+  font-size: 0.75rem;
+  color: red;
+  margin-top: 4px;
+  pointer-events: none;
+  white-space: nowrap;
+  z-index: 1;
+`;

frontend/src/assets/images/icons/sns/x_icon.svg

@@ -14,6 +14,8 @@ interface CustomInputProps {
   value?: string;
   onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
   onClear?: () => void;
+  isError?: boolean;
+  helperText?: string;
 }
 
 const InputField = ({
@@ -28,6 +30,8 @@ const InputField = ({
   value = '',
   onChange,
   onClear,
+  isError,
+  helperText,
 }: CustomInputProps) => {
   const [isPasswordVisible, setIsPasswordVisible] = useState(false);
 
@@ -64,6 +68,7 @@ const InputField = ({
           placeholder={placeholder}
           maxLength={maxLength}
           disabled={disabled}
+          hasError={isError}
         />
         {showClearButton && !disabled && (
           <Styled.ClearButton type='button' onClick={clearInput}>
@@ -81,6 +86,9 @@ const InputField = ({
           </Styled.CharCount>
         )}
       </Styled.InputWrapper>
+      {isError && helperText && (
+        <Styled.HelperText>{helperText}</Styled.HelperText>
+      )}
     </Styled.InputContainer>
   );
 };

frontend/src/assets/images/icons/sns/youtube_icon.svg

@@ -0,0 +1,24 @@
+import youtube_icon from '@/assets/images/icons/sns/youtube_icon.svg';
+import instagram_icon from '@/assets/images/icons/sns/instagram_icon.png';
+import x_icon from '@/assets/images/icons/sns/x_icon.svg';
+
+export const SNS_CONFIG = {
+  instagram: {
+    label: '인스타그램',
+    placeholder: 'https://www.instagram.com/id',
+    regex: /^https:\/\/(www\.)?instagram\.com\/[A-Za-z0-9._%-]+\/?$/,
+    icon: instagram_icon,
+  },
+  youtube: {
+    label: '유튜브',
+    placeholder: 'https://www.youtube.com/@id',
+    regex: /^https:\/\/(www\.)?youtube\.com\/(channel\/|@)[A-Za-z0-9._%-]+\/?$/,
+    icon: youtube_icon,
+  },
+  x: {
+    label: 'X',
+    placeholder: 'https://x.com/id',
+    regex: /^https:\/\/(www\.)?x\.com\/[A-Za-z0-9._%-]+\/?$/,
+    icon: x_icon,
+  },
+} as const;