[release] v1.0.3

frontend/.gitignore

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

frontend/package.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/src/components/common/Button/Button.tsx

@@ -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/components/common/InputField/InputField.styles.ts

@@ -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/components/common/InputField/InputField.tsx

@@ -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/constants/snsConfig.ts

@@ -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;

frontend/src/hooks/useTrackPageView.ts

@@ -1,44 +1,45 @@
-import { useEffect } from 'react';
+import { useEffect, useRef } from 'react';
 import { useLocation } from 'react-router-dom';
 import mixpanel from 'mixpanel-browser';
 
-const useTrackPageView = (pageName: string) => {
+const useTrackPageView = (pageName: string, clubName?: string) => {
   const location = useLocation();
+  const isTracked = useRef(false);
+  const startTime = useRef(Date.now());
 
   useEffect(() => {
-    const startTime = Date.now();
-
-    // 페이지 방문 이벤트
     mixpanel.track(`${pageName} Visited`, {
       url: window.location.href,
-      timestamp: startTime,
+      timestamp: startTime.current,
       referrer: document.referrer || 'direct',
+      clubName,
     });
 
     const trackPageDuration = () => {
-      const duration = Date.now() - startTime;
+      if (isTracked.current) return;
+      const duration = Date.now() - startTime.current;
       mixpanel.track(`${pageName} Duration`, {
         url: window.location.href,
-        duration: duration, // milliseconds
-        duration_seconds: Math.round(duration / 1000), // Convert to seconds
+        duration: duration,
+        duration_seconds: Math.round(duration / 1000),
+        clubName,
       });
+      isTracked.current = true;
     };
 
-    // 사용자가 페이지를 떠날 때 (페이지 종료 또는 새 페이지 이동)
     window.addEventListener('beforeunload', trackPageDuration);
-
-    // 사용자가 탭을 변경하거나 백그라운드로 이동할 때
     document.addEventListener('visibilitychange', () => {
       if (document.hidden) {
         trackPageDuration();
       }
     });
 
     return () => {
+      trackPageDuration();
       window.removeEventListener('beforeunload', trackPageDuration);
       document.removeEventListener('visibilitychange', trackPageDuration);
     };
-  }, [location.pathname]);
+  }, [location.pathname, clubName]);
 };
 
 export default useTrackPageView;

frontend/src/index.tsx

@@ -3,6 +3,7 @@ import ReactDOM from 'react-dom/client';
 import App from './App';
 import mixpanel from 'mixpanel-browser';
 import * as ChannelService from '@channel.io/channel-web-sdk-loader';
+import * as Sentry from '@sentry/react';
 
 if (process.env.REACT_APP_MIXPANEL_TOKEN) {
   mixpanel.init(process.env.REACT_APP_MIXPANEL_TOKEN, {
@@ -22,6 +23,13 @@ if (process.env.CHANNEL_PLUGIN_KEY) {
   });
 }
 
+Sentry.init({
+  dsn: process.env.SENTRY_DSN,
+  sendDefaultPii: false,
+  release: process.env.SENTRY_RELEASE,
+  tracesSampleRate: 0.1,
+});
+
 const root = ReactDOM.createRoot(
   document.getElementById('root') as HTMLElement,
 );

frontend/src/pages/AdminPage/auth/LoginTab/LoginTab.styles.ts

@@ -36,6 +36,12 @@ export const Title = styled.h2`
   align-self: flex-start;
 `;
 
+export const LoginForm = styled.form`
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+`;
+
 export const InputFieldsContainer = styled.div`
   width: 100%;
   display: flex;

frontend/src/pages/AdminPage/auth/LoginTab/LoginTab.tsx

@@ -49,28 +49,35 @@ const LoginTab = () => {
       <Styled.LoginBox>
         <Styled.Logo src={moadong_name_logo} alt='Moadong Logo' />
         <Styled.Title>Log in</Styled.Title>
-        <Styled.InputFieldsContainer>
-          <InputField
-            type='text'
-            placeholder='아이디'
-            showClearButton={false}
-            value={userId}
-            onChange={(e) => setUserId(e.target.value)}
-          />
-          <InputField
-            type='password'
-            placeholder='비밀번호'
-            showClearButton={false}
-            value={password}
-            onChange={(e) => setPassword(e.target.value)}
-          />
-        </Styled.InputFieldsContainer>
+        <Styled.LoginForm
+          onSubmit={(e) => {
+            e.preventDefault();
+            handleLogin();
+          }}
+        >
+          <Styled.InputFieldsContainer>
+            <InputField
+              type='text'
+              placeholder='아이디'
+              showClearButton={false}
+              value={userId}
+              onChange={(e) => setUserId(e.target.value)}
+            />
+            <InputField
+              type='password'
+              placeholder='비밀번호'
+              showClearButton={false}
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+            />
+          </Styled.InputFieldsContainer>
 
-        <Styled.ButtonWrapper>
-          <Button width='100%' onClick={handleLogin}>
-            {loading ? '로그인 중...' : '로그인'}
-          </Button>
-        </Styled.ButtonWrapper>
+          <Styled.ButtonWrapper>
+            <Button width='100%' type='submit'>
+              {loading ? '로그인 중...' : '로그인'}
+            </Button>
+          </Styled.ButtonWrapper>
+        </Styled.LoginForm>
 
         <Styled.ForgotLinks>
           <Styled.LinkButton
@@ -79,7 +86,8 @@ const LoginTab = () => {
               alert(
                 '해당 기능은 아직 준비 중이에요.\n필요하신 경우 관리자에게 문의해주세요☺',
               )
-            }>
+            }
+          >
             회원가입
           </Styled.LinkButton>
           <span>|</span>
@@ -89,7 +97,8 @@ const LoginTab = () => {
               alert(
                 '해당 기능은 아직 준비 중이에요.\n필요하신 경우 관리자에게 문의해주세요☺',
               )
-            }>
+            }
+          >
             아이디 찾기
           </Styled.LinkButton>
           <span>|</span>
@@ -99,7 +108,8 @@ const LoginTab = () => {
               alert(
                 '해당 기능은 아직 준비 중이에요.\n필요하신 경우 관리자에게 문의해주세요☺',
               )
-            }>
+            }
+          >
             비밀번호 찾기
           </Styled.LinkButton>
         </Styled.ForgotLinks>

frontend/src/pages/AdminPage/tabs/ClubInfoEditTab/ClubInfoEditTab.styles.ts

@@ -31,4 +31,27 @@ export const TagEditGroup = styled.div`
   display: flex;
   flex-direction: column;
   gap: 30px;
+  margin-bottom: 120px;
+`;
+
+export const SNSInputGroup = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 30px;
+  margin-top: 30px;
+`;
+
+export const SNSRow = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  position: relative;
+  align-items: flex-start;
+`;
+
+export const SNSCheckboxLabel = styled.label`
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  font-weight: 600;
 `;