From d19f65846b77cabebb4057848cc809dd73364132 Mon Sep 17 00:00:00 2001
From: yueunfive <122276414+yueunfive@users.noreply.github.com>
Date: Sat, 16 Dec 2023 18:38:45 +0900
Subject: [PATCH] =?UTF-8?q?design/#57/=ED=99=94=EB=A9=B4=20=EC=9E=98?=
 =?UTF-8?q?=EB=A6=BC=20=ED=98=84=EC=83=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/WritingPageBtn.tsx             |   1 -
 src/components/WritingPageWrap.tsx            |  57 +-
 src/pages/AttachPicture.tsx                   | 206 +++----
 src/pages/RecommendResult.tsx                 |   2 +-
 src/pages/SelectRetro.tsx                     | 192 +++----
 src/pages/Subscribe.tsx                       |   3 +-
 src/pages/WritingPage/GuideLine/AAR.tsx       | 277 ++++-----
 src/pages/WritingPage/GuideLine/Continue.tsx  | 196 +++----
 src/pages/WritingPage/GuideLine/FiveF.tsx     | 311 +++++-----
 src/pages/WritingPage/GuideLine/FourL.tsx     | 263 ++++-----
 src/pages/WritingPage/GuideLine/KPT.tsx       | 214 +++----
 src/pages/WritingPage/GuideLine/ORID.tsx      | 284 +++++-----
 .../WritingPage/GuideLine/Performance.tsx     | 384 ++++++-------
 src/pages/WritingPage/GuideLine/Personal.tsx  | 530 +++++++++---------
 src/pages/WritingPage/GuideLine/TIL.tsx       | 225 ++++----
 src/pages/WritingPage/GuideLine/YWT.tsx       | 246 ++++----
 src/pages/WritingPage/StepByStep/AAR.tsx      |  94 ++--
 src/pages/WritingPage/StepByStep/Continue.tsx |  74 +--
 src/pages/WritingPage/StepByStep/FiveF.tsx    | 114 ++--
 src/pages/WritingPage/StepByStep/FourL.tsx    |  94 ++--
 src/pages/WritingPage/StepByStep/KPT.tsx      |  74 +--
 src/pages/WritingPage/StepByStep/ORID.tsx     | 100 ++--
 .../WritingPage/StepByStep/Performance.tsx    |  34 +-
 src/pages/WritingPage/StepByStep/Personal.tsx |  34 +-
 src/pages/WritingPage/StepByStep/TIL.tsx      |  74 +--
 src/pages/WritingPage/StepByStep/YWT.tsx      |  72 +--
 src/pages/login/Login.tsx                     |  72 +--
 27 files changed, 2150 insertions(+), 2077 deletions(-)

diff --git a/src/components/WritingPageBtn.tsx b/src/components/WritingPageBtn.tsx
index 7609e11..7a817ce 100644
--- a/src/components/WritingPageBtn.tsx
+++ b/src/components/WritingPageBtn.tsx
@@ -3,7 +3,6 @@ import styled from "styled-components";
 const WritingPageBtnWrap = styled.div`
   margin-top: 50px;
   margin-bottom: 90px;
-  height: 100dp;
 
   .temporary_btn {
     width: 190px;
diff --git a/src/components/WritingPageWrap.tsx b/src/components/WritingPageWrap.tsx
index 8992cbe..8b16eb0 100644
--- a/src/components/WritingPageWrap.tsx
+++ b/src/components/WritingPageWrap.tsx
@@ -2,38 +2,47 @@ import styled from "styled-components";
 
 const WritingPageWrap = styled.div`
   background-color: #121212;
+  min-height: calc(100vh - 90px);
+
   display: flex;
   flex-direction: column;
+  justify-content: center;
   align-items: center;
 
