From f334de64be9865b97d2adc8ba08ea075e5fa5e5b Mon Sep 17 00:00:00 2001
From: Jayjunyoung <no2jfamily@tukorea.ac.kr>
Date: Mon, 13 May 2024 16:57:51 +0900
Subject: [PATCH 01/16] =?UTF-8?q?chore:=20develop=20=EB=B8=8C=EB=A0=8C?=
 =?UTF-8?q?=EC=B9=98=EC=97=90=EC=84=9C=20pull=20=EB=B0=9B=EC=95=84?=
 =?UTF-8?q?=EC=98=A4=EA=B3=A0=20npm=20install=20=EC=8B=A4=ED=96=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 gitlio/package-lock.json | 20 --------------------
 1 file changed, 20 deletions(-)

diff --git a/gitlio/package-lock.json b/gitlio/package-lock.json
index 16b8c80..4344879 100644
--- a/gitlio/package-lock.json
+++ b/gitlio/package-lock.json
@@ -6611,7 +6611,6 @@
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
       "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw=="
     },
-<<<<<<< HEAD
     "node_modules/uuid": {
       "version": "9.0.1",
       "resolved": "https://registry.npmjs.org/uuid/-/uuid-9.0.1.tgz",
@@ -6624,25 +6623,6 @@
         "uuid": "dist/bin/uuid"
       }
     },
-    "node_modules/webcrypto-core": {
-      "version": "1.7.8",
-      "resolved": "https://registry.npmjs.org/webcrypto-core/-/webcrypto-core-1.7.8.tgz",
-      "integrity": "sha512-eBR98r9nQXTqXt/yDRtInszPMjTaSAMJAFDg2AHsgrnczawT1asx9YNBX6k5p+MekbPF4+s/UJJrr88zsTqkSg==",
-      "dependencies": {
-        "@peculiar/asn1-schema": "^2.3.8",
-        "@peculiar/json-schema": "^1.1.12",
-        "asn1js": "^3.0.1",
-        "pvtsutils": "^1.3.5",
-        "tslib": "^2.6.2"
-      }
-    },
-    "node_modules/webcrypto-core/node_modules/tslib": {
-      "version": "2.6.2",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz",
-      "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q=="
-    },
-=======
->>>>>>> 6b9e4ca (feat: Clerk login & backend sync api)
     "node_modules/which": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",

From c76f314d97b559b32785b1f95df6201a9542c239 Mon Sep 17 00:00:00 2001
From: Jayjunyoung <no2jfamily@tukorea.ac.kr>
Date: Tue, 14 May 2024 13:06:10 +0900
Subject: [PATCH 02/16] =?UTF-8?q?design:=20=EB=A0=88=EC=9D=B4=EC=95=84?=
 =?UTF-8?q?=EC=9B=83=20option=EC=97=90=20=EB=94=B0=EB=A5=B8=20introduction?=
 =?UTF-8?q?=20=EB=A0=88=EC=9D=B4=EC=95=84=EC=9B=83=20=EB=B3=80=EA=B2=BD=20?=
 =?UTF-8?q?=EC=B4=88=EA=B8=B0=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 gitlio/app/editor/[portfolioDomain]/page.tsx  |  2 +-
 .../(rightSideBar)/BaseSideBar.tsx            | 29 +++++--
 .../(sideBarLayout)/SectionLayout.tsx         | 68 +++++++++++++++
 .../_components/mainSection/IntroSection.tsx  | 86 +++++++++++--------
 gitlio/store/layoutDesignStore.tsx            | 13 +++
 5 files changed, 156 insertions(+), 42 deletions(-)
 create mode 100644 gitlio/app/editor/_components/(sideBarLayout)/SectionLayout.tsx
 create mode 100644 gitlio/store/layoutDesignStore.tsx

