fix: 1차 QA

src/components/common/CommentBottomSheet/GlobalCommentBottomSheet.styled.ts

@@ -19,8 +19,8 @@ export const Overlay = styled.div<{ isOpen: boolean }>`
 
 export const BottomSheet = styled.div<{ isOpen: boolean }>`
   width: 100%;
-  max-width: 540px;
-  min-width: 360px;
+  max-width: 767px;
+  min-width: 320px;
   background: ${colors.darkgrey.main};
   border-radius: 20px 20px 0 0;
   display: flex;

src/components/common/Modal/MoreMenu.tsx

@@ -2,17 +2,9 @@ import styled from '@emotion/styled';
 import { colors, typography } from '@/styles/global/global';
 import type { MoreMenuProps } from '@/stores/usePopupStore';
 
-const MoreMenu = ({
-  onEdit,
-  onDelete,
-  onClose,
-  onReport,
-  onPin,
-  isWriter,
-  type,
-}: MoreMenuProps) => {
+const MoreMenu = ({ onEdit, onDelete, onClose, onReport, isWriter, type }: MoreMenuProps) => {
   return (
-    <Overlay onClick={onClose}>
+    <Overlay onClick={() => onClose?.()}>
       {type === 'post' ? (
         // post 타입: 기존 로직 유지
         <>
@@ -25,11 +17,6 @@ const MoreMenu = ({
                 <Button variant="delete" onClick={onDelete}>
                   삭제하기
                 </Button>
-                {onPin && (
-                  <Button variant="pin" onClick={onPin}>
-                    피드에 핀하기
-                  </Button>
-                )}
               </RecordContainer>
             </>
           ) : (
@@ -70,21 +57,16 @@ const Overlay = styled.div`
   bottom: 0;
   display: flex;
   justify-content: center;
-  align-items: center;
-  min-width: 320px;
-  max-width: 767px;
-  margin: 0 auto;
+  align-items: flex-end;
+  width: 100vw;
+  height: 100vh;
   background-color: rgba(18, 18, 18, 0.1);
   backdrop-filter: blur(2.5px);
   z-index: 1200;
 `;
 
 const ReportContainer = styled.div`
-  position: fixed;
-  left: 0;
-  right: 0;
-  bottom: 0;
-
+  position: relative;
   display: flex;
   flex-direction: column;
   min-width: 320px;
@@ -94,16 +76,11 @@ const ReportContainer = styled.div`
   padding: 20px;
   border-radius: 12px 12px 0px 0px;
   background-color: ${colors.darkgrey.main};
-  z-index: 1201;
 `;
 
 // 3개 버튼을 위한 컨테이너 (핀하기 포함)
 const RecordContainer = styled.div`
-  position: fixed;
-  left: 0;
-  right: 0;
-  bottom: 0;
-
+  position: relative;
   display: flex;
   flex-direction: column;
   min-width: 320px;
@@ -112,7 +89,6 @@ const RecordContainer = styled.div`
   padding: 20px;
   border-radius: 12px 12px 0px 0px;
   background-color: ${colors.darkgrey.main};
-  z-index: 1201;
 `;
 
 const Button = styled.div<{ variant: 'edit' | 'delete' | 'report' | 'pin' }>`
@@ -142,30 +118,30 @@ const Button = styled.div<{ variant: 'edit' | 'delete' | 'report' | 'pin' }>`
     if (variant === 'pin') {
       return `
         &:first-of-type {
-          padding: 8px 12px 16px 12px;
+          padding: 13px 12px 21px 12px;
         }
 
         &:nth-of-type(2) {
-          padding: 8px 12px 16px 12px;
+          padding: 13px 12px 21px 12px;
         }
 
         &:last-of-type {
-          padding: 16px 12px 8px 12px;
+          padding: 21px 12px 13px 12px;
           border-bottom: none;
         }
       `;
     }
     return `
       &:first-of-type {
-        padding: 8px 12px 16px 12px;
+        padding: 13px 12px 21px 12px;
       }
 
       &:nth-of-type(2) {
-        padding: 8px 12px 16px 12px;
+        padding: 13px 12px 21px 12px;
       }
 
       &:last-of-type {
-        padding: 16px 12px 8px 12px;
+        padding: 21px 12px 13px 12px;
         border-bottom: none;
       }
     `;

src/components/common/Modal/Snackbar.tsx

@@ -3,7 +3,7 @@ import { colors, typography } from '@/styles/global/global';
 import type { SnackbarProps } from '@/stores/usePopupStore';
 import { useEffect, useState } from 'react';
 
-const Snackbar = ({ message, actionText, variant, onActionClick, onClose }: SnackbarProps) => {
+const Snackbar = ({ message, actionText, variant, isError, onActionClick, onClose }: SnackbarProps) => {
   const [visible, setVisible] = useState(false);
 
   useEffect(() => {
@@ -20,7 +20,7 @@ const Snackbar = ({ message, actionText, variant, onActionClick, onClose }: Snac
 
   return (
     <Container variant={variant} visible={visible}>
-      <Discription>{message}</Discription>
+      <Discription isError={isError}>{message}</Discription>
       {variant === 'bottom' && actionText && <Button onClick={onActionClick}>{actionText}</Button>}
     </Container>
   );
@@ -52,9 +52,10 @@ const Container = styled.div<{ variant: 'top' | 'bottom'; visible: boolean }>`
   transition: transform 2s cubic-bezier(0.16, 1, 0.3, 1);
 `;
 
-const Discription = styled.div`
+const Discription = styled.div<{ isError?: boolean }>`
   font-size: ${typography.fontSize.xs};
   font-weight: ${typography.fontWeight.medium};
+  color: ${({ isError }) => isError ? colors.red : colors.white};
 `;
 
 const Button = styled.div`

src/components/creategroup/ActivityPeriodSection/ActivityPeriodSection.styled.ts

@@ -14,12 +14,16 @@ export const DateRangeContainer = styled.div`
   width: 100%;
 `;
 
-export const DateGroup = styled.div`
+export const DateGroup = styled.div<{ alignItems?: 'start' | 'end' | 'center' }>`
   display: flex;
   align-items: center;
   gap: 2px;
   flex: 1;
-  justify-content: center;
+  justify-content: ${({ alignItems = 'center' }) => {
+    if (alignItems === 'start') return 'flex-start';
+    if (alignItems === 'end') return 'flex-end';
+    return 'center';
+  }};
 `;
 
 export const WheelContainer = styled.div`
@@ -89,11 +93,11 @@ export const WheelItem = styled.div<{ isSelected: boolean }>`
   }
 `;
 
-export const DateUnitText = styled.div`
+export const DateUnitText = styled.div<{ isLast?: boolean }>`
   color: ${semanticColors.text.primary};
   font-size: ${typography.fontSize.xs};
   font-weight: ${typography.fontWeight.regular};
-  margin-right: 6px;
+  margin-right: ${({ isLast }) => (isLast ? '0px' : '6px')};
 `;
 
 export const SeparatorText = styled.div`

src/components/creategroup/ActivityPeriodSection/ActivityPeriodSection.tsx

@@ -189,7 +189,7 @@ const ActivityPeriodSection = ({
       <DatePickerContainer>
         <DateRangeContainer>
           {/* 시작일 */}
-          <DateGroup>
+          <DateGroup alignItems="end">
             <DateWheel
               values={years}
               selectedValue={startDate.year}
@@ -212,13 +212,13 @@ const ActivityPeriodSection = ({
               onChange={handleStartDayChange}
               width={24}
             />
-            <DateUnitText>일</DateUnitText>
+            <DateUnitText isLast>일</DateUnitText>
           </DateGroup>
 
           <SeparatorText>~</SeparatorText>
 
           {/* 종료일 */}
-          <DateGroup>
+          <DateGroup alignItems="start">
             <DateWheel
               values={years}
               selectedValue={endDate.year}
@@ -241,7 +241,7 @@ const ActivityPeriodSection = ({
               onChange={handleEndDayChange}
               width={24}
             />
-            <DateUnitText>일</DateUnitText>
+            <DateUnitText isLast>일</DateUnitText>
           </DateGroup>
         </DateRangeContainer>
 

src/components/creategroup/RoomInfoSection.styled.ts

@@ -1,5 +1,5 @@
 import styled from '@emotion/styled';
-import { typography, semanticColors } from '../../styles/global/global';
+import { typography, semanticColors, colors } from '../../styles/global/global';
 
 export const TextAreaBox = styled.div`
   position: relative;
@@ -13,7 +13,7 @@ export const TextArea = styled.textarea`
   border: none;
   outline: none;
   color: ${semanticColors.text.primary};
-  font-size: ${typography.fontSize.base};
+  font-size: ${typography.fontSize.sm};
   width: 100%;
   resize: none;
   font-family: ${typography.fontFamily.primary};
@@ -22,7 +22,7 @@ export const TextArea = styled.textarea`
   margin: 0;
 
   &::placeholder {
-    color: ${semanticColors.text.primary};
+    color: ${colors.grey[300]};
     font-size: ${typography.fontSize.sm};
   }
 `;

src/components/creategroup/RoomInfoSection.tsx

@@ -20,7 +20,7 @@ const RoomInfoSection = ({
         <SectionTitle>방 제목</SectionTitle>
         <TextAreaBox>
           <TextArea
-            placeholder="방 제목을 입력합니다."
+            placeholder="방 제목을 입력해주세요."
             value={roomTitle}
             onChange={e => onRoomTitleChange(e.target.value)}
             maxLength={15}
@@ -36,7 +36,7 @@ const RoomInfoSection = ({
         <SectionTitle>한 줄 소개</SectionTitle>
         <TextAreaBox>
           <TextArea
-            placeholder="방에 대한 소개 입력입니다."
+            placeholder="방에 대한 짧은 소개글을 작성해주세요."
             value={roomDescription}
             onChange={e => onRoomDescriptionChange(e.target.value)}
             maxLength={75}

src/components/createpost/PostContentSection.styled.ts

@@ -7,17 +7,19 @@ export const TextAreaBox = styled.div`
   flex-direction: column;
 `;
 
-export const TextArea = styled.textarea`
+export const TextArea = styled.textarea<{ readOnly?: boolean }>`
   width: 100%;
   min-height: 100px;
-  background-color: ${semanticColors.background.primary};
+  background-color: ${props => props.readOnly ? '#f5f5f5' : semanticColors.background.primary};
   color: ${semanticColors.text.secondary};
   font-size: ${typography.fontSize.sm};
   font-weight: ${typography.fontWeight.regular};
   font-family: ${typography.fontFamily.primary};
   resize: none;
   outline: none;
   border: none;
+  overflow: hidden;
+  cursor: ${props => props.readOnly ? 'not-allowed' : 'text'};
 
   &::placeholder {
     color: ${semanticColors.text.ghost};

src/components/createpost/PostContentSection.tsx

@@ -21,10 +21,6 @@ const PostContentSection = ({ content, onContentChange, readOnly = false }: Post
           maxLength={maxLength}
           rows={4}
           readOnly={readOnly}
-          style={{ 
-            backgroundColor: readOnly ? '#f5f5f5' : 'transparent',
-            cursor: readOnly ? 'not-allowed' : 'text'
-          }}
         />
         <CharacterCount>
           {content.length} / {maxLength}

src/components/group/CommentSection.styled.ts

@@ -4,7 +4,7 @@ import { colors, typography } from '@/styles/global/global';
 export const CommentSection = styled.section`
   display: flex;
   flex-direction: column;
-  width: 90%;
+  width: calc(100% - 40px);
   gap: 12px;
   background: ${colors.darkgrey.dark};
   margin: 20px 20px 0 20px;

src/components/group/GroupBookSection.styled.ts

@@ -5,9 +5,9 @@ export const GroupBookSection = styled.section`
   display: flex;
   align-items: center;
   justify-content: space-between;
-  width: 90%;
+  width: calc(100% - 40px);
   background: ${colors.darkgrey.dark};
-  margin: 0 20px 0 20px;
+  margin: 0 20px;
   padding: 10px 12px;
   border-radius: 12px;
   cursor: pointer;

src/components/group/GroupBookSection.tsx

@@ -18,7 +18,7 @@ const GroupBookSection = ({ title, author, onClick }: GroupBookSectionProps) =>
     <StyledGroupBookSection onClick={onClick}>
       <BookTitle>{title}</BookTitle>
       <RightSection>
-        <BookAuthor>{author}</BookAuthor>
+        <BookAuthor>{author} 저</BookAuthor>
         <ChevronIcon src={rightChevron} alt="책 이동 버튼" />
       </RightSection>
     </StyledGroupBookSection>

src/components/group/HotTopicSection.styled.ts

@@ -4,7 +4,7 @@ import { colors, typography } from '@/styles/global/global';
 export const HotTopicSection = styled.section`
   display: flex;
   flex-direction: column;
-  width: 90%;
+  width: calc(100% - 40px);
   gap: 12px;
   background: ${colors.darkgrey.dark};
   margin: 20px 20px 80px 20px;

src/components/group/MyGroupCard.tsx

@@ -25,7 +25,7 @@ export const MyGroupCard = forwardRef<HTMLDivElement, MyGroupCardProps>((props,
         <div>
           <ProgressText>
             {isMine ? '내 진행도' : `${group.userName}님의 진행도`}{' '}
-            <Percent>{group.progress}%</Percent>
+            <Percent>{Math.floor(group.progress || 0)}%</Percent>
           </ProgressText>
           <Bar>
             <Fill width={group.progress || 0} />

src/components/group/RecordSection.styled.ts

@@ -4,7 +4,7 @@ import { colors, semanticColors, typography } from '@/styles/global/global';
 export const RecordSection = styled.section`
   display: flex;
   flex-direction: column;
-  width: 90%;
+  width: calc(100% - 40px);
   gap: 12px;
   background: ${colors.darkgrey.dark};
   margin: 20px 20px 0 20px;

src/components/group/RecordSection.tsx

@@ -28,7 +28,7 @@ const RecordSection = ({ currentPage, progress, onClick }: RecordSectionProps) =
       <RecordSectionContent>
         <CurrentPage>현재 페이지 {currentPage}</CurrentPage>
         <div style={{ display: 'flex', alignItems: 'baseline' }}>
-          <ProgressText>{progress}</ProgressText>
+          <ProgressText>{Math.floor(progress)}</ProgressText>
           <PercentText>%</PercentText>
         </div>
         <ProgressBar>