From 11371f5126e618b183f1dbfed6d4980e882fe946 Mon Sep 17 00:00:00 2001
From: yebin-jeong <2022112390@dgu.ac.kr>
Date: Thu, 5 Dec 2024 19:51:59 +0900
Subject: [PATCH 1/6] =?UTF-8?q?[Feature]=20#26=20-=20edit=20save=20data=20?=
 =?UTF-8?q?=EB=A1=9C=EC=A7=81=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/akopolio/Edit/akopolioEdit.vue |   4 +-
 src/views/akopolio/Edit/edit.js          | 107 ++++++++++++++++-------
 2 files changed, 76 insertions(+), 35 deletions(-)

diff --git a/src/views/akopolio/Edit/akopolioEdit.vue b/src/views/akopolio/Edit/akopolioEdit.vue
index 58bbe6f..a67d47f 100644
--- a/src/views/akopolio/Edit/akopolioEdit.vue
+++ b/src/views/akopolio/Edit/akopolioEdit.vue
@@ -88,7 +88,9 @@
     </div>
 
     <div class="button-container">
-      <div @click="saveData" class="save-button">저장하기</div>
+      <div @click="() => saveData(activityId)" class="save-button">
+        저장하기
+      </div>
     </div>
       <MainFooter />
    </div> 
diff --git a/src/views/akopolio/Edit/edit.js b/src/views/akopolio/Edit/edit.js
index 6f6b641..0d9a9b5 100644
--- a/src/views/akopolio/Edit/edit.js
+++ b/src/views/akopolio/Edit/edit.js
@@ -2,6 +2,7 @@ import MainHeader from '../../../components/layout/Header.vue';
 import MainFooter from '../../../components/layout/Footer.vue';
 import { ref, computed, onMounted } from 'vue';
 import { useRoute } from 'vue-router';
+import { useRouter } from 'vue-router';
 import axios from 'axios';
 
 const nickname = ref('');
@@ -40,6 +41,7 @@ export default {
     MainFooter,
   },
   setup() {
+    const router = useRouter();
     const route = useRoute();
     const portfolio = ref(null);
     const portfolioId = route.params.id;
@@ -235,51 +237,88 @@ export default {
       }
     };
 