diff --git a/gitlio/app/editor/[portfolioDomain]/page.tsx b/gitlio/app/editor/[portfolioDomain]/page.tsx
index ed2f314..15e823d 100644
--- a/gitlio/app/editor/[portfolioDomain]/page.tsx
+++ b/gitlio/app/editor/[portfolioDomain]/page.tsx
@@ -14,7 +14,7 @@ export default function EditPage() {
   return (
     <div className="">
       <div
-        onClick={() => setSelectedSection('information')}
+        onClick={() => setSelectedSection('introduction')}
         className="mb-4 cursor-pointer"
       >
         <IntroSection />
diff --git a/gitlio/app/editor/_components/(rightSideBar)/BaseSideBar.tsx b/gitlio/app/editor/_components/(rightSideBar)/BaseSideBar.tsx
index e1f642f..ef98132 100644
--- a/gitlio/app/editor/_components/(rightSideBar)/BaseSideBar.tsx
+++ b/gitlio/app/editor/_components/(rightSideBar)/BaseSideBar.tsx
@@ -5,10 +5,12 @@ import useSidebarStore from '@/store/sidebarStore';
 import SkillSideBar from '@/app/editor/_components/(rightSideBar)/SkillSideBar'; // 스토어 경로는 실제 경로에 맞게 조정하세요.
 import IntroSideBar from './IntroSideBar';
 import ContactSideBar from './ContactSideBar';
+import { useState } from 'react';
+import SectionLayout from '../(sideBarLayout)/SectionLayout';
 
 export default function BaseSideBar() {
   const { selectedSection, setSelectedSection } = useSidebarStore();
-  const layoutSelected = false;
+  const [layoutSelected, setLayoutSelected] = useState<boolean>(false); //탭 선택을 관리해주는 상태관리
 
   return (
     <div className="flex flex-col items-center w-[450px] h-dvh bg-white border-base-300 border-2 overflow-y-auto overscroll-contain pb-16">
@@ -16,17 +18,30 @@ export default function BaseSideBar() {
         role="tablist"
         className="tabs bg-neutral-300 tabs-boxed my-6 grid grid-flow-col auto-cols-fr"
       >
-        <a role="tab" className={cx('tab', !layoutSelected && 'bg-base-100')}>
+        <a
+          role="tab"
+          className={cx('tab', !layoutSelected && 'bg-base-100')}
+          onClick={() => setLayoutSelected(false)}
+        >
           Content
         </a>
-        <a role="tab" className={cx('tab', layoutSelected && 'bg-base-100')}>
+        <a
+          role="tab"
+          className={cx('tab', layoutSelected && 'bg-base-100')}
+          onClick={() => setLayoutSelected(true)}
+        >
           Layout
         </a>
       </div>
-      {selectedSection === 'experience' && <ExperienceSideBar />}
-      {selectedSection === 'skill' && <SkillSideBar />}
-      {selectedSection === 'information' && <IntroSideBar />}
-      {selectedSection === 'contact' && <ContactSideBar />}
+      {!layoutSelected && selectedSection === 'experience' && (
+        <ExperienceSideBar />
+      )}
+      {!layoutSelected && selectedSection === 'skill' && <SkillSideBar />}
+      {!layoutSelected && selectedSection === 'introduction' && (
+        <IntroSideBar />
+      )}
+      {!layoutSelected && selectedSection === 'contact' && <ContactSideBar />}
+      {layoutSelected && <SectionLayout section={selectedSection} />}
     </div>
   );
 }
diff --git a/gitlio/app/editor/_components/(sideBarLayout)/SectionLayout.tsx b/gitlio/app/editor/_components/(sideBarLayout)/SectionLayout.tsx
new file mode 100644
index 0000000..82f288d
--- /dev/null
+++ b/gitlio/app/editor/_components/(sideBarLayout)/SectionLayout.tsx
@@ -0,0 +1,68 @@
+import useDesignStore from '@/store/layoutDesignStore';
+import React from 'react';
+
+type SectionProps = {
+  section: string;
+};
+
+const SectionLayout = ({ section }: SectionProps) => {
+  const { setLayoutOption } = useDesignStore();
+  const handleOption1 = () => {
+    setLayoutOption('option1');
+  };
+
+  const handleOption2 = () => {
+    setLayoutOption('option2');
+  };
+
+  return (
+    <div className="flex flex-col itesm-center w-96">
+      <h2 className="text-center font-bold">{section} Layout Options</h2>
+      {section === 'introduction' && (
+        <div className="flex justify-evenly w-full space-x-4 mt-4">
+          <button onClick={handleOption1} className="btn btn-primary">
+            Option 1
+          </button>
+          <button onClick={handleOption2} className="btn btn-secondary">
+            Option 2
+          </button>
+        </div>
+      )}
+      {/* 다른 섹션에 대한 레이아웃 옵션도 여기에 추가할 수 있습니다. */}
+      {section === 'experience' && (
+        <div>
+          <div className="flex justify-evenly w-full space-x-4 mt-4">
+            <button onClick={handleOption1} className="btn btn-primary">
+              Option 1
+            </button>
+            <button onClick={handleOption2} className="btn btn-secondary">
+              Option 2
+            </button>
+          </div>
+        </div>
+      )}
+      {section === 'skill' && (
+        <div className="flex justify-evenly w-full space-x-4 mt-4">
+          <button onClick={handleOption1} className="btn btn-primary">
+            Option 1
+          </button>
+          <button onClick={handleOption2} className="btn btn-secondary">
+            Option 2
+          </button>
+        </div>
+      )}
+      {section === 'contact' && (
+        <div className="flex justify-evenly w-full space-x-4 mt-4">
+          <button onClick={handleOption1} className="btn btn-primary">
+            Option 1
+          </button>
+          <button onClick={handleOption2} className="btn btn-secondary">
+            Option 2
+          </button>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default SectionLayout;
diff --git a/gitlio/app/editor/_components/mainSection/IntroSection.tsx b/gitlio/app/editor/_components/mainSection/IntroSection.tsx
index d8a93d1..6b7ed04 100644
--- a/gitlio/app/editor/_components/mainSection/IntroSection.tsx
+++ b/gitlio/app/editor/_components/mainSection/IntroSection.tsx
@@ -3,9 +3,11 @@
 import React, { useEffect, useRef } from 'react';
 import IntroSidebarStore from '@/store/introSidebarStore';
 import IntroTagList from './introComponents/IntroTagList';
+import useDesignStore from '@/store/layoutDesignStore';
 
 export default function IntroSection() {
   const { profile } = IntroSidebarStore();
+  const { layoutOption } = useDesignStore();
   const textareaRef = useRef<HTMLTextAreaElement>(null);
 
   useEffect(() => {
@@ -17,46 +19,62 @@ export default function IntroSection() {
   }, [profile.introDescription]);
 
   return (
-    <div className="flex flex-row w-[800px] justify-between bg-white mt-10 rounded-3xl p-10">
-      <div className="flex flex-col items-start h-full mr-15">
+    <div className="flex flex-col w-[800px] bg-white mt-10 rounded-3xl p-10">
+      <div className="flex flex-row items-center mb-5">
         <h1 className="text-3xl font-semibold mr-5">#Introduction</h1>
-        <div className="w-[244px] h-[160px] px-10 my-10 bg-cover bg-center rounded-full flex items-center justify-center">
-          {profile.profileImage ? (
-            <img
-              className="w-full h-full rounded-full text-center"
-              src={profile.profileImage}
-              alt="Profile"
-            />
+      </div>
+      <div
+        className={`flex w-full justify-between ${
+          layoutOption === 'option2' ? 'flex-row-reverse' : 'flex-row'
+        }`}
+      >
+        <div className="flex flex-col items-start h-full mr-15">
+          <div className="w-[244px] h-[160px] px-10 my-10 bg-cover bg-center rounded-full flex items-center justify-center">
+            {profile.profileImage ? (
+              <img
+                className="w-full h-full rounded-full text-center"
+                src={profile.profileImage}
+                alt="Profile"
+              />
+            ) : (
+              <div className="w-full h-full rounded-full text-center flex items-center justify-center bg-gray-300">
+                <span className="text-gray-500">Profile</span>
+              </div>
+            )}
+          </div>
+        </div>
+        <div
+          className={`flex flex-col items-center justify-around ${layoutOption === 'option2' ? 'mr-0' : 'mr-10'}`}
+        >
+          {profile.title ? (
+            <div
+              className={`flex flex-row w-full ${layoutOption === 'option2' ? 'justify-end' : 'justify-start'} font-bold text-2xl mt-20`}
+            >
+              {profile.title}
+            </div>
           ) : (
-            <div className="w-full h-full rounded-full text-center flex items-center justify-center bg-gray-300">
-              <span className="text-gray-500">Profile</span>
+            <div
+              className={`flex flex-row w-full ${layoutOption === 'option2' ? 'justify-end' : 'justify-start'} font-bold text-2xl mt-20`}
+            >
+              {'insert your title'}
             </div>
           )}
-        </div>
-      </div>
-      <div className="flex flex-col items-center justify-around mr-10">
-        {profile.title ? (
-          <div className="flex flex-row w-full justify-start font-bold text-2xl mt-20">
-            {profile.title}
-          </div>
-        ) : (
-          <div className="flex flex-row w-full justify-start font-bold text-zinc-300 text-2xl mt-20">
-            {'insert your title'}
-          </div>
-        )}
 
-        <div className="flex flex-row justify-start w-full mt-5">
-          {profile.tagList?.map((tag, index) => (
-            <IntroTagList key={index} data={tag} />
-          ))}
+          <div
+            className={`flex flex-row ${layoutOption === 'option2' ? 'justify-end' : 'justify-start'} w-full mt-5`}
+          >
+            {profile.tagList?.map((tag, index) => (
+              <IntroTagList key={index} data={tag} />
+            ))}
+          </div>
+          <textarea
+            ref={textareaRef}
+            className="w-[400px] h-[100px] min-h-[100px] text-center text-white border rounded-2xl my-10 p-5 bg-[#374151] resize-none overflow-hidden"
+            value={profile.introDescription}
+            readOnly={true}
+            style={{ pointerEvents: 'none' }}
+          />
         </div>
-        <textarea
-          ref={textareaRef}
-          className="w-[400px] h-[100px] min-h-[100px] text-center text-white border rounded-2xl my-10 p-5 bg-[#374151] resize-none overflow-hidden"
-          value={profile.introDescription}
-          readOnly={true}
-          style={{ pointerEvents: 'none' }}
-        />
       </div>
     </div>
   );
diff --git a/gitlio/store/layoutDesignStore.tsx b/gitlio/store/layoutDesignStore.tsx
new file mode 100644
index 0000000..60689fa
--- /dev/null
+++ b/gitlio/store/layoutDesignStore.tsx
@@ -0,0 +1,13 @@
+import create from 'zustand';
+
+interface LayoutProps {
+  layoutOption: string;
+  setLayoutOption: (option: string) => void;
+}
+
+const useLayoutStore = create<LayoutProps>((set) => ({
+  layoutOption: 'option1',
+  setLayoutOption: (option: string): void => set({ layoutOption: option }),
+}));
+
+export default useLayoutStore;

From 867edcbfb2d248469a3bb6402cd057263d52c2bc Mon Sep 17 00:00:00 2001
From: Jayjunyoung <no2jfamily@tukorea.ac.kr>
Date: Tue, 14 May 2024 13:35:59 +0900
Subject: [PATCH 03/16] =?UTF-8?q?design:=20introSection=20option=EC=97=90?=
 =?UTF-8?q?=20=EB=94=B0=EB=A5=B8=20css=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../editor/_components/mainSection/IntroSection.tsx  | 12 +++++-------
 1 file changed, 5 insertions(+), 7 deletions(-)

diff --git a/gitlio/app/editor/_components/mainSection/IntroSection.tsx b/gitlio/app/editor/_components/mainSection/IntroSection.tsx
index 6b7ed04..2ac8163 100644
--- a/gitlio/app/editor/_components/mainSection/IntroSection.tsx
+++ b/gitlio/app/editor/_components/mainSection/IntroSection.tsx
@@ -24,11 +24,9 @@ export default function IntroSection() {
         <h1 className="text-3xl font-semibold mr-5">#Introduction</h1>
       </div>
       <div
-        className={`flex w-full justify-between ${
-          layoutOption === 'option2' ? 'flex-row-reverse' : 'flex-row'
-        }`}
+        className={`flex w-full justify-between ${layoutOption === 'option2' ? 'flex-row-reverse' : 'flex-row'}`}
       >
-        <div className="flex flex-col items-start h-full mr-15">
+        <div className="flex flex-col items-start h-full">
           <div className="w-[244px] h-[160px] px-10 my-10 bg-cover bg-center rounded-full flex items-center justify-center">
             {profile.profileImage ? (
               <img
@@ -48,20 +46,20 @@ export default function IntroSection() {
         >
           {profile.title ? (
             <div
-              className={`flex flex-row w-full ${layoutOption === 'option2' ? 'justify-end' : 'justify-start'} font-bold text-2xl mt-20`}
+              className={`flex flex-row w-full ${layoutOption === 'option2' ? 'justify-end' : 'justify-start'} font-bold text-2xl mt-10`}
             >
               {profile.title}
             </div>
           ) : (
             <div
-              className={`flex flex-row w-full ${layoutOption === 'option2' ? 'justify-end' : 'justify-start'} font-bold text-2xl mt-20`}
+              className={`flex flex-row w-full ${layoutOption === 'option2' ? 'justify-end' : 'justify-start'} font-bold text-2xl mt-10`}
             >
               {'insert your title'}
             </div>
           )}
 
           <div
-            className={`flex flex-row ${layoutOption === 'option2' ? 'justify-end' : 'justify-start'} w-full mt-5`}
+            className={`flex flex-row w-full ${layoutOption === 'option2' ? 'justify-end' : 'justify-start'} mt-5`}
           >
             {profile.tagList?.map((tag, index) => (
               <IntroTagList key={index} data={tag} />

From db9825d4bd82e546a2b9e37500ca6e45fc51fa3c Mon Sep 17 00:00:00 2001
From: Jayjunyoung <no2jfamily@tukorea.ac.kr>
Date: Tue, 14 May 2024 15:10:31 +0900
Subject: [PATCH 04/16] =?UTF-8?q?refactor:=20=EB=A0=88=EC=9D=B4=EC=95=84?=
 =?UTF-8?q?=EC=9B=83=20=EC=83=81=ED=83=9C=EA=B4=80=EB=A6=AC=20=EB=A1=9C?=
 =?UTF-8?q?=EC=A7=81=20=EB=A6=AC=ED=8C=A9=ED=86=A0=EB=A7=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../(sideBarLayout)/SectionLayout.tsx         |  52 ++------
 .../mainSection/ContactSection.tsx            | 116 +++++++++++++-----
 .../_components/mainSection/IntroSection.tsx  |  14 +--
 gitlio/store/layoutDesignStore.tsx            |  34 ++++-
 4 files changed, 135 insertions(+), 81 deletions(-)

diff --git a/gitlio/app/editor/_components/(sideBarLayout)/SectionLayout.tsx b/gitlio/app/editor/_components/(sideBarLayout)/SectionLayout.tsx
index 82f288d..c83d3ed 100644
--- a/gitlio/app/editor/_components/(sideBarLayout)/SectionLayout.tsx
+++ b/gitlio/app/editor/_components/(sideBarLayout)/SectionLayout.tsx
@@ -1,4 +1,4 @@
-import useDesignStore from '@/store/layoutDesignStore';
+import useLayoutStore from '@/store/layoutDesignStore';
 import React from 'react';
 
 type SectionProps = {
@@ -6,52 +6,26 @@ type SectionProps = {
 };
 
 const SectionLayout = ({ section }: SectionProps) => {
-  const { setLayoutOption } = useDesignStore();
+  const { intro, skill, experience, contact } = useLayoutStore();
+
   const handleOption1 = () => {
-    setLayoutOption('option1');
+    if (section === 'introduction') intro.setOption('option1');
+    if (section === 'skill') skill.setOption('option1');
+    if (section === 'experience') experience.setOption('option1');
+    if (section === 'contact') contact.setOption('option1');
   };
 
   const handleOption2 = () => {
-    setLayoutOption('option2');
+    if (section === 'introduction') intro.setOption('option2');
+    if (section === 'skill') skill.setOption('option2');
+    if (section === 'experience') experience.setOption('option2');
+    if (section === 'contact') contact.setOption('option2');
   };
 
   return (
-    <div className="flex flex-col itesm-center w-96">
+    <div className="flex flex-col items-center w-96">
       <h2 className="text-center font-bold">{section} Layout Options</h2>
-      {section === 'introduction' && (
-        <div className="flex justify-evenly w-full space-x-4 mt-4">
-          <button onClick={handleOption1} className="btn btn-primary">
-            Option 1
-          </button>
-          <button onClick={handleOption2} className="btn btn-secondary">
-            Option 2
-          </button>
-        </div>
-      )}
-      {/* 다른 섹션에 대한 레이아웃 옵션도 여기에 추가할 수 있습니다. */}
-      {section === 'experience' && (
-        <div>
-          <div className="flex justify-evenly w-full space-x-4 mt-4">
-            <button onClick={handleOption1} className="btn btn-primary">
-              Option 1
-            </button>
-            <button onClick={handleOption2} className="btn btn-secondary">
-              Option 2
-            </button>
-          </div>
-        </div>
-      )}
-      {section === 'skill' && (
-        <div className="flex justify-evenly w-full space-x-4 mt-4">
-          <button onClick={handleOption1} className="btn btn-primary">
-            Option 1
-          </button>
-          <button onClick={handleOption2} className="btn btn-secondary">
-            Option 2
-          </button>
-        </div>
-      )}
-      {section === 'contact' && (
+      {['introduction', 'experience', 'skill', 'contact'].includes(section) && (
         <div className="flex justify-evenly w-full space-x-4 mt-4">
           <button onClick={handleOption1} className="btn btn-primary">
             Option 1
diff --git a/gitlio/app/editor/_components/mainSection/ContactSection.tsx b/gitlio/app/editor/_components/mainSection/ContactSection.tsx
index e976847..e4aae95 100644
--- a/gitlio/app/editor/_components/mainSection/ContactSection.tsx
+++ b/gitlio/app/editor/_components/mainSection/ContactSection.tsx
@@ -9,49 +9,103 @@ import {
   SiKakao,
 } from 'react-icons/si';
 import ContactSidebarStore from '@/store/contactSidebarStore';
+import useLayoutStore from '@/store/layoutDesignStore';
 
 export default function ContactSection() {
   const { contactInfo } = ContactSidebarStore();
+  const { contact } = useLayoutStore();
 
   return (
     <div className="bg-white w-[800px] flex flex-col flex-1 justify-start rounded-xl pb-5">
       <h1 className="text-3xl font-semibold ml-10 mr-5 pt-5">#Contact</h1>
       <div className="flex flex-col items-center h-full w-full mt-5">
-        <div className="flex flex-col justify-around items-center w-[630px] min-h-[280px] px-5 bg-neutral-content/30 rounded-3xl shadow-md">
-          {contactInfo.name ? (
-            <div className="text-lg font-semibold mb-8">{contactInfo.name}</div>
-          ) : (
-            <div className="font-bold text-zinc-300 text-xl">
-              insert your name
-            </div>
-          )}
-          <div className="flex flex-wrap w-full justify-start items-center">
-            <div className="flex w-[295px] max-w-[295px] justify-start items-center mb-2">
-              <MdEmail className="text-xl mr-2" />
-              <div className="flex justify-start items-center break-all max-w-[267px]">
-                {contactInfo.email}
-              </div>
-            </div>
-            {contactInfo.blogUrls.map((blog) => (
-              <div
-                key={blog.id}
-                className="flex w-[295px] max-w-[295px] justify-start items-center mb-2"
-              >
-                {blog.faviconUrl ? (
-                  <img
-                    src={blog.faviconUrl}
-                    alt="Blog Favicon"
-                    className="w-5 h-5 mr-2 shrink-0"
-                  />
+        <div
+          className={`flex ${contact.option === 'option2' ? 'flex-row' : 'flex-col'} justify-around items-center w-[630px] min-h-[280px] px-5 bg-neutral-content/30 rounded-3xl shadow-md`}
+        >
+          {contact.option === 'option2' ? (
+            <>
+              <div className="flex flex-col justify-center items-center w-1/3">
+                {contactInfo.name ? (
+                  <div className="text-lg font-semibold">
+                    {contactInfo.name}
+                  </div>
                 ) : (
-                  ''
+                  <div className="font-bold text-zinc-300 text-xl">
+                    insert your name
+                  </div>
                 )}
-                <div className="flex justify-start items-center break-all max-w-[267px]">
-                  {blog.url ? blog.url : ''}
+              </div>
+              <div className="flex flex-col w-2/3">
+                <div className="flex flex-wrap w-full">
+                  <div className="flex w-1/2 justify-start items-center mb-2">
+                    <MdEmail className="text-xl mr-2" />
+                    <div className="flex justify-start items-center break-all">
+                      {contactInfo.email}
+                    </div>
+                  </div>
+                  {contactInfo.blogUrls.map((blog) => (
+                    <div
+                      key={blog.id}
+                      className="flex w-1/2 max-w-[295px] justify-start items-center mb-2"
+                    >
+                      {blog.faviconUrl ? (
+                        <img
+                          src={blog.faviconUrl}
+                          alt="Blog Favicon"
+                          className="w-5 h-5 mr-2 shrink-0"
+                        />
+                      ) : (
+                        ''
+                      )}
+                      <div className="flex justify-start items-center break-all">
+                        {blog.url ? blog.url : ''}
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              </div>
+            </>
+          ) : (
+            //option1 일 경우
+            <>
+              {contactInfo.name ? (
+                <div className="text-lg font-semibold mb-8">
+                  {contactInfo.name}
+                </div>
+              ) : (
+                <div className="font-bold text-zinc-300 text-xl">
+                  insert your name
                 </div>
+              )}
+              <div className="flex flex-wrap w-full justify-start items-center">
+                <div className="flex w-[295px] max-w-[295px] justify-start items-center mb-2">
+                  <MdEmail className="text-xl mr-2" />
+                  <div className="flex justify-start items-center break-all max-w-[267px]">
+                    {contactInfo.email}
+                  </div>
+                </div>
+                {contactInfo.blogUrls.map((blog) => (
+                  <div
+                    key={blog.id}
+                    className="flex w-[295px] max-w-[295px] justify-start items-center mb-2"
+                  >
+                    {blog.faviconUrl ? (
+                      <img
+                        src={blog.faviconUrl}
+                        alt="Blog Favicon"
+                        className="w-5 h-5 mr-2 shrink-0"
+                      />
+                    ) : (
+                      ''
+                    )}
+                    <div className="flex justify-start items-center break-all max-w-[267px]">
+                      {blog.url ? blog.url : ''}
+                    </div>
+                  </div>
+                ))}
               </div>
-            ))}
-          </div>
+            </>
+          )}
         </div>
       </div>
     </div>
diff --git a/gitlio/app/editor/_components/mainSection/IntroSection.tsx b/gitlio/app/editor/_components/mainSection/IntroSection.tsx
index 2ac8163..a885896 100644
--- a/gitlio/app/editor/_components/mainSection/IntroSection.tsx
+++ b/gitlio/app/editor/_components/mainSection/IntroSection.tsx
@@ -3,11 +3,11 @@
 import React, { useEffect, useRef } from 'react';
 import IntroSidebarStore from '@/store/introSidebarStore';
 import IntroTagList from './introComponents/IntroTagList';
-import useDesignStore from '@/store/layoutDesignStore';
+import useLayoutStore from '@/store/layoutDesignStore';
 
 export default function IntroSection() {
   const { profile } = IntroSidebarStore();
-  const { layoutOption } = useDesignStore();
+  const { intro } = useLayoutStore();
   const textareaRef = useRef<HTMLTextAreaElement>(null);
 
   useEffect(() => {
@@ -24,7 +24,7 @@ export default function IntroSection() {
         <h1 className="text-3xl font-semibold mr-5">#Introduction</h1>
       </div>
       <div
-        className={`flex w-full justify-between ${layoutOption === 'option2' ? 'flex-row-reverse' : 'flex-row'}`}
+        className={`flex w-full justify-between ${intro.option === 'option2' ? 'flex-row-reverse' : 'flex-row'}`}
       >
         <div className="flex flex-col items-start h-full">
           <div className="w-[244px] h-[160px] px-10 my-10 bg-cover bg-center rounded-full flex items-center justify-center">
@@ -42,24 +42,24 @@ export default function IntroSection() {
           </div>
         </div>
         <div
-          className={`flex flex-col items-center justify-around ${layoutOption === 'option2' ? 'mr-0' : 'mr-10'}`}
+          className={`flex flex-col items-center justify-around ${intro.option === 'option2' ? 'mr-0' : 'mr-10'}`}
         >
           {profile.title ? (
             <div
-              className={`flex flex-row w-full ${layoutOption === 'option2' ? 'justify-end' : 'justify-start'} font-bold text-2xl mt-10`}
+              className={`flex flex-row w-full ${intro.option === 'option2' ? 'justify-end' : 'justify-start'} font-bold text-2xl mt-10`}
             >
               {profile.title}
             </div>
           ) : (
             <div
-              className={`flex flex-row w-full ${layoutOption === 'option2' ? 'justify-end' : 'justify-start'} font-bold text-2xl mt-10`}
+              className={`flex flex-row w-full ${intro.option === 'option2' ? 'justify-end' : 'justify-start'} font-bold text-2xl mt-10`}
             >
               {'insert your title'}
             </div>
           )}
 
           <div
-            className={`flex flex-row w-full ${layoutOption === 'option2' ? 'justify-end' : 'justify-start'} mt-5`}
+            className={`flex flex-row w-full ${intro.option === 'option2' ? 'justify-end' : 'justify-start'} mt-5`}
           >
             {profile.tagList?.map((tag, index) => (
               <IntroTagList key={index} data={tag} />
diff --git a/gitlio/store/layoutDesignStore.tsx b/gitlio/store/layoutDesignStore.tsx
index 60689fa..3cb9061 100644
--- a/gitlio/store/layoutDesignStore.tsx
+++ b/gitlio/store/layoutDesignStore.tsx
@@ -1,13 +1,39 @@
 import create from 'zustand';
 
+//객체로 그룹화 해서 리팩토링 완료!
+interface LayoutOptions {
+  option: string;
+  setOption: (option: string) => void;
+}
+
 interface LayoutProps {
-  layoutOption: string;
-  setLayoutOption: (option: string) => void;
+  intro: LayoutOptions;
+  skill: LayoutOptions;
+  experience: LayoutOptions;
+  contact: LayoutOptions;
 }
 
 const useLayoutStore = create<LayoutProps>((set) => ({
-  layoutOption: 'option1',
-  setLayoutOption: (option: string): void => set({ layoutOption: option }),
+  intro: {
+    option: 'option1',
+    setOption: (option: string) =>
+      set((state) => ({ intro: { ...state.intro, option } })),
+  },
+  skill: {
+    option: 'option1',
+    setOption: (option: string) =>
+      set((state) => ({ skill: { ...state.skill, option } })),
+  },
+  experience: {
+    option: 'option1',
+    setOption: (option: string) =>
+      set((state) => ({ experience: { ...state.experience, option } })),
+  },
+  contact: {
+    option: 'option1',
+    setOption: (option: string) =>
+      set((state) => ({ contact: { ...state.contact, option } })),
+  },
 }));
 
 export default useLayoutStore;

From 06b55c94b00a681ac67bc3e2490809a1ef38b676 Mon Sep 17 00:00:00 2001
From: Jayjunyoung <no2jfamily@tukorea.ac.kr>
Date: Tue, 14 May 2024 15:29:20 +0900
Subject: [PATCH 05/16] =?UTF-8?q?design:=20skill=20Section=20option?=
 =?UTF-8?q?=EC=97=90=20=EB=94=B0=EB=A5=B8=20css=20=EC=A0=81=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 gitlio/app/editor/_components/(skill)/DropAreaComponent.tsx | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/gitlio/app/editor/_components/(skill)/DropAreaComponent.tsx b/gitlio/app/editor/_components/(skill)/DropAreaComponent.tsx
index e03e7db..414e1da 100644
--- a/gitlio/app/editor/_components/(skill)/DropAreaComponent.tsx
+++ b/gitlio/app/editor/_components/(skill)/DropAreaComponent.tsx
@@ -2,9 +2,11 @@
 import React from 'react';
 import { useSidebarIconsStore } from '@/store/sidebarIconsStore';
 import DropArea from './DropArea';
+import useLayoutStore from '@/store/layoutDesignStore';
 
 const DropAreaComponent: React.FC = () => {
   const { dropAreas } = useSidebarIconsStore();
+  const { skill } = useLayoutStore();
 
   return (
     <>
@@ -12,7 +14,9 @@ const DropAreaComponent: React.FC = () => {
         <div key={area.id} className="mb-4 last:mb-0">
           <div className="bg-white rounded-lg overflow-hidden">
             {/* 타이틀 표시 추가 */}
-            <div className="p-2 bg-blue-500 text-white text-center font-bold">
+            <div
+              className={`p-2 ${skill.option === 'option2' ? 'bg-red-400' : 'bg-blue-500'} text-white text-center font-bold`}
+            >
               {area.title}
             </div>
             <DropArea id={area.id} />

From 874219ebefc02f9b49f5a9c05459731cb6cee1ac Mon Sep 17 00:00:00 2001
From: Jayjunyoung <no2jfamily@tukorea.ac.kr>
Date: Wed, 15 May 2024 16:21:09 +0900
Subject: [PATCH 06/16] =?UTF-8?q?design:=20=EB=A0=88=EC=9D=B4=EC=95=84?=
 =?UTF-8?q?=EC=9B=83=20=EB=AF=B8=EB=A6=AC=EB=B3=B4=EA=B8=B0=20=ED=8D=BC?=
 =?UTF-8?q?=EB=B8=94=EB=A6=AC=EC=8B=B1=20=EB=B0=8F=20=EB=AF=B8=EB=A6=AC?=
 =?UTF-8?q?=EB=B3=B4=EA=B8=B0=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8?=
 =?UTF-8?q?=ED=99=94=20=EC=A7=84=ED=96=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../(sideBarLayout)/LayoutPreview.tsx         | 58 +++++++++++++++++++
 .../(sideBarLayout)/SectionLayout.tsx         | 25 +++++---
 2 files changed, 74 insertions(+), 9 deletions(-)
 create mode 100644 gitlio/app/editor/_components/(sideBarLayout)/LayoutPreview.tsx

diff --git a/gitlio/app/editor/_components/(sideBarLayout)/LayoutPreview.tsx b/gitlio/app/editor/_components/(sideBarLayout)/LayoutPreview.tsx
new file mode 100644
index 0000000..b6f909b
--- /dev/null
+++ b/gitlio/app/editor/_components/(sideBarLayout)/LayoutPreview.tsx
@@ -0,0 +1,58 @@
+import React from 'react';
+
+type LayoutPreviewProps = {
+  section: string;
+  option: 'option1' | 'option2';
+};
+
+const LayoutPreview = ({ section, option }: LayoutPreviewProps) => {
+  if (section === 'introduction') {
+    return (
+      <div className="mt-2 w-32 h-32 flex flex-col items-center justify-center border border-gray-400">
+        {option === 'option1' ? (
+          <div className="flex items-start justify-between w-full p-2">
+            <div className="w-6 h-6 bg-gray-300 rounded-full"></div>
+            <div className="flex flex-col justify-center ml-2">
+              <div className="bg-gray-300 w-16 h-4 mb-2"></div>
+              <div className="bg-gray-300 w-12 h-4 mb-2"></div>
+              <div className="bg-gray-300 w-20 h-4"></div>
+            </div>
+          </div>
+        ) : (
+          <div className="flex items-start justify-between w-full p-2">
+            <div className="flex flex-col justify-center items-end mr-2">
+              <div className="bg-gray-300 w-16 h-4 mb-2"></div>
+              <div className="bg-gray-300 w-12 h-4 mb-2"></div>
+              <div className="bg-gray-300 w-20 h-4"></div>
+            </div>
+            <div className="w-6 h-6 bg-gray-300 rounded-full"></div>
+          </div>
+        )}
+      </div>
+    );
+  } else if (section === 'contact') {
+    return (
+      <div className="mt-2 w-32 h-32 flex flex-col items-center justify-center border border-gray-400">
+        {option === 'option1' ? (
+          <div className="flex flex-col items-center justify-center w-full p-2">
+            <div className="bg-gray-300 w-6 h-6 mb-2"></div>
+            <div className="bg-gray-300 w-full h-6 mt-2"></div>
+          </div>
+        ) : (
+          <div className="flex items-center justify-between w-full p-2">
+            <div className="flex justify-center w-1/3 items-center">
+              <div className="w-6 h-6 bg-gray-300"></div>
+            </div>
+            <div className="flex flex-col justify-between w-2/3 h-auto">
+              <div className="w-full h-6 bg-gray-300 mb-2"></div>
+              <div className="w-full h-6 bg-gray-300 mt-2"></div>
+            </div>
+          </div>
+        )}
+      </div>
+    );
+  }
+  return null;
+};
+
+export default LayoutPreview;
diff --git a/gitlio/app/editor/_components/(sideBarLayout)/SectionLayout.tsx b/gitlio/app/editor/_components/(sideBarLayout)/SectionLayout.tsx
index c83d3ed..dc59e56 100644
--- a/gitlio/app/editor/_components/(sideBarLayout)/SectionLayout.tsx
+++ b/gitlio/app/editor/_components/(sideBarLayout)/SectionLayout.tsx
@@ -1,5 +1,6 @@
 import useLayoutStore from '@/store/layoutDesignStore';
 import React from 'react';
+import LayoutPreview from './LayoutPreview';
 
 type SectionProps = {
   section: string;
@@ -8,14 +9,14 @@ type SectionProps = {
 const SectionLayout = ({ section }: SectionProps) => {
   const { intro, skill, experience, contact } = useLayoutStore();
 
-  const handleOption1 = () => {
+  const handleOptionOne = () => {
     if (section === 'introduction') intro.setOption('option1');
     if (section === 'skill') skill.setOption('option1');
     if (section === 'experience') experience.setOption('option1');
     if (section === 'contact') contact.setOption('option1');
   };
 
-  const handleOption2 = () => {
+  const handleOptionTwo = () => {
     if (section === 'introduction') intro.setOption('option2');
     if (section === 'skill') skill.setOption('option2');
     if (section === 'experience') experience.setOption('option2');
@@ -23,16 +24,22 @@ const SectionLayout = ({ section }: SectionProps) => {
   };
 
   return (
-    <div className="flex flex-col items-center w-96">
+    <div className="flex flex-col items-center w-96 h-auto">
       <h2 className="text-center font-bold">{section} Layout Options</h2>
       {['introduction', 'experience', 'skill', 'contact'].includes(section) && (
         <div className="flex justify-evenly w-full space-x-4 mt-4">
-          <button onClick={handleOption1} className="btn btn-primary">
-            Option 1
-          </button>
-          <button onClick={handleOption2} className="btn btn-secondary">
-            Option 2
-          </button>
+          <div className="flex flex-col items-center">
+            <LayoutPreview section={section} option="option1" />
+            <button onClick={handleOptionOne} className="btn mt-4">
+              Option 1
+            </button>
+          </div>
+          <div className="flex flex-col items-center">
+            <LayoutPreview section={section} option="option2" />
+            <button onClick={handleOptionTwo} className="btn mt-4">
+              Option 2
+            </button>
+          </div>
         </div>
       )}
     </div>

From 38525ab6e01e5c97d9c01ab8e0e79c98f5faa1e5 Mon Sep 17 00:00:00 2001
From: Jayjunyoung <no2jfamily@tukorea.ac.kr>
Date: Wed, 15 May 2024 16:30:48 +0900
Subject: [PATCH 07/16] =?UTF-8?q?design:=20section=EC=97=90=20=EB=94=B0?=
 =?UTF-8?q?=EB=A5=B8=20option=20=EB=B2=84=ED=8A=BC=20=EB=8F=99=EC=A0=81=20?=
 =?UTF-8?q?=EC=8A=A4=ED=83=80=EC=9D=BC=EB=A7=81=20=EC=A7=84=ED=96=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../_components/(sideBarLayout)/SectionLayout.tsx      | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/gitlio/app/editor/_components/(sideBarLayout)/SectionLayout.tsx b/gitlio/app/editor/_components/(sideBarLayout)/SectionLayout.tsx
index dc59e56..40671bd 100644
--- a/gitlio/app/editor/_components/(sideBarLayout)/SectionLayout.tsx
+++ b/gitlio/app/editor/_components/(sideBarLayout)/SectionLayout.tsx
@@ -30,13 +30,19 @@ const SectionLayout = ({ section }: SectionProps) => {
         <div className="flex justify-evenly w-full space-x-4 mt-4">
           <div className="flex flex-col items-center">
             <LayoutPreview section={section} option="option1" />
-            <button onClick={handleOptionOne} className="btn mt-4">
+            <button
+              onClick={handleOptionOne}
+              className={`${section === 'skill' ? 'btn btn-info' : 'btn'} mt-4`}
+            >
               Option 1
             </button>
           </div>
           <div className="flex flex-col items-center">
             <LayoutPreview section={section} option="option2" />
-            <button onClick={handleOptionTwo} className="btn mt-4">
+            <button
+              onClick={handleOptionTwo}
+              className={`${section === 'skill' ? 'btn btn-error' : 'btn'} mt-4`}
+            >
               Option 2
             </button>
           </div>

From 56492022834777132280b1cd892771073aafcd30 Mon Sep 17 00:00:00 2001
From: Jayjunyoung <no2jfamily@tukorea.ac.kr>
Date: Sun, 19 May 2024 15:59:12 +0900
Subject: [PATCH 08/16] =?UTF-8?q?design:=20option=EC=97=90=20=EB=94=B0?=
 =?UTF-8?q?=EB=A5=B8=20ExperienceSection=20=EC=A1=B0=EA=B1=B4=EB=B6=80=20?=
 =?UTF-8?q?=EB=9E=9C=EB=8D=94=EB=A7=81=20=EC=99=84=EB=A3=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../(sideBarLayout)/LayoutPreview.tsx         |  48 +++++++-
 .../mainSection/ExperienceSection.tsx         | 110 +++++++++++++-----
 2 files changed, 130 insertions(+), 28 deletions(-)

diff --git a/gitlio/app/editor/_components/(sideBarLayout)/LayoutPreview.tsx b/gitlio/app/editor/_components/(sideBarLayout)/LayoutPreview.tsx
index b6f909b..9408500 100644
--- a/gitlio/app/editor/_components/(sideBarLayout)/LayoutPreview.tsx
+++ b/gitlio/app/editor/_components/(sideBarLayout)/LayoutPreview.tsx
@@ -30,7 +30,53 @@ const LayoutPreview = ({ section, option }: LayoutPreviewProps) => {
         )}
       </div>
     );
-  } else if (section === 'contact') {
+  } 
+  else if (section === 'experience') {
+    return (
+      <div className="mt-2 w-32 h-32 flex flex-col items-center justify-center border border-gray-400">
+        {option === 'option1' ? (
+          <div className="flex flex-col w-full p-2">
+            <div className="flex items-start justify-between">
+              <div className="w-6 h-6 bg-gray-300 rounded-full"></div>
+              <div className="flex flex-col justify-center ml-2">
+                <div className="bg-gray-300 w-16 h-4 mb-2"></div>
+                <div className="bg-gray-300 w-12 h-4 mb-2"></div>
+                <div className="bg-gray-300 w-20 h-4"></div>
+              </div>
+            </div>
+            <div className="flex items-start justify-between mt-4">
+              <div className="flex flex-col justify-center mr-2">
+                <div className="bg-gray-300 w-16 h-4 mb-2"></div>
+                <div className="bg-gray-300 w-12 h-4 mb-2"></div>
+                <div className="bg-gray-300 w-20 h-4"></div>
+              </div>
+              <div className="w-6 h-6 bg-gray-300 rounded-full"></div>
+            </div>
+          </div>
+        ) : (
+          <div className="flex flex-col w-full p-2">
+            <div className="flex items-start justify-between">
+              <div className="w-6 h-6 bg-gray-300 rounded-full"></div>
+              <div className="flex flex-col justify-center ml-2">
+                <div className="bg-gray-300 w-16 h-4 mb-2"></div>
+                <div className="bg-gray-300 w-12 h-4 mb-2"></div>
+                <div className="bg-gray-300 w-20 h-4"></div>
+              </div>
+            </div>
+            <div className="flex items-start justify-between mt-4">
+              <div className="flex flex-col justify-center items-end mr-2">
+                <div className="bg-gray-300 w-16 h-4 mb-2"></div>
+                <div className="bg-gray-300 w-12 h-4 mb-2"></div>
+                <div className="bg-gray-300 w-20 h-4"></div>
+              </div>
+              <div className="w-6 h-6 bg-gray-300 rounded-full"></div>
+            </div>
+          </div>
+        )}
+      </div>
+    );
+  }
+  else if (section === 'contact') {
     return (
       <div className="mt-2 w-32 h-32 flex flex-col items-center justify-center border border-gray-400">
         {option === 'option1' ? (
diff --git a/gitlio/app/editor/_components/mainSection/ExperienceSection.tsx b/gitlio/app/editor/_components/mainSection/ExperienceSection.tsx
index a9b92d0..f071357 100644
--- a/gitlio/app/editor/_components/mainSection/ExperienceSection.tsx
+++ b/gitlio/app/editor/_components/mainSection/ExperienceSection.tsx
@@ -2,44 +2,100 @@
 import { MdBrightness1 } from 'react-icons/md';
 import cx from 'classnames';
 import experienceSectionStore from '@/store/experienceSectionStore'; // 경로는 프로젝트에 맞게 조정하세요.
+import useLayoutStore from '@/store/layoutDesignStore';
 
 export default function ExperienceSection() {
   const { sections } = experienceSectionStore(); // 스토어에서 sections 상태를 가져옵니다.
+  const { experience } = useLayoutStore();
+  const { option } = experience;
 
   return (
     <div className="bg-white w-[800px] min-h-[200px] rounded-xl flex flex-col flex-1 justify-start">
       <br />
       <h1 className="text-3xl font-semibold ml-10 mr-5">#Experience</h1>
-      <ul className="timeline timeline-snap-icon timeline-compact timeline-vertical px-10 py-10">
-        {sections.map((item, index) => (
-          <li key={item.id}>
-            {' '}
-            {/* 각 항목을 고유 id로 구분합니다. */}
-            {index !== 0 && <hr />}
-            <div className="timeline-middle">
-              <MdBrightness1 className="h-5 w-5" />
-            </div>
-            <div
-              className="timeline-end md:text-start mb-10"
-              style={{ whiteSpace: 'pre-wrap' }}
-            >
-              <time className="font-mono italic">
-                {item.startDate} - {item.endDate}
-              </time>
-              <div className="text-lg font-black">{item.title}</div>
+      {option === 'option1' ? (
+        <ul className="timeline timeline-snap-icon timeline-compact timeline-vertical px-10 py-10">
+          {sections.map((item, index) => (
+            <li key={item.id}>
+              {' '}
+              {/* 각 항목을 고유 id로 구분합니다. */}
+              {index !== 0 && <hr />}
+              <div className="timeline-middle">
+                <MdBrightness1 className="h-5 w-5" />
+              </div>
               <div
-                className={cx(
-                  item.description &&
-                    'mt-3 ml-3 bg-neutral-content/30 px-5 py-5 rounded-xl'
-                )}
+                className="timeline-end md:text-start mb-10"
+                style={{ whiteSpace: 'pre-wrap' }}
               >
-                {item.description}
+                <time className="font-mono italic">
+                  {item.startDate} - {item.endDate}
+                </time>
+                <div className="text-lg font-black">{item.title}</div>
+                <div
+                  className={cx(
+                    item.description &&
+                      'mt-3 ml-3 bg-neutral-content/30 px-5 py-5 rounded-xl'
+                  )}
+                >
+                  {item.description}
+                </div>
+              </div>
+              <hr />
+            </li>
+          ))}
+        </ul>
+      ) : (
+        <ul className="timeline timeline-snap-icon max-md:timeline-compact timeline-vertical px-10 py-10">
+          {sections.map((item, index) => (
+            <li key={item.id}>
+              {' '}
+              {/* 각 항목을 고유 id로 구분합니다. */}
+              {index !== 0 && <hr />}
+              <div className="timeline-middle">
+                <MdBrightness1 className="h-5 w-5" />
               </div>
-            </div>
-            <hr />
-          </li>
-        ))}
-      </ul>
+              {index % 2 === 0 ? (
+                <div
+                  className="timeline-start md:text-start mb-10"
+                  style={{ whiteSpace: 'pre-wrap' }}
+                >
+                  <time className="font-mono italic">
+                    {item.startDate} - {item.endDate}
+                  </time>
+                  <div className="text-lg font-black">{item.title}</div>
+                  <div
+                    className={cx(
+                      item.description &&
+                        'mt-3 ml-3 bg-neutral-content/30 px-5 py-5 rounded-xl'
+                    )}
+                  >
+                    {item.description}
+                  </div>
+                </div>
+              ) : (
+                <div
+                  className="timeline-end md:text-start mb-10"
+                  style={{ whiteSpace: 'pre-wrap' }}
+                >
+                  <time className="font-mono italic">
+                    {item.startDate} - {item.endDate}
+                  </time>
+                  <div className="text-lg font-black">{item.title}</div>
+                  <div
+                    className={cx(
+                      item.description &&
+                        'mt-3 ml-3 bg-neutral-content/30 px-5 py-5 rounded-xl'
+                    )}
+                  >
+                    {item.description}
+                  </div>
+                </div>
+              )}
+              <hr />
+            </li>
+          ))}
+        </ul>
+      )}
     </div>
   );
 }

From 3075b7dc183b2f7ae46993ce95728fc140ebf064 Mon Sep 17 00:00:00 2001
From: Jayjunyoung <no2jfamily@tukorea.ac.kr>
Date: Sun, 19 May 2024 17:05:39 +0900
Subject: [PATCH 09/16] =?UTF-8?q?design:=20Experience=20Section=20?=
 =?UTF-8?q?=EB=A0=88=EC=9D=B4=EC=95=84=EC=9B=83=20=EC=84=A0=ED=83=9D=20?=
 =?UTF-8?q?=EB=AF=B8=EB=A6=AC=EB=B3=B4=EA=B8=B0=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../(sideBarLayout)/LayoutPreview.tsx         | 49 +++++++------------
 1 file changed, 17 insertions(+), 32 deletions(-)

diff --git a/gitlio/app/editor/_components/(sideBarLayout)/LayoutPreview.tsx b/gitlio/app/editor/_components/(sideBarLayout)/LayoutPreview.tsx
index 9408500..2ad153c 100644
--- a/gitlio/app/editor/_components/(sideBarLayout)/LayoutPreview.tsx
+++ b/gitlio/app/editor/_components/(sideBarLayout)/LayoutPreview.tsx
@@ -30,53 +30,38 @@ const LayoutPreview = ({ section, option }: LayoutPreviewProps) => {
         )}
       </div>
     );
-  } 
-  else if (section === 'experience') {
+  } else if (section === 'experience') {
     return (
-      <div className="mt-2 w-32 h-32 flex flex-col items-center justify-center border border-gray-400">
+      <div className="mt-2 w-40 h-40 flex flex-col items-center justify-center border border-gray-400">
         {option === 'option1' ? (
-          <div className="flex flex-col w-full p-2">
-            <div className="flex items-start justify-between">
-              <div className="w-6 h-6 bg-gray-300 rounded-full"></div>
+          <div className="relative flex flex-col justify-center w-full h-full p-2">
+            <div className="absolute left-10 top-2 bottom-2 w-px bg-gray-300"></div>{' '}
+            {/* 왼쪽 선 추가 */}
+            <div className="w-full flex justify-center items-start mt-1">
               <div className="flex flex-col justify-center ml-2">
-                <div className="bg-gray-300 w-16 h-4 mb-2"></div>
-                <div className="bg-gray-300 w-12 h-4 mb-2"></div>
-                <div className="bg-gray-300 w-20 h-4"></div>
+                <div className="bg-gray-300 w-16 h-8 mb-2"></div>
               </div>
             </div>
-            <div className="flex items-start justify-between mt-4">
-              <div className="flex flex-col justify-center mr-2">
-                <div className="bg-gray-300 w-16 h-4 mb-2"></div>
-                <div className="bg-gray-300 w-12 h-4 mb-2"></div>
-                <div className="bg-gray-300 w-20 h-4"></div>
+            <div className="w-full flex justify-center items-start mt-3">
+              <div className="flex flex-col justify-center ml-2">
+                <div className="bg-gray-300 w-16 h-8 mb-2"></div>
               </div>
-              <div className="w-6 h-6 bg-gray-300 rounded-full"></div>
             </div>
           </div>
         ) : (
-          <div className="flex flex-col w-full p-2">
-            <div className="flex items-start justify-between">
-              <div className="w-6 h-6 bg-gray-300 rounded-full"></div>
-              <div className="flex flex-col justify-center ml-2">
-                <div className="bg-gray-300 w-16 h-4 mb-2"></div>
-                <div className="bg-gray-300 w-12 h-4 mb-2"></div>
-                <div className="bg-gray-300 w-20 h-4"></div>
-              </div>
+          <div className="relative flex justify-around w-full h-full p-2">
+            <div className="flex flex-col justify-start mt-7">
+              <div className="bg-gray-300 w-16 h-8 mr-2"></div>
             </div>
-            <div className="flex items-start justify-between mt-4">
-              <div className="flex flex-col justify-center items-end mr-2">
-                <div className="bg-gray-300 w-16 h-4 mb-2"></div>
-                <div className="bg-gray-300 w-12 h-4 mb-2"></div>
-                <div className="bg-gray-300 w-20 h-4"></div>
-              </div>
-              <div className="w-6 h-6 bg-gray-300 rounded-full"></div>
+            <div className="absolute left-1/2 top-2 bottom-2 w-px bg-gray-300"></div>{' '}
+            <div className="flex flex-col justify-end mb-7">
+              <div className="bg-gray-300 w-16 h-8 ml-2"></div>
             </div>
           </div>
         )}
       </div>
     );
-  }
-  else if (section === 'contact') {
+  } else if (section === 'contact') {
     return (
       <div className="mt-2 w-32 h-32 flex flex-col items-center justify-center border border-gray-400">
         {option === 'option1' ? (

From e11442e27dc5e363033688a85c791ca55762683f Mon Sep 17 00:00:00 2001
From: Jayjunyoung <no2jfamily@tukorea.ac.kr>
Date: Sun, 19 May 2024 17:23:55 +0900
Subject: [PATCH 10/16] =?UTF-8?q?design:=20hover=20=EC=A0=81=EC=9A=A9=20?=
 =?UTF-8?q?=EC=8B=9C=20scale=20=EC=B2=98=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../editor/_components/(sideBarLayout)/LayoutPreview.tsx    | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/gitlio/app/editor/_components/(sideBarLayout)/LayoutPreview.tsx b/gitlio/app/editor/_components/(sideBarLayout)/LayoutPreview.tsx
index 2ad153c..5a0505e 100644
--- a/gitlio/app/editor/_components/(sideBarLayout)/LayoutPreview.tsx
+++ b/gitlio/app/editor/_components/(sideBarLayout)/LayoutPreview.tsx
@@ -8,7 +8,7 @@ type LayoutPreviewProps = {
 const LayoutPreview = ({ section, option }: LayoutPreviewProps) => {
   if (section === 'introduction') {
     return (
-      <div className="mt-2 w-32 h-32 flex flex-col items-center justify-center border border-gray-400">
+      <div className="mt-2 w-32 h-32 flex flex-col items-center justify-center border border-gray-400 hover:scale-110 transition-transform duration-300">
         {option === 'option1' ? (
           <div className="flex items-start justify-between w-full p-2">
             <div className="w-6 h-6 bg-gray-300 rounded-full"></div>
@@ -32,7 +32,7 @@ const LayoutPreview = ({ section, option }: LayoutPreviewProps) => {
     );
   } else if (section === 'experience') {
     return (
-      <div className="mt-2 w-40 h-40 flex flex-col items-center justify-center border border-gray-400">
+      <div className="mt-2 w-40 h-40 flex flex-col items-center justify-center border border-gray-400 hover:scale-110 transition-transform duration-300">
         {option === 'option1' ? (
           <div className="relative flex flex-col justify-center w-full h-full p-2">
             <div className="absolute left-10 top-2 bottom-2 w-px bg-gray-300"></div>{' '}
@@ -63,7 +63,7 @@ const LayoutPreview = ({ section, option }: LayoutPreviewProps) => {
     );
   } else if (section === 'contact') {
     return (
-      <div className="mt-2 w-32 h-32 flex flex-col items-center justify-center border border-gray-400">
+      <div className="mt-2 w-32 h-32 flex flex-col items-center justify-center border border-gray-400 hover:scale-110 transition-transform duration-300">
         {option === 'option1' ? (
           <div className="flex flex-col items-center justify-center w-full p-2">
             <div className="bg-gray-300 w-6 h-6 mb-2"></div>

From fae42d68ed26475450ba1aba9390c22a059769d1 Mon Sep 17 00:00:00 2001
From: Jayjunyoung <no2jfamily@tukorea.ac.kr>
Date: Mon, 20 May 2024 20:24:13 +0900
Subject: [PATCH 11/16] =?UTF-8?q?feat:=20option3=20=EC=83=81=ED=83=9C?=
 =?UTF-8?q?=EB=A1=9C=20=EB=B0=94=EA=BF=94=EC=A3=BC=EB=8A=94=20=ED=95=A8?=
 =?UTF-8?q?=EC=88=98=20=EC=9E=91=EC=84=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../(sideBarLayout)/SectionLayout.tsx         | 20 ++++++++++++++++---
 1 file changed, 17 insertions(+), 3 deletions(-)

diff --git a/gitlio/app/editor/_components/(sideBarLayout)/SectionLayout.tsx b/gitlio/app/editor/_components/(sideBarLayout)/SectionLayout.tsx
index 40671bd..0351c39 100644
--- a/gitlio/app/editor/_components/(sideBarLayout)/SectionLayout.tsx
+++ b/gitlio/app/editor/_components/(sideBarLayout)/SectionLayout.tsx
@@ -9,25 +9,29 @@ type SectionProps = {
 const SectionLayout = ({ section }: SectionProps) => {
   const { intro, skill, experience, contact } = useLayoutStore();
 
-  const handleOptionOne = () => {
+  const handleOptionOne = (): void => {
     if (section === 'introduction') intro.setOption('option1');
     if (section === 'skill') skill.setOption('option1');
     if (section === 'experience') experience.setOption('option1');
     if (section === 'contact') contact.setOption('option1');
   };
 
-  const handleOptionTwo = () => {
+  const handleOptionTwo = (): void => {
     if (section === 'introduction') intro.setOption('option2');
     if (section === 'skill') skill.setOption('option2');
     if (section === 'experience') experience.setOption('option2');
     if (section === 'contact') contact.setOption('option2');
   };
 
+  const handleOptionThree = (): void => {
+    if (section === 'introduction') intro.setOption('option3');
+  };
+
   return (
     <div className="flex flex-col items-center w-96 h-auto">
       <h2 className="text-center font-bold">{section} Layout Options</h2>
       {['introduction', 'experience', 'skill', 'contact'].includes(section) && (
-        <div className="flex justify-evenly w-full space-x-4 mt-4">
+        <div className="flex flex-wrap justify-evenly w-full mt-4">
           <div className="flex flex-col items-center">
             <LayoutPreview section={section} option="option1" />
             <button
@@ -46,6 +50,16 @@ const SectionLayout = ({ section }: SectionProps) => {
               Option 2
             </button>
           </div>
+          {section === 'introduction' ? (
+            <div className="flex flex-wrap justify-evenly w-full mt-4">
+              <div className="flex flex-col items-center mt-2">
+                <LayoutPreview section={section} option="option2" />
+                <button onClick={handleOptionThree} className="btn mt-4">
+                  Option 3
+                </button>
+              </div>
+            </div>
+          ) : null}
         </div>
       )}
     </div>

From 0629f42a1beabacdcdc1db3d9212280575540087 Mon Sep 17 00:00:00 2001
From: Jayjunyoung <no2jfamily@tukorea.ac.kr>
Date: Mon, 20 May 2024 21:03:31 +0900
Subject: [PATCH 12/16] =?UTF-8?q?design:=20introSection=20option3=20?=
 =?UTF-8?q?=EC=A0=9C=EA=B3=B5=20=EC=B6=94=EA=B0=80=ED=95=98=EC=97=AC=20?=
 =?UTF-8?q?=EB=9E=9C=EB=8D=94=EB=A7=81=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../(sideBarLayout)/LayoutPreview.tsx         |  17 ++-
 .../(sideBarLayout)/SectionLayout.tsx         |   2 +-
 .../_components/mainSection/IntroSection.tsx  | 122 ++++++++++++------
 3 files changed, 97 insertions(+), 44 deletions(-)

diff --git a/gitlio/app/editor/_components/(sideBarLayout)/LayoutPreview.tsx b/gitlio/app/editor/_components/(sideBarLayout)/LayoutPreview.tsx
index 5a0505e..bb7e989 100644
--- a/gitlio/app/editor/_components/(sideBarLayout)/LayoutPreview.tsx
+++ b/gitlio/app/editor/_components/(sideBarLayout)/LayoutPreview.tsx
@@ -2,14 +2,14 @@ import React from 'react';
 
 type LayoutPreviewProps = {
   section: string;
-  option: 'option1' | 'option2';
+  option: string;
 };
 
 const LayoutPreview = ({ section, option }: LayoutPreviewProps) => {
   if (section === 'introduction') {
     return (
       <div className="mt-2 w-32 h-32 flex flex-col items-center justify-center border border-gray-400 hover:scale-110 transition-transform duration-300">
-        {option === 'option1' ? (
+        {option === 'option1' && (
           <div className="flex items-start justify-between w-full p-2">
             <div className="w-6 h-6 bg-gray-300 rounded-full"></div>
             <div className="flex flex-col justify-center ml-2">
@@ -18,7 +18,8 @@ const LayoutPreview = ({ section, option }: LayoutPreviewProps) => {
               <div className="bg-gray-300 w-20 h-4"></div>
             </div>
           </div>
-        ) : (
+        )}
+        {option === 'option2' && (
           <div className="flex items-start justify-between w-full p-2">
             <div className="flex flex-col justify-center items-end mr-2">
               <div className="bg-gray-300 w-16 h-4 mb-2"></div>
@@ -28,6 +29,16 @@ const LayoutPreview = ({ section, option }: LayoutPreviewProps) => {
             <div className="w-6 h-6 bg-gray-300 rounded-full"></div>
           </div>
         )}
+        {option === 'option3' && (
+          <div className="flex flex-wrap justify-evenly w-full items-center">
+            <div className="w-6 h-6 bg-gray-300 rounded-full"></div>
+            <div className="flex flex-col justify-center items-center">
+              <div className="bg-gray-300 w-12 h-4 mb-2"></div>
+              <div className="bg-gray-300 w-12 h-4 mb-2"></div>
+            </div>
+            <div className="bg-gray-300 w-4/5 h-6 mb-2"></div>
+          </div>
+        )}
       </div>
     );
   } else if (section === 'experience') {
diff --git a/gitlio/app/editor/_components/(sideBarLayout)/SectionLayout.tsx b/gitlio/app/editor/_components/(sideBarLayout)/SectionLayout.tsx
index 0351c39..d7b76d5 100644
--- a/gitlio/app/editor/_components/(sideBarLayout)/SectionLayout.tsx
+++ b/gitlio/app/editor/_components/(sideBarLayout)/SectionLayout.tsx
@@ -53,7 +53,7 @@ const SectionLayout = ({ section }: SectionProps) => {
           {section === 'introduction' ? (
             <div className="flex flex-wrap justify-evenly w-full mt-4">
               <div className="flex flex-col items-center mt-2">
-                <LayoutPreview section={section} option="option2" />
+                <LayoutPreview section={section} option="option3" />
                 <button onClick={handleOptionThree} className="btn mt-4">
                   Option 3
                 </button>
diff --git a/gitlio/app/editor/_components/mainSection/IntroSection.tsx b/gitlio/app/editor/_components/mainSection/IntroSection.tsx
index a885896..1b79f70 100644
--- a/gitlio/app/editor/_components/mainSection/IntroSection.tsx
+++ b/gitlio/app/editor/_components/mainSection/IntroSection.tsx
@@ -23,57 +23,99 @@ export default function IntroSection() {
       <div className="flex flex-row items-center mb-5">
         <h1 className="text-3xl font-semibold mr-5">#Introduction</h1>
       </div>
-      <div
-        className={`flex w-full justify-between ${intro.option === 'option2' ? 'flex-row-reverse' : 'flex-row'}`}
-      >
-        <div className="flex flex-col items-start h-full">
-          <div className="w-[244px] h-[160px] px-10 my-10 bg-cover bg-center rounded-full flex items-center justify-center">
-            {profile.profileImage ? (
-              <img
-                className="w-full h-full rounded-full text-center"
-                src={profile.profileImage}
-                alt="Profile"
-              />
-            ) : (
-              <div className="w-full h-full rounded-full text-center flex items-center justify-center bg-gray-300">
-                <span className="text-gray-500">Profile</span>
+      {intro.option === 'option3' ? (
+        <div className="flex flex-col">
+          <div className="flex flex-row">
+            <div className="flex flex-col items-start h-full mr-15">
+              <div className="w-[160px] h-[160px] my-6 mx-6 bg-cover bg-center rounded-full flex items-center justify-center">
+                {profile.profileImage ? (
+                  <img
+                    className="w-full h-full rounded-full text-center object-cover"
+                    src={profile.profileImage}
+                    alt="Profile"
+                  />
+                ) : (
+                  <div className="w-full h-full rounded-full text-center flex items-center justify-center bg-gray-300">
+                    <span className="text-gray-500">Profile</span>
+                  </div>
+                )}
               </div>
-            )}
+            </div>
+            <div className="flex flex-col justify-start w-full py-6 ml-6">
+              {profile.title ? (
+                <div className="flex flex-row w-full justify-start font-bold text-2xl mt-6">
+                  {profile.title}
+                </div>
+              ) : (
+                <div className="flex flex-row w-full justify-start font-bold text-zinc-300 text-2xl mt-6">
+                  {'insert your title'}
+                </div>
+              )}
+
+              <div className="flex flex-row justify-start w-full mt-5">
+                {profile.tagList?.map((tag, index) => (
+                  <IntroTagList key={index} data={tag} />
+                ))}
+              </div>
+            </div>
+          </div>
+          <div className="textarea whitespace-pre-wrap flex min-h-[80px] px-4 w-9/10 justify-center mx-6 text-center items-center justify-center text-white border rounded-2xl bg-[#374151] overflow-y-auto">
+            {profile.introDescription}
           </div>
         </div>
+      ) : (
         <div
-          className={`flex flex-col items-center justify-around ${intro.option === 'option2' ? 'mr-0' : 'mr-10'}`}
+          className={`flex w-full justify-between ${intro.option === 'option2' ? 'flex-row-reverse' : 'flex-row'}`}
         >
-          {profile.title ? (
-            <div
-              className={`flex flex-row w-full ${intro.option === 'option2' ? 'justify-end' : 'justify-start'} font-bold text-2xl mt-10`}
-            >
-              {profile.title}
+          <div className="flex flex-col items-start h-full">
+            <div className="w-[244px] h-[160px] px-10 my-10 bg-cover bg-center rounded-full flex items-center justify-center">
+              {profile.profileImage ? (
+                <img
+                  className="w-full h-full rounded-full text-center"
+                  src={profile.profileImage}
+                  alt="Profile"
+                />
+              ) : (
+                <div className="w-full h-full rounded-full text-center flex items-center justify-center bg-gray-300">
+                  <span className="text-gray-500">Profile</span>
+                </div>
+              )}
             </div>
-          ) : (
+          </div>
+          <div
+            className={`flex flex-col items-center justify-around ${intro.option === 'option2' ? 'mr-0' : 'mr-10'}`}
+          >
+            {profile.title ? (
+              <div
+                className={`flex flex-row w-full ${intro.option === 'option2' ? 'justify-end' : 'justify-start'} font-bold text-2xl mt-10`}
+              >
+                {profile.title}
+              </div>
+            ) : (
+              <div
+                className={`flex flex-row w-full ${intro.option === 'option2' ? 'justify-end' : 'justify-start'} font-bold text-2xl mt-10`}
+              >
+                {'insert your title'}
+              </div>
+            )}
+
             <div
-              className={`flex flex-row w-full ${intro.option === 'option2' ? 'justify-end' : 'justify-start'} font-bold text-2xl mt-10`}
+              className={`flex flex-row w-full ${intro.option === 'option2' ? 'justify-end' : 'justify-start'} mt-5`}
             >
-              {'insert your title'}
+              {profile.tagList?.map((tag, index) => (
+                <IntroTagList key={index} data={tag} />
+              ))}
             </div>
-          )}
-
-          <div
-            className={`flex flex-row w-full ${intro.option === 'option2' ? 'justify-end' : 'justify-start'} mt-5`}
-          >
-            {profile.tagList?.map((tag, index) => (
-              <IntroTagList key={index} data={tag} />
-            ))}
+            <textarea
+              ref={textareaRef}
+              className="w-[400px] h-[100px] min-h-[100px] text-center text-white border rounded-2xl my-10 p-5 bg-[#374151] resize-none overflow-hidden"
+              value={profile.introDescription}
+              readOnly={true}
+              style={{ pointerEvents: 'none' }}
+            />
           </div>
-          <textarea
-            ref={textareaRef}
-            className="w-[400px] h-[100px] min-h-[100px] text-center text-white border rounded-2xl my-10 p-5 bg-[#374151] resize-none overflow-hidden"
-            value={profile.introDescription}
-            readOnly={true}
-            style={{ pointerEvents: 'none' }}
-          />
         </div>
-      </div>
+      )}
     </div>
   );
 }

From cd938645adac4daf6c722aa05b831a5189f2de52 Mon Sep 17 00:00:00 2001
From: Jayjunyoung <no2jfamily@tukorea.ac.kr>
Date: Mon, 20 May 2024 21:04:57 +0900
Subject: [PATCH 13/16] =?UTF-8?q?remove:=20justify-center=20=EC=A4=91?=
 =?UTF-8?q?=EB=B3=B5=20=EC=A0=9C=EA=B1=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 gitlio/app/editor/_components/mainSection/IntroSection.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/gitlio/app/editor/_components/mainSection/IntroSection.tsx b/gitlio/app/editor/_components/mainSection/IntroSection.tsx
index 1b79f70..aeabe09 100644
--- a/gitlio/app/editor/_components/mainSection/IntroSection.tsx
+++ b/gitlio/app/editor/_components/mainSection/IntroSection.tsx
@@ -59,7 +59,7 @@ export default function IntroSection() {
               </div>
             </div>
           </div>
-          <div className="textarea whitespace-pre-wrap flex min-h-[80px] px-4 w-9/10 justify-center mx-6 text-center items-center justify-center text-white border rounded-2xl bg-[#374151] overflow-y-auto">
+          <div className="textarea whitespace-pre-wrap flex min-h-[80px] px-4 w-9/10 mx-6 text-center items-center justify-center text-white border rounded-2xl bg-[#374151] overflow-y-auto">
             {profile.introDescription}
           </div>
         </div>

From cb12784e5c50d8ca6ab2ce12c333332898e2e4e7 Mon Sep 17 00:00:00 2001
From: Jayjunyoung <no2jfamily@tukorea.ac.kr>
Date: Mon, 20 May 2024 21:20:54 +0900
Subject: [PATCH 14/16] =?UTF-8?q?remove:=20h1=ED=83=9C=EA=B7=B8=20?=
 =?UTF-8?q?=EA=B0=90=EC=8B=B8=EB=8A=94=20div=20=EC=A0=9C=EA=B1=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 gitlio/app/editor/_components/mainSection/IntroSection.tsx | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/gitlio/app/editor/_components/mainSection/IntroSection.tsx b/gitlio/app/editor/_components/mainSection/IntroSection.tsx
index aeabe09..8f8534e 100644
--- a/gitlio/app/editor/_components/mainSection/IntroSection.tsx
+++ b/gitlio/app/editor/_components/mainSection/IntroSection.tsx
@@ -20,9 +20,7 @@ export default function IntroSection() {
 
   return (
     <div className="flex flex-col w-[800px] bg-white mt-10 rounded-3xl p-10">
-      <div className="flex flex-row items-center mb-5">
-        <h1 className="text-3xl font-semibold mr-5">#Introduction</h1>
-      </div>
+      <h1 className="text-3xl font-semibold mr-5">#Introduction</h1>
       {intro.option === 'option3' ? (
         <div className="flex flex-col">
           <div className="flex flex-row">

From 2de9fb975d7acbf2ff5b1f2a39ef7fd7773b05d2 Mon Sep 17 00:00:00 2001
From: Jayjunyoung <no2jfamily@tukorea.ac.kr>
Date: Wed, 22 May 2024 15:41:31 +0900
Subject: [PATCH 15/16] =?UTF-8?q?design:=20ContactSection=20=EB=94=94?=
 =?UTF-8?q?=EC=9E=90=EC=9D=B8=20=EC=88=98=EC=A0=95=20=EB=B0=8F=20=EC=A1=B0?=
 =?UTF-8?q?=EA=B1=B4=EB=B6=80=EB=9E=9C=EB=8D=94=EB=A7=81=20=EC=A0=81?=
 =?UTF-8?q?=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../mainSection/ContactSection.tsx            | 135 ++++++++----------
 1 file changed, 56 insertions(+), 79 deletions(-)

diff --git a/gitlio/app/editor/_components/mainSection/ContactSection.tsx b/gitlio/app/editor/_components/mainSection/ContactSection.tsx
index e4aae95..091652a 100644
--- a/gitlio/app/editor/_components/mainSection/ContactSection.tsx
+++ b/gitlio/app/editor/_components/mainSection/ContactSection.tsx
@@ -20,92 +20,69 @@ export default function ContactSection() {
       <h1 className="text-3xl font-semibold ml-10 mr-5 pt-5">#Contact</h1>
       <div className="flex flex-col items-center h-full w-full mt-5">
         <div
-          className={`flex ${contact.option === 'option2' ? 'flex-row' : 'flex-col'} justify-around items-center w-[630px] min-h-[280px] px-5 bg-neutral-content/30 rounded-3xl shadow-md`}
+          className={`flex ${contact.option === 'option1' ? 'flex-col items-center' : 'flex-row justify-start items-center'} w-fit mx-10 px-6 bg-neutral-content/30 rounded-3xl shadow-md`}
         >
-          {contact.option === 'option2' ? (
-            <>
-              <div className="flex flex-col justify-center items-center w-1/3">
-                {contactInfo.name ? (
-                  <div className="text-lg font-semibold">
-                    {contactInfo.name}
-                  </div>
+          {contactInfo.name ? (
+            <div
+              className={`text-lg font-semibold ${contact.option === 'option1' ? 'mt-6' : 'mr-6 mt-0'}`}
+            >
+              {contactInfo.name}
+            </div>
+          ) : (
+            <div
+              className={`font-bold text-zinc-300 mt-6 text-xl ${contact.option === 'option1' ? 'mt-6' : 'mr-6 mt-0'}`}
+            >
+              insert your name
+            </div>
+          )}
+          <div
+            className={`flex flex-wrap w-full justify-center items-center mt-6 ${contact.option === 'option1' ? '' : 'flex-1'}`}
+          >
+            <div className="flex w-[295px] justify-start items-center mb-6">
+              <MdEmail className="text-xl mr-2" />
+              <div className="flex justify-start items-center break-all text-sm max-w-[267px]">
+                {contactInfo.email}
+              </div>
+            </div>
+            {contactInfo.blogUrls.slice(0, 1).map((blog) => (
+              <div
+                key={blog.id}
+                className="flex w-[295px] max-w-[295px] justify-start items-center mb-6"
+              >
+                {blog.faviconUrl ? (
+                  <img
+                    src={blog.faviconUrl}
+                    alt="Blog Favicon"
+                    className="w-5 h-5 mr-2 shrink-0"
+                  />
                 ) : (
-                  <div className="font-bold text-zinc-300 text-xl">
-                    insert your name
-                  </div>
+                  ''
                 )}
-              </div>
-              <div className="flex flex-col w-2/3">
-                <div className="flex flex-wrap w-full">
-                  <div className="flex w-1/2 justify-start items-center mb-2">
-                    <MdEmail className="text-xl mr-2" />
-                    <div className="flex justify-start items-center break-all">
-                      {contactInfo.email}
-                    </div>
-                  </div>
-                  {contactInfo.blogUrls.map((blog) => (
-                    <div
-                      key={blog.id}
-                      className="flex w-1/2 max-w-[295px] justify-start items-center mb-2"
-                    >
-                      {blog.faviconUrl ? (
-                        <img
-                          src={blog.faviconUrl}
-                          alt="Blog Favicon"
-                          className="w-5 h-5 mr-2 shrink-0"
-                        />
-                      ) : (
-                        ''
-                      )}
-                      <div className="flex justify-start items-center break-all">
-                        {blog.url ? blog.url : ''}
-                      </div>
-                    </div>
-                  ))}
+                <div className="flex justify-start items-center break-all text-sm max-w-[267px]">
+                  {blog.url ? blog.url : ''}
                 </div>
               </div>
-            </>
-          ) : (
-            //option1 일 경우
-            <>
-              {contactInfo.name ? (
-                <div className="text-lg font-semibold mb-8">
-                  {contactInfo.name}
-                </div>
-              ) : (
-                <div className="font-bold text-zinc-300 text-xl">
-                  insert your name
-                </div>
-              )}
-              <div className="flex flex-wrap w-full justify-start items-center">
-                <div className="flex w-[295px] max-w-[295px] justify-start items-center mb-2">
-                  <MdEmail className="text-xl mr-2" />
-                  <div className="flex justify-start items-center break-all max-w-[267px]">
-                    {contactInfo.email}
-                  </div>
+            ))}
+            {contactInfo.blogUrls.slice(1).map((blog) => (
+              <div
+                key={blog.id}
+                className="flex w-[295px] max-w-[295px] justify-start items-center mb-6"
+              >
+                {blog.faviconUrl ? (
+                  <img
+                    src={blog.faviconUrl}
+                    alt="Blog Favicon"
+                    className="w-5 h-5 mr-2 shrink-0"
+                  />
+                ) : (
+                  ''
+                )}
+                <div className="flex justify-start items-center break-all text-sm max-w-[267px]">
+                  {blog.url ? blog.url : ''}
                 </div>
-                {contactInfo.blogUrls.map((blog) => (
-                  <div
-                    key={blog.id}
-                    className="flex w-[295px] max-w-[295px] justify-start items-center mb-2"
-                  >
-                    {blog.faviconUrl ? (
-                      <img
-                        src={blog.faviconUrl}
-                        alt="Blog Favicon"
-                        className="w-5 h-5 mr-2 shrink-0"
-                      />
-                    ) : (
-                      ''
-                    )}
-                    <div className="flex justify-start items-center break-all max-w-[267px]">
-                      {blog.url ? blog.url : ''}
-                    </div>
-                  </div>
-                ))}
               </div>
-            </>
-          )}
+            ))}
+          </div>
         </div>
       </div>
     </div>

From 6f81414c52278e5eac7291609f36b6c7cb310316 Mon Sep 17 00:00:00 2001
From: Jayjunyoung <no2jfamily@tukorea.ac.kr>
Date: Wed, 22 May 2024 18:54:42 +0900
Subject: [PATCH 16/16] =?UTF-8?q?design:=20ContactSection=20=EC=9D=B4?=
 =?UTF-8?q?=EB=A6=84=20=EC=9E=85=EB=A0=A5=20=EA=B3=B5=EB=B0=B1=EC=8B=9C=20?=
 =?UTF-8?q?css=20=EB=94=94=EC=9E=90=EC=9D=B8=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../mainSection/ContactSection.tsx            | 17 +------
 .../_components/mainSection/IntroSection.tsx  | 44 -------------------
 2 files changed, 1 insertion(+), 60 deletions(-)

diff --git a/gitlio/app/editor/_components/mainSection/ContactSection.tsx b/gitlio/app/editor/_components/mainSection/ContactSection.tsx
index 7b4f2c1..dae37f1 100644
--- a/gitlio/app/editor/_components/mainSection/ContactSection.tsx
+++ b/gitlio/app/editor/_components/mainSection/ContactSection.tsx
@@ -19,7 +19,6 @@ export default function ContactSection() {
     <div className="bg-white w-[800px] flex flex-col flex-1 justify-start rounded-xl pb-5">
       <h1 className="text-3xl font-semibold ml-10 mr-5 pt-5">#Contact</h1>
       <div className="flex flex-col items-center h-full w-full mt-5">
-<<<<<<< HEAD
         <div
           className={`flex ${contact.option === 'option1' ? 'flex-col items-center' : 'flex-row justify-start items-center'} w-fit mx-10 px-6 bg-neutral-content/30 rounded-3xl shadow-md`}
         >
@@ -31,7 +30,7 @@ export default function ContactSection() {
             </div>
           ) : (
             <div
-              className={`font-bold text-zinc-300 mt-6 text-xl ${contact.option === 'option1' ? 'mt-6' : 'mr-6 mt-0'}`}
+              className={`font-bold text-zinc-300 text-xl ${contact.option === 'option1' ? 'mt-6' : 'mr-6 mt-0'}`}
             >
               insert your name
             </div>
@@ -39,17 +38,6 @@ export default function ContactSection() {
           <div
             className={`flex flex-wrap w-full justify-center items-center mt-6 ${contact.option === 'option1' ? '' : 'flex-1'}`}
           >
-=======
-        <div className="flex flex-col items-center w-fit mx-10 px-6 bg-neutral-content/30 rounded-3xl shadow-md">
-          {contactInfo.name ? (
-            <div className="text-lg font-semibold mt-6">{contactInfo.name}</div>
-          ) : (
-            <div className="font-bold text-zinc-300 mt-6 text-xl">
-              insert your name
-            </div>
-          )}
-          <div className="flex flex-wrap w-full justify-start justify-center items-center mt-6">
->>>>>>> develop
             <div className="flex w-[295px] justify-start items-center mb-6">
               <MdEmail className="text-xl mr-2" />
               <div className="flex justify-start items-center break-all text-sm max-w-[267px]">
@@ -71,7 +59,6 @@ export default function ContactSection() {
                   ''
                 )}
                 <div className="flex justify-start items-center break-all text-sm max-w-[267px]">
-<<<<<<< HEAD
                   {blog.url ? blog.url : ''}
                 </div>
               </div>
@@ -91,8 +78,6 @@ export default function ContactSection() {
                   ''
                 )}
                 <div className="flex justify-start items-center break-all text-sm max-w-[267px]">
-=======
->>>>>>> develop
                   {blog.url ? blog.url : ''}
                 </div>
               </div>
diff --git a/gitlio/app/editor/_components/mainSection/IntroSection.tsx b/gitlio/app/editor/_components/mainSection/IntroSection.tsx
index 4dcfdff..8f8534e 100644
--- a/gitlio/app/editor/_components/mainSection/IntroSection.tsx
+++ b/gitlio/app/editor/_components/mainSection/IntroSection.tsx
@@ -19,7 +19,6 @@ export default function IntroSection() {
   }, [profile.introDescription]);
 
   return (
-<<<<<<< HEAD
     <div className="flex flex-col w-[800px] bg-white mt-10 rounded-3xl p-10">
       <h1 className="text-3xl font-semibold mr-5">#Introduction</h1>
       {intro.option === 'option3' ? (
@@ -115,49 +114,6 @@ export default function IntroSection() {
           </div>
         </div>
       )}
-=======
-    <div className="flex flex-col w-[800px] justify-between bg-white mt-10 rounded-3xl p-10">
-      <h1 className="text-3xl font-semibold mr-5">#Introduction</h1>
-      <div className="flex flex-col">
-        <div className="flex flex-row">
-          <div className="flex flex-col items-start h-full mr-15">
-            <div className="w-[160px] h-[160px] my-6 mx-6 bg-cover bg-center rounded-full flex items-center justify-center">
-              {profile.profileImage ? (
-                <img
-                  className="w-full h-full rounded-full text-center object-cover"
-                  src={profile.profileImage}
-                  alt="Profile"
-                />
-              ) : (
-                <div className="w-full h-full rounded-full text-center flex items-center justify-center bg-gray-300">
-                  <span className="text-gray-500">Profile</span>
-                </div>
-              )}
-            </div>
-          </div>
-          <div className="flex flex-col justify-start w-full py-6 ml-6">
-            {profile.title ? (
-              <div className="flex flex-row w-full justify-start font-bold text-2xl mt-6">
-                {profile.title}
-              </div>
-            ) : (
-              <div className="flex flex-row w-full justify-start font-bold text-zinc-300 text-2xl mt-6">
-                {'insert your title'}
-              </div>
-            )}
-
-            <div className="flex flex-row justify-start w-full mt-5">
-              {profile.tagList?.map((tag, index) => (
-                <IntroTagList key={index} data={tag} />
-              ))}
-            </div>
-          </div>
-        </div>
-        <div className="textarea whitespace-pre-wrap flex min-h-[80px] px-4 w-9/10 justify-center mx-6 text-center items-center justify-center text-white border rounded-2xl bg-[#374151] overflow-y-auto">
-          {profile.introDescription}
-        </div>
-      </div>
->>>>>>> develop
     </div>
   );
 }