diff --git a/public/images/section7_phone2.png b/public/images/section7_phone2.png
new file mode 100644
index 00000000..a094779f
Binary files /dev/null and b/public/images/section7_phone2.png differ
diff --git a/public/sw.js.map b/public/sw.js.map
index 6de2758f..b280aeba 100644
--- a/public/sw.js.map
+++ b/public/sw.js.map
@@ -1 +1,32 @@
-{"version":3,"file":"sw.js","sources":["../../../../../private/var/folders/k1/dqklgtzs47vckvrkl74mxsxc0000gn/T/92653e5fe2ebf991a1b5d4056a74e5d3/sw.js"],"sourcesContent":["import {registerRoute as workbox_routing_registerRoute} from '/Users/eugene/dev/front/ListyWave-front/node_modules/next-pwa/node_modules/workbox-routing/registerRoute.mjs';\nimport {NetworkFirst as workbox_strategies_NetworkFirst} from '/Users/eugene/dev/front/ListyWave-front/node_modules/next-pwa/node_modules/workbox-strategies/NetworkFirst.mjs';\nimport {NetworkOnly as workbox_strategies_NetworkOnly} from '/Users/eugene/dev/front/ListyWave-front/node_modules/next-pwa/node_modules/workbox-strategies/NetworkOnly.mjs';\nimport {clientsClaim as workbox_core_clientsClaim} from '/Users/eugene/dev/front/ListyWave-front/node_modules/next-pwa/node_modules/workbox-core/clientsClaim.mjs';/**\n * Welcome to your Workbox-powered service worker!\n *\n * You'll need to register this file in your web app.\n * See https://goo.gl/nhQhGp\n *\n * The rest of the code is auto-generated. Please don't update this file\n * directly; instead, make changes to your Workbox build configuration\n * and re-run your build process.\n * See https://goo.gl/2aRDsh\n */\n\n\nimportScripts(\n  \n);\n\n\n\n\n\n\n\nself.skipWaiting();\n\nworkbox_core_clientsClaim();\n\n\n\nworkbox_routing_registerRoute(\"/\", new workbox_strategies_NetworkFirst({ \"cacheName\":\"start-url\", plugins: [{ cacheWillUpdate: async ({ request, response, event, state }) => { if (response && response.type === 'opaqueredirect') { return new Response(response.body, { status: 200, statusText: 'OK', headers: response.headers }) } return response } }] }), 'GET');\nworkbox_routing_registerRoute(/.*/i, new workbox_strategies_NetworkOnly({ \"cacheName\":\"dev\", plugins: [] }), 'GET');\n\n\n\n\n"],"names":["importScripts","self","skipWaiting","workbox_core_clientsClaim","workbox_routing_registerRoute","workbox_strategies_NetworkFirst","plugins","cacheWillUpdate","request","response","event","state","type","Response","body","status","statusText","headers","workbox_strategies_NetworkOnly"],"mappings":"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"}
\ No newline at end of file
+{
+  "version": 3,
+  "file": "sw.js",
+  "sources": [
+    "../../../../../private/var/folders/k1/dqklgtzs47vckvrkl74mxsxc0000gn/T/92653e5fe2ebf991a1b5d4056a74e5d3/sw.js"
+  ],
+  "sourcesContent": [
+    "import {registerRoute as workbox_routing_registerRoute} from '/Users/eugene/dev/front/ListyWave-front/node_modules/next-pwa/node_modules/workbox-routing/registerRoute.mjs';\nimport {NetworkFirst as workbox_strategies_NetworkFirst} from '/Users/eugene/dev/front/ListyWave-front/node_modules/next-pwa/node_modules/workbox-strategies/NetworkFirst.mjs';\nimport {NetworkOnly as workbox_strategies_NetworkOnly} from '/Users/eugene/dev/front/ListyWave-front/node_modules/next-pwa/node_modules/workbox-strategies/NetworkOnly.mjs';\nimport {clientsClaim as workbox_core_clientsClaim} from '/Users/eugene/dev/front/ListyWave-front/node_modules/next-pwa/node_modules/workbox-core/clientsClaim.mjs';/**\n * Welcome to your Workbox-powered service worker!\n *\n * You'll need to register this file in your web app.\n * See https://goo.gl/nhQhGp\n *\n * The rest of the code is auto-generated. Please don't update this file\n * directly; instead, make changes to your Workbox build configuration\n * and re-run your build process.\n * See https://goo.gl/2aRDsh\n */\n\n\nimportScripts(\n  \n);\n\n\n\n\n\n\n\nself.skipWaiting();\n\nworkbox_core_clientsClaim();\n\n\n\nworkbox_routing_registerRoute(\"/\", new workbox_strategies_NetworkFirst({ \"cacheName\":\"start-url\", plugins: [{ cacheWillUpdate: async ({ request, response, event, state }) => { if (response && response.type === 'opaqueredirect') { return new Response(response.body, { status: 200, statusText: 'OK', headers: response.headers }) } return response } }] }), 'GET');\nworkbox_routing_registerRoute(/.*/i, new workbox_strategies_NetworkOnly({ \"cacheName\":\"dev\", plugins: [] }), 'GET');\n\n\n\n\n"
+  ],
+  "names": [
+    "importScripts",
+    "self",
+    "skipWaiting",
+    "workbox_core_clientsClaim",
+    "workbox_routing_registerRoute",
+    "workbox_strategies_NetworkFirst",
+    "plugins",
+    "cacheWillUpdate",
+    "request",
+    "response",
+    "event",
+    "state",
+    "type",
+    "Response",
+    "body",
+    "status",
+    "statusText",
+    "headers",
+    "workbox_strategies_NetworkOnly"
+  ],
+  "mappings": "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"
+}
diff --git a/public/videos/record_video.mp4 b/public/videos/record_video.mp4
new file mode 100644
index 00000000..01318b29
Binary files /dev/null and b/public/videos/record_video.mp4 differ
diff --git a/public/videos/video_section3.mp4 b/public/videos/video_section3.mp4
new file mode 100644
index 00000000..f22182b6
Binary files /dev/null and b/public/videos/video_section3.mp4 differ
diff --git a/src/app/intro/_components/Footer.tsx b/src/app/intro/_components/Footer.tsx
index 1c707240..c7ce2c89 100644
--- a/src/app/intro/_components/Footer.tsx
+++ b/src/app/intro/_components/Footer.tsx
@@ -40,7 +40,8 @@ function Footer() {
           </div>
           <div className={styles.policyWrapper}>
             <p>{introLocale[language].privacy}</p>
-            <p>listywave8@gmail.com</p>
+            <p>에잇(Eight)</p>
+            <p>Makers : 에잇(Eight, listywave8@gmail.com)</p>
             <p>Copyright ©Listywave - All rights reserved</p>
           </div>
         </div>
diff --git a/src/app/intro/_components/MotionWrapper.tsx b/src/app/intro/_components/MotionWrapper.tsx
index aed5b6cd..49d0ed0e 100644
--- a/src/app/intro/_components/MotionWrapper.tsx
+++ b/src/app/intro/_components/MotionWrapper.tsx
@@ -32,7 +32,7 @@ function MotionWrapper({ children, delay, variantsType = 'vertical' }: MotionWra
 
   const ref = useIntersectionObserver(() => {
     controls.start('visible');
-  }, 0.5);
+  }, 0.4);
 
   return (
     <motion.div
diff --git a/src/app/intro/_components/Section3.css.ts b/src/app/intro/_components/Section3.css.ts
index 73f5e9ff..41fde841 100644
--- a/src/app/intro/_components/Section3.css.ts
+++ b/src/app/intro/_components/Section3.css.ts
@@ -5,17 +5,20 @@ import * as fonts from '@/styles/font.css';
 export const background = style({
   width: '100%',
   height: '752px',
-  padding: '71px 30px 77px',
+  padding: '71px 0 77px',
 
   backgroundColor: vars.color.white,
 });
 
 export const wrapper = style({
+  position: 'relative',
   display: 'flex',
   flexDirection: 'column',
 });
 
 export const recordWrapper = style({
+  position: 'relative',
+  padding: '0 30px',
   display: 'flex',
   alignItems: 'center',
   gap: '7px',
@@ -43,6 +46,8 @@ export const recText = style([fonts.labelLarge, {}]);
 export const contentsWrapper = style({
   margin: '55.5px 0 46px',
 
+  position: 'relative',
+
   display: 'flex',
   flexDirection: 'column',
   alignItems: 'center',
@@ -75,15 +80,25 @@ export const subTitleWrapper = style([
 ]);
 
 export const imageWrapper = style({
+  width: '100%',
+  height: '400px',
   position: 'relative',
 });
 
+export const video = style({
+  width: '100%',
+  height: 'auto',
+
+  border: 'none',
+});
+
+// blurbox이 검은색으로 바뀌는 이상 현상이 있어서 잠시 주석화
 export const blurBox = style({
   width: '100%',
   height: '174px',
 
   position: 'absolute',
-  bottom: -40,
+  bottom: -20,
 
   background: 'linear-gradient(180deg, rgba(255, 255, 255, 0.00) -8.85%, #FFF 53.58%)',
 });
diff --git a/src/app/intro/_components/Section3.tsx b/src/app/intro/_components/Section3.tsx
index 1bafb9f6..6c3565a5 100644
--- a/src/app/intro/_components/Section3.tsx
+++ b/src/app/intro/_components/Section3.tsx
@@ -26,12 +26,7 @@ function Section3() {
               <span>{introLocale[language].section.message6}</span>
             </div>
             <div className={styles.imageWrapper}>
-              <Image
-                src={'/images/list_section3.png'}
-                alt={introLocale[language].section.createListImage}
-                width={300}
-                height={314}
-              />
+              <video src={'/videos/video_section3.mp4'} autoPlay loop muted className={styles.video} />
               <div className={styles.blurBox}></div>
             </div>
           </div>
diff --git a/src/app/intro/_components/Section7.tsx b/src/app/intro/_components/Section7.tsx
index 9b0b4bd4..a68dda76 100644
--- a/src/app/intro/_components/Section7.tsx
+++ b/src/app/intro/_components/Section7.tsx
@@ -36,7 +36,7 @@ function Section7() {
                 <div className={styles.linkWrapper}>listywave.com/user/1</div>
               </MotionWrapper>
               <Image
-                src={'/images/section7_phone.png'}
+                src={'/images/section7_phone2.png'}
                 alt={introLocale[language].section.cellphoneImage}
                 width={255}
                 height={518}
diff --git a/src/app/list/[listId]/_components/ListDetailOuter/Comment.css.ts b/src/app/list/[listId]/_components/ListDetailOuter/Comment.css.ts
index 251a5623..c13a3c9a 100644
--- a/src/app/list/[listId]/_components/ListDetailOuter/Comment.css.ts
+++ b/src/app/list/[listId]/_components/ListDetailOuter/Comment.css.ts
@@ -65,6 +65,7 @@ export const commentContent = style({
   fontWeight: 500,
   lineHeight: 'normal',
   letterSpacing: '-0.36px',
+  wordBreak: 'break-word',
 });
 
 export const deletedComment = style({
diff --git a/src/app/list/[listId]/_components/ListDetailOuter/Comment.tsx b/src/app/list/[listId]/_components/ListDetailOuter/Comment.tsx
index 1b7f296b..25a631fb 100644
--- a/src/app/list/[listId]/_components/ListDetailOuter/Comment.tsx
+++ b/src/app/list/[listId]/_components/ListDetailOuter/Comment.tsx
@@ -11,7 +11,7 @@ import timeDiff from '@/lib/utils/time-diff';
 import { QUERY_KEYS } from '@/lib/constants/queryKeys';
 import { CommentType } from '@/lib/types/commentType';
 import { UserType } from '@/lib/types/userProfileType';
-import { useCommentId } from '@/store/useComment';
+import { useCommentId, useCommentStatus } from '@/store/useComment';
 import { commentLocale } from '@/app/list/[listId]/locale';
 
 import * as styles from './Comment.css';
@@ -25,9 +25,10 @@ import { useLanguage } from '@/store/useLanguage';
  */
 interface CommentProps {
   comment?: CommentType;
-  onUpdate: (userName?: string) => void;
+  setActiveNickname: (userName?: string) => void;
   activeNickname?: string | null;
   handleSetCommentId: (id: number | undefined) => void;
+  handleSetComment: (comment: string) => void;
   listId?: number;
   commentId?: number;
   currentUserInfo?: UserType;
@@ -36,17 +37,18 @@ interface CommentProps {
 
 function Comment({
   comment,
-  onUpdate,
+  setActiveNickname: onUpdate,
   handleSetCommentId,
+  handleSetComment,
   listId,
   commentId,
   currentUserInfo,
-
   handleEdit,
 }: CommentProps) {
   const { language } = useLanguage();
   const queryClient = useQueryClient();
   const { setCommentId } = useCommentId();
+  const { setStatusCreateReply, setStatusEdit } = useCommentStatus();
 
   //현재 작성중인 답글의 원댓글 정보를 업데이트 하는 로직
   const handleActiveNicknameAndIdUpdate = () => {
@@ -55,11 +57,15 @@ function Comment({
     if (!currentUserName && !currentCommentId) {
       return null;
     }
+    handleSetComment('');
+    setStatusCreateReply();
     onUpdate(currentUserName);
     handleSetCommentId(currentCommentId);
   };
 
+  //수정하기 버튼을 누르면 실행되는 함수
   const handleEditButtonClick = (comment: string) => {
+    setStatusEdit();
     handleEdit(comment);
     setCommentId(commentId as number);
   };
diff --git a/src/app/list/[listId]/_components/ListDetailOuter/CommentForm.tsx b/src/app/list/[listId]/_components/ListDetailOuter/CommentForm.tsx
index b1b3069a..7717f2ff 100644
--- a/src/app/list/[listId]/_components/ListDetailOuter/CommentForm.tsx
+++ b/src/app/list/[listId]/_components/ListDetailOuter/CommentForm.tsx
@@ -1,21 +1,23 @@
-import { ChangeEvent } from 'react';
+import { ChangeEvent, useEffect } from 'react';
 
 import { useUser } from '@/store/useUser';
-import { useIsEditing } from '@/store/useComment';
-import * as styles from './Comments.css';
-import CancelButton from '/public/icons/cancel_button.svg';
-import { vars } from '@/styles/theme.css';
-import Airplane from '/public/icons/airplane_send.svg';
+import { useIsEditing, useCommentStatus } from '@/store/useComment';
 import { useLanguage } from '@/store/useLanguage';
+import useResizeTextarea from '@/hooks/useResizeTextarea';
 import { commentPlaceholder } from '@/lib/constants/placeholder';
 import { commentLocale } from '@/app/list/[listId]/locale';
 
+import { vars } from '@/styles/theme.css';
+import * as styles from './Comments.css';
+import CancelButton from '/public/icons/cancel_button.svg';
+import Airplane from '/public/icons/airplane_send.svg';
+
 interface CommentFormProps {
   comment?: string;
   activeNickname?: string | null;
-  handleSubmit?: (e: React.FormEvent<HTMLFormElement>) => void;
+  handleSubmit: (e: React.FormEvent<HTMLFormElement> | React.KeyboardEvent<HTMLTextAreaElement>) => void;
   handleUpdate?: () => void;
-  handleChange: (e: ChangeEvent<HTMLInputElement>) => void;
+  handleChange: (e: ChangeEvent<HTMLTextAreaElement>) => void;
   imageSrc?: string;
   isEditing?: boolean;
   isPending: boolean;
@@ -31,16 +33,84 @@ function CommentForm({
   handleUpdate,
   handleCancel,
 }: CommentFormProps) {
+  const { status } = useCommentStatus();
   const { language } = useLanguage();
   const { isEditing } = useIsEditing();
+  const { textareaRef, handleResizeHeight } = useResizeTextarea();
+
+  const handleResetTextArea = () => {
+    if (textareaRef.current !== null) {
+      textareaRef.current.style.height = '20px';
+    }
+  };
+
+  const handleTextareaChange = (e: ChangeEvent<HTMLTextAreaElement>) => {
+    handleChange(e);
+    handleResizeHeight();
+  };
+
+  const handleSubmitForm = (e: React.FormEvent<HTMLFormElement>) => {
+    handleSubmit(e);
+    // handleResizeHeight();
+    handleResetTextArea();
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+    if (e.key === 'Enter' && !e.shiftKey && !isPending) {
+      // handleResizeHeight();
+      handleResetTextArea();
+      e.preventDefault();
+      handleSubmit(e);
+    }
+  };
+
+  const handleCancelForm = () => {
+    handleCancel();
+    handleResizeHeight();
+  };
+
+  const textAreaHeight = () => {
+    if (textareaRef.current === null) {
+      return false;
+    }
+    if (textareaRef.current.scrollHeight >= 30) {
+      return true;
+    }
+  };
 
   const { user } = useUser();
   const userId = user.id;
 
+  useEffect(() => {
+    const textarea = textareaRef.current;
+
+    const handleBlur = () => {
+      handleResizeHeight();
+    };
+
+    const handleFocus = () => {
+      handleResizeHeight();
+    };
+
+    if (textarea) {
+      textarea.addEventListener('blur', handleBlur);
+      textarea.addEventListener('focus', handleFocus);
+    }
+
+    return () => {
+      if (textarea) {
+        textarea.removeEventListener('blur', handleBlur);
+        textarea.removeEventListener('focus', handleFocus);
+      }
+    };
+  }, [textareaRef, handleResizeHeight]);
+
   return (
     <div className={styles.formWrapperOuter}>
-      <div className={`${styles.formWrapperInner} ${!!activeNickname || isEditing ? styles.activeFormWrapper : ''}`}>
-        {activeNickname && (
+      <div
+        className={`${styles.formWrapperInner} ${!!activeNickname || isEditing || textAreaHeight() ? styles.activeFormWrapper : ''}`}
+      >
+        {status === 'createReply' && activeNickname && (
           <div className={styles.activeReplyWrapper}>
             <span className={styles.replyNickname}>
               {language === 'ko'
@@ -57,28 +127,31 @@ function CommentForm({
             />
           </div>
         )}
-        {isEditing && (
+        {status === 'edit' && isEditing && (
           <div className={styles.activeReplyWrapper}>
             <span className={styles.replyNickname}>{commentLocale[language].editing}</span>
             <CancelButton
               className={styles.clearButton}
               alt={commentLocale[language].cancelButtonAlt}
-              onClick={handleCancel}
+              onClick={handleCancelForm}
               width={18}
               height={18}
               fill={vars.color.gray7}
             />
           </div>
         )}
-        <form className={styles.formContainer} onSubmit={handleSubmit}>
-          <input
+        <form className={styles.formContainer} onSubmit={handleSubmitForm}>
+          <textarea
+            rows={1}
             className={styles.formInput}
             value={comment}
-            onChange={handleChange}
+            onChange={handleTextareaChange}
             disabled={!userId}
+            ref={textareaRef}
             placeholder={
               userId === null ? commentPlaceholder[language].requiredLogin : commentPlaceholder[language].comment
             }
+            onKeyDown={handleKeyDown}
           />
           {comment && (
             <button type="submit" disabled={isPending} className={styles.formButton}>
diff --git a/src/app/list/[listId]/_components/ListDetailOuter/Comments.css.ts b/src/app/list/[listId]/_components/ListDetailOuter/Comments.css.ts
index cc01d947..8c77149e 100644
--- a/src/app/list/[listId]/_components/ListDetailOuter/Comments.css.ts
+++ b/src/app/list/[listId]/_components/ListDetailOuter/Comments.css.ts
@@ -52,17 +52,25 @@ export const formContainer = style({
 });
 
 export const formInput = style({
-  width: 'inherit',
-  height: 'auto',
+  width: '100%',
+  height: '20px',
+  maxHeight: '60px',
 
   flex: '1 0 0',
 
+  display: 'block',
+  overflow: 'hidden',
+  resize: 'none',
+  outline: 'none',
+  border: 'none',
   fontSize: '1.6rem',
   wordBreak: 'break-all',
   wordWrap: 'break-word',
   whiteSpace: 'pre-wrap',
-  resize: 'none',
   backgroundColor: vars.color.gray3,
+  '::-webkit-scrollbar': {
+    display: 'none',
+  },
 });
 
 export const replyNickname = style({
diff --git a/src/app/list/[listId]/_components/ListDetailOuter/Comments.tsx b/src/app/list/[listId]/_components/ListDetailOuter/Comments.tsx
index 4813c8cb..169bec5b 100644
--- a/src/app/list/[listId]/_components/ListDetailOuter/Comments.tsx
+++ b/src/app/list/[listId]/_components/ListDetailOuter/Comments.tsx
@@ -16,7 +16,7 @@ import { QUERY_KEYS } from '@/lib/constants/queryKeys';
 import { CommentType } from '@/lib/types/commentType';
 import { UserType } from '@/lib/types/userProfileType';
 import { useUser } from '@/store/useUser';
-import { useReplyId, useCommentId, useCommentIdStore, useIsEditing } from '@/store/useComment';
+import { useReplyId, useCommentId, useCommentIdStore, useIsEditing, useCommentStatus } from '@/store/useComment';
 import Modal from '@/components/Modal/Modal';
 import CommentForm from './CommentForm';
 import LoginModal from '@/components/login/LoginModal';
@@ -39,8 +39,8 @@ function Comments() {
   const { replyId, deleteReplyId } = useReplyId();
   const { commentId, setCommentId, deleteCommentId } = useCommentId();
   const { setIsEditing, setIsNotEditing, isEditing } = useIsEditing();
+  const { status, resetStatus } = useCommentStatus();
   const bottomRef = useRef<HTMLDivElement>(null);
-  const replyBottomRef = useRef<HTMLDivElement>(null);
 
   //zustand로 관리하는 user정보 불러오기
   const { user } = useUser();
@@ -103,8 +103,12 @@ function Comments() {
     }
   };
 
+  const handleSetComment = (comment: string) => {
+    setComment(comment);
+  };
+
   //댓글 폼 사용(추후 리액트 훅폼으로 수정해 볼 예정)
-  const handleInputChange = (e: ChangeEvent<HTMLInputElement>) => {
+  const handleInputChange = (e: ChangeEvent<HTMLTextAreaElement>) => {
     setComment(e.target.value);
   };
 
@@ -121,6 +125,7 @@ function Comments() {
     setComment('');
     deleteCommentId();
     deleteReplyId();
+    resetStatus();
   };
 
   //댓글 생성 리액트 쿼리 함수
@@ -154,6 +159,7 @@ function Comments() {
       deleteCommentId();
       setActiveNickname(null);
       setIsPending(false);
+      resetStatus();
     },
   });
 
@@ -170,6 +176,7 @@ function Comments() {
       setComment('');
       deleteCommentId();
       setIsNotEditing();
+      resetStatus();
       setIsPending(false);
     },
   });
@@ -181,7 +188,7 @@ function Comments() {
       setIsPending(true);
     },
     onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: [QUERY_KEYS.getComments, commentId] });
+      queryClient.invalidateQueries({ queryKey: [QUERY_KEYS.getComments] });
       addCommentId(commentId as number);
       scrollToRef();
     },
@@ -191,21 +198,22 @@ function Comments() {
       deleteReplyId();
       setIsNotEditing();
       setIsPending(false);
+      resetStatus();
     },
   });
 
   //댓글/답글 폼 submit 함수
-  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+  const handleSubmit = (e: React.FormEvent<HTMLFormElement> | React.KeyboardEvent<HTMLTextAreaElement>) => {
     e.preventDefault();
     if (!comment.trim()) {
       return null;
     }
     if (comment.trim()) {
-      if (commentId && activeNickname) {
+      if (status === 'createReply' && commentId && activeNickname) {
         createReplyMutation.mutate();
         return;
       }
-      if (isEditing) {
+      if (status === 'edit') {
         if (replyId) {
           editReplyMutation.mutate();
           return;
@@ -276,9 +284,10 @@ function Comments() {
               ) : (
                 <Comment
                   comment={item}
-                  onUpdate={setActiveNickname}
+                  setActiveNickname={setActiveNickname}
                   activeNickname={activeNickname}
                   handleSetCommentId={handleSetCommentId}
+                  handleSetComment={handleSetComment}
                   listId={Number(params?.listId)}
                   commentId={item.id}
                   currentUserInfo={userInformation}
diff --git a/src/app/list/[listId]/_components/ListDetailOuter/Replies.tsx b/src/app/list/[listId]/_components/ListDetailOuter/Replies.tsx
index 76bdcf4c..1bc91aba 100644
--- a/src/app/list/[listId]/_components/ListDetailOuter/Replies.tsx
+++ b/src/app/list/[listId]/_components/ListDetailOuter/Replies.tsx
@@ -4,7 +4,7 @@ import { useMutation, useQueryClient } from '@tanstack/react-query';
 
 import DeleteModalButton from '@/app/list/[listId]/_components/ListDetailOuter/DeleteModalButton';
 import deleteReply from '@/app/_api/comment/deleteReply';
-import { useCommentIdStore, useReplyId, useCommentId } from '@/store/useComment';
+import { useCommentIdStore, useReplyId, useCommentId, useCommentStatus } from '@/store/useComment';
 import { QUERY_KEYS } from '@/lib/constants/queryKeys';
 import timeDiff from '@/lib/utils/time-diff';
 import { ReplyType } from '@/lib/types/commentType';
@@ -78,6 +78,7 @@ interface ReplyProps {
 function Reply({ reply, listId, currentUserInfo, handleEdit, commentId }: ReplyProps) {
   const { language } = useLanguage();
   const queryClient = useQueryClient();
+  const { setStatusEdit } = useCommentStatus();
   const { setCommentId } = useCommentId();
   const { setReplyId } = useReplyId();
   const deleteReplyMutation = useMutation({
@@ -88,6 +89,7 @@ function Reply({ reply, listId, currentUserInfo, handleEdit, commentId }: ReplyP
   });
 
   const handleEditButtonClick = (content: string) => {
+    setStatusEdit();
     handleEdit(content);
     setCommentId(commentId as number);
     setReplyId(reply?.id);
diff --git a/src/components/exploreComponents/TrendingLists.css.ts b/src/components/exploreComponents/TrendingLists.css.ts
index e5209936..62e50173 100644
--- a/src/components/exploreComponents/TrendingLists.css.ts
+++ b/src/components/exploreComponents/TrendingLists.css.ts
@@ -140,6 +140,10 @@ export const itemTitle = style([
   },
 ]);
 
+export const itemTitleContent = style({
+  display: 'inline',
+});
+
 export const profileImageWrapper = style({
   width: '32px',
   height: '32px',
diff --git a/src/components/exploreComponents/TrendingLists.tsx b/src/components/exploreComponents/TrendingLists.tsx
index d46bc14f..5349b62c 100644
--- a/src/components/exploreComponents/TrendingLists.tsx
+++ b/src/components/exploreComponents/TrendingLists.tsx
@@ -174,7 +174,7 @@ function TrendingListInformation({ item }: TrendingListInformationType) {
         className={styles.itemTitle}
         style={assignInlineVars({ [styles.customFontColor]: item?.itemImageUrl ? vars.color.white : vars.color.black })}
       >
-        {item?.title}
+        <p className={styles.itemTitleContent}>{item?.title}</p>
       </div>
       <div className={styles.ownerProfileWrapper}>
         <div className={styles.profileImageWrapper}>
diff --git a/src/hooks/useEnterKeyDown.ts b/src/hooks/useEnterKeyDown.ts
new file mode 100644
index 00000000..82e17d4f
--- /dev/null
+++ b/src/hooks/useEnterKeyDown.ts
@@ -0,0 +1,17 @@
+interface IProps {
+  handleSubmit: (e: React.FormEvent<HTMLFormElement> | React.KeyboardEvent<HTMLTextAreaElement>) => void;
+  isSubmitting: boolean;
+}
+
+function usePressEnterFetch({ handleSubmit, isSubmitting }: IProps) {
+  const handlePressEnterFetch = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+    if (e.key === 'Enter' && !e.shiftKey && !isSubmitting) {
+      e.preventDefault();
+      handleSubmit(e);
+    }
+  };
+
+  return { handlePressEnterFetch };
+}
+
+export default usePressEnterFetch;
diff --git a/src/store/useComment.ts b/src/store/useComment.ts
index 00862c59..dd38a5e5 100644
--- a/src/store/useComment.ts
+++ b/src/store/useComment.ts
@@ -47,3 +47,17 @@ export const useIsEditing = create<UseIsEditingType>((set) => ({
   setIsNotEditing: () => set({ isEditing: false }),
   setToggleEditing: (state) => set({ isEditing: !state }),
 }));
+
+interface useCommentStatusType {
+  status: null | 'edit' | 'createReply';
+  setStatusEdit: () => void;
+  setStatusCreateReply: () => void;
+  resetStatus: () => void;
+}
+
+export const useCommentStatus = create<useCommentStatusType>((set) => ({
+  status: null,
+  setStatusEdit: () => set({ status: 'edit' }),
+  setStatusCreateReply: () => set({ status: 'createReply' }),
+  resetStatus: () => set({ status: null }),
+}));