[Feat] 인수인계 노트 페이지 수정

src/common/component/CommandButton/CommandButton.style.ts

@@ -23,6 +23,8 @@ export const buttonStyle = (isFrontIcon: boolean) =>
     },
 
     cursor: 'pointer',
+
+    transition: 'all .2s ease-in',
   });
 
 export const commonStyle = css({
@@ -88,7 +90,7 @@ export const sizeStyle = (size: Required<CommandButtonProps>['size']) => {
     }),
     /** Button_32 */
     small: css({
-      padding: '0.6rem 1.4rem',
+      padding: '0.7rem 1rem 0.7rem 1.4rem',
 
       ...theme.text.body08,
     }),

src/common/component/RadioButton/RadioButton.style.ts

@@ -5,22 +5,56 @@ import { theme } from '@/common/style/theme/theme';
 export const radioButtonLayoutStyle = css({
   display: 'flex',
 
-  gap: '0.4rem',
+  gap: '0.7rem',
 
   cursor: 'pointer',
 });
 
 export const inputStyle = css({
-  '& + label': {
-    cursor: 'pointer',
-    transition: '0.2s ease-in-out',
+  position: 'relative',
 
-    ...theme.text.body06,
-  },
+  appearance: 'none',
+  MozAppearance: 'none',
+  WebkitAppearance: 'none',
+
+  width: '1.5rem',
+  height: '1.5rem',
+
+  border: `1.5px solid ${theme.colors.gray_400}`,
+  borderRadius: '50%',
 
-  accentColor: theme.colors.key_500,
+  backgroundColor: theme.colors.gray_100,
 
   cursor: 'pointer',
+
+  transition: '0.2s ease-in-out',
+
+  '&:checked': {
+    borderColor: theme.colors.key_500,
+  },
+
+  '&:checked::after': {
+    position: 'absolute',
+    top: '50%',
+    left: '50%',
+
+    width: '0.7rem',
+    height: '0.7rem',
+
+    margin: '0 auto',
+
+    borderRadius: '50%',
+
+    content: '""',
+    backgroundColor: theme.colors.key_500,
+
+    transform: 'translate(-50%, -50%)',
+  },
+
+  '& + label': {
+    cursor: 'pointer',
+    ...theme.text.body06,
+  },
 });
 
 export const labelStyle = css({

src/common/component/RadioButton/RadioButton.tsx

@@ -11,7 +11,7 @@ export interface RadioButtonProps extends InputHTMLAttributes<HTMLInputElement>
 const RadioButton = ({ label, value, id, checked, ...props }: RadioButtonProps) => {
   return (
     <div role="radio" aria-label="radio-button" aria-checked={checked} tabIndex={0} css={radioButtonLayoutStyle}>
-      <input id={id} type="radio" value={value} css={inputStyle} {...props} />
+      <input id={id} type="radio" value={value} checked={checked} css={inputStyle} {...props} />
       <label htmlFor={id} css={labelStyle}>
         {label}
       </label>

src/common/component/RadioButton/RadioGroup.tsx

@@ -22,7 +22,7 @@ const RadioGroup = ({ options, onChange, value }: RadioButtonGroupProps) => {
   };
 
   const renderRadioButton = () => {
-    return options.map(({ label, value: optionValue, name }, index) => {
+    return options.map(({ label, name, value: optionValue }, index) => {
       const id = `${name}-${index}`;
 
       return (
@@ -33,7 +33,7 @@ const RadioGroup = ({ options, onChange, value }: RadioButtonGroupProps) => {
           name={name}
           value={optionValue}
           onChange={handleChange}
-          checked={value === optionValue}
+          checked={optionValue === value}
         />
       );
     });

src/page/handover/note/component/Custom/Custom.style.ts

@@ -5,12 +5,11 @@ import { theme } from '@/common/style/theme/theme';
 export const noteWrapperStyle = css({
   display: 'flex',
 
-  flexDirection: 'column',
+  maxHeight: 'calc(100vh - 33rem)',
 
+  flexDirection: 'column',
   gap: '4rem',
 
-  maxHeight: '45rem',
-
   paddingBottom: '5rem',
 
   overflowY: 'scroll',

src/page/handover/note/component/NoteDetail/NoteDetail.style.ts

@@ -45,7 +45,7 @@ export const infoLayoutStyle = css({
 
   gap: '2rem',
 
-  alignItems: 'center',
+  alignItems: 'baseline',
 });
 
 export const infoStyle = css({
@@ -54,3 +54,17 @@ export const infoStyle = css({
   color: theme.colors.gray_800,
   whiteSpace: 'nowrap',
 });
+
+export const plusBtnStyle = css({
+  padding: '0.5rem',
+
+  borderRadius: '0.6rem',
+
+  backgroundColor: theme.colors.gray_100,
+
+  '&:hover': {
+    backgroundColor: theme.colors.gray_300,
+
+    transition: 'all 0.2s ease-in',
+  },
+});

src/page/handover/note/component/NoteDetail/NoteDetail.tsx

@@ -1,18 +1,22 @@
 import { useCallback, useState } from 'react';
 
+import PlusBtn from '@/common/asset/svg/ic_plus_button.svg?react';
 import Button from '@/common/component/Button/Button';
 import DatePicker from '@/common/component/DatePicker';
 import Flex from '@/common/component/Flex/Flex';
 import RadioButtonGroup from '@/common/component/RadioButton/RadioGroup';
+import Tag from '@/common/component/Tag/Tag';
 import Text from '@/common/component/Text/Text';
 
 import {
   entireInfoStyle,
   infoContainerStyle,
   infoLayoutStyle,
   infoStyle,
+  plusBtnStyle,
   titleStyle,
 } from '@/page/handover/note/component/NoteDetail/NoteDetail.style';
+import { TAG_NAME } from '@/page/handover/note/constants/tag';
 
 type Status = '완료' | '미완료';
 
@@ -62,11 +66,22 @@ const NoteDetail = () => {
           <Text tag="body6" css={infoStyle}>
             활동 태그
           </Text>
-          <Button variant="text" css={{ padding: 0 }} onClick={handleAppendTag}>
-            여기를 눌러 활동 태그를 추가해보세요
-          </Button>
-          {/* 태그 감싸는 Flex 컴포넌트 */}
-          <Flex styles={{ maxWidth: '21.8rem', gap: '0.4rem', wrap: 'wrap' }} />
+          <Flex styles={{ maxWidth: '21.8rem', gap: '0.4rem', wrap: 'wrap' }}>
+            {TAG_NAME.data.length > 0 ? (
+              <>
+                <Button variant="outline" css={plusBtnStyle} onClick={handleAppendTag}>
+                  <PlusBtn width={10} height={10} />
+                </Button>
+                {TAG_NAME.data.map((tag, index) => (
+                  <Tag key={index}>{tag}</Tag>
+                ))}
+              </>
+            ) : (
+              <Button variant="text" css={{ padding: 0 }} onClick={handleAppendTag}>
+                여기를 눌러 활동 태그를 추가해보세요
+              </Button>
+            )}
+          </Flex>
         </li>
         <li css={infoLayoutStyle}>
           <Text tag="body6" css={infoStyle}>

src/page/handover/note/component/Template/Template.style.ts

@@ -5,14 +5,14 @@ import { theme } from '@/common/style/theme/theme';
 export const noteWrapperStyle = css({
   display: 'flex',
 
+  maxHeight: 'calc(100vh - 33rem)',
+
   flexDirection: 'column',
   gap: '4rem',
 
-  maxHeight: '45rem',
-
   paddingBottom: '5rem',
 
-  overflowY: 'scroll',
+  overflow: 'scroll',
 });
 
 export const layoutStyle = css({

src/page/handover/note/constants/tag.ts

@@ -0,0 +1,3 @@
+export const TAG_NAME = {
+  data: ['event', 'notice', 'study', 'notice'],
+};

src/page/landing/LandingPage.tsx

@@ -56,7 +56,7 @@ const LandingPage = () => {
   const 다음페이지로 = () => {
     const isAuth = !!localStorage.getItem(ACCESS_TOKEN_KEY);
 
-    window.location.href = isAuth ? PATH.SHOWCASE : PATH.LOGIN;
+    window.location.href = isAuth ? PATH.DASHBOARD : PATH.LOGIN;
   };
 
   return (

src/page/login/index/hook/useLoginMutation.ts

@@ -25,7 +25,7 @@ export const useLoginMutation = () => {
 
       axiosInstance.defaults.headers.Authorization = `Bearer ${accessToken}`;
 
-      navigate(PATH.SHOWCASE);
+      navigate(PATH.DASHBOARD);
     },
 
     onError: (error: AxiosError) => {

src/shared/component/RouteNav/RouteNav.tsx

@@ -20,7 +20,7 @@ const RouteNav = () => {
 
   const isDrivePage = pathname === PATH.DRIVE;
   const isArchivingPage = pathname === PATH.ARCHIVING;
-  const isHandoverPage = pathname === PATH.HANDOVER;
+  const isHandoverPage = pathname === PATH.HANDOVER || pathname === PATH.HANDOVER_NOTE;
 
   return (
     <nav>

src/shared/component/SideNavBar/SideNavBar.tsx

@@ -59,7 +59,7 @@ const SideNavBar = () => {
               key={data.id}
               isClicked={selectedId === String(data.id)}
               logoUrl={data.iconImageUrl}
-              onLogoClick={() => handleItemClick(String(data.id), `${PATH.ARCHIVING}?teamId=${data.id}`)}
+              onLogoClick={() => handleItemClick(String(data.id), `${PATH.DASHBOARD}?teamId=${data.id}`)}
               hoverMessage={data.name}
             />
           );