THIP-TextHip · ljh130334 · Aug 20, 2025 · Aug 20, 2025 · Aug 20, 2025 · Aug 20, 2025
diff --git a/src/assets/memory/record-x.svg b/src/assets/memory/record-x.svg
diff --git a/src/components/common/CommentBottomSheet/GlobalCommentBottomSheet.styled.ts b/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;

diff --git a/src/components/common/LoadingSpinner.tsx b/src/components/common/LoadingSpinner.tsx
@@ -24,6 +24,10 @@ const LoadingSpinner = ({
 const Container = styled.div<{ fullHeight: boolean }>`
   display: flex;
   flex-direction: column;
+  width: 100%;
+  max-width: 767px;
+  min-width: 320px;
+  margin: 0 auto;
   justify-content: center;
   align-items: center;
   ${({ fullHeight }) =>

diff --git a/src/components/common/Modal/MoreMenu.tsx b/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;
       }
     `;

diff --git a/src/components/common/Modal/Snackbar.tsx b/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`

diff --git a/src/components/common/Post/PostBody.tsx b/src/components/common/Post/PostBody.tsx
@@ -9,6 +9,7 @@ const Container = styled.div`
   flex-direction: column;
   width: 100%;
   gap: 16px;
+  cursor: pointer;
 `;
 
 const PostContent = styled.div<{ hasImage: boolean }>`
@@ -82,9 +83,11 @@ const PostBody = ({
   }, [contentBody]);
 
   return (
-    <Container>
-      <BookInfoCard bookTitle={bookTitle} bookAuthor={bookAuthor} isbn={isbn} />
-      <PostContent hasImage={hasImage} onClick={() => handlePostClick(feedId)}>
+    <Container onClick={() => handlePostClick(feedId)}>
+      <div onClick={(e) => e.stopPropagation()}>
+        <BookInfoCard bookTitle={bookTitle} bookAuthor={bookAuthor} isbn={isbn} />
+      </div>
+      <PostContent hasImage={hasImage}>
         <div className="content" ref={contentRef}>
           {contentBody}
         </div>

diff --git a/src/components/common/Post/PostFooter.tsx b/src/components/common/Post/PostFooter.tsx
@@ -52,6 +52,7 @@ interface PostFooterProps {
   isLiked?: boolean;
   isPublic?: boolean;
   isDetail?: boolean;
+  onSaveToggle?: (feedId: number, newSaveState: boolean) => void;
 }
 
 const PostFooter = ({
@@ -63,6 +64,7 @@ const PostFooter = ({
   isLiked = false,
   isPublic = true,
   isDetail = false,
+  onSaveToggle,
 }: PostFooterProps) => {
   const [liked, setLiked] = useState(isLiked);
   const [likeCount, setLikeCount] = useState<number>(initialLikeCount);
@@ -90,9 +92,15 @@ const PostFooter = ({
       const response = await postSaveFeed(feedId, !saved);
 
       if (response.isSuccess) {
+        const newSaveState = response.data?.isSaved ?? !saved;
         // 성공 시 상태 업데이트
-        setSaved(response.data?.isSaved ?? !saved);
-        console.log('저장 상태 변경 성공:', response.data?.isSaved);
+        setSaved(newSaveState);
+        console.log('저장 상태 변경 성공:', newSaveState);
+
+        // 부모 컴포넌트에 알림
+        if (onSaveToggle) {
+          onSaveToggle(feedId, newSaveState);
+        }
       } else {
         console.error('저장 상태 변경 실패:', response.message);
       }

diff --git a/src/components/creategroup/ActivityPeriodSection/ActivityPeriodSection.styled.ts b/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`

diff --git a/src/components/creategroup/ActivityPeriodSection/ActivityPeriodSection.tsx b/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>
 

diff --git a/src/components/creategroup/RoomInfoSection.styled.ts b/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};
   }
 `;

diff --git a/src/components/creategroup/RoomInfoSection.tsx b/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}

diff --git a/src/components/createpost/PostContentSection.styled.ts b/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};

diff --git a/src/components/createpost/PostContentSection.tsx b/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}

diff --git a/src/components/feed/FeedPost.tsx b/src/components/feed/FeedPost.tsx
@@ -26,13 +26,13 @@ const BorderBottom = styled.div`
   background: #1c1c1c;
 `;
 
-const FeedPost = ({ showHeader, isLast, isMyFeed, ...postData }: FeedPostProps) => {
+const FeedPost = ({ showHeader, isLast, isMyFeed, onSaveToggle, ...postData }: FeedPostProps) => {
   return (
     <>
       <Container>
         {showHeader && <PostHeader {...postData} />}
         <PostBody {...postData} />
-        <PostFooter isMyFeed={!!isMyFeed} {...postData} />
+        <PostFooter isMyFeed={!!isMyFeed} onSaveToggle={onSaveToggle} {...postData} />
       </Container>
       {!isLast && <BorderBottom />}
     </>