-  .container {
-    margin-top: 80px;
+  .all-container {
     display: flex;
     flex-direction: column;
+    align-items: center;
 
-    .title_container {
+    .container {
+      margin-top: 80px;
       display: flex;
-      align-items: center;
-      gap: 30px;
-      margin-bottom: 50px;
-    }
-    .title_main {
-      color: var(--text-high-emphasis, rgba(255, 255, 255, 0.87));
-      font-size: 32px;
-      font-style: normal;
-      font-weight: 700;
-      line-height: normal;
-    }
-    .title_content {
-      color: var(--text-medium-emphasis, rgba(255, 255, 255, 0.6));
-      font-size: 18px;
-      font-style: normal;
-      font-weight: 600;
-      line-height: normal;
-    }
-    .temporary_btn:disabled {
-      /* isContentFilled가 false일 때 버튼 스타일 */
-      opacity: 0.6;
+      flex-direction: column;
+
+      .title_container {
+        display: flex;
+        align-items: center;
+        gap: 30px;
+        margin-bottom: 50px;
+      }
+      .title_main {
+        color: var(--text-high-emphasis, rgba(255, 255, 255, 0.87));
+        font-size: 32px;
+        font-style: normal;
+        font-weight: 700;
+        line-height: normal;
+      }
+      .title_content {
+        color: var(--text-medium-emphasis, rgba(255, 255, 255, 0.6));
+        font-size: 18px;
+        font-style: normal;
+        font-weight: 600;
+        line-height: normal;
+      }
+      .temporary_btn:disabled {
+        /* isContentFilled가 false일 때 버튼 스타일 */
+        opacity: 0.6;
+      }
     }
   }
 `;
diff --git a/src/pages/AttachPicture.tsx b/src/pages/AttachPicture.tsx
index eac3b10..be9d801 100644
--- a/src/pages/AttachPicture.tsx
+++ b/src/pages/AttachPicture.tsx
@@ -117,50 +117,52 @@ export default function AttachPicture() {
     <>
       <Header />
       <AttachPictureWrap>
-        <div className="titleText">
-          <p>첨부하고 싶은 사진이 있다면 넣어주세요</p>
-        </div>
-        <div className="preview">
-          {previewUrl && (
-            <img
-              src={previewUrl}
-              alt="Preview"
-              style={{ width: "300px", height: "300px", marginTop: "20px" }}
-            />
-          )}
-        </div>
-        <div
-          className="picture_container"
-          onDragOver={onDragOver}
-          onDrop={onDrop}
-        >
-          <button className="picture-select" onClick={triggerFileInput}>
-            <div className="select-text">파일 선택</div>
-          </button>
-          {pictureFile ? (
-            <p className="picture_input_text">{pictureFile.name}</p>
-          ) : (
-            <p className="picture_input_text">
-              또는 파일을 여기로 드래그 해주세요
-            </p>
-          )}
-        </div>
-        <WritingPageBtnWrap>
-          <button
-            className="completed_btn"
-            style={{ backgroundColor: "#79CD96" }}
-            onClick={createRetro}
+        <div className="container">
+          <div className="titleText">
+            <p>첨부하고 싶은 사진이 있다면 넣어주세요</p>
+          </div>
+          <div className="preview">
+            {previewUrl && (
+              <img
+                src={previewUrl}
+                alt="Preview"
+                style={{ width: "300px", height: "300px", marginTop: "20px" }}
+              />
+            )}
+          </div>
+          <div
+            className="picture_container"
+            onDragOver={onDragOver}
+            onDrop={onDrop}
           >
-            회고 완료
-          </button>
-        </WritingPageBtnWrap>
-        <input
-          type="file"
-          accept="image/*"
-          ref={fileInputRef}
-          style={{ display: "none" }}
-          onChange={handleFileSelect}
-        />
+            <button className="picture-select" onClick={triggerFileInput}>
+              <div className="select-text">파일 선택</div>
+            </button>
+            {pictureFile ? (
+              <p className="picture_input_text">{pictureFile.name}</p>
+            ) : (
+              <p className="picture_input_text">
+                또는 파일을 여기로 드래그 해주세요
+              </p>
+            )}
+          </div>
+          <WritingPageBtnWrap>
+            <button
+              className="completed_btn"
+              style={{ backgroundColor: "#79CD96" }}
+              onClick={createRetro}
+            >
+              회고 완료
+            </button>
+          </WritingPageBtnWrap>
+          <input
+            type="file"
+            accept="image/*"
+            ref={fileInputRef}
+            style={{ display: "none" }}
+            onChange={handleFileSelect}
+          />
+        </div>
       </AttachPictureWrap>
     </>
   );
@@ -168,71 +170,75 @@ export default function AttachPicture() {
 
 const AttachPictureWrap = styled.div`
   background-color: #121212;
-  height: 100%;
-  width: 100%;
-  //padding: 0px 100px;
-  box-sizing: border-box;
+  min-height: calc(100vh - 90px);
+
   display: flex;
-  flex-direction: column;
+  justify-content: center;
   align-items: center;
 
-  .titleText {
-    margin-top: 90px;
-    margin-block: 30px;
-    display: inline-flex;
-    justify-content: center;
+  .container {
+    display: flex;
+    flex-direction: column;
     align-items: center;
-    gap: 30px;
-    color: var(--text-high-emphasis, rgba(255, 255, 255, 0.87));
-    font-size: 32px;
-    font-style: normal;
-    font-weight: 700;
-    line-height: normal;
-  }
 
-  .picture_container {
-    width: 437px;
-    height: 280px;
-    flex-shrink: 0;
-    border-radius: 16px;
-    border: 2px dashed var(--text-medium-emphasis, rgba(255, 255, 255, 0.6));
-  }
+    .titleText {
+      margin-top: 90px;
+      margin-block: 30px;
+      display: inline-flex;
+      justify-content: center;
+      align-items: center;
+      gap: 30px;
+      color: var(--text-high-emphasis, rgba(255, 255, 255, 0.87));
+      font-size: 32px;
+      font-style: normal;
+      font-weight: 700;
+      line-height: normal;
+    }
 
-  .picture-select {
-    display: inline-flex;
-    padding: 7px 16px;
-    justify-content: center;
-    align-items: center;
-    text-align: center;
-    gap: 10px;
-    border-radius: 8px;
-    background: rgba(255, 255, 255, 0.1);
-    border: none;
-    margin-top: 107px;
-    margin-left: 176px;
-  }
+    .picture_container {
+      width: 437px;
+      height: 280px;
+      flex-shrink: 0;
+      border-radius: 16px;
+      border: 2px dashed var(--text-medium-emphasis, rgba(255, 255, 255, 0.6));
+    }
 
-  .select-text {
-    color: var(--text-high-emphasis, rgba(255, 255, 255, 0.87));
-    font-size: 14px;
-    font-style: normal;
-    font-weight: 600;
-    line-height: normal;
-  }
+    .picture-select {
+      display: inline-flex;
+      padding: 7px 16px;
+      justify-content: center;
+      align-items: center;
+      text-align: center;
+      gap: 10px;
+      border-radius: 8px;
+      background: rgba(255, 255, 255, 0.1);
+      border: none;
+      margin-top: 107px;
+      margin-left: 176px;
+    }
 
-  .picture_input_text {
-    margin-top: 26px;
-    margin-bottom: 130px;
-    color: #fff;
-    text-align: center;
-    font-size: 18px;
-    font-style: normal;
-    font-weight: 600;
-    line-height: normal;
-  }
+    .select-text {
+      color: var(--text-high-emphasis, rgba(255, 255, 255, 0.87));
+      font-size: 14px;
+      font-style: normal;
+      font-weight: 600;
+      line-height: normal;
+    }
+
+    .picture_input_text {
+      margin-top: 26px;
+      margin-bottom: 130px;
+      color: #fff;
+      text-align: center;
+      font-size: 18px;
+      font-style: normal;
+      font-weight: 600;
+      line-height: normal;
+    }
 
-  .preview {
-    text-align: center;
-    margin-block: 40px;
+    .preview {
+      text-align: center;
+      margin-block: 40px;
+    }
   }
 `;
diff --git a/src/pages/RecommendResult.tsx b/src/pages/RecommendResult.tsx
index 1032e3d..5c1f896 100644
--- a/src/pages/RecommendResult.tsx
+++ b/src/pages/RecommendResult.tsx
@@ -74,7 +74,7 @@ export default function RecommendResult() {
           return <FiveF />;
         case "성과/수치 중심 회고":
           return <Performance />;
-        case "Personal Retrospective":
+        case "개인적 회고":
           return <Personal />;
         case "YWT":
           return <YWT />;
diff --git a/src/pages/SelectRetro.tsx b/src/pages/SelectRetro.tsx
index 4e10acf..e7612f6 100644
--- a/src/pages/SelectRetro.tsx
+++ b/src/pages/SelectRetro.tsx
@@ -106,101 +106,103 @@ export default function SelectRetro() {
     <>
       <Header />
       <SelectRetroWrap>
-        <div className="container">
-          <div className="select_container">
-            <h3>회고하기</h3>
-            <div className="retro_title">
-              <p>회고 제목</p>
-              <input
-                type="text"
-                placeholder="회고 제목을 작성해주세요"
-                value={inputValue}
-                onChange={handleInputChange}
-              ></input>
-            </div>
-            <div className="btn_container">
-              <p>회고 유형 선택</p>
-              <div className="btn_box">
-                <div>
-                  <button
-                    onClick={() => handleButtonClick("kpt")}
-                    className={activeComponent === "kpt" ? "active" : ""}
-                  >
-                    KPT
-                  </button>
-                  <button
-                    onClick={() => handleButtonClick("continue")}
-                    className={activeComponent === "continue" ? "active" : ""}
-                  >
-                    Continue-Stop-Start
-                  </button>
-                  <button
-                    onClick={() => handleButtonClick("5f")}
-                    className={activeComponent === "5f" ? "active" : ""}
-                  >
-                    5F
-                  </button>
-                  <button
-                    onClick={() => handleButtonClick("til")}
-                    className={activeComponent === "til" ? "active" : ""}
-                  >
-                    TIL
-                  </button>
-                </div>
-                <div>
-                  <button
-                    onClick={() => handleButtonClick("4l")}
-                    className={activeComponent === "4l" ? "active" : ""}
-                  >
-                    4L
-                  </button>
-                  <button
-                    onClick={() => handleButtonClick("orid")}
-                    className={activeComponent === "orid" ? "active" : ""}
-                  >
-                    ORID
-                  </button>
-                  <button
-                    onClick={() => handleButtonClick("aar")}
-                    className={activeComponent === "aar" ? "active" : ""}
-                  >
-                    AAR
-                  </button>
-                  <button
-                    onClick={() => handleButtonClick("ywt")}
-                    className={activeComponent === "ywt" ? "active" : ""}
-                  >
-                    YWT
-                  </button>
-                </div>
-                <div>
-                  <button
-                    onClick={() => handleButtonClick("personal")}
-                    className={activeComponent === "personal" ? "active" : ""}
-                  >
-                    개인적 회고
-                  </button>
-                  <button
-                    onClick={() => handleButtonClick("performance")}
-                    className={
-                      activeComponent === "performance" ? "active" : ""
-                    }
-                  >
-                    성과/수치 중심 회고
-                  </button>
+        <div className="select-retro-container">
+          <div className="container">
+            <div className="select_container">
+              <h3>회고하기</h3>
+              <div className="retro_title">
+                <p>회고 제목</p>
+                <input
+                  type="text"
+                  placeholder="회고 제목을 작성해주세요"
+                  value={inputValue}
+                  onChange={handleInputChange}
+                ></input>
+              </div>
+              <div className="btn_container">
+                <p>회고 유형 선택</p>
+                <div className="btn_box">
+                  <div>
+                    <button
+                      onClick={() => handleButtonClick("kpt")}
+                      className={activeComponent === "kpt" ? "active" : ""}
+                    >
+                      KPT
+                    </button>
+                    <button
+                      onClick={() => handleButtonClick("continue")}
+                      className={activeComponent === "continue" ? "active" : ""}
+                    >
+                      Continue-Stop-Start
+                    </button>
+                    <button
+                      onClick={() => handleButtonClick("5f")}
+                      className={activeComponent === "5f" ? "active" : ""}
+                    >
+                      5F
+                    </button>
+                    <button
+                      onClick={() => handleButtonClick("til")}
+                      className={activeComponent === "til" ? "active" : ""}
+                    >
+                      TIL
+                    </button>
+                  </div>
+                  <div>
+                    <button
+                      onClick={() => handleButtonClick("4l")}
+                      className={activeComponent === "4l" ? "active" : ""}
+                    >
+                      4L
+                    </button>
+                    <button
+                      onClick={() => handleButtonClick("orid")}
+                      className={activeComponent === "orid" ? "active" : ""}
+                    >
+                      ORID
+                    </button>
+                    <button
+                      onClick={() => handleButtonClick("aar")}
+                      className={activeComponent === "aar" ? "active" : ""}
+                    >
+                      AAR
+                    </button>
+                    <button
+                      onClick={() => handleButtonClick("ywt")}
+                      className={activeComponent === "ywt" ? "active" : ""}
+                    >
+                      YWT
+                    </button>
+                  </div>
+                  <div>
+                    <button
+                      onClick={() => handleButtonClick("personal")}
+                      className={activeComponent === "personal" ? "active" : ""}
+                    >
+                      개인적 회고
+                    </button>
+                    <button
+                      onClick={() => handleButtonClick("performance")}
+                      className={
+                        activeComponent === "performance" ? "active" : ""
+                      }
+                    >
+                      성과/수치 중심 회고
+                    </button>
+                  </div>
                 </div>
               </div>
             </div>
+            {renderActiveComponent()}
+          </div>
+          <div className="retro_btn">
+            <button
+              disabled={inputValue.length < 1 || activeComponent == ""}
+              onClick={retroBtnClick}
+            >
+              회고 작성하기
+            </button>
           </div>
-          {renderActiveComponent()}
-        </div>
-        <div className="retro_btn">
-          <button
-            disabled={inputValue.length < 1 || activeComponent == ""}
-            onClick={retroBtnClick}
-          >
-            회고 작성하기
-          </button>
         </div>
       </SelectRetroWrap>
       <Footer />
@@ -210,11 +212,11 @@ export default function SelectRetro() {
 
 const SelectRetroWrap = styled.div`
   background-color: #121212;
-  padding: 0px 100px;
   box-sizing: border-box;
-
+  min-height: calc(100vh - 90px);
   display: flex;
-  flex-direction: column;
+  justify-content: center;
+  align-items: center;
 
   .container {
     margin-top: 93px;
@@ -291,7 +293,7 @@ const SelectRetroWrap = styled.div`
 
   .retro_btn {
     text-align: center;
-    margin-top: 92px;
+    margin-top: 55px;
     margin-bottom: 60px;
   }
 
diff --git a/src/pages/Subscribe.tsx b/src/pages/Subscribe.tsx
index 29cc15e..7bf05c9 100644
--- a/src/pages/Subscribe.tsx
+++ b/src/pages/Subscribe.tsx
@@ -121,9 +121,8 @@ export const Subscribe: React.FC = () => {
 
 const SubscribeWrap = styled.div`
   background: var(--Background, #121212);
-  min-width: 1280px;
+  height: calc(100vh - 246px);
   min-height: 586px;
-
   display: flex;
   justify-content: center;
   align-items: center;
diff --git a/src/pages/WritingPage/GuideLine/AAR.tsx b/src/pages/WritingPage/GuideLine/AAR.tsx
index fa44d2a..3c99c47 100644
--- a/src/pages/WritingPage/GuideLine/AAR.tsx
+++ b/src/pages/WritingPage/GuideLine/AAR.tsx
@@ -94,150 +94,153 @@ export default function AAR() {
     <>
       <WritingPageWrap>
         <Header />
-        <div className="container">
-          <div className="title_container">
-            <div className="title_main">AAR 회고</div>
-            <div className="title_content">
-              AAR은 After Action Review/Report의 줄임말로 짧은 시간 내에
-              유연하고 편하게 진행되는 회고예요
-            </div>
-          </div>
-          <GuideLineFourContent>
-            <div className="AllmainConten_container">
-              <div className="leftContent_container">
-                <div className="mainContent_Btn">초기 목표</div>
-                <div className="maintext_container">
-                  <p>
-                    <span style={{ fontWeight: 700 }}>의도한 결과</span>는
-                    <br />
-                    무엇이었는지 작성하기
-                  </p>
-                </div>
-                <div>
-                  <textarea
-                    className="mainContent_Input"
-                    placeholder="텍스트를 입력해주세요"
-                    value={firstContent}
-                    onChange={(e) => setFirstContent(e.target.value)}
-                    style={{ resize: "none" }} // 사이즈 조절 방지
-                  ></textarea>
-                  <p className="text_num">{firstContent.length}/200</p>
-                </div>
+        <div className="all-container">
+          <div className="container">
+            <div className="title_container">
+              <div className="title_main">AAR 회고</div>
+              <div className="title_content">
+                AAR은 After Action Review/Report의 줄임말로 짧은 시간 내에
+                유연하고 편하게 진행되는 회고예요
               </div>
-              <div className="middleContent_container">
-                <div className="mainContent_Btn">현실</div>
-                <div className="maintext_container">
-                  <p style={{ fontWeight: 700 }}>실제 어떤 일들이</p>
-                  <p>
-                    <span style={{ fontWeight: 700 }}>일어났는지</span> 작성하기
-                  </p>
-                </div>
-                <div>
-                  <textarea
-                    className="mainContent_Input"
-                    placeholder="텍스트를 입력해주세요"
-                    value={secondContent}
-                    onChange={(e) => setSecondContent(e.target.value)}
-                    style={{ resize: "none" }} // 사이즈 조절 방지
-                  ></textarea>
-                  <p className="text_num">{secondContent.length}/200</p>
-                </div>
-              </div>
-              <div className="rightContent_container">
-                <div className="mainContent_Btn">배운 점들</div>
-                <div className="maintext_container">
-                  <p style={{ fontWeight: 700 }}>
-                    계획과 실제 결과의 차이는 왜 발생
-                  </p>
-                  <p>
-                    되었는지,{" "}
-                    <span style={{ fontWeight: 700 }}>무엇을 배웠는지</span>{" "}
-                    작성하기
-                  </p>
+            </div>
+            <GuideLineFourContent>
+              <div className="AllmainConten_container">
+                <div className="leftContent_container">
+                  <div className="mainContent_Btn">초기 목표</div>
+                  <div className="maintext_container">
+                    <p>
+                      <span style={{ fontWeight: 700 }}>의도한 결과</span>는
+                      <br />
+                      무엇이었는지 작성하기
+                    </p>
+                  </div>
+                  <div>
+                    <textarea
+                      className="mainContent_Input"
+                      placeholder="텍스트를 입력해주세요"
+                      value={firstContent}
+                      onChange={(e) => setFirstContent(e.target.value)}
+                      style={{ resize: "none" }} // 사이즈 조절 방지
+                    ></textarea>
+                    <p className="text_num">{firstContent.length}/200</p>
+                  </div>
                 </div>
-                <div>
-                  <textarea
-                    className="mainContent_Input"
-                    placeholder="텍스트를 입력해주세요"
-                    value={thirdContent}
-                    onChange={(e) => setThirdContent(e.target.value)}
-                    style={{ resize: "none" }} // 사이즈 조절 방지
-                  ></textarea>
-                  <p className="text_num">{thirdContent.length}/200</p>
+                <div className="middleContent_container">
+                  <div className="mainContent_Btn">현실</div>
+                  <div className="maintext_container">
+                    <p style={{ fontWeight: 700 }}>실제 어떤 일들이</p>
+                    <p>
+                      <span style={{ fontWeight: 700 }}>일어났는지</span>{" "}
+                      작성하기
+                    </p>
+                  </div>
+                  <div>
+                    <textarea
+                      className="mainContent_Input"
+                      placeholder="텍스트를 입력해주세요"
+                      value={secondContent}
+                      onChange={(e) => setSecondContent(e.target.value)}
+                      style={{ resize: "none" }} // 사이즈 조절 방지
+                    ></textarea>
+                    <p className="text_num">{secondContent.length}/200</p>
+                  </div>
                 </div>
-              </div>
-              <div className="rightContent_container">
-                <div className="mainContent_Btn">목적</div>
-                <div className="maintext_container">
-                  <p>
-                    <span style={{ fontWeight: 700 }}>
-                      지속, 개선 혹은 포기할 것
-                    </span>
-                    들은
-                    <br />
-                    무엇인지 작성하기
-                  </p>
+                <div className="rightContent_container">
+                  <div className="mainContent_Btn">배운 점들</div>
+                  <div className="maintext_container">
+                    <p style={{ fontWeight: 700 }}>
+                      계획과 실제 결과의 차이는 왜 발생
+                    </p>
+                    <p>
+                      되었는지,{" "}
+                      <span style={{ fontWeight: 700 }}>무엇을 배웠는지</span>{" "}
+                      작성하기
+                    </p>
+                  </div>
+                  <div>
+                    <textarea
+                      className="mainContent_Input"
+                      placeholder="텍스트를 입력해주세요"
+                      value={thirdContent}
+                      onChange={(e) => setThirdContent(e.target.value)}
+                      style={{ resize: "none" }} // 사이즈 조절 방지
+                    ></textarea>
+                    <p className="text_num">{thirdContent.length}/200</p>
+                  </div>
                 </div>
-                <div>
-                  <textarea
-                    className="mainContent_Input"
-                    placeholder="텍스트를 입력해주세요"
-                    value={fourContent}
-                    onChange={(e) => setFourContent(e.target.value)}
-                    style={{ resize: "none" }} // 사이즈 조절 방지
-                  ></textarea>
-                  <p className="text_num">{thirdContent.length}/200</p>
+                <div className="rightContent_container">
+                  <div className="mainContent_Btn">목적</div>
+                  <div className="maintext_container">
+                    <p>
+                      <span style={{ fontWeight: 700 }}>
+                        지속, 개선 혹은 포기할 것
+                      </span>
+                      들은
+                      <br />
+                      무엇인지 작성하기
+                    </p>
+                  </div>
+                  <div>
+                    <textarea
+                      className="mainContent_Input"
+                      placeholder="텍스트를 입력해주세요"
+                      value={fourContent}
+                      onChange={(e) => setFourContent(e.target.value)}
+                      style={{ resize: "none" }} // 사이즈 조절 방지
+                    ></textarea>
+                    <p className="text_num">{thirdContent.length}/200</p>
+                  </div>
                 </div>
               </div>
-            </div>
-          </GuideLineFourContent>
+            </GuideLineFourContent>
+          </div>
+          <WritingPageBtn>
+            <button
+              className="temporary_btn"
+              style={{
+                opacity:
+                  isFirstContentFilled ||
+                  isSecondContentFilled ||
+                  isThirdContentFilled ||
+                  isFourContentFilled
+                    ? 1
+                    : 0.5,
+              }}
+              disabled={
+                !isFirstContentFilled &&
+                !isSecondContentFilled &&
+                !isThirdContentFilled &&
+                !isFourContentFilled
+              }
+              onClick={handleTemporarySave}
+            >
+              임시 저장
+            </button>
+            <button
+              className="completed_btn"
+              style={{
+                opacity:
+                  isFirstContentFilled &&
+                  isSecondContentFilled &&
+                  isThirdContentFilled &&
+                  isFourContentFilled
+                    ? 1
+                    : 0.5,
+              }}
+              disabled={
+                !isFirstContentFilled ||
+                !isSecondContentFilled ||
+                !isThirdContentFilled ||
+                !isFourContentFilled
+              }
+              onClick={() => {
+                goToAttachPicture();
+              }}
+            >
+              작성 완료
+            </button>
+          </WritingPageBtn>
         </div>
-        <WritingPageBtn>
-          <button
-            className="temporary_btn"
-            style={{
-              opacity:
-                isFirstContentFilled ||
-                isSecondContentFilled ||
-                isThirdContentFilled ||
-                isFourContentFilled
-                  ? 1
-                  : 0.5,
-            }}
-            disabled={
-              !isFirstContentFilled &&
-              !isSecondContentFilled &&
-              !isThirdContentFilled &&
-              !isFourContentFilled
-            }
-            onClick={handleTemporarySave}
-          >
-            임시 저장
-          </button>
-          <button
-            className="completed_btn"
-            style={{
-              opacity:
-                isFirstContentFilled &&
-                isSecondContentFilled &&
-                isThirdContentFilled &&
-                isFourContentFilled
-                  ? 1
-                  : 0.5,
-            }}
-            disabled={
-              !isFirstContentFilled ||
-              !isSecondContentFilled ||
-              !isThirdContentFilled ||
-              !isFourContentFilled
-            }
-            onClick={() => {
-              goToAttachPicture();
-            }}
-          >
-            작성 완료
-          </button>
-        </WritingPageBtn>
       </WritingPageWrap>
     </>
   );
diff --git a/src/pages/WritingPage/GuideLine/Continue.tsx b/src/pages/WritingPage/GuideLine/Continue.tsx
index 5ea50e4..b36ffa7 100644
--- a/src/pages/WritingPage/GuideLine/Continue.tsx
+++ b/src/pages/WritingPage/GuideLine/Continue.tsx
@@ -92,109 +92,111 @@ export default function Continue() {
     <>
       <WritingPageWrap>
         <Header />
-        <div className="container">
-          <div className="title_container">
-            <div className="title_main">Continue-Stop-Start 회고</div>
-            <div className="title_content">
-              해결법 지향적이고, 무엇을 시작하고 그만둘지의 변화에 중점을 드는
-              회고예요
-            </div>
-          </div>
-          <GuideLineTheeContent>
-            <div className="AllmainConten_container">
-              <div className="leftContent_container">
-                <div className="mainContent_Btn">Continue</div>
-                <div className="maintext_container">
-                  <p>우리가 무엇을 계속할 지에 대해 작성하기</p>
-                </div>
-                <div>
-                  <textarea
-                    className="mainContent_Input"
-                    placeholder="텍스트를 입력해주세요"
-                    value={firstContent}
-                    onChange={(e) => setFirstContent(e.target.value)}
-                    style={{ resize: "none" }} // 사이즈 조절 방지
-                  ></textarea>
-                  <p className="text_num">{firstContent.length}/200</p>
-                </div>
+        <div className="all-container">
+          <div className="container">
+            <div className="title_container">
+              <div className="title_main">Continue-Stop-Start 회고</div>
+              <div className="title_content">
+                해결법 지향적이고, 무엇을 시작하고 그만둘지의 변화에 중점을 드는
+                회고예요
               </div>
-              <div className="middleContent_container">
-                <div className="mainContent_Btn">Stop</div>
-                <div className="maintext_container">
-                  <p>우리가 무엇을 그만두어야 할 지에 대해 작성하기</p>
-                </div>
-                <div>
-                  <textarea
-                    className="mainContent_Input"
-                    placeholder="텍스트를 입력해주세요"
-                    value={secondContent}
-                    onChange={(e) => setSecondContent(e.target.value)}
-                    style={{ resize: "none" }} // 사이즈 조절 방지
-                  ></textarea>
-                  <p className="text_num">{secondContent.length}/200</p>
+            </div>
+            <GuideLineTheeContent>
+              <div className="AllmainConten_container">
+                <div className="leftContent_container">
+                  <div className="mainContent_Btn">Continue</div>
+                  <div className="maintext_container">
+                    <p>우리가 무엇을 계속할 지에 대해 작성하기</p>
+                  </div>
+                  <div>
+                    <textarea
+                      className="mainContent_Input"
+                      placeholder="텍스트를 입력해주세요"
+                      value={firstContent}
+                      onChange={(e) => setFirstContent(e.target.value)}
+                      style={{ resize: "none" }} // 사이즈 조절 방지
+                    ></textarea>
+                    <p className="text_num">{firstContent.length}/200</p>
+                  </div>
                 </div>
-              </div>
-              <div className="rightContent_container">
-                <div className="mainContent_Btn">Start</div>
-                <div className="maintext_container">
-                  <p>우리가 무엇을 시작하여야 할 지에 대해 작성하기</p>
+                <div className="middleContent_container">
+                  <div className="mainContent_Btn">Stop</div>
+                  <div className="maintext_container">
+                    <p>우리가 무엇을 그만두어야 할 지에 대해 작성하기</p>
+                  </div>
+                  <div>
+                    <textarea
+                      className="mainContent_Input"
+                      placeholder="텍스트를 입력해주세요"
+                      value={secondContent}
+                      onChange={(e) => setSecondContent(e.target.value)}
+                      style={{ resize: "none" }} // 사이즈 조절 방지
+                    ></textarea>
+                    <p className="text_num">{secondContent.length}/200</p>
+                  </div>
                 </div>
-                <div>
-                  <textarea
-                    className="mainContent_Input"
-                    placeholder="텍스트를 입력해주세요"
-                    value={thirdContent}
-                    onChange={(e) => setThirdContent(e.target.value)}
-                    style={{ resize: "none" }} // 사이즈 조절 방지
-                  ></textarea>
-                  <p className="text_num">{thirdContent.length}/200</p>
+                <div className="rightContent_container">
+                  <div className="mainContent_Btn">Start</div>
+                  <div className="maintext_container">
+                    <p>우리가 무엇을 시작하여야 할 지에 대해 작성하기</p>
+                  </div>
+                  <div>
+                    <textarea
+                      className="mainContent_Input"
+                      placeholder="텍스트를 입력해주세요"
+                      value={thirdContent}
+                      onChange={(e) => setThirdContent(e.target.value)}
+                      style={{ resize: "none" }} // 사이즈 조절 방지
+                    ></textarea>
+                    <p className="text_num">{thirdContent.length}/200</p>
+                  </div>
                 </div>
               </div>
-            </div>
-          </GuideLineTheeContent>
+            </GuideLineTheeContent>
+          </div>
+          <WritingPageBtn>
+            <button
+              className="temporary_btn"
+              style={{
+                opacity:
+                  isFirstContentFilled ||
+                  isSecondContentFilled ||
+                  isThirdContentFilled
+                    ? 1
+                    : 0.5,
+              }}
+              disabled={
+                !isFirstContentFilled &&
+                !isSecondContentFilled &&
+                !isThirdContentFilled
+              }
+              onClick={handleTemporarySave}
+            >
+              임시 저장
+            </button>
+            <button
+              className="completed_btn"
+              style={{
+                opacity:
+                  isFirstContentFilled &&
+                  isSecondContentFilled &&
+                  isThirdContentFilled
+                    ? 1
+                    : 0.5,
+              }}
+              disabled={
+                !isFirstContentFilled ||
+                !isSecondContentFilled ||
+                !isThirdContentFilled
+              }
+              onClick={() => {
+                goToAttachPicture();
+              }}
+            >
+              작성 완료
+            </button>
+          </WritingPageBtn>
         </div>
-        <WritingPageBtn>
-          <button
-            className="temporary_btn"
-            style={{
-              opacity:
-                isFirstContentFilled ||
-                isSecondContentFilled ||
-                isThirdContentFilled
-                  ? 1
-                  : 0.5,
-            }}
-            disabled={
-              !isFirstContentFilled &&
-              !isSecondContentFilled &&
-              !isThirdContentFilled
-            }
-            onClick={handleTemporarySave}
-          >
-            임시 저장
-          </button>
-          <button
-            className="completed_btn"
-            style={{
-              opacity:
-                isFirstContentFilled &&
-                isSecondContentFilled &&
-                isThirdContentFilled
-                  ? 1
-                  : 0.5,
-            }}
-            disabled={
-              !isFirstContentFilled ||
-              !isSecondContentFilled ||
-              !isThirdContentFilled
-            }
-            onClick={() => {
-              goToAttachPicture();
-            }}
-          >
-            작성 완료
-          </button>
-        </WritingPageBtn>
       </WritingPageWrap>
     </>
   );
diff --git a/src/pages/WritingPage/GuideLine/FiveF.tsx b/src/pages/WritingPage/GuideLine/FiveF.tsx
index f8de762..413bdd8 100644
--- a/src/pages/WritingPage/GuideLine/FiveF.tsx
+++ b/src/pages/WritingPage/GuideLine/FiveF.tsx
@@ -2,7 +2,7 @@ import React, { useState } from "react";
 import { Header } from "../../../components/Header";
 import WritingPageWrap from "../../../components/WritingPageWrap";
 import { useNavigate } from "react-router-dom";
-import styled from "styled-components";
+// import styled from "styled-components";
 import WritingPageBtn from "../../../components/WritingPageBtn";
 import GuideLineVerticleContent from "../../../components/GuideLine/FiveFContent";
 import axios, { AxiosResponse } from "axios";
@@ -103,169 +103,172 @@ export default function FiveF() {
     <>
       <WritingPageWrap>
         <Header />
-        <div className="container">
-          <div className="title_container">
-            <div className="title_main">5F 회고</div>
-            <div className="title_content">
-              다섯 가지 차원(Five Dimensions)을 기반으로 순서대로 진행하는
-              회고예요
+        <div className="all-container">
+          <div className="container">
+            <div className="title_container">
+              <div className="title_main">5F 회고</div>
+              <div className="title_content">
+                다섯 가지 차원(Five Dimensions)을 기반으로 순서대로 진행하는
+                회고예요
+              </div>
             </div>
-          </div>
-          <GuideLineVerticleContent>
-            <div className="AllmainConten_container">
-              <div className="Content-Container">
-                <div className="mainContent_Btn">Fact</div>
-                <div className="maintext_container">
-                  <span style={{ fontWeight: 700 }}>한 일에 대한 사실</span>을
-                  작성하기
+            <GuideLineVerticleContent>
+              <div className="AllmainConten_container">
+                <div className="Content-Container">
+                  <div className="mainContent_Btn">Fact</div>
+                  <div className="maintext_container">
+                    <span style={{ fontWeight: 700 }}>한 일에 대한 사실</span>을
+                    작성하기
+                  </div>
                 </div>
-              </div>
-              <div>
-                <textarea
-                  className="mainContent_Input"
-                  placeholder="텍스트를 입력해주세요"
-                  value={firstContent}
-                  onChange={(e) => setFirstContent(e.target.value)}
-                  style={{ resize: "none" }} // 사이즈 조절 방지
-                ></textarea>
-                <p className="text_num">{firstContent.length}/200</p>
-              </div>
-              <div className="Content-Container">
-                <div className="mainContent_Btn">Feelings</div>
-                <div className="maintext_container">
-                  <span style={{ fontWeight: 700 }}>한 일에 대한 느낀점</span>을
-                  작성하기
+                <div>
+                  <textarea
+                    className="mainContent_Input"
+                    placeholder="텍스트를 입력해주세요"
+                    value={firstContent}
+                    onChange={(e) => setFirstContent(e.target.value)}
+                    style={{ resize: "none" }} // 사이즈 조절 방지
+                  ></textarea>
+                  <p className="text_num">{firstContent.length}/200</p>
                 </div>
-              </div>
-              <div>
-                <textarea
-                  className="mainContent_Input"
-                  placeholder="텍스트를 입력해주세요"
-                  value={secondContent}
-                  onChange={(e) => setSecondContent(e.target.value)}
-                  style={{ resize: "none" }} // 사이즈 조절 방지
-                ></textarea>
-                <p className="text_num">{secondContent.length}/200</p>
-              </div>
-              <div className="Content-Container">
-                <div className="mainContent_Btn">Finding</div>
-                <div className="maintext_container">
-                  <span style={{ fontWeight: 700 }}>
-                    무엇을 배웠는지, 인사이트, 교훈
-                  </span>
-                  을 작성하기
+                <div className="Content-Container">
+                  <div className="mainContent_Btn">Feelings</div>
+                  <div className="maintext_container">
+                    <span style={{ fontWeight: 700 }}>한 일에 대한 느낀점</span>
+                    을 작성하기
+                  </div>
                 </div>
-              </div>
-              <div>
-                <textarea
-                  className="mainContent_Input"
-                  placeholder="텍스트를 입력해주세요"
-                  value={thirdContent}
-                  onChange={(e) => setThirdContent(e.target.value)}
-                  style={{ resize: "none" }} // 사이즈 조절 방지
-                ></textarea>
-                <p className="text_num">{thirdContent.length}/200</p>
-              </div>
-              <div className="Content-Container">
-                <div className="mainContent_Btn">Future Action</div>
-                <div className="maintext_container">
-                  <span style={{ fontWeight: 700 }}>향후 계획</span>을 작성하기
+                <div>
+                  <textarea
+                    className="mainContent_Input"
+                    placeholder="텍스트를 입력해주세요"
+                    value={secondContent}
+                    onChange={(e) => setSecondContent(e.target.value)}
+                    style={{ resize: "none" }} // 사이즈 조절 방지
+                  ></textarea>
+                  <p className="text_num">{secondContent.length}/200</p>
                 </div>
-              </div>
-              <div>
-                <textarea
-                  className="mainContent_Input"
-                  placeholder="텍스트를 입력해주세요"
-                  value={fourContent}
-                  onChange={(e) => setFourContent(e.target.value)}
-                  style={{ resize: "none" }} // 사이즈 조절 방지
-                ></textarea>
-                <p className="text_num">{fourContent.length}/200</p>
-              </div>
-              <div className="Content-Container">
-                <div className="mainContent_Btn">Feedback</div>
-                <div className="maintext_container">
-                  <span style={{ fontWeight: 700 }}>
-                    향후 계획에 대한 피드백
-                  </span>
-                  을 작성하기
+                <div className="Content-Container">
+                  <div className="mainContent_Btn">Finding</div>
+                  <div className="maintext_container">
+                    <span style={{ fontWeight: 700 }}>
+                      무엇을 배웠는지, 인사이트, 교훈
+                    </span>
+                    을 작성하기
+                  </div>
+                </div>
+                <div>
+                  <textarea
+                    className="mainContent_Input"
+                    placeholder="텍스트를 입력해주세요"
+                    value={thirdContent}
+                    onChange={(e) => setThirdContent(e.target.value)}
+                    style={{ resize: "none" }} // 사이즈 조절 방지
+                  ></textarea>
+                  <p className="text_num">{thirdContent.length}/200</p>
+                </div>
+                <div className="Content-Container">
+                  <div className="mainContent_Btn">Future Action</div>
+                  <div className="maintext_container">
+                    <span style={{ fontWeight: 700 }}>향후 계획</span>을
+                    작성하기
+                  </div>
+                </div>
+                <div>
+                  <textarea
+                    className="mainContent_Input"
+                    placeholder="텍스트를 입력해주세요"
+                    value={fourContent}
+                    onChange={(e) => setFourContent(e.target.value)}
+                    style={{ resize: "none" }} // 사이즈 조절 방지
+                  ></textarea>
+                  <p className="text_num">{fourContent.length}/200</p>
+                </div>
+                <div className="Content-Container">
+                  <div className="mainContent_Btn">Feedback</div>
+                  <div className="maintext_container">
+                    <span style={{ fontWeight: 700 }}>
+                      향후 계획에 대한 피드백
+                    </span>
+                    을 작성하기
+                  </div>
+                </div>
+                <div>
+                  <textarea
+                    className="mainContent_Input"
+                    placeholder="텍스트를 입력해주세요"
+                    value={fifthContent}
+                    onChange={(e) => setFifthContent(e.target.value)}
+                    style={{ resize: "none" }} // 사이즈 조절 방지
+                  ></textarea>
+                  <p className="text_num">{fifthContent.length}/200</p>
                 </div>
               </div>
-              <div>
-                <textarea
-                  className="mainContent_Input"
-                  placeholder="텍스트를 입력해주세요"
-                  value={fifthContent}
-                  onChange={(e) => setFifthContent(e.target.value)}
-                  style={{ resize: "none" }} // 사이즈 조절 방지
-                ></textarea>
-                <p className="text_num">{fifthContent.length}/200</p>
-              </div>
-            </div>
-          </GuideLineVerticleContent>
+            </GuideLineVerticleContent>
+          </div>
+          <WritingPageBtn>
+            <button
+              className="temporary_btn"
+              style={{
+                opacity:
+                  isFirstContentFilled ||
+                  isSecondContentFilled ||
+                  isThirdContentFilled ||
+                  isFourContentFilled ||
+                  isFifthContentFilled
+                    ? 1
+                    : 0.5,
+              }}
+              disabled={
+                !isFirstContentFilled &&
+                !isSecondContentFilled &&
+                !isThirdContentFilled &&
+                !isFourContentFilled &&
+                !isFifthContentFilled
+              }
+              onClick={handleTemporarySave}
+            >
+              임시 저장
+            </button>
+            <button
+              className="completed_btn"
+              style={{
+                opacity:
+                  isFirstContentFilled &&
+                  isSecondContentFilled &&
+                  isThirdContentFilled &&
+                  isFourContentFilled &&
+                  isFifthContentFilled
+                    ? 1
+                    : 0.5,
+              }}
+              disabled={
+                !isFirstContentFilled ||
+                !isSecondContentFilled ||
+                !isThirdContentFilled ||
+                !isFourContentFilled ||
+                !isFifthContentFilled
+              }
+              onClick={() => {
+                goToAttachPicture();
+              }}
+            >
+              작성 완료
+            </button>
+          </WritingPageBtn>
         </div>
-        <WritingPageBtn>
-          <button
-            className="temporary_btn"
-            style={{
-              opacity:
-                isFirstContentFilled ||
-                isSecondContentFilled ||
-                isThirdContentFilled ||
-                isFourContentFilled ||
-                isFifthContentFilled
-                  ? 1
-                  : 0.5,
-            }}
-            disabled={
-              !isFirstContentFilled &&
-              !isSecondContentFilled &&
-              !isThirdContentFilled &&
-              !isFourContentFilled &&
-              !isFifthContentFilled
-            }
-            onClick={handleTemporarySave}
-          >
-            임시 저장
-          </button>
-          <button
-            className="completed_btn"
-            style={{
-              opacity:
-                isFirstContentFilled &&
-                isSecondContentFilled &&
-                isThirdContentFilled &&
-                isFourContentFilled &&
-                isFifthContentFilled
-                  ? 1
-                  : 0.5,
-            }}
-            disabled={
-              !isFirstContentFilled ||
-              !isSecondContentFilled ||
-              !isThirdContentFilled ||
-              !isFourContentFilled ||
-              !isFifthContentFilled
-            }
-            onClick={() => {
-              goToAttachPicture();
-            }}
-          >
-            작성 완료
-          </button>
-        </WritingPageBtn>
       </WritingPageWrap>
     </>
   );
 }
 
-const FiveFWrap = styled.div`
-  .mainContent_Btn {
-    display: flex;
-    width: 320px;
-    padding: 16px 60px;
-    justify-content: center;
-    align-items: center;
-    gap: 10px;
-  }
-`;
+// const FiveFWrap = styled.div`
+//   .mainContent_Btn {
+//     display: flex;
+//     width: 320px;
+//     padding: 16px 60px;
+//     justify-content: center;
+//     align-items: center;
+//     gap: 10px;
+//   }
+// `;
diff --git a/src/pages/WritingPage/GuideLine/FourL.tsx b/src/pages/WritingPage/GuideLine/FourL.tsx
index 76a92e5..cfb74f4 100644
--- a/src/pages/WritingPage/GuideLine/FourL.tsx
+++ b/src/pages/WritingPage/GuideLine/FourL.tsx
@@ -94,143 +94,146 @@ export default function FourL() {
     <>
       <WritingPageWrap>
         <Header />
-        <div className="container">
-          <div className="title_container">
-            <div className="title_main">4L 회고</div>
-            <div className="title_content">
-              4L 회고는 오로지 내가 수행하였던 일에만 집중해서 솔직하게 정리하는
-              회고예요
-            </div>
-          </div>
-          <GuideLineFourContent>
-            <div className="AllmainConten_container">
-              <div className="leftContent_container">
-                <div className="mainContent_Btn">Liked</div>
-                <div className="maintext_container">
-                  <p>
-                    <span style={{ fontWeight: 700 }}>좋았던 것</span>을
-                    작성하기
-                  </p>
-                </div>
-                <div>
-                  <textarea
-                    className="mainContent_Input"
-                    placeholder="텍스트를 입력해주세요"
-                    value={firstContent}
-                    onChange={(e) => setFirstContent(e.target.value)}
-                    style={{ resize: "none" }} // 사이즈 조절 방지
-                  ></textarea>
-                  <p className="text_num">{firstContent.length}/200</p>
-                </div>
+        <div className="all-container">
+          <div className="container">
+            <div className="title_container">
+              <div className="title_main">4L 회고</div>
+              <div className="title_content">
+                4L 회고는 오로지 내가 수행하였던 일에만 집중해서 솔직하게
+                정리하는 회고예요
               </div>
-              <div className="middleContent_container">
-                <div className="mainContent_Btn">Learned</div>
-                <div className="maintext_container">
-                  <p>
-                    {" "}
-                    <span style={{ fontWeight: 700 }}>배운 것</span>을 작성하기
-                  </p>
-                </div>
-                <div>
-                  <textarea
-                    className="mainContent_Input"
-                    placeholder="텍스트를 입력해주세요"
-                    value={secondContent}
-                    onChange={(e) => setSecondContent(e.target.value)}
-                    style={{ resize: "none" }} // 사이즈 조절 방지
-                  ></textarea>
-                  <p className="text_num">{secondContent.length}/200</p>
-                </div>
-              </div>
-              <div className="rightContent_container">
-                <div className="mainContent_Btn">Lacked</div>
-                <div className="maintext_container">
-                  <p>
-                    {" "}
-                    <span style={{ fontWeight: 700 }}>부족했던 것</span>을
-                    작성하기
-                  </p>
+            </div>
+            <GuideLineFourContent>
+              <div className="AllmainConten_container">
+                <div className="leftContent_container">
+                  <div className="mainContent_Btn">Liked</div>
+                  <div className="maintext_container">
+                    <p>
+                      <span style={{ fontWeight: 700 }}>좋았던 것</span>을
+                      작성하기
+                    </p>
+                  </div>
+                  <div>
+                    <textarea
+                      className="mainContent_Input"
+                      placeholder="텍스트를 입력해주세요"
+                      value={firstContent}
+                      onChange={(e) => setFirstContent(e.target.value)}
+                      style={{ resize: "none" }} // 사이즈 조절 방지
+                    ></textarea>
+                    <p className="text_num">{firstContent.length}/200</p>
+                  </div>
                 </div>
-                <div>
-                  <textarea
-                    className="mainContent_Input"
-                    placeholder="텍스트를 입력해주세요"
-                    value={thirdContent}
-                    onChange={(e) => setThirdContent(e.target.value)}
-                    style={{ resize: "none" }} // 사이즈 조절 방지
-                  ></textarea>
-                  <p className="text_num">{thirdContent.length}/200</p>
+                <div className="middleContent_container">
+                  <div className="mainContent_Btn">Learned</div>
+                  <div className="maintext_container">
+                    <p>
+                      {" "}
+                      <span style={{ fontWeight: 700 }}>배운 것</span>을
+                      작성하기
+                    </p>
+                  </div>
+                  <div>
+                    <textarea
+                      className="mainContent_Input"
+                      placeholder="텍스트를 입력해주세요"
+                      value={secondContent}
+                      onChange={(e) => setSecondContent(e.target.value)}
+                      style={{ resize: "none" }} // 사이즈 조절 방지
+                    ></textarea>
+                    <p className="text_num">{secondContent.length}/200</p>
+                  </div>
                 </div>
-              </div>
-              <div className="rightContent_container">
-                <div className="mainContent_Btn">Longed for</div>
-                <div className="maintext_container">
-                  <p>
-                    {" "}
-                    <span style={{ fontWeight: 700 }}>바라는 것</span>을
-                    작성하기
-                  </p>
+                <div className="rightContent_container">
+                  <div className="mainContent_Btn">Lacked</div>
+                  <div className="maintext_container">
+                    <p>
+                      {" "}
+                      <span style={{ fontWeight: 700 }}>부족했던 것</span>을
+                      작성하기
+                    </p>
+                  </div>
+                  <div>
+                    <textarea
+                      className="mainContent_Input"
+                      placeholder="텍스트를 입력해주세요"
+                      value={thirdContent}
+                      onChange={(e) => setThirdContent(e.target.value)}
+                      style={{ resize: "none" }} // 사이즈 조절 방지
+                    ></textarea>
+                    <p className="text_num">{thirdContent.length}/200</p>
+                  </div>
                 </div>
-                <div>
-                  <textarea
-                    className="mainContent_Input"
-                    placeholder="텍스트를 입력해주세요"
-                    value={fourContent}
-                    onChange={(e) => setFourContent(e.target.value)}
-                    style={{ resize: "none" }} // 사이즈 조절 방지
-                  ></textarea>
-                  <p className="text_num">{fourContent.length}/200</p>
+                <div className="rightContent_container">
+                  <div className="mainContent_Btn">Longed for</div>
+                  <div className="maintext_container">
+                    <p>
+                      {" "}
+                      <span style={{ fontWeight: 700 }}>바라는 것</span>을
+                      작성하기
+                    </p>
+                  </div>
+                  <div>
+                    <textarea
+                      className="mainContent_Input"
+                      placeholder="텍스트를 입력해주세요"
+                      value={fourContent}
+                      onChange={(e) => setFourContent(e.target.value)}
+                      style={{ resize: "none" }} // 사이즈 조절 방지
+                    ></textarea>
+                    <p className="text_num">{fourContent.length}/200</p>
+                  </div>
                 </div>
               </div>
-            </div>
-          </GuideLineFourContent>
+            </GuideLineFourContent>
+          </div>
+          <WritingPageBtn>
+            <button
+              className="temporary_btn"
+              style={{
+                opacity:
+                  isFirstContentFilled ||
+                  isSecondContentFilled ||
+                  isThirdContentFilled ||
+                  isFourContentFilled
+                    ? 1
+                    : 0.5,
+              }}
+              disabled={
+                !isFirstContentFilled &&
+                !isSecondContentFilled &&
+                !isThirdContentFilled &&
+                !isFourContentFilled
+              }
+              onClick={handleTemporarySave}
+            >
+              임시 저장
+            </button>
+            <button
+              className="completed_btn"
+              style={{
+                opacity:
+                  isFirstContentFilled &&
+                  isSecondContentFilled &&
+                  isThirdContentFilled &&
+                  isFourContentFilled
+                    ? 1
+                    : 0.5,
+              }}
+              disabled={
+                !isFirstContentFilled ||
+                !isSecondContentFilled ||
+                !isThirdContentFilled ||
+                !isFourContentFilled
+              }
+              onClick={() => {
+                goToAttachPicture();
+              }}
+            >
+              작성 완료
+            </button>
+          </WritingPageBtn>
         </div>
-        <WritingPageBtn>
-          <button
-            className="temporary_btn"
-            style={{
-              opacity:
-                isFirstContentFilled ||
-                isSecondContentFilled ||
-                isThirdContentFilled ||
-                isFourContentFilled
-                  ? 1
-                  : 0.5,
-            }}
-            disabled={
-              !isFirstContentFilled &&
-              !isSecondContentFilled &&
-              !isThirdContentFilled &&
-              !isFourContentFilled
-            }
-            onClick={handleTemporarySave}
-          >
-            임시 저장
-          </button>
-          <button
-            className="completed_btn"
-            style={{
-              opacity:
-                isFirstContentFilled &&
-                isSecondContentFilled &&
-                isThirdContentFilled &&
-                isFourContentFilled
-                  ? 1
-                  : 0.5,
-            }}
-            disabled={
-              !isFirstContentFilled ||
-              !isSecondContentFilled ||
-              !isThirdContentFilled ||
-              !isFourContentFilled
-            }
-            onClick={() => {
-              goToAttachPicture();
-            }}
-          >
-            작성 완료
-          </button>
-        </WritingPageBtn>
       </WritingPageWrap>
     </>
   );
diff --git a/src/pages/WritingPage/GuideLine/KPT.tsx b/src/pages/WritingPage/GuideLine/KPT.tsx
index 9884406..36ff61c 100644
--- a/src/pages/WritingPage/GuideLine/KPT.tsx
+++ b/src/pages/WritingPage/GuideLine/KPT.tsx
@@ -91,117 +91,121 @@ export default function KPT() {
     <>
       <WritingPageWrap>
         <Header />
-        <div className="container">
-          <div className="title_container">
-            <div className="title_main">KPT 회고</div>
-            <div className="title_content">
-              회고 3가지 관점에서 업무를 돌아보고, 다음 액션 아이템을 도출해내는
-              데 도움이 되는 회고예요
-            </div>
-          </div>
-          <GuideLineTheeContent>
-            <div className="AllmainConten_container">
-              <div className="leftContent_container">
-                <div className="mainContent_Btn">Keep</div>
-                <div className="maintext_container">
-                  <p>좋은 결과를 만들었고,</p>
-                  <p style={{ fontWeight: 700 }}>계속해서 유지해 나가야할 것</p>
-                </div>
-                <div>
-                  <textarea
-                    className="mainContent_Input"
-                    placeholder="텍스트를 입력해주세요"
-                    value={firstContent}
-                    onChange={(e) => setFirstContent(e.target.value)}
-                    style={{ resize: "none" }} // 사이즈 조절 방지
-                  ></textarea>
-                  <p className="text_num">{firstContent.length}/200</p>
-                </div>
+        <div className="all-container">
+          <div className="container">
+            <div className="title_container">
+              <div className="title_main">KPT 회고</div>
+              <div className="title_content">
+                회고 3가지 관점에서 업무를 돌아보고, 다음 액션 아이템을
+                도출해내는 데 도움이 되는 회고예요
               </div>
-              <div className="middleContent_container">
-                <div className="mainContent_Btn">Problem</div>
-                <div className="maintext_container">
-                  <p>아쉬운 결과를 만들었고,</p>
-                  <p style={{ fontWeight: 700 }}>앞으로 개선되어야 할 것</p>
-                </div>
-                <div>
-                  <textarea
-                    className="mainContent_Input"
-                    placeholder="텍스트를 입력해주세요"
-                    value={secondContent}
-                    onChange={(e) => setSecondContent(e.target.value)}
-                    style={{ resize: "none" }} // 사이즈 조절 방지
-                  ></textarea>
-                  <p className="text_num">{secondContent.length}/200</p>
+            </div>
+            <GuideLineTheeContent>
+              <div className="AllmainConten_container">
+                <div className="leftContent_container">
+                  <div className="mainContent_Btn">Keep</div>
+                  <div className="maintext_container">
+                    <p>좋은 결과를 만들었고,</p>
+                    <p style={{ fontWeight: 700 }}>
+                      계속해서 유지해 나가야할 것
+                    </p>
+                  </div>
+                  <div>
+                    <textarea
+                      className="mainContent_Input"
+                      placeholder="텍스트를 입력해주세요"
+                      value={firstContent}
+                      onChange={(e) => setFirstContent(e.target.value)}
+                      style={{ resize: "none" }} // 사이즈 조절 방지
+                    ></textarea>
+                    <p className="text_num">{firstContent.length}/200</p>
+                  </div>
                 </div>
-              </div>
-              <div className="rightContent_container">
-                <div className="mainContent_Btn">Try</div>
-                <div className="maintext_container">
-                  <p>문제를 파악하고,</p>
-                  <p>
-                    이를{" "}
-                    <span style={{ fontWeight: 700 }}>
-                      해결하기 위한 구체적인 개선방안
-                    </span>
-                  </p>
+                <div className="middleContent_container">
+                  <div className="mainContent_Btn">Problem</div>
+                  <div className="maintext_container">
+                    <p>아쉬운 결과를 만들었고,</p>
+                    <p style={{ fontWeight: 700 }}>앞으로 개선되어야 할 것</p>
+                  </div>
+                  <div>
+                    <textarea
+                      className="mainContent_Input"
+                      placeholder="텍스트를 입력해주세요"
+                      value={secondContent}
+                      onChange={(e) => setSecondContent(e.target.value)}
+                      style={{ resize: "none" }} // 사이즈 조절 방지
+                    ></textarea>
+                    <p className="text_num">{secondContent.length}/200</p>
+                  </div>
                 </div>
-                <div>
-                  <textarea
-                    className="mainContent_Input"
-                    placeholder="텍스트를 입력해주세요"
-                    value={thirdContent}
-                    onChange={(e) => setThirdContent(e.target.value)}
-                    style={{ resize: "none" }} // 사이즈 조절 방지
-                  ></textarea>
-                  <p className="text_num">{thirdContent.length}/200</p>
+                <div className="rightContent_container">
+                  <div className="mainContent_Btn">Try</div>
+                  <div className="maintext_container">
+                    <p>문제를 파악하고,</p>
+                    <p>
+                      이를{" "}
+                      <span style={{ fontWeight: 700 }}>
+                        해결하기 위한 구체적인 개선방안
+                      </span>
+                    </p>
+                  </div>
+                  <div>
+                    <textarea
+                      className="mainContent_Input"
+                      placeholder="텍스트를 입력해주세요"
+                      value={thirdContent}
+                      onChange={(e) => setThirdContent(e.target.value)}
+                      style={{ resize: "none" }} // 사이즈 조절 방지
+                    ></textarea>
+                    <p className="text_num">{thirdContent.length}/200</p>
+                  </div>
                 </div>
               </div>
-            </div>
-          </GuideLineTheeContent>
+            </GuideLineTheeContent>
+          </div>
+          <WritingPageBtn>
+            <button
+              className="temporary_btn"
+              style={{
+                opacity:
+                  isFirstContentFilled ||
+                  isSecondContentFilled ||
+                  isThirdContentFilled
+                    ? 1
+                    : 0.5,
+              }}
+              disabled={
+                !isFirstContentFilled &&
+                !isSecondContentFilled &&
+                !isThirdContentFilled
+              }
+              onClick={handleTemporarySave}
+            >
+              임시 저장
+            </button>
+            <button
+              className="completed_btn"
+              style={{
+                opacity:
+                  isFirstContentFilled &&
+                  isSecondContentFilled &&
+                  isThirdContentFilled
+                    ? 1
+                    : 0.5,
+              }}
+              disabled={
+                !isFirstContentFilled ||
+                !isSecondContentFilled ||
+                !isThirdContentFilled
+              }
+              onClick={() => {
+                goToAttachPicture();
+              }}
+            >
+              작성 완료
+            </button>
+          </WritingPageBtn>
         </div>
-        <WritingPageBtn>
-          <button
-            className="temporary_btn"
-            style={{
-              opacity:
-                isFirstContentFilled ||
-                isSecondContentFilled ||
-                isThirdContentFilled
-                  ? 1
-                  : 0.5,
-            }}
-            disabled={
-              !isFirstContentFilled &&
-              !isSecondContentFilled &&
-              !isThirdContentFilled
-            }
-            onClick={handleTemporarySave}
-          >
-            임시 저장
-          </button>
-          <button
-            className="completed_btn"
-            style={{
-              opacity:
-                isFirstContentFilled &&
-                isSecondContentFilled &&
-                isThirdContentFilled
-                  ? 1
-                  : 0.5,
-            }}
-            disabled={
-              !isFirstContentFilled ||
-              !isSecondContentFilled ||
-              !isThirdContentFilled
-            }
-            onClick={() => {
-              goToAttachPicture();
-            }}
-          >
-            작성 완료
-          </button>
-        </WritingPageBtn>
       </WritingPageWrap>
     </>
   );
diff --git a/src/pages/WritingPage/GuideLine/ORID.tsx b/src/pages/WritingPage/GuideLine/ORID.tsx
index 0b0ab61..938d633 100644
--- a/src/pages/WritingPage/GuideLine/ORID.tsx
+++ b/src/pages/WritingPage/GuideLine/ORID.tsx
@@ -93,154 +93,156 @@ export default function ORID() {
     <>
       <WritingPageWrap>
         <Header />
-        <div className="container">
-          <div className="title_container">
-            <div className="title_main">ORID 회고</div>
-            <div className="title_content">
-              ORID 회고는 Objective(지각 단계)-Reflective(반응
-              단계)-Interpretive(해석 단계)-Decisional(결정 단계)의 줄임말로,
-              사고와 대화를 촉진하는 회고예요
-            </div>
-          </div>
-        </div>
-        <GuideLineFourContent>
-          <div className="AllmainConten_container">
-            <div className="leftContent_container">
-              <div className="mainContent_Btn">Objective</div>
-              <div className="maintext_container">
-                <p>
-                  객관적인 사실과 경험을 중심으로
-                  <br />
-                  <span style={{ fontWeight: 700 }}>
-                    스스로 알고 있는 것을 확인
-                  </span>
-                  하여 작성하기
-                </p>
-              </div>
-              <div>
-                <textarea
-                  className="mainContent_Input"
-                  placeholder="텍스트를 입력해주세요"
-                  value={firstContent}
-                  onChange={(e) => setFirstContent(e.target.value)}
-                  style={{ resize: "none" }} // 사이즈 조절 방지
-                ></textarea>
-                <p className="text_num">{firstContent.length}/200</p>
+        <div className="all-container">
+          <div className="container">
+            <div className="title_container">
+              <div className="title_main">ORID 회고</div>
+              <div className="title_content">
+                ORID 회고는 Objective(지각 단계)-Reflective(반응
+                단계)-Interpretive(해석 단계)-Decisional(결정 단계)의 줄임말로,
+                사고와 대화를 촉진하는 회고예요
               </div>
             </div>
-            <div className="middleContent_container">
-              <div className="mainContent_Btn">Reflective</div>
-              <div className="maintext_container">
-                <p>
-                  그 때의 감정이나 느낌은 무엇인지
-                  <br />
-                  <span style={{ fontWeight: 700 }}>감정과 느낌을 탐색</span>
-                  하며 작성하기
-                </p>
-              </div>
-              <div>
-                <textarea
-                  className="mainContent_Input"
-                  placeholder="텍스트를 입력해주세요"
-                  value={secondContent}
-                  onChange={(e) => setSecondContent(e.target.value)}
-                  style={{ resize: "none" }} // 사이즈 조절 방지
-                ></textarea>
-                <p className="text_num">{secondContent.length}/200</p>
-              </div>
-            </div>
-            <div className="rightContent_container">
-              <div className="mainContent_Btn">Interpretive</div>
-              <div className="maintext_container">
-                <p>
-                  각각의 일들이 시사하는 점이 무엇인지
-                  <br />
-                  <span style={{ fontWeight: 700 }}>해석과 분석</span>을 하며
-                  작성하기
-                </p>
+          </div>
+          <GuideLineFourContent>
+            <div className="AllmainConten_container">
+              <div className="leftContent_container">
+                <div className="mainContent_Btn">Objective</div>
+                <div className="maintext_container">
+                  <p>
+                    객관적인 사실과 경험을 중심으로
+                    <br />
+                    <span style={{ fontWeight: 700 }}>
+                      스스로 알고 있는 것을 확인
+                    </span>
+                    하여 작성하기
+                  </p>
+                </div>
+                <div>
+                  <textarea
+                    className="mainContent_Input"
+                    placeholder="텍스트를 입력해주세요"
+                    value={firstContent}
+                    onChange={(e) => setFirstContent(e.target.value)}
+                    style={{ resize: "none" }} // 사이즈 조절 방지
+                  ></textarea>
+                  <p className="text_num">{firstContent.length}/200</p>
+                </div>
               </div>
-              <div>
-                <textarea
-                  className="mainContent_Input"
-                  placeholder="텍스트를 입력해주세요"
-                  value={thirdContent}
-                  onChange={(e) => setThirdContent(e.target.value)}
-                  style={{ resize: "none" }} // 사이즈 조절 방지
-                ></textarea>
-                <p className="text_num">{thirdContent.length}/200</p>
+              <div className="middleContent_container">
+                <div className="mainContent_Btn">Reflective</div>
+                <div className="maintext_container">
+                  <p>
+                    그 때의 감정이나 느낌은 무엇인지
+                    <br />
+                    <span style={{ fontWeight: 700 }}>감정과 느낌을 탐색</span>
+                    하며 작성하기
+                  </p>
+                </div>
+                <div>
+                  <textarea
+                    className="mainContent_Input"
+                    placeholder="텍스트를 입력해주세요"
+                    value={secondContent}
+                    onChange={(e) => setSecondContent(e.target.value)}
+                    style={{ resize: "none" }} // 사이즈 조절 방지
+                  ></textarea>
+                  <p className="text_num">{secondContent.length}/200</p>
+                </div>
               </div>
-            </div>
-            <div className="rightContent_container">
-              <div className="mainContent_Btn">Decisional</div>
-              <div className="maintext_container">
-                <p>
-                  문제해결을 위해{" "}
-                  <span style={{ fontWeight: 700 }}>
-                    미래에 대한 <br />
-                    행동과 변화를 결정
-                  </span>
-                  하여 작성하기
-                </p>
+              <div className="rightContent_container">
+                <div className="mainContent_Btn">Interpretive</div>
+                <div className="maintext_container">
+                  <p>
+                    각각의 일들이 시사하는 점이 무엇인지
+                    <br />
+                    <span style={{ fontWeight: 700 }}>해석과 분석</span>을 하며
+                    작성하기
+                  </p>
+                </div>
+                <div>
+                  <textarea
+                    className="mainContent_Input"
+                    placeholder="텍스트를 입력해주세요"
+                    value={thirdContent}
+                    onChange={(e) => setThirdContent(e.target.value)}
+                    style={{ resize: "none" }} // 사이즈 조절 방지
+                  ></textarea>
+                  <p className="text_num">{thirdContent.length}/200</p>
+                </div>
               </div>
-              <div>
-                <textarea
-                  className="mainContent_Input"
-                  placeholder="텍스트를 입력해주세요"
-                  value={fourContent}
-                  onChange={(e) => setFourContent(e.target.value)}
-                  style={{ resize: "none" }} // 사이즈 조절 방지
-                ></textarea>
-                <p className="text_num">{fourContent.length}/200</p>
+              <div className="rightContent_container">
+                <div className="mainContent_Btn">Decisional</div>
+                <div className="maintext_container">
+                  <p>
+                    문제해결을 위해{" "}
+                    <span style={{ fontWeight: 700 }}>
+                      미래에 대한 <br />
+                      행동과 변화를 결정
+                    </span>
+                    하여 작성하기
+                  </p>
+                </div>
+                <div>
+                  <textarea
+                    className="mainContent_Input"
+                    placeholder="텍스트를 입력해주세요"
+                    value={fourContent}
+                    onChange={(e) => setFourContent(e.target.value)}
+                    style={{ resize: "none" }} // 사이즈 조절 방지
+                  ></textarea>
+                  <p className="text_num">{fourContent.length}/200</p>
+                </div>
               </div>
             </div>
-          </div>
-        </GuideLineFourContent>
-        <WritingPageBtn>
-          <button
-            className="temporary_btn"
-            style={{
-              opacity:
-                isFirstContentFilled ||
-                isSecondContentFilled ||
-                isThirdContentFilled ||
-                isFourContentFilled
-                  ? 1
-                  : 0.5,
-            }}
-            disabled={
-              !isFirstContentFilled &&
-              !isSecondContentFilled &&
-              !isThirdContentFilled &&
-              !isFourContentFilled
-            }
-            onClick={handleTemporarySave}
-          >
-            임시 저장
-          </button>
-          <button
-            className="completed_btn"
-            style={{
-              opacity:
-                isFirstContentFilled &&
-                isSecondContentFilled &&
-                isThirdContentFilled &&
-                isFourContentFilled
-                  ? 1
-                  : 0.5,
-            }}
-            disabled={
-              !isFirstContentFilled ||
-              !isSecondContentFilled ||
-              !isThirdContentFilled ||
-              !isFourContentFilled
-            }
-            onClick={() => {
-              goToAttachPicture();
-            }}
-          >
-            작성 완료
-          </button>
-        </WritingPageBtn>
+          </GuideLineFourContent>
+          <WritingPageBtn>
+            <button
+              className="temporary_btn"
+              style={{
+                opacity:
+                  isFirstContentFilled ||
+                  isSecondContentFilled ||
+                  isThirdContentFilled ||
+                  isFourContentFilled
+                    ? 1
+                    : 0.5,
+              }}
+              disabled={
+                !isFirstContentFilled &&
+                !isSecondContentFilled &&
+                !isThirdContentFilled &&
+                !isFourContentFilled
+              }
+              onClick={handleTemporarySave}
+            >
+              임시 저장
+            </button>
+            <button
+              className="completed_btn"
+              style={{
+                opacity:
+                  isFirstContentFilled &&
+                  isSecondContentFilled &&
+                  isThirdContentFilled &&
+                  isFourContentFilled
+                    ? 1
+                    : 0.5,
+              }}
+              disabled={
+                !isFirstContentFilled ||
+                !isSecondContentFilled ||
+                !isThirdContentFilled ||
+                !isFourContentFilled
+              }
+              onClick={() => {
+                goToAttachPicture();
+              }}
+            >
+              작성 완료
+            </button>
+          </WritingPageBtn>
+        </div>
       </WritingPageWrap>
     </>
   );
diff --git a/src/pages/WritingPage/GuideLine/Performance.tsx b/src/pages/WritingPage/GuideLine/Performance.tsx
index 443932b..97faf03 100644
--- a/src/pages/WritingPage/GuideLine/Performance.tsx
+++ b/src/pages/WritingPage/GuideLine/Performance.tsx
@@ -106,206 +106,210 @@ export default function Performance() {
     <>
       <WritingPageWrap>
         <Header />
-        <div className="container">
-          <div className="title_container">
-            <div className="title_main">성과/수치 중심 회고</div>
-            <div className="title_content">
-              성과/수치 중심 회고는 보통 분기/일 년 회고를 할 때 많이 사용하는
-              회고예요
+        <div className="all-container">
+          <div className="container">
+            <div className="title_container">
+              <div className="title_main">성과/수치 중심 회고</div>
+              <div className="title_content">
+                성과/수치 중심 회고는 보통 분기/일 년 회고를 할 때 많이 사용하는
+                회고예요
+              </div>
             </div>
-          </div>
-          <GuideLinePersonalContent>
-            <div className="AllmainConten_container">
-              <div className="Content-Container">
-                <div className="maintext_container">
-                  연초(분기초)에 세운{" "}
-                  <span style={{ fontWeight: 700 }}>
-                    목표치를 몇% 달성하였는지
-                  </span>{" "}
-                  작성하기
+            <GuideLinePersonalContent>
+              <div className="AllmainConten_container">
+                <div className="Content-Container">
+                  <div className="maintext_container">
+                    연초(분기초)에 세운{" "}
+                    <span style={{ fontWeight: 700 }}>
+                      목표치를 몇% 달성하였는지
+                    </span>{" "}
+                    작성하기
+                  </div>
                 </div>
-              </div>
-              <div>
-                <textarea
-                  className="mainContent_Input"
-                  placeholder="텍스트를 입력해주세요"
-                  value={firstContent}
-                  onChange={(e) => setFirstContent(e.target.value)}
-                  style={{ resize: "none" }} // 사이즈 조절 방지
-                ></textarea>
-                <p className="text_num">{firstContent.length}/200</p>
-              </div>
-              <div className="Content-Container">
-                <div className="maintext_container">
-                  만일 높은(71~100%) 달성률을 기록했다면{" "}
-                  <span style={{ fontWeight: 700 }}>
-                    목표를 너무 낮게 잡은 것은 아닌지, 달성한 목표를 수정한다면
-                    무엇을 바꿔야 하는지
-                  </span>{" "}
-                  작성하기
+                <div>
+                  <textarea
+                    className="mainContent_Input"
+                    placeholder="텍스트를 입력해주세요"
+                    value={firstContent}
+                    onChange={(e) => setFirstContent(e.target.value)}
+                    style={{ resize: "none" }} // 사이즈 조절 방지
+                  ></textarea>
+                  <p className="text_num">{firstContent.length}/200</p>
                 </div>
-              </div>
-              <div>
-                <textarea
-                  className="mainContent_Input"
-                  placeholder="텍스트를 입력해주세요"
-                  value={secondContent}
-                  onChange={(e) => setSecondContent(e.target.value)}
-                  style={{ resize: "none" }} // 사이즈 조절 방지
-                ></textarea>
-                <p className="text_num">{secondContent.length}/200</p>
-              </div>
-              <div className="Content-Container">
-                <div className="maintext_container">
-                  목표를 달성하는 과정에서의{" "}
-                  <span style={{ fontWeight: 700 }}>기여 요인</span>은 무엇인지
-                  작성하기
+                <div className="Content-Container">
+                  <div className="maintext_container">
+                    만일 높은(71~100%) 달성률을 기록했다면{" "}
+                    <span style={{ fontWeight: 700 }}>
+                      목표를 너무 낮게 잡은 것은 아닌지, 달성한 목표를
+                      수정한다면 무엇을 바꿔야 하는지
+                    </span>{" "}
+                    작성하기
+                  </div>
                 </div>
-              </div>
-              <div>
-                <textarea
-                  className="mainContent_Input"
-                  placeholder="텍스트를 입력해주세요"
-                  value={thirdContent}
-                  onChange={(e) => setThirdContent(e.target.value)}
-                  style={{ resize: "none" }} // 사이즈 조절 방지
-                ></textarea>
-                <p className="text_num">{thirdContent.length}/200</p>
-              </div>
-              <div className="Content-Container">
-                <div className="maintext_container">
-                  목표를 달성하는 과정에서{" "}
-                  <span style={{ fontWeight: 700 }}>성공을 가로막은 것</span>은
-                  무엇인지 작성하기
+                <div>
+                  <textarea
+                    className="mainContent_Input"
+                    placeholder="텍스트를 입력해주세요"
+                    value={secondContent}
+                    onChange={(e) => setSecondContent(e.target.value)}
+                    style={{ resize: "none" }} // 사이즈 조절 방지
+                  ></textarea>
+                  <p className="text_num">{secondContent.length}/200</p>
                 </div>
-              </div>
-              <div>
-                <textarea
-                  className="mainContent_Input"
-                  placeholder="텍스트를 입력해주세요"
-                  value={fourContent}
-                  onChange={(e) => setFourContent(e.target.value)}
-                  style={{ resize: "none" }} // 사이즈 조절 방지
-                ></textarea>
-                <p className="text_num">{fourContent.length}/200</p>
-              </div>
-              <div className="Content-Container">
-                <div className="maintext_container">
-                  <span style={{ fontWeight: 700 }}>무엇을 개선</span>한다면, 더
-                  높은 성과를 달성할 수 있는지 작성하기
+                <div className="Content-Container">
+                  <div className="maintext_container">
+                    목표를 달성하는 과정에서의{" "}
+                    <span style={{ fontWeight: 700 }}>기여 요인</span>은
+                    무엇인지 작성하기
+                  </div>
                 </div>
-              </div>
-              <div>
-                <textarea
-                  className="mainContent_Input"
-                  placeholder="텍스트를 입력해주세요"
-                  value={fifthContent}
-                  onChange={(e) => setFifthContent(e.target.value)}
-                  style={{ resize: "none" }} // 사이즈 조절 방지
-                ></textarea>
-                <p className="text_num">{fifthContent.length}/200</p>
-              </div>
-              {/* 6부터 */}
-              <div className="Content-Container">
-                <div className="maintext_container">
-                  <span style={{ fontWeight: 700 }}>스스로 평가하는 성과</span>
-                  는 어떠한가?{" "}
-                  <span style={{ fontWeight: 700 }}>
-                    지난해(분기) 대비 얼마나 성장하였는지
-                  </span>{" "}
-                  작성하기
+                <div>
+                  <textarea
+                    className="mainContent_Input"
+                    placeholder="텍스트를 입력해주세요"
+                    value={thirdContent}
+                    onChange={(e) => setThirdContent(e.target.value)}
+                    style={{ resize: "none" }} // 사이즈 조절 방지
+                  ></textarea>
+                  <p className="text_num">{thirdContent.length}/200</p>
                 </div>
-              </div>
-              <div>
-                <textarea
-                  className="mainContent_Input"
-                  placeholder="텍스트를 입력해주세요"
-                  value={sixthContent}
-                  onChange={(e) => setSixthContent(e.target.value)}
-                  style={{ resize: "none" }} // 사이즈 조절 방지
-                ></textarea>
-                <p className="text_num">{sixthContent.length}/200</p>
-              </div>
-              <div className="Content-Container">
-                <div className="maintext_container">
-                  이번 교훈을 통해{" "}
-                  <span style={{ fontWeight: 700 }}>
-                    내년(다음 분기)에는 무엇을 바꿔야 하는지
-                  </span>{" "}
-                  작성하기
+                <div className="Content-Container">
+                  <div className="maintext_container">
+                    목표를 달성하는 과정에서{" "}
+                    <span style={{ fontWeight: 700 }}>성공을 가로막은 것</span>
+                    은 무엇인지 작성하기
+                  </div>
+                </div>
+                <div>
+                  <textarea
+                    className="mainContent_Input"
+                    placeholder="텍스트를 입력해주세요"
+                    value={fourContent}
+                    onChange={(e) => setFourContent(e.target.value)}
+                    style={{ resize: "none" }} // 사이즈 조절 방지
+                  ></textarea>
+                  <p className="text_num">{fourContent.length}/200</p>
+                </div>
+                <div className="Content-Container">
+                  <div className="maintext_container">
+                    <span style={{ fontWeight: 700 }}>무엇을 개선</span>한다면,
+                    더 높은 성과를 달성할 수 있는지 작성하기
+                  </div>
+                </div>
+                <div>
+                  <textarea
+                    className="mainContent_Input"
+                    placeholder="텍스트를 입력해주세요"
+                    value={fifthContent}
+                    onChange={(e) => setFifthContent(e.target.value)}
+                    style={{ resize: "none" }} // 사이즈 조절 방지
+                  ></textarea>
+                  <p className="text_num">{fifthContent.length}/200</p>
+                </div>
+                {/* 6부터 */}
+                <div className="Content-Container">
+                  <div className="maintext_container">
+                    <span style={{ fontWeight: 700 }}>
+                      스스로 평가하는 성과
+                    </span>
+                    는 어떠한가?{" "}
+                    <span style={{ fontWeight: 700 }}>
+                      지난해(분기) 대비 얼마나 성장하였는지
+                    </span>{" "}
+                    작성하기
+                  </div>
+                </div>
+                <div>
+                  <textarea
+                    className="mainContent_Input"
+                    placeholder="텍스트를 입력해주세요"
+                    value={sixthContent}
+                    onChange={(e) => setSixthContent(e.target.value)}
+                    style={{ resize: "none" }} // 사이즈 조절 방지
+                  ></textarea>
+                  <p className="text_num">{sixthContent.length}/200</p>
+                </div>
+                <div className="Content-Container">
+                  <div className="maintext_container">
+                    이번 교훈을 통해{" "}
+                    <span style={{ fontWeight: 700 }}>
+                      내년(다음 분기)에는 무엇을 바꿔야 하는지
+                    </span>{" "}
+                    작성하기
+                  </div>
+                </div>
+                <div>
+                  <textarea
+                    className="mainContent_Input"
+                    placeholder="텍스트를 입력해주세요"
+                    value={seventhContent}
+                    onChange={(e) => setSeventhContent(e.target.value)}
+                    style={{ resize: "none" }} // 사이즈 조절 방지
+                  ></textarea>
+                  <p className="text_num">{seventhContent.length}/200</p>
                 </div>
               </div>
-              <div>
-                <textarea
-                  className="mainContent_Input"
-                  placeholder="텍스트를 입력해주세요"
-                  value={seventhContent}
-                  onChange={(e) => setSeventhContent(e.target.value)}
-                  style={{ resize: "none" }} // 사이즈 조절 방지
-                ></textarea>
-                <p className="text_num">{seventhContent.length}/200</p>
-              </div>
-            </div>
-          </GuideLinePersonalContent>
+            </GuideLinePersonalContent>
+          </div>
+          <WritingPageBtn>
+            <button
+              className="temporary_btn"
+              style={{
+                opacity:
+                  isFirstContentFilled ||
+                  isSecondContentFilled ||
+                  isThirdContentFilled ||
+                  isFourContentFilled ||
+                  isFifthContentFilled ||
+                  isSixthContentFilled ||
+                  isSeventhContentFilled
+                    ? 1
+                    : 0.5,
+              }}
+              disabled={
+                !isFirstContentFilled &&
+                !isSecondContentFilled &&
+                !isThirdContentFilled &&
+                !isFourContentFilled &&
+                !isFifthContentFilled &&
+                !isSixthContentFilled &&
+                !isSeventhContentFilled
+              }
+              onClick={handleTemporarySave}
+            >
+              임시 저장
+            </button>
+            <button
+              className="completed_btn"
+              style={{
+                opacity:
+                  isFirstContentFilled &&
+                  isSecondContentFilled &&
+                  isThirdContentFilled &&
+                  isFourContentFilled &&
+                  isFifthContentFilled &&
+                  isSixthContentFilled &&
+                  isSeventhContentFilled
+                    ? 1
+                    : 0.5,
+              }}
+              disabled={
+                !isFirstContentFilled ||
+                !isSecondContentFilled ||
+                !isThirdContentFilled ||
+                !isFourContentFilled ||
+                !isFifthContentFilled ||
+                !isSixthContentFilled ||
+                !isSeventhContentFilled
+              }
+              onClick={() => {
+                goToAttachPicture();
+              }}
+            >
+              작성 완료
+            </button>
+          </WritingPageBtn>
         </div>
-        <WritingPageBtn>
-          <button
-            className="temporary_btn"
-            style={{
-              opacity:
-                isFirstContentFilled ||
-                isSecondContentFilled ||
-                isThirdContentFilled ||
-                isFourContentFilled ||
-                isFifthContentFilled ||
-                isSixthContentFilled ||
-                isSeventhContentFilled
-                  ? 1
-                  : 0.5,
-            }}
-            disabled={
-              !isFirstContentFilled &&
-              !isSecondContentFilled &&
-              !isThirdContentFilled &&
-              !isFourContentFilled &&
-              !isFifthContentFilled &&
-              !isSixthContentFilled &&
-              !isSeventhContentFilled
-            }
-            onClick={handleTemporarySave}
-          >
-            임시 저장
-          </button>
-          <button
-            className="completed_btn"
-            style={{
-              opacity:
-                isFirstContentFilled &&
-                isSecondContentFilled &&
-                isThirdContentFilled &&
-                isFourContentFilled &&
-                isFifthContentFilled &&
-                isSixthContentFilled &&
-                isSeventhContentFilled
-                  ? 1
-                  : 0.5,
-            }}
-            disabled={
-              !isFirstContentFilled ||
-              !isSecondContentFilled ||
-              !isThirdContentFilled ||
-              !isFourContentFilled ||
-              !isFifthContentFilled ||
-              !isSixthContentFilled ||
-              !isSeventhContentFilled
-            }
-            onClick={() => {
-              goToAttachPicture();
-            }}
-          >
-            작성 완료
-          </button>
-        </WritingPageBtn>
       </WritingPageWrap>
     </>
   );
diff --git a/src/pages/WritingPage/GuideLine/Personal.tsx b/src/pages/WritingPage/GuideLine/Personal.tsx
index f935a08..a949562 100644
--- a/src/pages/WritingPage/GuideLine/Personal.tsx
+++ b/src/pages/WritingPage/GuideLine/Personal.tsx
@@ -118,282 +118,288 @@ export default function Personal() {
     <>
       <WritingPageWrap>
         <Header />
-        <div className="container">
-          <div className="title_container">
-            <div className="title_main">개인적 회고</div>
-            <div className="title_content">
-              개인적 회고는 주로 일 년을 돌아보는 회고로, 개인이 보낸 한 해를
-              돌아보고 다음 한 해를 준비하기 좋은 회고예요
+        <div className="all-container">
+          <div className="container">
+            <div className="title_container">
+              <div className="title_main">개인적 회고</div>
+              <div className="title_content">
+                개인적 회고는 주로 일 년을 돌아보는 회고로, 개인이 보낸 한 해를
+                돌아보고 다음 한 해를 준비하기 좋은 회고예요
+              </div>
             </div>
-          </div>
-          <GuideLinePersonalContent>
-            <div className="AllmainConten_container">
-              <div className="Content-Container">
-                <div className="maintext_container">
-                  <span style={{ fontWeight: 700 }}>
-                    올해 가장 자랑스러운 일
-                  </span>
-                  을 작성하기
+            <GuideLinePersonalContent>
+              <div className="AllmainConten_container">
+                <div className="Content-Container">
+                  <div className="maintext_container">
+                    <span style={{ fontWeight: 700 }}>
+                      올해 가장 자랑스러운 일
+                    </span>
+                    을 작성하기
+                  </div>
                 </div>
-              </div>
-              <div>
-                <textarea
-                  className="mainContent_Input"
-                  placeholder="텍스트를 입력해주세요"
-                  value={firstContent}
-                  onChange={(e) => setFirstContent(e.target.value)}
-                  style={{ resize: "none" }} // 사이즈 조절 방지
-                ></textarea>
-                <p className="text_num">{firstContent.length}/200</p>
-              </div>
-              <div className="Content-Container">
-                <div className="maintext_container">
-                  <span style={{ fontWeight: 700 }}>올해 가장 감사한 일</span>을
-                  작성하기
+                <div>
+                  <textarea
+                    className="mainContent_Input"
+                    placeholder="텍스트를 입력해주세요"
+                    value={firstContent}
+                    onChange={(e) => setFirstContent(e.target.value)}
+                    style={{ resize: "none" }} // 사이즈 조절 방지
+                  ></textarea>
+                  <p className="text_num">{firstContent.length}/200</p>
                 </div>
-              </div>
-              <div>
-                <textarea
-                  className="mainContent_Input"
-                  placeholder="텍스트를 입력해주세요"
-                  value={secondContent}
-                  onChange={(e) => setSecondContent(e.target.value)}
-                  style={{ resize: "none" }} // 사이즈 조절 방지
-                ></textarea>
-                <p className="text_num">{secondContent.length}/200</p>
-              </div>
-              <div className="Content-Container">
-                <div className="maintext_container">
-                  <span style={{ fontWeight: 700 }}>올해 가장 즐겼던 일</span>을
-                  작성하기
+                <div className="Content-Container">
+                  <div className="maintext_container">
+                    <span style={{ fontWeight: 700 }}>올해 가장 감사한 일</span>
+                    을 작성하기
+                  </div>
                 </div>
-              </div>
-              <div>
-                <textarea
-                  className="mainContent_Input"
-                  placeholder="텍스트를 입력해주세요"
-                  value={thirdContent}
-                  onChange={(e) => setThirdContent(e.target.value)}
-                  style={{ resize: "none" }} // 사이즈 조절 방지
-                ></textarea>
-                <p className="text_num">{thirdContent.length}/200</p>
-              </div>
-              <div className="Content-Container">
-                <div className="maintext_container">
-                  <span style={{ fontWeight: 700 }}>뭘 더 잘할 수 있을지</span>{" "}
-                  작성하기
+                <div>
+                  <textarea
+                    className="mainContent_Input"
+                    placeholder="텍스트를 입력해주세요"
+                    value={secondContent}
+                    onChange={(e) => setSecondContent(e.target.value)}
+                    style={{ resize: "none" }} // 사이즈 조절 방지
+                  ></textarea>
+                  <p className="text_num">{secondContent.length}/200</p>
                 </div>
-              </div>
-              <div>
-                <textarea
-                  className="mainContent_Input"
-                  placeholder="텍스트를 입력해주세요"
-                  value={fourContent}
-                  onChange={(e) => setFourContent(e.target.value)}
-                  style={{ resize: "none" }} // 사이즈 조절 방지
-                ></textarea>
-                <p className="text_num">{fourContent.length}/200</p>
-              </div>
-              <div className="Content-Container">
-                <div className="maintext_container">
-                  <span style={{ fontWeight: 700 }}>올해 극복해낸 챌린지</span>
-                  는(난관은) 어떤 것인지 작성하기
+                <div className="Content-Container">
+                  <div className="maintext_container">
+                    <span style={{ fontWeight: 700 }}>올해 가장 즐겼던 일</span>
+                    을 작성하기
+                  </div>
                 </div>
-              </div>
-              <div>
-                <textarea
-                  className="mainContent_Input"
-                  placeholder="텍스트를 입력해주세요"
-                  value={fifthContent}
-                  onChange={(e) => setFifthContent(e.target.value)}
-                  style={{ resize: "none" }} // 사이즈 조절 방지
-                ></textarea>
-                <p className="text_num">{fifthContent.length}/200</p>
-              </div>
-              {/* 6부터 */}
-              <div className="Content-Container">
-                <div className="maintext_container">
-                  <span style={{ fontWeight: 700 }}>올해 얻은 교훈</span>은 어떤
-                  것인지,{" "}
-                  <span style={{ fontWeight: 700 }}>어떻게 성장했을지</span>{" "}
-                  작성하기
+                <div>
+                  <textarea
+                    className="mainContent_Input"
+                    placeholder="텍스트를 입력해주세요"
+                    value={thirdContent}
+                    onChange={(e) => setThirdContent(e.target.value)}
+                    style={{ resize: "none" }} // 사이즈 조절 방지
+                  ></textarea>
+                  <p className="text_num">{thirdContent.length}/200</p>
                 </div>
-              </div>
-              <div>
-                <textarea
-                  className="mainContent_Input"
-                  placeholder="텍스트를 입력해주세요"
-                  value={sixthContent}
-                  onChange={(e) => setSixthContent(e.target.value)}
-                  style={{ resize: "none" }} // 사이즈 조절 방지
-                ></textarea>
-                <p className="text_num">{sixthContent.length}/200</p>
-              </div>
-              <div className="Content-Container">
-                <div className="maintext_container">
-                  <span style={{ fontWeight: 700 }}>
-                    하겠다고 해놓고 안 한 일
-                  </span>
-                  은 어떤 것인지 작성하기
+                <div className="Content-Container">
+                  <div className="maintext_container">
+                    <span style={{ fontWeight: 700 }}>
+                      뭘 더 잘할 수 있을지
+                    </span>{" "}
+                    작성하기
+                  </div>
                 </div>
-              </div>
-              <div>
-                <textarea
-                  className="mainContent_Input"
-                  placeholder="텍스트를 입력해주세요"
-                  value={seventhContent}
-                  onChange={(e) => setSeventhContent(e.target.value)}
-                  style={{ resize: "none" }} // 사이즈 조절 방지
-                ></textarea>
-                <p className="text_num">{seventhContent.length}/200</p>
-              </div>
-              <div className="Content-Container">
-                <div className="maintext_container">
-                  <span style={{ fontWeight: 700 }}>다시 하고싶은 일</span>은
-                  어떤 것인지 작성하기
+                <div>
+                  <textarea
+                    className="mainContent_Input"
+                    placeholder="텍스트를 입력해주세요"
+                    value={fourContent}
+                    onChange={(e) => setFourContent(e.target.value)}
+                    style={{ resize: "none" }} // 사이즈 조절 방지
+                  ></textarea>
+                  <p className="text_num">{fourContent.length}/200</p>
                 </div>
-              </div>
-              <div>
-                <textarea
-                  className="mainContent_Input"
-                  placeholder="텍스트를 입력해주세요"
-                  value={eighthContent}
-                  onChange={(e) => setEighthContent(e.target.value)}
-                  style={{ resize: "none" }} // 사이즈 조절 방지
-                ></textarea>
-                <p className="text_num">{eighthContent.length}/200</p>
-              </div>
-              <div className="Content-Container">
-                <div className="maintext_container">
-                  <span style={{ fontWeight: 700 }}>
-                    내가 집중했지만 내게 도움이 되지 않았던 일
-                  </span>
-                  은 어떤 것인지 작성하기
+                <div className="Content-Container">
+                  <div className="maintext_container">
+                    <span style={{ fontWeight: 700 }}>
+                      올해 극복해낸 챌린지
+                    </span>
+                    는(난관은) 어떤 것인지 작성하기
+                  </div>
                 </div>
-              </div>
-              <div>
-                <textarea
-                  className="mainContent_Input"
-                  placeholder="텍스트를 입력해주세요"
-                  value={ninthContent}
-                  onChange={(e) => setNinthContent(e.target.value)}
-                  style={{ resize: "none" }} // 사이즈 조절 방지
-                ></textarea>
-                <p className="text_num">{ninthContent.length}/200</p>
-              </div>
-              <div className="Content-Container">
-                <div className="maintext_container">
-                  <span style={{ fontWeight: 700 }}>
-                    삶에서 더 하고 싶은 일
-                  </span>
-                  은 어떤 것인지 작성하기
+                <div>
+                  <textarea
+                    className="mainContent_Input"
+                    placeholder="텍스트를 입력해주세요"
+                    value={fifthContent}
+                    onChange={(e) => setFifthContent(e.target.value)}
+                    style={{ resize: "none" }} // 사이즈 조절 방지
+                  ></textarea>
+                  <p className="text_num">{fifthContent.length}/200</p>
                 </div>
-              </div>
-              <div>
-                <textarea
-                  className="mainContent_Input"
-                  placeholder="텍스트를 입력해주세요"
-                  value={tenthContent}
-                  onChange={(e) => setTenthContent(e.target.value)}
-                  style={{ resize: "none" }} // 사이즈 조절 방지
-                ></textarea>
-                <p className="text_num">{tenthContent.length}/200</p>
-              </div>
-              <div className="Content-Container">
-                <div className="maintext_container">
-                  <span style={{ fontWeight: 700 }}>
-                    삶에서 덜 하고 싶은 일
-                  </span>
-                  은 어떤 것인지 작성하기
+                {/* 6부터 */}
+                <div className="Content-Container">
+                  <div className="maintext_container">
+                    <span style={{ fontWeight: 700 }}>올해 얻은 교훈</span>은
+                    어떤 것인지,{" "}
+                    <span style={{ fontWeight: 700 }}>어떻게 성장했을지</span>{" "}
+                    작성하기
+                  </div>
+                </div>
+                <div>
+                  <textarea
+                    className="mainContent_Input"
+                    placeholder="텍스트를 입력해주세요"
+                    value={sixthContent}
+                    onChange={(e) => setSixthContent(e.target.value)}
+                    style={{ resize: "none" }} // 사이즈 조절 방지
+                  ></textarea>
+                  <p className="text_num">{sixthContent.length}/200</p>
+                </div>
+                <div className="Content-Container">
+                  <div className="maintext_container">
+                    <span style={{ fontWeight: 700 }}>
+                      하겠다고 해놓고 안 한 일
+                    </span>
+                    은 어떤 것인지 작성하기
+                  </div>
+                </div>
+                <div>
+                  <textarea
+                    className="mainContent_Input"
+                    placeholder="텍스트를 입력해주세요"
+                    value={seventhContent}
+                    onChange={(e) => setSeventhContent(e.target.value)}
+                    style={{ resize: "none" }} // 사이즈 조절 방지
+                  ></textarea>
+                  <p className="text_num">{seventhContent.length}/200</p>
+                </div>
+                <div className="Content-Container">
+                  <div className="maintext_container">
+                    <span style={{ fontWeight: 700 }}>다시 하고싶은 일</span>은
+                    어떤 것인지 작성하기
+                  </div>
+                </div>
+                <div>
+                  <textarea
+                    className="mainContent_Input"
+                    placeholder="텍스트를 입력해주세요"
+                    value={eighthContent}
+                    onChange={(e) => setEighthContent(e.target.value)}
+                    style={{ resize: "none" }} // 사이즈 조절 방지
+                  ></textarea>
+                  <p className="text_num">{eighthContent.length}/200</p>
+                </div>
+                <div className="Content-Container">
+                  <div className="maintext_container">
+                    <span style={{ fontWeight: 700 }}>
+                      내가 집중했지만 내게 도움이 되지 않았던 일
+                    </span>
+                    은 어떤 것인지 작성하기
+                  </div>
+                </div>
+                <div>
+                  <textarea
+                    className="mainContent_Input"
+                    placeholder="텍스트를 입력해주세요"
+                    value={ninthContent}
+                    onChange={(e) => setNinthContent(e.target.value)}
+                    style={{ resize: "none" }} // 사이즈 조절 방지
+                  ></textarea>
+                  <p className="text_num">{ninthContent.length}/200</p>
+                </div>
+                <div className="Content-Container">
+                  <div className="maintext_container">
+                    <span style={{ fontWeight: 700 }}>
+                      삶에서 더 하고 싶은 일
+                    </span>
+                    은 어떤 것인지 작성하기
+                  </div>
+                </div>
+                <div>
+                  <textarea
+                    className="mainContent_Input"
+                    placeholder="텍스트를 입력해주세요"
+                    value={tenthContent}
+                    onChange={(e) => setTenthContent(e.target.value)}
+                    style={{ resize: "none" }} // 사이즈 조절 방지
+                  ></textarea>
+                  <p className="text_num">{tenthContent.length}/200</p>
+                </div>
+                <div className="Content-Container">
+                  <div className="maintext_container">
+                    <span style={{ fontWeight: 700 }}>
+                      삶에서 덜 하고 싶은 일
+                    </span>
+                    은 어떤 것인지 작성하기
+                  </div>
+                </div>
+                <div>
+                  <textarea
+                    className="mainContent_Input"
+                    placeholder="텍스트를 입력해주세요"
+                    value={eleventhContent}
+                    onChange={(e) => setEleventhContent(e.target.value)}
+                    style={{ resize: "none" }} // 사이즈 조절 방지
+                  ></textarea>
+                  <p className="text_num">{eleventhContent.length}/200</p>
                 </div>
               </div>
-              <div>
-                <textarea
-                  className="mainContent_Input"
-                  placeholder="텍스트를 입력해주세요"
-                  value={eleventhContent}
-                  onChange={(e) => setEleventhContent(e.target.value)}
-                  style={{ resize: "none" }} // 사이즈 조절 방지
-                ></textarea>
-                <p className="text_num">{eleventhContent.length}/200</p>
-              </div>
-            </div>
-          </GuideLinePersonalContent>
+            </GuideLinePersonalContent>
+          </div>
+          <WritingPageBtn>
+            <button
+              className="temporary_btn"
+              style={{
+                opacity:
+                  isFirstContentFilled ||
+                  isSecondContentFilled ||
+                  isThirdContentFilled ||
+                  isFourContentFilled ||
+                  isFifthContentFilled ||
+                  isSixthContentFilled ||
+                  isSeventhContentFilled ||
+                  isEighthContentFilled ||
+                  isNinthContentFilled ||
+                  isTenthContentFilled ||
+                  isEleventhContentFilled
+                    ? 1
+                    : 0.5,
+              }}
+              disabled={
+                !isFirstContentFilled &&
+                !isSecondContentFilled &&
+                !isThirdContentFilled &&
+                !isFourContentFilled &&
+                !isFifthContentFilled &&
+                !isSixthContentFilled &&
+                !isSeventhContentFilled &&
+                !isEighthContentFilled &&
+                !isNinthContentFilled &&
+                !isTenthContentFilled &&
+                !isEleventhContentFilled
+              }
+              onClick={handleTemporarySave}
+            >
+              임시 저장
+            </button>
+            <button
+              className="completed_btn"
+              style={{
+                opacity:
+                  isFirstContentFilled &&
+                  isSecondContentFilled &&
+                  isThirdContentFilled &&
+                  isFourContentFilled &&
+                  isFifthContentFilled &&
+                  isSixthContentFilled &&
+                  isSeventhContentFilled &&
+                  isEighthContentFilled &&
+                  isNinthContentFilled &&
+                  isTenthContentFilled &&
+                  isEleventhContentFilled
+                    ? 1
+                    : 0.5,
+              }}
+              disabled={
+                !isFirstContentFilled ||
+                !isSecondContentFilled ||
+                !isThirdContentFilled ||
+                !isFourContentFilled ||
+                !isFifthContentFilled ||
+                !isSixthContentFilled ||
+                !isSeventhContentFilled ||
+                !isEighthContentFilled ||
+                !isNinthContentFilled ||
+                !isTenthContentFilled ||
+                !isEleventhContentFilled
+              }
+              onClick={() => {
+                goToAttachPicture();
+              }}
+            >
+              작성 완료
+            </button>
+          </WritingPageBtn>
         </div>
-        <WritingPageBtn>
-          <button
-            className="temporary_btn"
-            style={{
-              opacity:
-                isFirstContentFilled ||
-                isSecondContentFilled ||
-                isThirdContentFilled ||
-                isFourContentFilled ||
-                isFifthContentFilled ||
-                isSixthContentFilled ||
-                isSeventhContentFilled ||
-                isEighthContentFilled ||
-                isNinthContentFilled ||
-                isTenthContentFilled ||
-                isEleventhContentFilled
-                  ? 1
-                  : 0.5,
-            }}
-            disabled={
-              !isFirstContentFilled &&
-              !isSecondContentFilled &&
-              !isThirdContentFilled &&
-              !isFourContentFilled &&
-              !isFifthContentFilled &&
-              !isSixthContentFilled &&
-              !isSeventhContentFilled &&
-              !isEighthContentFilled &&
-              !isNinthContentFilled &&
-              !isTenthContentFilled &&
-              !isEleventhContentFilled
-            }
-            onClick={handleTemporarySave}
-          >
-            임시 저장
-          </button>
-          <button
-            className="completed_btn"
-            style={{
-              opacity:
-                isFirstContentFilled &&
-                isSecondContentFilled &&
-                isThirdContentFilled &&
-                isFourContentFilled &&
-                isFifthContentFilled &&
-                isSixthContentFilled &&
-                isSeventhContentFilled &&
-                isEighthContentFilled &&
-                isNinthContentFilled &&
-                isTenthContentFilled &&
-                isEleventhContentFilled
-                  ? 1
-                  : 0.5,
-            }}
-            disabled={
-              !isFirstContentFilled ||
-              !isSecondContentFilled ||
-              !isThirdContentFilled ||
-              !isFourContentFilled ||
-              !isFifthContentFilled ||
-              !isSixthContentFilled ||
-              !isSeventhContentFilled ||
-              !isEighthContentFilled ||
-              !isNinthContentFilled ||
-              !isTenthContentFilled ||
-              !isEleventhContentFilled
-            }
-            onClick={() => {
-              goToAttachPicture();
-            }}
-          >
-            작성 완료
-          </button>
-        </WritingPageBtn>
       </WritingPageWrap>
     </>
   );
diff --git a/src/pages/WritingPage/GuideLine/TIL.tsx b/src/pages/WritingPage/GuideLine/TIL.tsx
index 7636b6c..e4369d7 100644
--- a/src/pages/WritingPage/GuideLine/TIL.tsx
+++ b/src/pages/WritingPage/GuideLine/TIL.tsx
@@ -91,123 +91,126 @@ export default function TIL() {
     <>
       <WritingPageWrap>
         <Header />
-        <div className="container">
-          <div className="title_container">
-            <div className="title_main">TIL 회고</div>
-            <div className="title_content">
-              TIL 회고는 Today I Learned의 줄임말로 매일의 배움을 기록하는
-              회고예요
-            </div>
-          </div>
-          <GuideLineTheeContent>
-            <div className="AllmainConten_container">
-              <div className="leftContent_container">
-                <div className="mainContent_Btn">잘한 점</div>
-                <div className="maintext_container">
-                  <p>
-                    <span style={{ fontWeight: 700 }}>성취</span> - 오늘의 나는
-                    <br />
-                    무엇을 잘했는지 작성하기
-                  </p>
-                </div>
-                <div>
-                  <textarea
-                    className="mainContent_Input"
-                    placeholder="텍스트를 입력해주세요"
-                    value={firstContent}
-                    onChange={(e) => setContinueContent(e.target.value)}
-                    style={{ resize: "none" }} // 사이즈 조절 방지
-                  ></textarea>
-                  <p className="text_num">{firstContent.length}/200</p>
-                </div>
+        <div className="all-container">
+          <div className="container">
+            <div className="title_container">
+              <div className="title_main">TIL 회고</div>
+              <div className="title_content">
+                TIL 회고는 Today I Learned의 줄임말로 매일의 배움을 기록하는
+                회고예요
               </div>
-              <div className="middleContent_container">
-                <div className="mainContent_Btn">개선 점</div>
-                <div className="maintext_container">
-                  <p>
-                    <span style={{ fontWeight: 700 }}>개선</span> - 오늘의 나는
-                    어떤 문제를 겪었는지,
-                    <br />
-                    앞으로 어떻게 해결할 것인지 작성하기
-                  </p>
-                </div>
-                <div>
-                  <textarea
-                    className="mainContent_Input"
-                    placeholder="텍스트를 입력해주세요"
-                    value={secondContent}
-                    onChange={(e) => setSecondContent(e.target.value)}
-                    style={{ resize: "none" }} // 사이즈 조절 방지
-                  ></textarea>
-                  <p className="text_num">{secondContent.length}/200</p>
+            </div>
+            <GuideLineTheeContent>
+              <div className="AllmainConten_container">
+                <div className="leftContent_container">
+                  <div className="mainContent_Btn">잘한 점</div>
+                  <div className="maintext_container">
+                    <p>
+                      <span style={{ fontWeight: 700 }}>성취</span> - 오늘의
+                      나는
+                      <br />
+                      무엇을 잘했는지 작성하기
+                    </p>
+                  </div>
+                  <div>
+                    <textarea
+                      className="mainContent_Input"
+                      placeholder="텍스트를 입력해주세요"
+                      value={firstContent}
+                      onChange={(e) => setContinueContent(e.target.value)}
+                      style={{ resize: "none" }} // 사이즈 조절 방지
+                    ></textarea>
+                    <p className="text_num">{firstContent.length}/200</p>
+                  </div>
                 </div>
-              </div>
-              <div className="rightContent_container">
-                <div className="mainContent_Btn">배운 점</div>
-                <div className="maintext_container">
-                  <p>
-                    <span style={{ fontWeight: 700 }}>학습</span> - 오늘의
-                    일에서
-                    <br />
-                    나는 어떤 것을 배웠는지 작성하기
-                  </p>
+                <div className="middleContent_container">
+                  <div className="mainContent_Btn">개선 점</div>
+                  <div className="maintext_container">
+                    <p>
+                      <span style={{ fontWeight: 700 }}>개선</span> - 오늘의
+                      나는 어떤 문제를 겪었는지,
+                      <br />
+                      앞으로 어떻게 해결할 것인지 작성하기
+                    </p>
+                  </div>
+                  <div>
+                    <textarea
+                      className="mainContent_Input"
+                      placeholder="텍스트를 입력해주세요"
+                      value={secondContent}
+                      onChange={(e) => setSecondContent(e.target.value)}
+                      style={{ resize: "none" }} // 사이즈 조절 방지
+                    ></textarea>
+                    <p className="text_num">{secondContent.length}/200</p>
+                  </div>
                 </div>
-                <div>
-                  <textarea
-                    className="mainContent_Input"
-                    placeholder="텍스트를 입력해주세요"
-                    value={thirdContent}
-                    onChange={(e) => setThirdContent(e.target.value)}
-                    style={{ resize: "none" }} // 사이즈 조절 방지
-                  ></textarea>
-                  <p className="text_num">{thirdContent.length}/200</p>
+                <div className="rightContent_container">
+                  <div className="mainContent_Btn">배운 점</div>
+                  <div className="maintext_container">
+                    <p>
+                      <span style={{ fontWeight: 700 }}>학습</span> - 오늘의
+                      일에서
+                      <br />
+                      나는 어떤 것을 배웠는지 작성하기
+                    </p>
+                  </div>
+                  <div>
+                    <textarea
+                      className="mainContent_Input"
+                      placeholder="텍스트를 입력해주세요"
+                      value={thirdContent}
+                      onChange={(e) => setThirdContent(e.target.value)}
+                      style={{ resize: "none" }} // 사이즈 조절 방지
+                    ></textarea>
+                    <p className="text_num">{thirdContent.length}/200</p>
+                  </div>
                 </div>
               </div>
-            </div>
-          </GuideLineTheeContent>
+            </GuideLineTheeContent>
+          </div>
+          <WritingPageBtn>
+            <button
+              className="temporary_btn"
+              style={{
+                opacity:
+                  isFirstContentFilled ||
+                  isSecondContentFilled ||
+                  isThirdContentFilled
+                    ? 1
+                    : 0.5,
+              }}
+              disabled={
+                !isFirstContentFilled &&
+                !isSecondContentFilled &&
+                !isThirdContentFilled
+              }
+              onClick={handleTemporarySave}
+            >
+              임시 저장
+            </button>
+            <button
+              className="completed_btn"
+              style={{
+                opacity:
+                  isFirstContentFilled &&
+                  isSecondContentFilled &&
+                  isThirdContentFilled
+                    ? 1
+                    : 0.5,
+              }}
+              disabled={
+                !isFirstContentFilled ||
+                !isSecondContentFilled ||
+                !isThirdContentFilled
+              }
+              onClick={() => {
+                goToAttachPicture();
+              }}
+            >
+              작성 완료
+            </button>
+          </WritingPageBtn>
         </div>
-        <WritingPageBtn>
-          <button
-            className="temporary_btn"
-            style={{
-              opacity:
-                isFirstContentFilled ||
-                isSecondContentFilled ||
-                isThirdContentFilled
-                  ? 1
-                  : 0.5,
-            }}
-            disabled={
-              !isFirstContentFilled &&
-              !isSecondContentFilled &&
-              !isThirdContentFilled
-            }
-            onClick={handleTemporarySave}
-          >
-            임시 저장
-          </button>
-          <button
-            className="completed_btn"
-            style={{
-              opacity:
-                isFirstContentFilled &&
-                isSecondContentFilled &&
-                isThirdContentFilled
-                  ? 1
-                  : 0.5,
-            }}
-            disabled={
-              !isFirstContentFilled ||
-              !isSecondContentFilled ||
-              !isThirdContentFilled
-            }
-            onClick={() => {
-              goToAttachPicture();
-            }}
-          >
-            작성 완료
-          </button>
-        </WritingPageBtn>
       </WritingPageWrap>
     </>
   );
diff --git a/src/pages/WritingPage/GuideLine/YWT.tsx b/src/pages/WritingPage/GuideLine/YWT.tsx
index a814c81..889ad09 100644
--- a/src/pages/WritingPage/GuideLine/YWT.tsx
+++ b/src/pages/WritingPage/GuideLine/YWT.tsx
@@ -91,135 +91,137 @@ export default function YWT() {
     <>
       <WritingPageWrap>
         <Header />
-        <div className="container">
-          <div className="title_container">
-            <div className="title_main">YWT 회고</div>
-            <div className="title_content">
-              YWT는 일본 도요타에서 사용한 방식으로 짧게 진행되는 회고예요
-            </div>
-          </div>
-          <GuideLineThreeContent>
-            <div className="AllmainConten_container">
-              <div className="leftContent_container">
-                <div className="mainContent_Btn">
-                  한 일<br />
-                  (やったこと-yattakoto)
-                </div>
-                <div className="maintext_container">
-                  <p style={{ fontWeight: 700 }}>
-                    일을 통해 명확히 알게 되었거나
-                  </p>
-                  <p>
-                    <span style={{ fontWeight: 700 }}>이해한 부분</span>{" "}
-                    작성하기
-                  </p>
-                </div>
-                <div>
-                  <textarea
-                    className="mainContent_Input"
-                    placeholder="텍스트를 입력해주세요"
-                    value={firstContent}
-                    onChange={(e) => setContinueContent(e.target.value)}
-                    style={{ resize: "none" }} // 사이즈 조절 방지
-                  ></textarea>
-                  <p className="text_num">{firstContent.length}/200</p>
-                </div>
+        <div className="all-container">
+          <div className="container">
+            <div className="title_container">
+              <div className="title_main">YWT 회고</div>
+              <div className="title_content">
+                YWT는 일본 도요타에서 사용한 방식으로 짧게 진행되는 회고예요
               </div>
-              <div className="middleContent_container">
-                <div className="mainContent_Btn">
-                  배운 것들
-                  <br />
-                  (わかったこと-wakattakoto)
+            </div>
+            <GuideLineThreeContent>
+              <div className="AllmainConten_container">
+                <div className="leftContent_container">
+                  <div className="mainContent_Btn">
+                    한 일<br />
+                    (やったこと-yattakoto)
+                  </div>
+                  <div className="maintext_container">
+                    <p style={{ fontWeight: 700 }}>
+                      일을 통해 명확히 알게 되었거나
+                    </p>
+                    <p>
+                      <span style={{ fontWeight: 700 }}>이해한 부분</span>{" "}
+                      작성하기
+                    </p>
+                  </div>
+                  <div>
+                    <textarea
+                      className="mainContent_Input"
+                      placeholder="텍스트를 입력해주세요"
+                      value={firstContent}
+                      onChange={(e) => setContinueContent(e.target.value)}
+                      style={{ resize: "none" }} // 사이즈 조절 방지
+                    ></textarea>
+                    <p className="text_num">{firstContent.length}/200</p>
+                  </div>
                 </div>
-                <div className="maintext_container">
-                  <p>
-                    <span style={{ fontWeight: 700 }}>배운 점과 시사점</span>{" "}
-                    작성하기
-                    <br />
+                <div className="middleContent_container">
+                  <div className="mainContent_Btn">
+                    배운 것들
                     <br />
-                  </p>
+                    (わかったこと-wakattakoto)
+                  </div>
+                  <div className="maintext_container">
+                    <p>
+                      <span style={{ fontWeight: 700 }}>배운 점과 시사점</span>{" "}
+                      작성하기
+                      <br />
+                      <br />
+                    </p>
+                  </div>
+                  <div>
+                    <textarea
+                      className="mainContent_Input"
+                      placeholder="텍스트를 입력해주세요"
+                      value={secondContent}
+                      onChange={(e) => setSecondContent(e.target.value)}
+                      style={{ resize: "none" }} // 사이즈 조절 방지
+                    ></textarea>
+                    <p className="text_num">{secondContent.length}/200</p>
+                  </div>
                 </div>
-                <div>
-                  <textarea
-                    className="mainContent_Input"
-                    placeholder="텍스트를 입력해주세요"
-                    value={secondContent}
-                    onChange={(e) => setSecondContent(e.target.value)}
-                    style={{ resize: "none" }} // 사이즈 조절 방지
-                  ></textarea>
-                  <p className="text_num">{secondContent.length}/200</p>
+                <div className="rightContent_container">
+                  <div className="mainContent_Btn">
+                    앞으로 할 일<br />
+                    (つぎにやること-tsuginiyarukoto)
+                  </div>
+                  <div className="maintext_container">
+                    <p style={{ fontWeight: 700 }}>응용하여 배운 것을</p>
+                    <p>
+                      <span style={{ fontWeight: 700 }}>
+                        어디에 어떻게 적용할 지
+                      </span>{" "}
+                      작성하기
+                    </p>
+                  </div>
+                  <div>
+                    <textarea
+                      className="mainContent_Input"
+                      placeholder="텍스트를 입력해주세요"
+                      value={thirdContent}
+                      onChange={(e) => setThirdContent(e.target.value)}
+                      style={{ resize: "none" }} // 사이즈 조절 방지
+                    ></textarea>
+                    <p className="text_num">{thirdContent.length}/200</p>
+                  </div>
                 </div>
               </div>
-              <div className="rightContent_container">
-                <div className="mainContent_Btn">
-                  앞으로 할 일<br />
-                  (つぎにやること-tsuginiyarukoto)
-                </div>
-                <div className="maintext_container">
-                  <p style={{ fontWeight: 700 }}>응용하여 배운 것을</p>
-                  <p>
-                    <span style={{ fontWeight: 700 }}>
-                      어디에 어떻게 적용할 지
-                    </span>{" "}
-                    작성하기
-                  </p>
-                </div>
-                <div>
-                  <textarea
-                    className="mainContent_Input"
-                    placeholder="텍스트를 입력해주세요"
-                    value={thirdContent}
-                    onChange={(e) => setThirdContent(e.target.value)}
-                    style={{ resize: "none" }} // 사이즈 조절 방지
-                  ></textarea>
-                  <p className="text_num">{thirdContent.length}/200</p>
-                </div>
-              </div>
-            </div>
-          </GuideLineThreeContent>
+            </GuideLineThreeContent>
+          </div>
+          <WritingPageBtn>
+            <button
+              className="temporary_btn"
+              style={{
+                opacity:
+                  isFirstContentFilled ||
+                  isSecondContentFilled ||
+                  isThirdContentFilled
+                    ? 1
+                    : 0.5,
+              }}
+              disabled={
+                !isFirstContentFilled &&
+                !isSecondContentFilled &&
+                !isThirdContentFilled
+              }
+              onClick={handleTemporarySave}
+            >
+              임시 저장
+            </button>
+            <button
+              className="completed_btn"
+              style={{
+                opacity:
+                  isFirstContentFilled &&
+                  isSecondContentFilled &&
+                  isThirdContentFilled
+                    ? 1
+                    : 0.5,
+              }}
+              disabled={
+                !isFirstContentFilled ||
+                !isSecondContentFilled ||
+                !isThirdContentFilled
+              }
+              onClick={() => {
+                goToAttachPicture();
+              }}
+            >
+              작성 완료
+            </button>
+          </WritingPageBtn>
         </div>
-        <WritingPageBtn>
-          <button
-            className="temporary_btn"
-            style={{
-              opacity:
-                isFirstContentFilled ||
-                isSecondContentFilled ||
-                isThirdContentFilled
-                  ? 1
-                  : 0.5,
-            }}
-            disabled={
-              !isFirstContentFilled &&
-              !isSecondContentFilled &&
-              !isThirdContentFilled
-            }
-            onClick={handleTemporarySave}
-          >
-            임시 저장
-          </button>
-          <button
-            className="completed_btn"
-            style={{
-              opacity:
-                isFirstContentFilled &&
-                isSecondContentFilled &&
-                isThirdContentFilled
-                  ? 1
-                  : 0.5,
-            }}
-            disabled={
-              !isFirstContentFilled ||
-              !isSecondContentFilled ||
-              !isThirdContentFilled
-            }
-            onClick={() => {
-              goToAttachPicture();
-            }}
-          >
-            작성 완료
-          </button>
-        </WritingPageBtn>
       </WritingPageWrap>
     </>
   );
diff --git a/src/pages/WritingPage/StepByStep/AAR.tsx b/src/pages/WritingPage/StepByStep/AAR.tsx
index 77d8edf..2506a66 100644
--- a/src/pages/WritingPage/StepByStep/AAR.tsx
+++ b/src/pages/WritingPage/StepByStep/AAR.tsx
@@ -29,54 +29,56 @@ export default function AAR() {
     <>
       <WritingPageWrap>
         <Header />
-        <div className="container">
-          <div className="title_container" style={{ marginRight: "170px" }}>
-            <div className="title_main">AAR 회고</div>
-            <div className="title_content">
-              AAR은 After Action Review/Report의 줄임말로 짧은 시간 내에
-              유연하고 편하게 진행되는 회고예요
+        <div className="all-container">
+          <div className="container">
+            <div className="title_container" style={{ marginRight: "170px" }}>
+              <div className="title_main">AAR 회고</div>
+              <div className="title_content">
+                AAR은 After Action Review/Report의 줄임말로 짧은 시간 내에
+                유연하고 편하게 진행되는 회고예요
+              </div>
             </div>
+            {currentStep === 1 && (
+              <AAR1
+                content={content}
+                setContent={setContent}
+                handleComplete={handleComplete}
+                inputContent={inputContent}
+                setInputContent={setInputContent}
+                isContentFilled={isContentFilled}
+              />
+            )}
+            {currentStep === 2 && (
+              <AAR2
+                content={content}
+                setContent={setContent}
+                handleComplete={handleComplete}
+                inputContent={inputContent}
+                setInputContent={setInputContent}
+                isContentFilled={isContentFilled}
+              />
+            )}
+            {currentStep === 3 && (
+              <AAR3
+                content={content}
+                setContent={setContent}
+                handleComplete={handleComplete}
+                inputContent={inputContent}
+                setInputContent={setInputContent}
+                isContentFilled={isContentFilled}
+              />
+            )}
+            {currentStep === 4 && (
+              <AAR4
+                content={content}
+                setContent={setContent}
+                handleComplete={handleComplete}
+                inputContent={inputContent}
+                setInputContent={setInputContent}
+                isContentFilled={isContentFilled}
+              />
+            )}
           </div>
-          {currentStep === 1 && (
-            <AAR1
-              content={content}
-              setContent={setContent}
-              handleComplete={handleComplete}
-              inputContent={inputContent}
-              setInputContent={setInputContent}
-              isContentFilled={isContentFilled}
-            />
-          )}
-          {currentStep === 2 && (
-            <AAR2
-              content={content}
-              setContent={setContent}
-              handleComplete={handleComplete}
-              inputContent={inputContent}
-              setInputContent={setInputContent}
-              isContentFilled={isContentFilled}
-            />
-          )}
-          {currentStep === 3 && (
-            <AAR3
-              content={content}
-              setContent={setContent}
-              handleComplete={handleComplete}
-              inputContent={inputContent}
-              setInputContent={setInputContent}
-              isContentFilled={isContentFilled}
-            />
-          )}
-          {currentStep === 4 && (
-            <AAR4
-              content={content}
-              setContent={setContent}
-              handleComplete={handleComplete}
-              inputContent={inputContent}
-              setInputContent={setInputContent}
-              isContentFilled={isContentFilled}
-            />
-          )}
         </div>
       </WritingPageWrap>
     </>
diff --git a/src/pages/WritingPage/StepByStep/Continue.tsx b/src/pages/WritingPage/StepByStep/Continue.tsx
index c11731b..dbb65bd 100644
--- a/src/pages/WritingPage/StepByStep/Continue.tsx
+++ b/src/pages/WritingPage/StepByStep/Continue.tsx
@@ -29,44 +29,46 @@ export default function Continue() {
     <>
       <WritingPageWrap>
         <Header />
-        <div className="container">
-          <div className="title_container" style={{ marginRight: "90px" }}>
-            <div className="title_main">Continue-Stop-Start 회고</div>
-            <div className="title_content">
-              해결법 지향적이고, 무엇을 시작하고 그만둘지의 변화에 중점을 드는
-              회고예요
+        <div className="all-container">
+          <div className="container">
+            <div className="title_container" style={{ marginRight: "90px" }}>
+              <div className="title_main">Continue-Stop-Start 회고</div>
+              <div className="title_content">
+                해결법 지향적이고, 무엇을 시작하고 그만둘지의 변화에 중점을 드는
+                회고예요
+              </div>
             </div>
+            {currentStep === 1 && (
+              <Continue1
+                content={content}
+                setContent={setContent}
+                handleComplete={handleComplete}
+                inputContent={inputContent}
+                setInputContent={setInputContent}
+                isContentFilled={isContentFilled}
+              />
+            )}
+            {currentStep === 2 && (
+              <Continue2
+                content={content}
+                setContent={setContent}
+                handleComplete={handleComplete}
+                inputContent={inputContent}
+                setInputContent={setInputContent}
+                isContentFilled={isContentFilled}
+              />
+            )}
+            {currentStep === 3 && (
+              <Continue3
+                content={content}
+                setContent={setContent}
+                handleComplete={handleComplete}
+                inputContent={inputContent}
+                setInputContent={setInputContent}
+                isContentFilled={isContentFilled}
+              />
+            )}
           </div>
-          {currentStep === 1 && (
-            <Continue1
-              content={content}
-              setContent={setContent}
-              handleComplete={handleComplete}
-              inputContent={inputContent}
-              setInputContent={setInputContent}
-              isContentFilled={isContentFilled}
-            />
-          )}
-          {currentStep === 2 && (
-            <Continue2
-              content={content}
-              setContent={setContent}
-              handleComplete={handleComplete}
-              inputContent={inputContent}
-              setInputContent={setInputContent}
-              isContentFilled={isContentFilled}
-            />
-          )}
-          {currentStep === 3 && (
-            <Continue3
-              content={content}
-              setContent={setContent}
-              handleComplete={handleComplete}
-              inputContent={inputContent}
-              setInputContent={setInputContent}
-              isContentFilled={isContentFilled}
-            />
-          )}
         </div>
       </WritingPageWrap>
     </>
diff --git a/src/pages/WritingPage/StepByStep/FiveF.tsx b/src/pages/WritingPage/StepByStep/FiveF.tsx
index 86f6d8e..237566d 100644
--- a/src/pages/WritingPage/StepByStep/FiveF.tsx
+++ b/src/pages/WritingPage/StepByStep/FiveF.tsx
@@ -30,64 +30,66 @@ export default function FiveF() {
     <>
       <WritingPageWrap>
         <Header />
-        <div className="container">
-          <div className="title_container" style={{ marginRight: "400px" }}>
-            <div className="title_main">5F 회고</div>
-            <div className="title_content">
-              다섯 가지 차원(Five Dimensions)을 기반으로 순서대로 진행하는
-              회고예요
+        <div className="all-container">
+          <div className="container">
+            <div className="title_container" style={{ marginRight: "400px" }}>
+              <div className="title_main">5F 회고</div>
+              <div className="title_content">
+                다섯 가지 차원(Five Dimensions)을 기반으로 순서대로 진행하는
+                회고예요
+              </div>
             </div>
+            {currentStep === 1 && (
+              <FiveF1
+                content={content}
+                setContent={setContent}
+                handleComplete={handleComplete}
+                inputContent={inputContent}
+                setInputContent={setInputContent}
+                isContentFilled={isContentFilled}
+              />
+            )}
+            {currentStep === 2 && (
+              <FiveF2
+                content={content}
+                setContent={setContent}
+                handleComplete={handleComplete}
+                inputContent={inputContent}
+                setInputContent={setInputContent}
+                isContentFilled={isContentFilled}
+              />
+            )}
+            {currentStep === 3 && (
+              <FiveF3
+                content={content}
+                setContent={setContent}
+                handleComplete={handleComplete}
+                inputContent={inputContent}
+                setInputContent={setInputContent}
+                isContentFilled={isContentFilled}
+              />
+            )}
+            {currentStep === 4 && (
+              <FiveF4
+                content={content}
+                setContent={setContent}
+                handleComplete={handleComplete}
+                inputContent={inputContent}
+                setInputContent={setInputContent}
+                isContentFilled={isContentFilled}
+              />
+            )}
+            {currentStep === 5 && (
+              <FiveF5
+                content={content}
+                setContent={setContent}
+                handleComplete={handleComplete}
+                inputContent={inputContent}
+                setInputContent={setInputContent}
+                isContentFilled={isContentFilled}
+              />
+            )}
           </div>
-          {currentStep === 1 && (
-            <FiveF1
-              content={content}
-              setContent={setContent}
-              handleComplete={handleComplete}
-              inputContent={inputContent}
-              setInputContent={setInputContent}
-              isContentFilled={isContentFilled}
-            />
-          )}
-          {currentStep === 2 && (
-            <FiveF2
-              content={content}
-              setContent={setContent}
-              handleComplete={handleComplete}
-              inputContent={inputContent}
-              setInputContent={setInputContent}
-              isContentFilled={isContentFilled}
-            />
-          )}
-          {currentStep === 3 && (
-            <FiveF3
-              content={content}
-              setContent={setContent}
-              handleComplete={handleComplete}
-              inputContent={inputContent}
-              setInputContent={setInputContent}
-              isContentFilled={isContentFilled}
-            />
-          )}
-          {currentStep === 4 && (
-            <FiveF4
-              content={content}
-              setContent={setContent}
-              handleComplete={handleComplete}
-              inputContent={inputContent}
-              setInputContent={setInputContent}
-              isContentFilled={isContentFilled}
-            />
-          )}
-          {currentStep === 5 && (
-            <FiveF5
-              content={content}
-              setContent={setContent}
-              handleComplete={handleComplete}
-              inputContent={inputContent}
-              setInputContent={setInputContent}
-              isContentFilled={isContentFilled}
-            />
-          )}
         </div>
       </WritingPageWrap>
     </>
diff --git a/src/pages/WritingPage/StepByStep/FourL.tsx b/src/pages/WritingPage/StepByStep/FourL.tsx
index a727d01..70ce8fb 100644
--- a/src/pages/WritingPage/StepByStep/FourL.tsx
+++ b/src/pages/WritingPage/StepByStep/FourL.tsx
@@ -29,54 +29,56 @@ export default function FourL() {
     <>
       <WritingPageWrap>
         <Header />
-        <div className="container">
-          <div className="title_container" style={{ marginRight: "390px" }}>
-            <div className="title_main">4L 회고</div>
-            <div className="title_content">
-              4L 회고는 오로지 내가 수행하였던 일에만 집중해서 솔직하게 정리하는
-              회고예요
+        <div className="all-container">
+          <div className="container">
+            <div className="title_container" style={{ marginRight: "390px" }}>
+              <div className="title_main">4L 회고</div>
+              <div className="title_content">
+                4L 회고는 오로지 내가 수행하였던 일에만 집중해서 솔직하게
+                정리하는 회고예요
+              </div>
             </div>
+            {currentStep === 1 && (
+              <FourL1
+                content={content}
+                setContent={setContent}
+                handleComplete={handleComplete}
+                inputContent={inputContent}
+                setInputContent={setInputContent}
+                isContentFilled={isContentFilled}
+              />
+            )}
+            {currentStep === 2 && (
+              <FourL2
+                content={content}
+                setContent={setContent}
+                handleComplete={handleComplete}
+                inputContent={inputContent}
+                setInputContent={setInputContent}
+                isContentFilled={isContentFilled}
+              />
+            )}
+            {currentStep === 3 && (
+              <FourL3
+                content={content}
+                setContent={setContent}
+                handleComplete={handleComplete}
+                inputContent={inputContent}
+                setInputContent={setInputContent}
+                isContentFilled={isContentFilled}
+              />
+            )}
+            {currentStep === 4 && (
+              <FourL4
+                content={content}
+                setContent={setContent}
+                handleComplete={handleComplete}
+                inputContent={inputContent}
+                setInputContent={setInputContent}
+                isContentFilled={isContentFilled}
+              />
+            )}
           </div>
-          {currentStep === 1 && (
-            <FourL1
-              content={content}
-              setContent={setContent}
-              handleComplete={handleComplete}
-              inputContent={inputContent}
-              setInputContent={setInputContent}
-              isContentFilled={isContentFilled}
-            />
-          )}
-          {currentStep === 2 && (
-            <FourL2
-              content={content}
-              setContent={setContent}
-              handleComplete={handleComplete}
-              inputContent={inputContent}
-              setInputContent={setInputContent}
-              isContentFilled={isContentFilled}
-            />
-          )}
-          {currentStep === 3 && (
-            <FourL3
-              content={content}
-              setContent={setContent}
-              handleComplete={handleComplete}
-              inputContent={inputContent}
-              setInputContent={setInputContent}
-              isContentFilled={isContentFilled}
-            />
-          )}
-          {currentStep === 4 && (
-            <FourL4
-              content={content}
-              setContent={setContent}
-              handleComplete={handleComplete}
-              inputContent={inputContent}
-              setInputContent={setInputContent}
-              isContentFilled={isContentFilled}
-            />
-          )}
         </div>
       </WritingPageWrap>
     </>
diff --git a/src/pages/WritingPage/StepByStep/KPT.tsx b/src/pages/WritingPage/StepByStep/KPT.tsx
index 7e68ef4..8229230 100644
--- a/src/pages/WritingPage/StepByStep/KPT.tsx
+++ b/src/pages/WritingPage/StepByStep/KPT.tsx
@@ -28,44 +28,46 @@ export default function KPT() {
     <>
       <WritingPageWrap>
         <Header />
-        <div className="container">
-          <div className="title_container" style={{ marginRight: "310px" }}>
-            <div className="title_main">KPT 회고</div>
-            <div className="title_content">
-              회고 3가지 관점에서 업무를 돌아보고, 다음 액션 아이템을 도출해내는
-              데 도움이 되는 회고예요
+        <div className="all-container">
+          <div className="container">
+            <div className="title_container" style={{ marginRight: "310px" }}>
+              <div className="title_main">KPT 회고</div>
+              <div className="title_content">
+                회고 3가지 관점에서 업무를 돌아보고, 다음 액션 아이템을
+                도출해내는 데 도움이 되는 회고예요
+              </div>
             </div>
+            {currentStep === 1 && (
+              <KPT1
+                content={content}
+                setContent={setContent}
+                handleComplete={handleComplete}
+                inputContent={inputContent}
+                setInputContent={setInputContent}
+                isContentFilled={isContentFilled}
+              />
+            )}
+            {currentStep === 2 && (
+              <KPT2
+                content={content}
+                setContent={setContent}
+                handleComplete={handleComplete}
+                inputContent={inputContent}
+                setInputContent={setInputContent}
+                isContentFilled={isContentFilled}
+              />
+            )}
+            {currentStep === 3 && (
+              <KPT3
+                content={content}
+                setContent={setContent}
+                handleComplete={handleComplete}
+                inputContent={inputContent}
+                setInputContent={setInputContent}
+                isContentFilled={isContentFilled}
+              />
+            )}
           </div>
-          {currentStep === 1 && (
-            <KPT1
-              content={content}
-              setContent={setContent}
-              handleComplete={handleComplete}
-              inputContent={inputContent}
-              setInputContent={setInputContent}
-              isContentFilled={isContentFilled}
-            />
-          )}
-          {currentStep === 2 && (
-            <KPT2
-              content={content}
-              setContent={setContent}
-              handleComplete={handleComplete}
-              inputContent={inputContent}
-              setInputContent={setInputContent}
-              isContentFilled={isContentFilled}
-            />
-          )}
-          {currentStep === 3 && (
-            <KPT3
-              content={content}
-              setContent={setContent}
-              handleComplete={handleComplete}
-              inputContent={inputContent}
-              setInputContent={setInputContent}
-              isContentFilled={isContentFilled}
-            />
-          )}
         </div>
       </WritingPageWrap>
     </>
diff --git a/src/pages/WritingPage/StepByStep/ORID.tsx b/src/pages/WritingPage/StepByStep/ORID.tsx
index ecb0ab2..2040a68 100644
--- a/src/pages/WritingPage/StepByStep/ORID.tsx
+++ b/src/pages/WritingPage/StepByStep/ORID.tsx
@@ -29,57 +29,59 @@ export default function ORID() {
     <>
       <WritingPageWrap>
         <Header />
-        <div className="container">
-          <div className="title_container" style={{ marginRight: "130px" }}>
-            <div className="title_main">ORID 회고</div>
-            <div className="title_content">
-              <p>
-                ORID 회고는 Objective(지각 단계)-Reflective(반응
-                단계)-Interpretive(해석 단계)-Decisional(결정 단계)의
-              </p>
-              <p>줄임말로, 사고와 대화를 촉진하는 회고예요</p>
+        <div className="all-container">
+          <div className="container">
+            <div className="title_container" style={{ marginRight: "130px" }}>
+              <div className="title_main">ORID 회고</div>
+              <div className="title_content">
+                <p>
+                  ORID 회고는 Objective(지각 단계)-Reflective(반응
+                  단계)-Interpretive(해석 단계)-Decisional(결정 단계)의
+                </p>
+                <p>줄임말로, 사고와 대화를 촉진하는 회고예요</p>
+              </div>
             </div>
+            {currentStep === 1 && (
+              <ORID1
+                content={content}
+                setContent={setContent}
+                handleComplete={handleComplete}
+                inputContent={inputContent}
+                setInputContent={setInputContent}
+                isContentFilled={isContentFilled}
+              />
+            )}
+            {currentStep === 2 && (
+              <ORID2
+                content={content}
+                setContent={setContent}
+                handleComplete={handleComplete}
+                inputContent={inputContent}
+                setInputContent={setInputContent}
+                isContentFilled={isContentFilled}
+              />
+            )}
+            {currentStep === 3 && (
+              <ORID3
+                content={content}
+                setContent={setContent}
+                handleComplete={handleComplete}
+                inputContent={inputContent}
+                setInputContent={setInputContent}
+                isContentFilled={isContentFilled}
+              />
+            )}
+            {currentStep === 4 && (
+              <ORID4
+                content={content}
+                setContent={setContent}
+                handleComplete={handleComplete}
+                inputContent={inputContent}
+                setInputContent={setInputContent}
+                isContentFilled={isContentFilled}
+              />
+            )}
           </div>
-          {currentStep === 1 && (
-            <ORID1
-              content={content}
-              setContent={setContent}
-              handleComplete={handleComplete}
-              inputContent={inputContent}
-              setInputContent={setInputContent}
-              isContentFilled={isContentFilled}
-            />
-          )}
-          {currentStep === 2 && (
-            <ORID2
-              content={content}
-              setContent={setContent}
-              handleComplete={handleComplete}
-              inputContent={inputContent}
-              setInputContent={setInputContent}
-              isContentFilled={isContentFilled}
-            />
-          )}
-          {currentStep === 3 && (
-            <ORID3
-              content={content}
-              setContent={setContent}
-              handleComplete={handleComplete}
-              inputContent={inputContent}
-              setInputContent={setInputContent}
-              isContentFilled={isContentFilled}
-            />
-          )}
-          {currentStep === 4 && (
-            <ORID4
-              content={content}
-              setContent={setContent}
-              handleComplete={handleComplete}
-              inputContent={inputContent}
-              setInputContent={setInputContent}
-              isContentFilled={isContentFilled}
-            />
-          )}
         </div>
       </WritingPageWrap>
     </>
diff --git a/src/pages/WritingPage/StepByStep/Performance.tsx b/src/pages/WritingPage/StepByStep/Performance.tsx
index e544bf3..e39ca8b 100644
--- a/src/pages/WritingPage/StepByStep/Performance.tsx
+++ b/src/pages/WritingPage/StepByStep/Performance.tsx
@@ -43,24 +43,26 @@ export default function Performance() {
     <>
       <WritingPageWrap>
         <Header />
-        <div className="container">
-          <div className="title_container" style={{ marginRight: "300px" }}>
-            <div className="title_main">성과/수치 중심 회고</div>
-            <div className="title_content">
-              성과/수치 중심 회고는 보통 분기/일 년 회고를 할 때 많이 사용하는
-              회고예요
+        <div className="all-container">
+          <div className="container">
+            <div className="title_container" style={{ marginRight: "300px" }}>
+              <div className="title_main">성과/수치 중심 회고</div>
+              <div className="title_content">
+                성과/수치 중심 회고는 보통 분기/일 년 회고를 할 때 많이 사용하는
+                회고예요
+              </div>
             </div>
+            {currentStep >= 1 && currentStep <= 7 && (
+              <SelectedComponent // 컴포넌트 배열에서 필요한 컴포넌트를 선택
+                content={content}
+                setContent={setContent}
+                handleComplete={handleComplete}
+                inputContent={inputContent}
+                setInputContent={setInputContent}
+                isContentFilled={isContentFilled}
+              />
+            )}
           </div>
-          {currentStep >= 1 && currentStep <= 7 && (
-            <SelectedComponent // 컴포넌트 배열에서 필요한 컴포넌트를 선택
-              content={content}
-              setContent={setContent}
-              handleComplete={handleComplete}
-              inputContent={inputContent}
-              setInputContent={setInputContent}
-              isContentFilled={isContentFilled}
-            />
-          )}
         </div>
       </WritingPageWrap>
     </>
diff --git a/src/pages/WritingPage/StepByStep/Personal.tsx b/src/pages/WritingPage/StepByStep/Personal.tsx
index 925886f..49889d7 100644
--- a/src/pages/WritingPage/StepByStep/Personal.tsx
+++ b/src/pages/WritingPage/StepByStep/Personal.tsx
@@ -51,24 +51,26 @@ export default function Personal() {
     <>
       <WritingPageWrap>
         <Header />
-        <div className="container">
-          <div className="title_container" style={{ marginRight: "70px" }}>
-            <div className="title_main">개인적 회고</div>
-            <div className="title_content">
-              개인적 회고는 주로 일 년을 돌아보는 회고로, 개인이 보낸 한 해를
-              돌아보고 다음 한 해를 준비하기 좋은 회고예요
+        <div className="all-container">
+          <div className="container">
+            <div className="title_container" style={{ marginRight: "70px" }}>
+              <div className="title_main">개인적 회고</div>
+              <div className="title_content">
+                개인적 회고는 주로 일 년을 돌아보는 회고로, 개인이 보낸 한 해를
+                돌아보고 다음 한 해를 준비하기 좋은 회고예요
+              </div>
             </div>
+            {currentStep >= 1 && currentStep <= 11 && (
+              <SelectedComponent // 컴포넌트 배열에서 필요한 컴포넌트를 선택
+                content={content}
+                setContent={setContent}
+                handleComplete={handleComplete}
+                inputContent={inputContent}
+                setInputContent={setInputContent}
+                isContentFilled={isContentFilled}
+              />
+            )}
           </div>
-          {currentStep >= 1 && currentStep <= 11 && (
-            <SelectedComponent // 컴포넌트 배열에서 필요한 컴포넌트를 선택
-              content={content}
-              setContent={setContent}
-              handleComplete={handleComplete}
-              inputContent={inputContent}
-              setInputContent={setInputContent}
-              isContentFilled={isContentFilled}
-            />
-          )}
         </div>
       </WritingPageWrap>
     </>
diff --git a/src/pages/WritingPage/StepByStep/TIL.tsx b/src/pages/WritingPage/StepByStep/TIL.tsx
index 42b162f..c523edc 100644
--- a/src/pages/WritingPage/StepByStep/TIL.tsx
+++ b/src/pages/WritingPage/StepByStep/TIL.tsx
@@ -28,44 +28,46 @@ export default function TIL() {
     <>
       <WritingPageWrap>
         <Header />
-        <div className="container">
-          <div className="title_container" style={{ marginRight: "360px" }}>
-            <div className="title_main">TIL 회고</div>
-            <div className="title_content">
-              TIL 회고는 Today I Learned의 줄임말로 매일의 배움을 기록하는
-              회고예요
+        <div className="all-container">
+          <div className="container">
+            <div className="title_container" style={{ marginRight: "360px" }}>
+              <div className="title_main">TIL 회고</div>
+              <div className="title_content">
+                TIL 회고는 Today I Learned의 줄임말로 매일의 배움을 기록하는
+                회고예요
+              </div>
             </div>
+            {currentStep === 1 && (
+              <TIL1
+                content={content}
+                setContent={setContent}
+                handleComplete={handleComplete}
+                inputContent={inputContent}
+                setInputContent={setInputContent}
+                isContentFilled={isContentFilled}
+              />
+            )}
+            {currentStep === 2 && (
+              <TIL2
+                content={content}
+                setContent={setContent}
+                handleComplete={handleComplete}
+                inputContent={inputContent}
+                setInputContent={setInputContent}
+                isContentFilled={isContentFilled}
+              />
+            )}
+            {currentStep === 3 && (
+              <TIL3
+                content={content}
+                setContent={setContent}
+                handleComplete={handleComplete}
+                inputContent={inputContent}
+                setInputContent={setInputContent}
+                isContentFilled={isContentFilled}
+              />
+            )}
           </div>
-          {currentStep === 1 && (
-            <TIL1
-              content={content}
-              setContent={setContent}
-              handleComplete={handleComplete}
-              inputContent={inputContent}
-              setInputContent={setInputContent}
-              isContentFilled={isContentFilled}
-            />
-          )}
-          {currentStep === 2 && (
-            <TIL2
-              content={content}
-              setContent={setContent}
-              handleComplete={handleComplete}
-              inputContent={inputContent}
-              setInputContent={setInputContent}
-              isContentFilled={isContentFilled}
-            />
-          )}
-          {currentStep === 3 && (
-            <TIL3
-              content={content}
-              setContent={setContent}
-              handleComplete={handleComplete}
-              inputContent={inputContent}
-              setInputContent={setInputContent}
-              isContentFilled={isContentFilled}
-            />
-          )}
         </div>
       </WritingPageWrap>
     </>
diff --git a/src/pages/WritingPage/StepByStep/YWT.tsx b/src/pages/WritingPage/StepByStep/YWT.tsx
index 3f4adc3..4738418 100644
--- a/src/pages/WritingPage/StepByStep/YWT.tsx
+++ b/src/pages/WritingPage/StepByStep/YWT.tsx
@@ -28,43 +28,45 @@ export default function YWT() {
     <>
       <WritingPageWrap>
         <Header />
-        <div className="container">
-          <div className="title_container" style={{ marginRight: "430px" }}>
-            <div className="title_main">YWT 회고</div>
-            <div className="title_content">
-              YWT는 일본 도요타에서 사용한 방식으로 짧게 진행되는 회고예요
+        <div className="all-container">
+          <div className="container">
+            <div className="title_container" style={{ marginRight: "430px" }}>
+              <div className="title_main">YWT 회고</div>
+              <div className="title_content">
+                YWT는 일본 도요타에서 사용한 방식으로 짧게 진행되는 회고예요
+              </div>
             </div>
+            {currentStep === 1 && (
+              <YWT1
+                content={content}
+                setContent={setContent}
+                handleComplete={handleComplete}
+                inputContent={inputContent}
+                setInputContent={setInputContent}
+                isContentFilled={isContentFilled}
+              />
+            )}
+            {currentStep === 2 && (
+              <YWT2
+                content={content}
+                setContent={setContent}
+                handleComplete={handleComplete}
+                inputContent={inputContent}
+                setInputContent={setInputContent}
+                isContentFilled={isContentFilled}
+              />
+            )}
+            {currentStep === 3 && (
+              <YWT3
+                content={content}
+                setContent={setContent}
+                handleComplete={handleComplete}
+                inputContent={inputContent}
+                setInputContent={setInputContent}
+                isContentFilled={isContentFilled}
+              />
+            )}
           </div>
-          {currentStep === 1 && (
-            <YWT1
-              content={content}
-              setContent={setContent}
-              handleComplete={handleComplete}
-              inputContent={inputContent}
-              setInputContent={setInputContent}
-              isContentFilled={isContentFilled}
-            />
-          )}
-          {currentStep === 2 && (
-            <YWT2
-              content={content}
-              setContent={setContent}
-              handleComplete={handleComplete}
-              inputContent={inputContent}
-              setInputContent={setInputContent}
-              isContentFilled={isContentFilled}
-            />
-          )}
-          {currentStep === 3 && (
-            <YWT3
-              content={content}
-              setContent={setContent}
-              handleComplete={handleComplete}
-              inputContent={inputContent}
-              setInputContent={setInputContent}
-              isContentFilled={isContentFilled}
-            />
-          )}
         </div>
       </WritingPageWrap>
     </>
diff --git a/src/pages/login/Login.tsx b/src/pages/login/Login.tsx
index 4afec20..775de30 100644
--- a/src/pages/login/Login.tsx
+++ b/src/pages/login/Login.tsx
@@ -20,11 +20,13 @@ export default function Login() {
     <div>
       <Header />
       <LoginWrap>
-        <h3 className="login_text">로그인</h3>
-        <button onClick={loginHandler} className="kakao">
-          <img src={kakaoLogo} alt="kakaoLogo"></img>
-          카카오 계정으로 계속하기
-        </button>
+        <div className="container">
+          <h3 className="login_text">로그인</h3>
+          <button onClick={loginHandler} className="kakao">
+            <img src={kakaoLogo} alt="kakaoLogo"></img>
+            카카오 계정으로 계속하기
+          </button>
+        </div>
       </LoginWrap>
       <Footer />
     </div>
@@ -32,41 +34,45 @@ export default function Login() {
 }
 
 const LoginWrap = styled.div`
-  height: 505px;
   box-sizing: border-box;
-  padding: 172.5px 0;
   background-color: #121212;
+  height: calc(100vh - 246px);
 
   display: flex;
-  flex-direction: column;
+  justify-content: center;
   align-items: center;
-  gap: 60px;
-
-  .login_text {
-    margin: 0;
-    color: var(--text-high-emphasis, rgba(255, 255, 255, 0.87));
-    text-align: center;
-    font-size: 32px;
-    font-style: normal;
-    font-weight: 700;
-    line-height: normal;
-  }
-  .kakao {
-    width: 530px;
-    height: 62px;
-    border: none;
-    border-radius: 8px;
-    background: #fee500;
 
+  .container {
     display: flex;
-    justify-content: center;
-    align-items: center;
-    gap: 12px;
+    flex-direction: column;
+    gap: 60px;
+
+    .login_text {
+      margin: 0;
+      color: var(--text-high-emphasis, rgba(255, 255, 255, 0.87));
+      text-align: center;
+      font-size: 32px;
+      font-style: normal;
+      font-weight: 700;
+      line-height: normal;
+    }
+    .kakao {
+      width: 530px;
+      height: 62px;
+      border: none;
+      border-radius: 8px;
+      background: #fee500;
+
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      gap: 12px;
 
-    color: #371d1e;
-    font-size: 18px;
-    font-style: normal;
-    font-weight: 600;
-    line-height: normal;
+      color: #371d1e;
+      font-size: 18px;
+      font-style: normal;
+      font-weight: 600;
+      line-height: normal;
+    }
   }
 `;