-    const saveData = async (id) => {
+    const saveData = async () => {
+      const id = portfolioId // route에서 가져온 portfolioId를 사용
+
+      // id가 올바른지 확인
+      if (!id || (typeof id !== 'string' && typeof id !== 'number')) {
+        console.error('Invalid id:', id)
+        alert('잘못된 ID 값입니다. 다시 시도해주세요.')
+        return
+      }
+
       if (!isFormComplete.value) {
-        alert('모든 필드를 입력해주세요.');
-        return;
+        alert('모든 필드를 입력해주세요.')
+        return
       }
 
+      // 이미지 URL 정리
+      const photoUrls =
+        images.value.length > 0
+          ? images.value
+              .map((image) => image.previewUrl?.trim()) // previewUrl이 존재하는지 확인 후 트림
+              .filter((url) => url) // 빈 값 제거
+          : []
+
+      // 태그 정리
+      const tagsArray = Array.isArray(selectedTags.value)
+        ? [...selectedTags.value] // Proxy 객체를 일반 배열로 변환
+        : []
+
+      // 요청 바디 생성
+      const requestBody = {
+        name: activityName.value,
+        startDate: activityDate.value,
+        tags: tagsArray,
+        experience: {
+          situation: star.value.situation,
+          task: star.value.task,
+          action: star.value.action,
+          result: star.value.result
+        },
+        pmi: {
+          plus: pmi.value.plus,
+          minus: pmi.value.minus,
+          interesting: pmi.value.interesting
+        },
+        photoUrls: photoUrls
+      }
+
+      console.log('요청 데이터:', requestBody)
 
       try {
-        const response = await axios.put(
-          `${process.env.VUE_APP_BE_API_URL}/api/portfolios/${id}`,
-          {
-            name: activityName.value,
-            startDate: activityDate.value,
-            tags: selectedTags.value,
-            experience: {
-              situation: star.value.situation,
-              task: star.value.task,
-              action: star.value.action,
-              result: star.value.result,
-            },
-            pmi: {
-              plus: pmi.value.plus,
-              minus: pmi.value.minus,
-              interesting: pmi.value.interesting,
-            },
-            photoUrls: images.value.map(image => image.url),
+        // URL 확인
+        const apiUrl = `${process.env.VUE_APP_BE_API_URL}/api/portfolios/${id}`
+        console.log('API URL:', apiUrl)
+
+        const response = await fetch(apiUrl, {
+          method: 'PUT',
+          headers: {
+            'Content-Type': 'application/json'
           },
-          {
-            headers: {
-              'Content-Type': 'application/json',
-            },
-          }
-        );
+          body: JSON.stringify(requestBody),
+          credentials: 'include' // 인증 쿠키 포함
+        })
 
-        if (response.status === 200) {
-          alert('데이터가 성공적으로 저장되었습니다.');
-        } else {
-          alert('저장에 실패했습니다. 다시 시도해주세요.');
+        // 응답 확인
+        if (!response.ok) {
+          const errorData = await response.json() // 에러 상세 데이터 파싱
+          console.error('서버 에러 응답:', errorData)
+          alert('저장에 실패했습니다. 다시 시도해주세요.')
+          return
         }
 
+        const responseData = await response.json()
+        console.log('서버 응답:', responseData)
+        alert('포트폴리오가 성공적으로 저장되었습니다.')
+        router.push('/akopolio/main'); 
       } catch (error) {
-        console.error('Error saving data:', error);
-        alert('데이터 저장 중 오류가 발생했습니다.');
+        console.error('데이터 저장 중 오류 발생:', error)
+        alert(
+          '데이터 저장 중 오류가 발생했습니다. 자세한 내용은 콘솔에서 확인하세요.'
+        )
       }
-    };
+    }
 
     const isFormComplete = computed(() => {
       return (

From 4b41014673c91bb451452b899e9baf47d1dd0def Mon Sep 17 00:00:00 2001
From: study2895 <144806675+study2895@users.noreply.github.com>
Date: Mon, 9 Dec 2024 11:23:48 +0900
Subject: [PATCH 2/6] =?UTF-8?q?[Design]=20=EB=A1=9C=EA=B7=B8=EC=9D=B8=20?=
 =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=A7=80=20=ED=9A=8C=EC=9B=90=EA=B0=80?=
 =?UTF-8?q?=EC=9E=85=20=EB=B2=84=ED=8A=BC=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/login/login/LoginView.vue | 23 +++++++++++++++++++----
 1 file changed, 19 insertions(+), 4 deletions(-)

diff --git a/src/views/login/login/LoginView.vue b/src/views/login/login/LoginView.vue
index bc6a908..0d690f1 100644
--- a/src/views/login/login/LoginView.vue
+++ b/src/views/login/login/LoginView.vue
@@ -16,9 +16,6 @@
         <header class="header">
           <div class="header-content">
             <img src="@/assets/images/Akoming.svg" alt="로고" class="logo" />
-            <button @click="$router.push('/auth/signup')" class="signup-button">
-              회원가입
-            </button>
           </div>
         </header>
 
@@ -58,6 +55,9 @@
               <button type="submit" class="submit-button">로그인</button>
             </div>
           </form>
+          <button @click="$router.push('/auth/signup')" class="signup-button">
+            회원가입
+          </button>
         </main>
       </div>
     </div>
@@ -138,7 +138,7 @@ export default {
 }
 
 .signup-button {
-  color: #f6b87a;
+  color: #000000;
   background-color: transparent;
   padding: 0.25rem 0.5rem;
   border-radius: 9999px;
@@ -240,4 +240,19 @@ export default {
   background-color: #cccccc;
   cursor: not-allowed;
 }
+.signup-button {
+  display: block;
+  margin: 0 auto 0;
+  padding: 0.25rem 0.5rem;
+  color: #000000;
+  background-color: transparent;
+  border-radius: 9999px;
+  transition: background-color 0.3s ease;
+  text-align: center;
+  margin-top: -10px;
+}
+
+.signup-button:hover {
+  background-color: rgba(246, 184, 122, 0.1);
+}
 </style>

From 5547ce27d33ea4676128636387fab2ac518bcef4 Mon Sep 17 00:00:00 2001
From: study2895 <144806675+study2895@users.noreply.github.com>
Date: Mon, 9 Dec 2024 11:24:16 +0900
Subject: [PATCH 3/6] =?UTF-8?q?[Design]=20=ED=9A=8C=EC=9B=90=EA=B0=80?=
 =?UTF-8?q?=EC=9E=85=20=ED=8E=98=EC=9D=B4=EC=A7=80=20=EC=A0=84=EC=B2=B4?=
 =?UTF-8?q?=EC=A0=81=EC=9D=B8=20=EB=94=94=EC=9E=90=EC=9D=B8=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/Icons/akoming/arrow-left.png | Bin 0 -> 181 bytes
 src/assets/Icons/akoming/arrow-left.svg |   4 ++
 src/views/login/signup/SignupView.vue   |  62 ++++++++++++++----------
 3 files changed, 41 insertions(+), 25 deletions(-)
 create mode 100644 src/assets/Icons/akoming/arrow-left.png
 create mode 100644 src/assets/Icons/akoming/arrow-left.svg

diff --git a/src/assets/Icons/akoming/arrow-left.png b/src/assets/Icons/akoming/arrow-left.png
new file mode 100644
index 0000000000000000000000000000000000000000..71ce550734e0ba541bb5a77023163bdda7feb3be
GIT binary patch
literal 181
zcmeAS@N?(olHy`uVBq!ia0vp^5+KaM1|%Pp+x`GjoCO|{#S9GG!XV7ZFl!D-1!HlL
zyA#8@b22Z19F}xPUq=Rpjs4tz5?O(KFHaZ8kP61PQ#NukC<rh&chC4cy+~y127$Ln
zH25t&svDnkCMX@8XQVVaoP%q}31dB{)ALUop7h^T8*zx8<6~!x&|()R#W~rF7c(|z
WnlpABoX!t4mBG{1&t;ucLK6U<LNvnw

literal 0
HcmV?d00001

diff --git a/src/assets/Icons/akoming/arrow-left.svg b/src/assets/Icons/akoming/arrow-left.svg
new file mode 100644
index 0000000..62d1f16
--- /dev/null
+++ b/src/assets/Icons/akoming/arrow-left.svg
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M19 12H5" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M12 19L5 12L12 5" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/src/views/login/signup/SignupView.vue b/src/views/login/signup/SignupView.vue
index ba7e028..0c01e1e 100644
--- a/src/views/login/signup/SignupView.vue
+++ b/src/views/login/signup/SignupView.vue
@@ -9,12 +9,15 @@
       <header class="header">
         <div class="header-content">
           <img src="@/assets/images/Akoming.svg" alt="로고" class="logo" />
-          <button @click="$router.push('/auth/login')" class="back-button">
-            뒤로가기
-          </button>
         </div>
       </header>
-
+      <button @click="$router.push('/auth/login')" class="back-button">
+        <img
+          src="@/assets/Icons/akoming/arrow-left.png"
+          alt="뒤로가기"
+          class="back-icon"
+        />
+      </button>
       <!-- 본문 내용 -->
       <main class="main-content">
         <h1 class="title" style="font-family: 'NanumSquareRound', sans-serif">
@@ -141,6 +144,7 @@
   display: flex;
   flex-direction: column;
   position: relative;
+  overflow-x: hidden;
 }
 
 .header {
@@ -166,21 +170,31 @@
 }
 
 .back-button {
-  color: #f6b87a;
-  background-color: transparent;
-  padding: 0.25rem 0.5rem;
-  border-radius: 9999px;
-  transition: background-color 0.3s ease;
+  position: absolute;
+  top: 70px;
+  left: 20px;
+  background: none;
+  border: none;
+  cursor: pointer;
+  z-index: 20;
+  padding: 0;
+  margin-top: 20px;
+}
+
+.back-icon {
+  width: 24px;
+  height: 24px;
 }
 
 .back-button:hover {
-  background-color: rgba(246, 184, 122, 0.1);
+  opacity: 0.8;
 }
 
 .main-content {
   margin-top: 160px;
   flex-grow: 1;
   padding: 4rem 3rem 2rem;
+  padding-top: 40px;
 }
 
 .title {
@@ -206,6 +220,7 @@
 .form-inline {
   display: flex;
   gap: 0.5rem;
+  align-items: center;
 }
 
 .form-group label {
@@ -234,15 +249,24 @@ input.invalid {
   border-color: #ff6b6b;
 }
 
+input#email {
+  height: 2.5rem;
+}
+
 .verification-button {
   padding: 0.5rem 1rem;
   background-color: #f6b87a;
-  color: #ffffff;
+  color: #000000;
   font-size: 0.875rem;
   border-radius: 9999px;
   text-align: center;
   transition: background-color 0.3s ease;
   cursor: pointer;
+  height: 2.5rem;
+  padding: 0.5rem 0.75rem; /* 좌우 패딩을 약간 줄임 */
+  letter-spacing: -0.05em; /* 자간 줄이기 */
+  white-space: nowrap; /* 텍스트 줄 바꿈 방지 */
+  min-width: 80px; /* 버튼의 최소 너비 설정 */
 }
 
 .verification-button:hover {
@@ -271,13 +295,14 @@ input.invalid {
   padding: 0.5rem 1rem;
   height: 2.5rem;
   background-color: #f6b87a;
-  color: #ffffff;
+  color: #000000;
   font-size: 0.875rem;
   font-weight: 500;
   border-radius: 9999px;
   text-align: center;
   transition: background-color 0.3s ease;
   cursor: pointer;
+  margin-top: 10px;
 }
 
 .submit-button:hover {
@@ -288,17 +313,4 @@ input.invalid {
   background-color: #cccccc;
   cursor: not-allowed;
 }
-.form-inline {
-  display: flex;
-  gap: 0.5rem;
-  align-items: center; /* 높이를 맞추기 위해 추가 */
-}
-
-input#email {
-  height: 2.5rem; /* 버튼 높이와 동일하게 설정 */
-}
-
-.verification-button {
-  height: 2.5rem; /* 입력란 높이와 동일하게 설정 */
-}
 </style>

From 084f5dcdace6af601b962749d03d5c6fbb2baf92 Mon Sep 17 00:00:00 2001
From: study2895 <144806675+study2895@users.noreply.github.com>
Date: Mon, 9 Dec 2024 11:47:38 +0900
Subject: [PATCH 4/6] =?UTF-8?q?[Design]=20=EB=A9=94=EC=9D=B8=ED=8E=98?=
 =?UTF-8?q?=EC=9D=B4=EC=A7=80=20=EC=A0=84=EC=B2=B4=EC=A0=81=EC=9D=B8=20?=
 =?UTF-8?q?=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

---
 src/views/mainpage/MainpageView.vue     |  25 ++-
 src/views/mainpage/SkeletonMainPage.vue | 247 ++++++++++++++++++++++++
 2 files changed, 264 insertions(+), 8 deletions(-)
 create mode 100644 src/views/mainpage/SkeletonMainPage.vue

diff --git a/src/views/mainpage/MainpageView.vue b/src/views/mainpage/MainpageView.vue
index 86f1d7a..6ff1d31 100644
--- a/src/views/mainpage/MainpageView.vue
+++ b/src/views/mainpage/MainpageView.vue
@@ -1,5 +1,6 @@
 <template>
-  <div class="page-container">
+  <SkeletonMainPage v-if="isLoading" />
+  <div v-else class="page-container">
     <div class="mobile-container" style="margin-top: 20px">
       <MainHeader />
 
@@ -13,7 +14,7 @@
         <div class="stamp-container">
           <svg viewBox="0 0 390 520" class="path">
             <path
-              d="M 60 25 L 195 25 Q 330 25, 330 107.5 Q 330 190, 195 190 L 60 190 A 75 75 0 0 0 60 340 L 270 340"
+              d="M 60 25 L 195 25 Q 330 25, 330 107.5 Q 330 190, 195 190 L 60 190 A 75 75 0 0 0 100 340 L 270 340"
               stroke="#BBB4B4"
               stroke-width="3"
               fill="transparent"
@@ -82,10 +83,11 @@
         <div class="ako-image-container">
           <div class="ako-status">
             <img
+              class="ako-status-icon"
               src="@/assets/Icons/akoming/mainpage/minielephanticon.svg"
               alt="미니 아코 이미지"
             />
-            <p>토실토실 아코가 자라는 중</p>
+            <p class="ako-status-text">토실토실 아코가 자라는 중</p>
           </div>
           <img :src="akoImage" alt="아코 이미지" class="ako-image" />
         </div>
@@ -104,6 +106,7 @@ import attendanceIcon from '@/assets/Icons/akoming/todo/attendance.svg'
 import akojagukIcon from '@/assets/Icons/akoming/todo/akojaguk.svg'
 import commentIcon from '@/assets/Icons/akoming/todo/comment.svg'
 import akofolioIcon from '@/assets/Icons/akoming/todo/akofolio.svg'
+import SkeletonMainPage from './SkeletonMainPage.vue'
 
 // Tasks for the to-do list
 const tasks = ref([
@@ -120,8 +123,8 @@ const stamps = ref([
   { label: 'O', completed: false, position: { top: '62px', left: '262px' } },
   { label: 'M', completed: false, position: { top: '144px', left: '157px' } },
   { label: 'I', completed: false, position: { top: '144px', left: '22px' } },
-  { label: 'N', completed: false, position: { top: '297px', left: '102px' } },
-  { label: 'G', completed: false, position: { top: '297px', left: '237px' } }
+  { label: 'N', completed: false, position: { top: '292px', left: '102px' } },
+  { label: 'G', completed: false, position: { top: '292px', left: '237px' } }
 ])
 
 // 기본 아코 이미지 설정
@@ -310,10 +313,12 @@ onMounted(() => {
   margin-right: 0.5rem;
 }
 
-.ako-image-container .ako-status p {
-  font-size: 0.875rem;
-  color: #757575;
+.ako-image-container .ako-status-text {
+  font-size: 1.1rem;
+  color: #000000;
   font-family: 'NanumSquareRound', sans-serif;
+  letter-spacing: 1px;
+  font-weight: bold;
 }
 
 .ako-image-container .ako-image {
@@ -321,4 +326,8 @@ onMounted(() => {
   height: 256px;
   margin: 0 auto;
 }
+
+.ako-status-icon {
+  margin-top: -10px;
+}
 </style>
diff --git a/src/views/mainpage/SkeletonMainPage.vue b/src/views/mainpage/SkeletonMainPage.vue
new file mode 100644
index 0000000..c0d6da8
--- /dev/null
+++ b/src/views/mainpage/SkeletonMainPage.vue
@@ -0,0 +1,247 @@
+<template>
+  <div class="page-container">
+    <div class="mobile-container" style="margin-top: 20px">
+      <MainHeader />
+
+      <!-- 본문 내용 -->
+      <div class="main-content">
+        <h1
+          class="title skeleton-text"
+          style="font-family: 'UhBeeSe_hyun', sans-serif"
+        >
+          &nbsp;
+        </h1>
+
+        <!-- 스켈레톤 스탬프 영역 -->
+        <div class="stamp-container">
+          <svg viewBox="0 0 390 520" class="path">
+            <path
+              d="M 60 25 L 195 25 Q 330 25, 330 107.5 Q 330 190, 195 190 L 60 190 A 75 75 0 0 0 60 340 L 270 340"
+              stroke="#E0E0E0"
+              stroke-width="3"
+              fill="transparent"
+            />
+          </svg>
+          <div
+            v-for="index in 7"
+            :key="index"
+            class="stamp skeleton-stamp"
+            :style="getStampPosition(index)"
+          ></div>
+        </div>
+
+        <!-- 스켈레톤 할 일 표시 -->
+        <div class="task-container">
+          <div class="task-row" v-for="row in 2" :key="row">
+            <div v-for="task in 2" :key="task" class="task skeleton-task">
+              <div class="skeleton-text"></div>
+              <div class="skeleton-icon"></div>
+            </div>
+          </div>
+        </div>
+
+        <!-- 스켈레톤 아코 이미지 -->
+        <div class="ako-image-container">
+          <div class="ako-status">
+            <div class="skeleton-icon"></div>
+            <div class="skeleton-text"></div>
+          </div>
+          <div class="skeleton-ako-image"></div>
+        </div>
+      </div>
+
+      <MainFooter />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import MainHeader from '@/components/layout/Header.vue'
+import MainFooter from '@/components/layout/Footer.vue'
+
+const getStampPosition = (index) => {
+  const positions = [
+    { top: '-18px', left: '12px' },
+    { top: '-18px', left: '147px' },
+    { top: '62px', left: '262px' },
+    { top: '144px', left: '157px' },
+    { top: '144px', left: '22px' },
+    { top: '297px', left: '102px' },
+    { top: '297px', left: '237px' }
+  ]
+  return positions[index - 1]
+}
+</script>
+
+<style scoped>
+.page-container {
+  min-height: 100vh;
+  background-color: #fff9f2;
+  font-family: 'NanumSquareRound', sans-serif;
+  display: flex;
+  justify-content: center;
+}
+
+.mobile-container {
+  width: 395px;
+  min-width: 340px;
+  background-color: #fae8da;
+  min-height: 100vh;
+  position: relative;
+  overflow-y: auto;
+}
+
+.main-content {
+  display: flex;
+  flex-direction: column;
+  padding: 6rem 1.5rem 6rem;
+  font-family: 'NanumSquareRound', sans-serif;
+}
+
+.title {
+  margin-bottom: 70px;
+  font-size: 1.25rem;
+  font-weight: 500;
+  text-align: center;
+  color: #4a4a4a;
+  font-family: 'UhBeeSehyun', sans-serif;
+}
+
+.stamp-container {
+  position: relative;
+  width: 390px;
+  height: 520px;
+  margin: 0 auto;
+}
+
+.stamp {
+  position: absolute;
+  width: 95px;
+  height: 95px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.task-container {
+  margin-top: -80px;
+  margin-bottom: 3rem;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.75rem;
+}
+
+.task-row {
+  display: flex;
+  gap: 0.75rem;
+  width: 100%;
+  max-width: 290px;
+}
+
+.task {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex: 1;
+  height: 40px;
+  padding: 0 1rem;
+  background-color: white;
+  border-radius: 17px;
+}
+
+.ako-image-container {
+  text-align: center;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-top: 2.5rem;
+}
+
+.ako-status {
+  display: flex;
+  align-items: center;
+  margin-bottom: 0.5rem;
+}
+
+.skeleton-text,
+.skeleton-stamp,
+.skeleton-task,
+.skeleton-icon,
+.skeleton-ako-image {
+  position: relative;
+  overflow: hidden;
+  background-color: #e0e0e0;
+}
+
+.skeleton-text::before,
+.skeleton-stamp::before,
+.skeleton-task::before,
+.skeleton-icon::before,
+.skeleton-ako-image::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: -100%;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(
+    90deg,
+    transparent 0%,
+    #f0f0f0 50%,
+    transparent 100%
+  );
+  animation: shimmer 1.5s infinite;
+}
+
+.skeleton-text {
+  height: 1em;
+  width: 70%;
+  margin: 0.5em auto;
+  border-radius: 4px;
+}
+
+.skeleton-stamp {
+  border-radius: 50%;
+}
+
+.skeleton-task {
+  background-color: #f5f5f5;
+}
+
+.skeleton-task .skeleton-text {
+  width: 60%;
+  height: 0.875em;
+  margin: 0;
+}
+
+.skeleton-task .skeleton-icon {
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+}
+
+.skeleton-icon {
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  margin-right: 0.5rem;
+}
+
+.skeleton-ako-image {
+  width: 256px;
+  height: 256px;
+  border-radius: 50%;
+  margin: 0 auto;
+}
+
+@keyframes shimmer {
+  0% {
+    left: -100%;
+  }
+  100% {
+    left: 100%;
+  }
+}
+</style>

From ed234f51ee17f7532a69acd895926dd601726453 Mon Sep 17 00:00:00 2001
From: study2895 <144806675+study2895@users.noreply.github.com>
Date: Mon, 9 Dec 2024 12:21:48 +0900
Subject: [PATCH 5/6] =?UTF-8?q?[Design]=20=EB=A7=88=EC=9D=B4=ED=8E=98?=
 =?UTF-8?q?=EC=9D=B4=EC=A7=80=20=EC=A0=84=EC=B2=B4=EC=A0=81=EC=9D=B8=20?=
 =?UTF-8?q?=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

---
 src/views/login/mypage/MyAkoGoals.vue | 155 ++++++--
 src/views/login/mypage/MypageView.vue | 485 +++++++++++++++++---------
 2 files changed, 434 insertions(+), 206 deletions(-)

diff --git a/src/views/login/mypage/MyAkoGoals.vue b/src/views/login/mypage/MyAkoGoals.vue
index cec7e80..89da0c3 100644
--- a/src/views/login/mypage/MyAkoGoals.vue
+++ b/src/views/login/mypage/MyAkoGoals.vue
@@ -1,67 +1,154 @@
 <template>
-  <section class="my-ako-goals">
-    <h2 class="goals-title">나의 아코자국들</h2>
-    <ul v-if="goals.length > 0" class="goals-list">
-      <li v-for="(goal, index) in goals" :key="index" class="goal-item">
-        <p class="goal-content">{{ goal.content }}</p>
-        <p class="goal-date">{{ formatDate(goal.createdAt) }}</p>
-      </li>
-    </ul>
-    <p v-else class="no-goals">아직 목표 기록이 없습니다.</p>
-  </section>
+  <div class="page-container">
+    <div class="mobile-container">
+      <main class="main-content">
+        <section class="my-ako-goals">
+          <h2 class="goals-title">나의 아코자국들</h2>
+          <ul v-if="goals.length > 0" class="goals-list">
+            <li
+              v-for="(goal, index) in displayedGoals"
+              :key="index"
+              class="goal-item"
+            >
+              <p class="goal-date">{{ formatDate(goal.createdAt) }}</p>
+              <p class="goal-content">{{ goal.content }}</p>
+            </li>
+          </ul>
+          <p v-else class="no-goals">아직 목표 기록이 없습니다.</p>
+          <button
+            v-if="goals.length > 6 && !showAll"
+            @click="showAllGoals"
+            class="more-button"
+          >
+            더보기
+          </button>
+        </section>
+      </main>
+    </div>
+  </div>
 </template>
 
-<script>
-export default {
-  props: {
-    goals: {
-      type: Array,
-      required: true
-    },
-    formatDate: {
-      type: Function,
-      required: true
-    }
+<script setup>
+import { ref, computed } from 'vue'
+
+const props = defineProps({
+  goals: {
+    type: Array,
+    required: true
+  },
+  formatDate: {
+    type: Function,
+    required: true
   }
+})
+
+const showAll = ref(false)
+const displayedGoals = computed(() => {
+  return showAll.value ? props.goals : props.goals.slice(0, 6)
+})
+
+const showAllGoals = () => {
+  showAll.value = true
 }
 </script>
 
 <style scoped>
+.page-container {
+  min-height: 100vh;
+  background-color: #fff9f2;
+  font-family: 'NanumSquareRound', sans-serif;
+  display: flex;
+  justify-content: center;
+}
+
+.mobile-container {
+  width: 395px;
+  min-width: 340px;
+  background-color: #fae8da;
+  min-height: 100vh;
+  position: relative;
+  overflow-y: auto;
+}
+
+.main-content {
+  padding: 2rem 1.5rem;
+}
+
 .my-ako-goals {
-  margin-top: 2rem;
+  background-color: white;
+  border-radius: 1rem;
+  padding: 1.5rem;
+  position: relative;
+  margin-top: 1.5rem;
 }
 
 .goals-title {
-  margin-bottom: 0.5rem;
-  font-size: 1.125rem;
+  position: absolute;
+  top: -0.75rem;
+  left: 1rem;
+  background-color: white;
+  padding: 0 0.5rem;
+  font-size: 1rem;
   font-weight: 600;
-  font-family: 'NanumSquareRound', sans-serif;
+  border-top-left-radius: 0.5rem;
+  border-top-right-radius: 0.5rem;
 }
 
 .goals-list {
   display: flex;
   flex-direction: column;
   gap: 0.75rem;
+  padding: 0;
+  list-style-type: none;
 }
 
 .goal-item {
-  padding: 0.75rem;
-  background-color: white;
-  border-radius: 0.5rem;
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+}
+
+.goal-date {
+  background-color: #ff7f00;
+  color: white;
+  width: 2.5rem;
+  height: 2.5rem;
+  border-radius: 0.25rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 0.75rem;
+  flex-shrink: 0;
 }
 
 .goal-content {
   font-size: 0.875rem;
-  font-family: 'NanumSquareRound', sans-serif;
+  color: #000000;
+  margin: 0;
+  flex-grow: 1;
 }
 
-.goal-date {
-  font-size: 0.75rem;
-  color: #6b7280;
+.no-goals {
+  font-size: 0.875rem;
+  color: #000000;
+  text-align: center;
 }
 
-.no-goals {
+.more-button {
+  display: block;
+  margin: 1rem auto 0;
+  padding: 0.5rem 1rem;
+  background-color: #f6b87a;
+  color: #000000;
+  border: none;
+  border-radius: 9999px;
   font-size: 0.875rem;
-  font-family: 'NanumSquareRound', sans-serif;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background-color 0.3s;
+}
+
+.more-button:hover {
+  background-color: #e5a769;
 }
 </style>
diff --git a/src/views/login/mypage/MypageView.vue b/src/views/login/mypage/MypageView.vue
index a57f314..6ae538e 100644
--- a/src/views/login/mypage/MypageView.vue
+++ b/src/views/login/mypage/MypageView.vue
@@ -1,232 +1,136 @@
 <template>
-  <div class="min-h-screen bg-[#FFF9F2] font-nanum flex justify-center">
-    <div
-      class="w-[395px] min-w-[340px] bg-[#FAE8DA] min-h-screen relative overflow-y-auto"
-      style="scroll-behavior: smooth"
-    >
+  <div class="page-container">
+    <div class="mobile-container">
       <!-- 상단바 -->
       <MainHeader />
 
       <!-- 로그아웃 버튼 -->
-      <div class="absolute top-4 right-4">
-        <button
-          @click="logout"
-          class="px-4 py-2 bg-[#F6B87A] text-black text-sm font-medium rounded-full hover:bg-[#e5a769] transition-colors duration-300"
-          style="margin-top: 60px"
-        >
-          로그아웃
-        </button>
+      <div class="logout-button-container">
+        <button @click="logout" class="logout-button">로그아웃</button>
       </div>
 
       <!-- 본문 내용 -->
-      <main class="flex flex-col px-12 pt-16 pb-24 overflow-y-auto">
-        <section class="mt-9">
-          <h1 class="mb-4 text-xl font-bold font-nanum-square-round">
-            <span class="text-2xl font-nanum-square-round">{{
-              user.nickname
-            }}</span>
+      <main class="main-content">
+        <section class="profile-section">
+          <h1 class="profile-title">
+            <span class="user-nickname">{{ user.nickname }}</span>
             님의 <br />마이페이지
           </h1>
 
-          <ul
-            v-if="goals.length > 0"
-            class="relative p-4 space-y-3 bg-white rounded-lg"
-          >
-            <div class="flex items-center justify-between">
-              <!-- 타이틀 -->
-              <h2
-                class="relative inline-block px-2 mb-2 text-sm font-semibold font-nanum-square-round"
-                style="
-                  background-color: white;
-                  position: absolute;
-                  top: -15px;
-                  left: 16px;
-                  padding-left: 10px;
-                  padding-right: 10px;
-                  border-top-left-radius: 10px;
-                  border-top-right-radius: 10px;
-                "
-              >
-                나의 아코자국들
-              </h2>
-
-              <!-- 더보기 버튼 -->
-              <button
-                @click="toggleExpand"
-                class="relative inline-block px-2 mb-2 text-sm font-semibold font-nanum-square-round"
-                style="
-                  background-color: white;
-                  position: absolute;
-                  top: -15px;
-                  right: 16px;
-                  padding-left: 10px;
-                  padding-right: 10px;
-                  border-top-left-radius: 10px;
-                  border-top-right-radius: 10px;
-                  cursor: pointer;
-                "
-              >
+          <!-- Updated goals section -->
+          <div class="goals-container">
+            <div class="goals-header">
+              <h2 class="goals-title">나의 아코자국들</h2>
+              <button @click="toggleExpand" class="expand-button">
                 {{ isExpanded ? '접기' : '더보기' }}
               </button>
             </div>
-            <!-- 목표 리스트 -->
-            <li
-              v-for="(goal, index) in goals"
-              :key="index"
-              class="flex items-center justify-between"
-            >
-              <!-- 날짜 부분: 주황색 정사각형 -->
-              <p
-                class="flex-shrink-0 p-1 mr-2 text-center rounded-sm text-xxs font-nanum-square-round"
-                style="
-                  background-color: #ff7f00;
-                  color: white;
-                  width: 30px;
-                  height: 30px;
-                "
+            <ul v-if="goals.length > 0" class="goals-list">
+              <li
+                v-for="(goal, index) in displayedGoals"
+                :key="index"
+                class="goal-item"
               >
-                {{ formatDate2(goal.createdAt) }}
-              </p>
-
-              <!-- 목표 내용 부분 -->
-              <p
-                class="flex-grow ml-3 text-sm text-left font-nanum-square-round"
-              >
-                {{ goal.content }}
-              </p>
-            </li>
-          </ul>
-
-          <p v-else class="text-sm font-nanum-square-round">
-            아직 목표 기록이 없습니다.
-          </p>
+                <div class="goal-date">
+                  {{ formatDate2(goal.createdAt) }}
+                </div>
+                <p class="goal-content">
+                  {{ goal.content }}
+                </p>
+              </li>
+            </ul>
+            <p v-else class="no-goals-message">아직 목표 기록이 없습니다.</p>
+          </div>
         </section>
 
-        <section class="mt-8">
-          <h2 class="mb-2 text-lg font-semibold font-nanum-square-round"></h2>
-          <div class="space-y-4">
+        <section class="user-info-section">
+          <h2 class="section-title"></h2>
+          <div class="form-container">
             <!-- 이메일 -->
-            <div class="space-y-1">
-              <label
-                class="block text-sm font-medium text-gray-700 font-nanum-square-round"
-                >이메일</label
-              >
+            <div class="form-group">
+              <label class="form-label">이메일</label>
               <input
                 type="email"
                 v-model="user.email"
                 readonly
-                class="w-full px-3 py-2 bg-[#DDD7D3] border border-gray-200 rounded-full text-sm focus:outline-none focus:ring-2 focus:ring-[#F6B87A] focus:border-transparent transition duration-200"
+                class="form-input"
               />
             </div>
             <!-- 닉네임 -->
-            <div class="space-y-1">
-              <label
-                class="block text-sm font-medium text-gray-700 font-nanum-square-round"
-                >닉네임</label
-              >
+            <div class="form-group">
+              <label class="form-label">닉네임</label>
               <input
                 type="text"
                 v-model="user.nickname"
                 placeholder="닉네임을 입력하세요"
-                class="w-full px-3 py-2 bg-[#DDD7D3] border border-gray-200 rounded-full text-sm focus:outline-none focus:ring-2 focus:ring-[#F6B87A] focus:border-transparent transition duration-200"
+                class="form-input"
               />
             </div>
 
             <!-- 현재 비밀번호 확인 -->
-            <div class="space-y-1">
-              <label
-                class="block text-sm font-medium text-gray-700 font-nanum-square-round"
-                >현재 비밀번호 확인</label
-              >
-              <div class="flex space-x-2">
+            <div class="form-group">
+              <label class="form-label">현재 비밀번호 확인</label>
+              <div class="input-button-group">
                 <input
                   type="password"
                   v-model="currentPassword"
-                  style="height: 37.6px"
                   placeholder="현재 비밀번호를 입력하세요"
-                  class="flex-grow px-3 py-2 bg-[#DDD7D3] border border-gray-200 rounded-full text-sm focus:outline-none focus:ring-2 focus:ring-[#F6B87A] focus:border-transparent transition duration-200"
+                  class="form-input"
                 />
-                <button
-                  @click="verifyCurrentPassword"
-                  class="px-3 py-2 bg-[#F6B87A] text-black text-sm font-medium rounded-full hover:bg-[#e5a769] transition-colors duration-300"
-                  style="height: 37.6px"
-                >
+                <button @click="verifyCurrentPassword" class="verify-button">
                   확인하기
                 </button>
               </div>
             </div>
 
             <!-- 새 비밀번호와 확인 -->
-            <div class="space-y-1">
-              <label
-                class="block text-sm font-medium text-gray-700 font-nanum-square-round"
-                >새 비밀번호</label
-              >
+            <div class="form-group">
+              <label class="form-label">새 비밀번호</label>
               <input
                 type="password"
                 v-model="password"
                 placeholder="새 비밀번호를 입력하세요"
-                class="w-full px-3 py-2 bg-[#DDD7D3] border border-gray-200 rounded-full text-sm focus:outline-none focus:ring-2 focus:ring-[#F6B87A] focus:border-transparent transition duration-200"
+                class="form-input"
               />
             </div>
 
-            <div class="space-y-1">
-              <label
-                class="block text-sm font-medium text-gray-700 font-nanum-square-round"
-                >새 비밀번호 확인</label
-              >
-              <div class="flex space-x-2">
+            <div class="form-group">
+              <label class="form-label">새 비밀번호 확인</label>
+              <div class="input-button-group">
                 <input
                   type="password"
                   v-model="confirmPassword"
-                  style="height: 37.6px"
                   placeholder="새 비밀번호를 다시 입력하세요"
-                  class="flex-grow px-3 py-2 bg-[#DDD7D3] border border-gray-200 rounded-full text-sm focus:outline-none focus:ring-2 focus:ring-[#F6B87A] focus:border-transparent transition duration-200"
+                  class="form-input"
                 />
-                <button
-                  style="height: 37.6px"
-                  @click="updatePassword"
-                  class="px-3 py-2 bg-[#F6B87A] text-black text-sm font-medium rounded-full hover:bg-[#e5a769] transition-colors duration-300"
-                >
+                <button @click="updatePassword" class="update-button">
                   수정하기
                 </button>
               </div>
             </div>
 
             <!-- 학번과 학과 -->
-            <div class="space-y-1">
-              <label
-                class="block text-sm font-medium text-gray-700 font-nanum-square-round"
-                >학번</label
-              >
+            <div class="form-group">
+              <label class="form-label">학번</label>
               <input
                 type="text"
                 v-model="user.studentNumber"
                 placeholder="학번을 입력하세요"
-                class="w-full px-3 py-2 bg-[#DDD7D3] border border-gray-200 rounded-full text-sm focus:outline-none focus:ring-2 focus:ring-[#F6B87A] focus:border-transparent transition duration-200"
+                class="form-input"
               />
             </div>
 
-            <div class="space-y-1">
-              <label
-                class="block text-sm font-medium text-gray-700 font-nanum-square-round"
-                >학과</label
-              >
+            <div class="form-group">
+              <label class="form-label">학과</label>
               <input
                 type="text"
                 v-model="user.major"
                 placeholder="학과를 입력하세요"
-                class="w-full px-3 py-2 bg-[#DDD7D3] border border-gray-200 rounded-full text-sm focus:outline-none focus:ring-2 focus:ring-[#F6B87A] focus:border-transparent transition duration-200"
+                class="form-input"
               />
             </div>
-            <div style="text-align: center">
-              <button
-                @click="saveProfile"
-                style="width: 160px; margin-top: 20px"
-                class="w-full px-4 py-2 bg-[#F6B87A] text-black text-sm font-medium rounded-full hover:bg-[#e5a769] transition-colors duration-300"
-              >
-                저장하기
-              </button>
+            <div class="save-button-container">
+              <button @click="saveProfile" class="save-button">저장하기</button>
             </div>
           </div>
         </section>
@@ -242,34 +146,31 @@
 import MainHeader from '@/components/layout/Header.vue'
 import MainFooter from '@/components/layout/Footer.vue'
 import { ref, computed, onMounted } from 'vue'
-import { useRouter } from 'vue-router' // Vue Router 가져오기
+import { useRouter } from 'vue-router'
 import axios from 'axios'
 
-// MyPageScript.js에서 필요한 데이터와 함수 가져오기
 import {
   user,
   password,
   confirmPassword,
   currentPassword,
   passwordVerified,
-  handleLogout, // 로그아웃 함수
+  handleLogout,
   fetchUser,
   verifyCurrentPassword,
   updatePassword,
   updateProfile
 } from './MypageScript.js'
 
-const router = useRouter() // Vue Router 인스턴스 가져오기
-const goals = ref([]) // 목표 데이터
-const isExpanded = ref(false) // 더보기 상태 관리
-const maxVisibleGoals = 3 // 기본 표시할 목표 수
+const router = useRouter()
+const goals = ref([])
+const isExpanded = ref(false)
+const maxVisibleGoals = 6
 
-// 로그아웃 버튼 클릭 시 호출
 const logout = () => {
-  handleLogout(router) // router를 handleLogout 함수에 전달
+  handleLogout(router)
 }
 
-// 목표 기록 가져오기
 const fetchGoals = async () => {
   try {
     const response = await axios.get(
@@ -279,38 +180,36 @@ const fetchGoals = async () => {
     goals.value = response.data
   } catch (error) {
     console.error('목표 기록을 가져오는 데 실패했습니다.', error)
-    // 데이터 가져오기에 실패할 경우 임시 데이터 설정
     goals.value = [
       { content: '기본 목표 1', createdAt: '2024-10-01' },
       { content: '기본 목표 2', createdAt: '2024-10-15' },
-      { content: '기본 목표 3', createdAt: '2024-11-05' }
+      { content: '기본 목표 3', createdAt: '2024-11-05' },
+      { content: '기본 목표 4', createdAt: '2024-11-20' },
+      { content: '기본 목표 5', createdAt: '2024-12-05' },
+      { content: '기본 목표 6', createdAt: '2024-12-20' },
+      { content: '기본 목표 7', createdAt: '2025-01-05' }
     ]
   }
 }
 
-// 페이지 마운트 시 목표 기록 가져오기
 onMounted(() => {
   fetchGoals()
-  fetchUser() // MyPageScript.js의 유저 정보 가져오기 함수 호출
+  fetchUser()
 })
 
-// 더보기 상태에 따른 표시할 목표 계산
 const displayedGoals = computed(() => {
   return isExpanded.value ? goals.value : goals.value.slice(0, maxVisibleGoals)
 })
 
-// 날짜 형식 포맷 (MM.DD 형식)
 const formatDate2 = (date) => {
   const options = { month: '2-digit', day: '2-digit' }
   return new Date(date).toLocaleDateString('ko-KR', options).replace(/\//g, '.')
 }
 
-// 접기/더보기 상태 토글
 const toggleExpand = () => {
   isExpanded.value = !isExpanded.value
 }
 
-// 프로필 저장
 const saveProfile = () => {
   const profileData = {
     name: user.name,
@@ -323,3 +222,245 @@ const saveProfile = () => {
   updateProfile(profileData)
 }
 </script>
+
+<style scoped>
+.page-container {
+  min-height: 100vh;
+  background-color: #fff9f2;
+  font-family: 'NanumSquareRound', sans-serif;
+  display: flex;
+  justify-content: center;
+  color: #000000;
+}
+
+.mobile-container {
+  width: 395px;
+  min-width: 340px;
+  background-color: #fae8da;
+  min-height: 100vh;
+  position: relative;
+  overflow-y: auto;
+  scroll-behavior: smooth;
+}
+
+.logout-button-container {
+  position: absolute;
+  top: 100px;
+  right: 45px;
+}
+
+.logout-button {
+  padding: 8px 16px;
+  background-color: #ffc68d;
+  color: #000000;
+  font-size: 14px;
+  font-weight: 500;
+  border-radius: 9999px;
+  transition: background-color 0.3s;
+  box-shadow: inset 0 4px 4px 0 rgba(0, 0, 0, 0.1);
+  font-weight: 700;
+  height: 32px;
+  line-height: 20px;
+}
+
+.logout-button:hover {
+  background-color: #e5b27f;
+}
+
+.main-content {
+  display: flex;
+  flex-direction: column;
+  padding: 64px 48px 96px;
+  overflow-y: auto;
+}
+
+.profile-section {
+  margin-top: 36px;
+}
+
+.profile-title {
+  margin-bottom: 16px;
+  font-size: 20px;
+  font-weight: bold;
+  font-family: 'NanumSquareRound', sans-serif;
+}
+
+.user-nickname {
+  font-size: 28px; /* Increased from 24px */
+  font-family: 'NanumSquareRound', sans-serif;
+  font-weight: bold; /* Added to make it stand out more */
+}
+
+/* Updated goals section styles */
+.goals-container {
+  background-color: white;
+  border-radius: 20px;
+  padding: 20px;
+  position: relative;
+  margin-top: 30px;
+}
+
+.goals-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 15px;
+}
+
+.goals-title,
+.expand-button {
+  position: absolute;
+  top: -15px;
+  background-color: white;
+  padding: 5px 15px;
+  border-radius: 15px;
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.goals-title {
+  left: 20px;
+}
+
+.expand-button {
+  right: 20px;
+  cursor: pointer;
+}
+
+.goals-list {
+  list-style-type: none;
+  padding: 0;
+  margin: 0;
+}
+
+.goal-item {
+  display: flex;
+  align-items: center;
+  margin-bottom: 15px;
+}
+
+.goal-date {
+  flex-shrink: 0;
+  width: 40px;
+  height: 40px;
+  background-color: #ff7f00;
+  color: white;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 8px;
+  font-size: 11px;
+  font-weight: bold;
+  margin-right: 12px;
+}
+
+.goal-content {
+  flex-grow: 1;
+  font-size: 14px;
+  margin: 0;
+}
+
+.no-goals-message {
+  font-size: 14px;
+  text-align: center;
+  color: #666;
+}
+
+.user-info-section {
+  margin-top: 32px;
+}
+
+.section-title {
+  margin-bottom: 8px;
+  font-size: 18px;
+  font-weight: 600;
+  font-family: 'NanumSquareRound', sans-serif;
+}
+
+.form-container {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.form-group {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.form-label {
+  display: block;
+  font-size: 14px;
+  font-weight: 500;
+  color: #4a4a4a;
+  font-family: 'NanumSquareRound', sans-serif;
+}
+
+.form-input {
+  width: 100%;
+  padding: 8px 12px;
+  background-color: #ddd7d3;
+  border: 1px solid #e5e5e5;
+  border-radius: 9999px;
+  font-size: 14px;
+  transition: all 0.2s;
+}
+
+.form-input:focus {
+  outline: none;
+  box-shadow: 0 0 0 2px #f6b87a;
+  border-color: transparent;
+}
+
+.input-button-group {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+}
+
+.input-button-group .form-input {
+  flex-grow: 1;
+  height: 37.6px;
+}
+
+.verify-button,
+.update-button {
+  padding: 8px 12px;
+  background-color: #f6b87a;
+  color: #000000;
+  font-size: 14px;
+  font-weight: 500;
+  border-radius: 9999px;
+  transition: background-color 0.3s;
+  height: 37.6px;
+  white-space: nowrap;
+  min-width: 80px;
+  letter-spacing: -0.05em;
+}
+
+.verify-button:hover,
+.update-button:hover {
+  background-color: #e5a769;
+}
+
+.save-button-container {
+  text-align: center;
+  margin-top: 20px;
+}
+
+.save-button {
+  width: 160px;
+  padding: 8px 16px;
+  background-color: #f6b87a;
+  color: #000000;
+  font-size: 14px;
+  font-weight: 500;
+  border-radius: 9999px;
+  transition: background-color 0.3s;
+}
+
+.save-button:hover {
+  background-color: #e5a769;
+}
+</style>

From 2b6b3eefb45b1243e761598d2c99bccc6dcef219 Mon Sep 17 00:00:00 2001
From: study2895 <144806675+study2895@users.noreply.github.com>
Date: Mon, 9 Dec 2024 13:24:25 +0900
Subject: [PATCH 6/6] =?UTF-8?q?[Design]=20=EC=BA=98=EB=A6=B0=EB=8D=94=20?=
 =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=A7=80=20=EC=A0=84=EC=B2=B4=EC=A0=81?=
 =?UTF-8?q?=EC=9D=B8=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

---
 .../Icons/akoming/calendar-arrow-left.png     | Bin 0 -> 170 bytes
 .../Icons/akoming/calendar-arrow-left.svg     |   4 +
 .../Icons/akoming/calendar-arrow-right.png    | Bin 0 -> 169 bytes
 .../Icons/akoming/calendar-arrow-right.svg    |   4 +
 src/views/calendar/CalendarMainView.vue       | 136 ++++++++++++------
 5 files changed, 103 insertions(+), 41 deletions(-)
 create mode 100644 src/assets/Icons/akoming/calendar-arrow-left.png
 create mode 100644 src/assets/Icons/akoming/calendar-arrow-left.svg
 create mode 100644 src/assets/Icons/akoming/calendar-arrow-right.png
 create mode 100644 src/assets/Icons/akoming/calendar-arrow-right.svg

diff --git a/src/assets/Icons/akoming/calendar-arrow-left.png b/src/assets/Icons/akoming/calendar-arrow-left.png
new file mode 100644
index 0000000000000000000000000000000000000000..f1f4f2b38a6fa93fc91656e1c074d088b3fc2ebb
GIT binary patch
literal 170
zcmeAS@N?(olHy`uVBq!ia0vp^f<P?5!3HEh7*2@?Qk(@Ik;M!Q+`=Ht$S`Y;1W=H%
zILO_JVcj{Imp~3nx}&cn1H;CC?mvmFK)$`Fi(^Oy<J$`xIT;jqTrOU2jkzl*bC5U2
zwPm$vaihu437_HwAH+SLY5ka$(bIv2tG(I$WBmF8pMUO7ju(V)Ub!xGT0uTf0caG1
Mr>mdKI;Vst07&OCK>z>%

literal 0
HcmV?d00001

diff --git a/src/assets/Icons/akoming/calendar-arrow-left.svg b/src/assets/Icons/akoming/calendar-arrow-left.svg
new file mode 100644
index 0000000..768622e
--- /dev/null
+++ b/src/assets/Icons/akoming/calendar-arrow-left.svg
@@ -0,0 +1,4 @@
+<svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8 15L1 8L8 1" stroke="black" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M16 8H2" stroke="black" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/src/assets/Icons/akoming/calendar-arrow-right.png b/src/assets/Icons/akoming/calendar-arrow-right.png
new file mode 100644
index 0000000000000000000000000000000000000000..465fcddea3acfa073d965aca4edac6f949dc6f39
GIT binary patch
literal 169
zcmeAS@N?(olHy`uVBq!ia0vp^0wB!61|;P_|4#%`oCO|{#S9GG!XV7ZFl&wkP>``W
z$lZxy-8q?;Kn_c~qpu?a!^VE@KZ&eBzMZFwV@L(#+X)*v85DR}{KYQ`${hSF9e&Z_
zRfC}C<mPsha@PaPUf${0bK=B(kBiAg?)K7~ycqoJJ#I=GJmoFt7dY*`nzaOI5`(9!
KpUXO@geCwq9x&Me

literal 0
HcmV?d00001

diff --git a/src/assets/Icons/akoming/calendar-arrow-right.svg b/src/assets/Icons/akoming/calendar-arrow-right.svg
new file mode 100644
index 0000000..85d0501
--- /dev/null
+++ b/src/assets/Icons/akoming/calendar-arrow-right.svg
@@ -0,0 +1,4 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8 1L15 8L8 15" stroke="black" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M1 8H15" stroke="black" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/src/views/calendar/CalendarMainView.vue b/src/views/calendar/CalendarMainView.vue
index 2f3c6ca..677d1ca 100644
--- a/src/views/calendar/CalendarMainView.vue
+++ b/src/views/calendar/CalendarMainView.vue
@@ -41,28 +41,34 @@ onMounted(() => {
         <div>
           <h2
             class="section-title"
-            style="font-family: 'NanumSquareRound', sans-serif"
+            style="
+              font-family: 'NanumSquareRound', sans-serif;
+              margin-top: 10px;
+              margin-left: 28px;
+            "
           >
             {{ currentYear }} at 동국대학교
           </h2>
           <div class="flex items-center justify-between">
             <h3
               class="month-title"
-              style="font-family: 'NanumSquareRound', sans-serif"
+              style="
+                font-family: 'NanumSquareRound', sans-serif;
+                margin-left: 28px;
+              "
             >
               {{ currentMonth }}월
             </h3>
             <div class="flex space-x-6">
               <button @click="goToPrevMonth">
                 <img
-                  src="@/assets/Icons/akoming/arrowright.svg"
+                  src="@/assets/Icons/akoming/calendar-arrow-left.svg"
                   alt="arrow left"
-                  class="transform scale-x-[-1]"
                 />
               </button>
-              <button @click="goToNextMonth">
+              <button @click="goToNextMonth" style="margin-right: 28px">
                 <img
-                  src="@/assets/Icons/akoming/arrowright.svg"
+                  src="@/assets/Icons/akoming/calendar-arrow-right.svg"
                   alt="arrow right"
                 />
               </button>
@@ -101,14 +107,28 @@ onMounted(() => {
           class="schedule-popup"
           v-if="isScheduleOpen && selectedEvents.length > 0"
         >
-          <div class="popup-header">
-            <h2>학사 일정</h2>
-            <button class="close-button" @click="closeSchedule">×</button>
-          </div>
+          <button class="close-button" @click="closeSchedule">×</button>
           <div class="popup-content">
-            <div v-for="event in selectedEvents" :key="event.title">
-              <p>{{ event.title }}</p>
-              <p>{{ formatDateRange(event.startDate, event.endDate) }}</p>
+            <div
+              v-for="(event, index) in selectedEvents"
+              :key="event.title"
+              class="event-item"
+            >
+              <div class="event-header">
+                <div class="selected-date">
+                  {{ selectedDay }}
+                </div>
+                <div class="event-info">
+                  <p class="event-title">{{ event.title }}</p>
+                  <p class="event-date">
+                    {{ formatDateRange(event.startDate, event.endDate) }}
+                  </p>
+                </div>
+              </div>
+              <hr
+                v-if="index < selectedEvents.length - 1"
+                class="event-divider"
+              />
             </div>
           </div>
         </div>
@@ -186,14 +206,17 @@ onMounted(() => {
 .calendar-grid {
   display: grid;
   grid-template-columns: repeat(7, 1fr);
-  gap: 1rem;
+  gap: 1.5rem; /* Updated gap value */
   text-align: center;
   margin-bottom: 1rem;
+  margin-left: 10px;
 }
 
 .calendar-day {
   font-size: 0.875rem;
   color: #b3b3b3;
+
+  letter-spacing: 0.7em; /* Updated letter-spacing value */
 }
 
 .calendar-week {
@@ -229,21 +252,34 @@ onMounted(() => {
 
 .schedule-popup {
   position: fixed;
-  bottom: -100%; /* 시작 위치: 화면 아래 */
+  bottom: 60px; /* Adjust this value to match your footer height */
   left: 0;
   right: 0;
   background-color: #ffffff;
   border-radius: 1.5rem 1.5rem 0 0;
   padding: 1.5rem;
   overflow-y: auto;
-  max-height: 60vh;
+  max-height: calc(
+    100vh - 120px
+  ); /* Adjust this value to account for footer and some extra space */
   width: 395px;
   margin: 0 auto;
   box-shadow: 0 -4px 6px rgba(0, 0, 0, 0.1);
-  animation: slide-up 0.3s ease-out forwards; /* 부드러운 위로 이동 애니메이션 */
   z-index: 1000;
 }
 
+.close-button {
+  position: absolute;
+  top: 1.5rem;
+  right: 1.5rem;
+  background: none;
+  border: none;
+  font-size: 1.75rem;
+  color: #666;
+  cursor: pointer;
+  padding: 0.5rem;
+}
+
 .link-button {
   display: flex;
   align-items: center;
@@ -265,56 +301,74 @@ onMounted(() => {
 .link-button:hover {
   background-color: #f1cdb1;
 }
+
 .day-button.has-event::after {
   content: '';
   display: block;
-  width: 6px;
-  height: 6px;
+  width: 4px;
+  height: 4px;
   background-color: #b3b3b3;
   border-radius: 50%;
   margin: 0 auto;
-  margin-top: 4px;
+  margin-top: 2px;
 }
 
 @keyframes slide-up {
   from {
-    bottom: -100%; /* 초기 상태 */
+    bottom: -100%;
   }
   to {
-    bottom: 0; /* 최종 상태 */
+    bottom: 0;
   }
 }
 
-.popup-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
+.event-item {
   margin-bottom: 1rem;
 }
 
-.popup-header h2 {
-  font-size: 1.25rem;
+.event-header {
+  display: flex;
+  align-items: flex-start;
+  margin-bottom: 0.5rem;
+}
+
+.selected-date {
+  background-color: #ff7f00;
+  color: white;
+  padding: 0.5rem;
+  border-radius: 0.25rem;
   font-weight: bold;
-  color: #4a4a4a;
+  font-size: 0.875rem;
+  width: 2rem;
+  height: 2rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-right: 1.25rem; /* Updated margin-right value */
+  flex-shrink: 0;
 }
 
-.close-button {
-  background: none;
-  border: none;
-  font-size: 1.5rem;
+.event-info {
+  flex: 1;
+}
+
+.event-title {
   font-weight: bold;
-  color: #b3b3b3;
-  cursor: pointer;
-  transition: color 0.3s;
+  margin-bottom: 0.25rem;
+}
+
+.event-date {
+  font-size: 0.75rem;
+  color: #666;
 }
 
-.close-button:hover {
-  color: #ff7f00;
+.event-divider {
+  border: none;
+  border-top: 1px solid #878787;
+  margin: 0.75rem;
 }
 
 .popup-content {
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
+  padding-top: 1rem;
 }
 </style>