Fix/qa

src/components/calendar/CalendarCheckBoxList.tsx

@@ -58,31 +58,37 @@ export default function CalendarCheckBoxList({
           titleClassName="text-mainGreen text-sm text-darkGray-active mb-3 [&>button>svg]:text-xs [&>button>svg]:text-darkGray-active"
           initialOpen
         >
-          <ul className="flex flex-col gap-2">
-            {category === '교육과정 캘린더' &&
-              calendarList?.map(calendar => (
+          {category === '교육과정 캘린더' && (
+            <ul className="flex flex-col gap-2">
+              {calendarList?.map(calendar => (
                 <CourseCalendarCheckBox
                   key={calendar.courseId}
                   calendar={calendar}
                   onChange={() => onCheckBoxChange(calendar.calendarId)}
                 />
               ))}
-          </ul>
+            </ul>
+          )}
 
-          <ul className="flex flex-col gap-2">
-            {category === '개인 캘린더' &&
-              calendarList?.map(({ id, summary, backgroundColor, primary }) => (
-                <Checkbox
-                  key={id}
-                  id={id}
-                  text={primary ? '기본 캘린더' : summary}
-                  checked={!!currentCalendarIds?.includes(id)}
-                  onChange={() => onCheckBoxChange(id)}
-                  textClassName="!text-black"
-                  checkBoxColor={backgroundColor}
-                />
-              ))}
-          </ul>
+          {category === '개인 캘린더' && (
+            <ul className="flex flex-col gap-2">
+              {calendarList?.map(
+                ({ id, summary, backgroundColor, primary }) => (
+                  <li key={id} className="[&>label]:items-start">
+                    <Checkbox
+                      id={id}
+                      text={primary ? '기본 캘린더' : summary}
+                      checked={!!currentCalendarIds?.includes(id)}
+                      onChange={() => onCheckBoxChange(id)}
+                      textClassName="!text-black"
+                      checkBoxColor={backgroundColor}
+                      inputClassName="mt-1 border"
+                    />
+                  </li>
+                ),
+              )}
+            </ul>
+          )}
         </Accordion>
       ))}
     </ul>

src/components/common/TabNavigation.tsx

@@ -10,6 +10,7 @@ interface TabNavigationProps<T> {
   ) => void;
   selectValue: string;
   children?: ReactNode;
+  className?: string;
   tabClassName?: string;
   selectedStyle?: {
     point: 'dot' | 'border';
@@ -23,6 +24,7 @@ export default function TabNavigation<T>({
   selectValue,
   onChangeValue,
   tabClassName,
+  className,
   selectedStyle = { point: 'border', color: 'black' },
 }: TabNavigationProps<T>) {
   const borderStyle = selectedStyle.point === 'border' ? 'border-b-2' : '';
@@ -34,9 +36,9 @@ export default function TabNavigation<T>({
 
   return (
     <nav
-      className={`flex items-end justify-between text-lg font-semibold ${selectedStyle.point === 'border' ? 'border-b' : ''}`}
+      className={`flex items-end justify-between text-lg font-semibold ${selectedStyle.point === 'border' ? 'border-b' : ''} ${className}`}
     >
-      <ul className="flex flex-wrap justify-start gap-5">
+      <ul className="flex flex-wrap justify-start">
         {tabList.map(({ text, type }) => (
           <li
             role="presentation"

src/components/common/TitleLinkWithRoleTag.tsx

@@ -1,3 +1,5 @@
+import { MouseEvent } from 'react';
+
 import { Link } from 'react-router-dom';
 
 import { rolesObj } from '@/constants';
@@ -9,15 +11,17 @@ interface TitleLinkWithRoleTagProps {
   to: string;
   roleType: keyof HasAdminRole;
   title: string;
+  onClick: (event: MouseEvent) => void;
 }
 
 export default function TitleLinkWithRoleTag({
   to,
   roleType,
   title,
+  onClick,
 }: TitleLinkWithRoleTagProps) {
   return (
-    <Link to={to} className="flex h-7 items-center gap-1.5">
+    <Link to={to} className="flex h-7 items-center gap-1.5" onClick={onClick}>
       <Tag
         size="medium"
         roleKey={roleType}

src/components/common/button/BackButton.tsx

@@ -17,7 +17,7 @@ export default function BackButton({ onClick }: BackButtonProps) {
     <button
       type="button"
       onClick={onBackClick}
-      className="flex size-10 h-[38px] w-[38px] items-center justify-center rounded bg-mainGreen text-white"
+      className="flex size-8 items-center justify-center rounded bg-mainGreen-hover text-white"
     >
       <Icon name="ChevronLeft" />
     </button>

src/components/common/button/FavoriteButton.tsx

@@ -18,12 +18,14 @@ export default function FavoriteButton({
   onClick,
   disabled,
 }: FavoriteButtonProps) {
+  const iconClassName = 'cursor-pointer text-mainGreen';
+
   return (
     <button type="button" onClick={onClick} disabled={disabled}>
       {isFavorite ? (
-        <BsHeartFill size={size} className="cursor-pointer text-mainGreen" />
+        <BsHeartFill size={size} className={iconClassName} />
       ) : (
-        <BsHeart size={size} className="cursor-pointer text-mainGreen" />
+        <BsHeart size={size} className={iconClassName} />
       )}
     </button>
   );

src/components/common/button/SquareButton.tsx

@@ -41,7 +41,7 @@ export default function SquareButton({
   return (
     <button
       type={type === 'submit' ? 'submit' : 'button'}
-      className={`rounded-lg ${colorStyle} px-4 py-2 tracking-tight ${className}`}
+      className={`cursor-pointer rounded-lg ${colorStyle} px-4 py-2 tracking-tight ${className}`}
       onClick={onClick}
       title={name}
       disabled={disabled}

src/components/common/dropdown/TechStackDropdown.tsx

@@ -14,7 +14,7 @@ export interface OptionItem {
   id: number;
   name: string;
   iconImageUrl?: string;
-  type: string;
+  type?: string;
 }
 
 interface MultiSelectDropdownProps {
@@ -91,6 +91,7 @@ const TechStackDropdown = memo(function TechStackDropdown({
     () =>
       Array.from(
         options
+          .filter(({ type }) => type)
           .reduce((acc, curr) => {
             if (!acc.has(curr.type)) {
               acc.set(curr.type, { text: curr.type, type: curr.type });
@@ -145,7 +146,8 @@ const TechStackDropdown = memo(function TechStackDropdown({
           tabList={tabList}
           onChangeValue={handleTabValue}
           selectValue={tabValue}
-          tabClassName="pb-[7px]"
+          tabClassName="pb-[7px] px-3"
+          className="px-5"
         />
         <ul className="flex flex-wrap gap-2.5 p-4">
           {filteredOptionsByTab.map(option => (
@@ -154,9 +156,22 @@ const TechStackDropdown = memo(function TechStackDropdown({
               option={option}
               onChangeValue={handleSelectOptionChange}
               isSelected={checkIsSelected(option)}
+              // disabled={disabled}
             />
           ))}
         </ul>
+
+        <label className="mb-4 ml-6 flex w-fit cursor-pointer items-center gap-2">
+          <input
+            type="checkbox"
+            checked={checkIsSelected({ id: 0, name: '제한 없음' })}
+            onChange={() =>
+              handleSelectOptionChange({ id: 0, name: '제한 없음' })
+            }
+            className="size-4 rounded border-darkGray"
+          />
+          <span>제한 없음</span>
+        </label>
       </SelectBox>
     </>
   );

src/components/common/dropdown/option/TechStackOption.tsx

@@ -4,12 +4,14 @@ interface TechStackOptionProps {
   option: OptionItem;
   isSelected: boolean;
   onChangeValue: (option: OptionItem) => void;
+  disabled?: boolean;
 }
 
 export default function TechStackOption({
   option,
   isSelected,
   onChangeValue,
+  disabled,
 }: TechStackOptionProps) {
   return (
     <li
@@ -22,6 +24,7 @@ export default function TechStackOption({
           checked={isSelected}
           onChange={() => onChangeValue(option)}
           className="hidden"
+          disabled={disabled}
         />
         {option.name}
       </label>

src/components/common/dropdown/select/SelectBox.tsx

@@ -148,7 +148,7 @@ export default function SelectBox<
 
       <article className={defaultLabel === '기술 스택' ? '' : 'relative'}>
         <ul
-          className={`${open ? 'max-h-56 border border-lightGray' : 'max-h-0'} absolute z-40 mt-1 min-w-full max-w-max overflow-auto rounded-2xl bg-white px-2 shadow-card transition-all duration-500 scrollbar-hide`}
+          className={`${open ? 'max-h-56 border border-lightGray' : 'max-h-0'} absolute z-40 mt-1 min-w-full max-w-max overflow-auto rounded-2xl bg-white shadow-card transition-all duration-500 scrollbar-hide ${defaultLabel === '기술 스택' ? '' : 'px-2'}`}
         >
           {children}
         </ul>

src/components/common/input/ControllerDateTime.tsx

@@ -4,7 +4,8 @@ import { Controller, useFormContext } from 'react-hook-form';
 
 import SingleSelectDropdown from '@/components/common/dropdown/SingleSelectDropdown';
 import CustomDatePicker from '@/components/common/input/CustomDatePicker';
-import ErrorMsg from '@/components/common/input/ErrorMsg';
+
+// import ErrorMsg from '@/components/common/input/ErrorMsg';
 
 interface ControllerDateTimeProps {
   type?: 'date' | 'dateTime';
@@ -21,7 +22,7 @@ export default function ControllerDateTime({
   } = useFormContext();
 
   return (
-    <div className="relative flex w-full flex-col">
+    <div className="relative flex h-full w-full flex-col">
       {type === 'date' && (
         <Controller
           control={control}
@@ -31,12 +32,14 @@ export default function ControllerDateTime({
               <CustomDatePicker
                 id={name}
                 currentDate={value ? new Date(value) : undefined}
+                className={`h-[59px] ${errors[name]?.message ? 'border-red-500' : 'border-mainGray'}`}
                 onChange={data => {
                   if (data) {
                     const dateTime = formatDate(data, "yyyy-MM-dd'T'HH:mm:ss");
                     onChange(dateTime);
                   }
                 }}
+                errorMsg={errors[name]?.message as string}
               />
             );
           }}
@@ -111,12 +114,12 @@ export default function ControllerDateTime({
         />
       )}
 
-      {errors[name]?.message && (
+      {/* {errors[name]?.message && (
         <ErrorMsg
           msg={errors[name]?.message as string}
-          className="absolute -bottom-6 right-0 pr-2"
+          className="absolute -bottom-6 left-0 pl-2"
         />
-      )}
+      )} */}
     </div>
   );
 }

src/components/common/input/CustomDatePicker.tsx

@@ -117,7 +117,7 @@ export default function CustomDatePicker({
         <DatePicker
           id={`date-picker-${id}`}
           autoComplete="off"
-          className={`flex h-full w-full flex-1 items-center rounded-2xl border border-mainGray bg-white py-4 !pl-11 pr-[15px] text-lg placeholder:text-mainGray focus:outline-none ${errorMsg ? 'border-red-500' : 'border-lightGray'} ${className}`}
+          className={`flex h-full w-full flex-1 items-center rounded-2xl border bg-white py-4 !pl-11 pr-[15px] text-lg placeholder:text-mainGray focus:outline-none ${errorMsg ? 'border-red-500' : 'border-mainGray'} ${className}`}
           renderCustomHeader={CustomDatePickerHeader}
           preventOpenOnFocus
           closeOnScroll