fix : 빌드에러 해결

Author: khj0426

package.json

@@ -118,5 +118,6 @@
     "tsconfig-paths-webpack-plugin": "^4.1.0"
   },
   "readme": "ERROR: No README data found!",
-  "_id": "[email protected]"
+  "_id": "[email protected]",
+  "packageManager": "[email protected]+sha512.b8fef5494bd3fe4cbd4edabd0745df2ee5be3e4b0b8b08fa643aa3e4c6702ccc0f00d68fa8a8c9858a735a0032485a44990ed2810526c875e416f001b17df12b"
 }

src/app/(root)/(routes)/about/page.tsx

@@ -1,9 +1,15 @@
 import type { AboutProps } from "@/@types/AboutProps";
 
+import React from "react"; // React 임포트 (필요할 수 있음)
+
+import styled from "styled-components"; // styled-components 임포트
+
 import Content from "@/Component/About/Content";
 import ProfileImageWrapper from "@/Component/About/ProfileImgWrapper";
 import Title from "@/Component/About/Title";
 import Flex from "@/Component/Common/Flex/Flex";
+
+// AboutContent 객체 오타 수정! 닫는 중괄호 추가!
 const AboutContent: AboutProps = {
   title: "안녕하세요! 항상 팀에 기여하고 싶은 개발자 김효중입니다",
   imgurl: "/images/Profile.jpg",
@@ -13,71 +19,104 @@ const AboutContent: AboutProps = {
     "기록하면서 공부할 때 가장 성취감을 느낍니다.항상 제가 배운 내용을 기록하고자 합니다.",
     "항상 소속된 팀에서 작은 것들이라도 기여하는 사람이 되고 싶습니다",
   ],
-};
+}; // <<< 여기 중괄호 추가!
+
+// styled-components로 메인 컨테이너 스타일 정의
+const StyledMain = styled.main`
+  display: flex;
+  flex-direction: column;
+  max-width: 80%;
+  margin: 0 auto; /* 중앙 정렬 추가 */
+  width: 100%; /* 너비 100%로 설정하여 max-width와 함께 반응형에 유리 */
+`;
+
+// styled-components로 Article 컨테이너 스타일 정의
+const StyledArticle = styled.article`
+  display: flex;
+  justify-content: space-around; /* 요소들 사이에 공간 균등 분배 */
+  width: 100%; /* 부모(StyledMain)의 너비에 맞추도록 100% */
+  gap: 20px; /* 자식 요소들 사이의 간격 (더 크게 줘봄) */
+  padding: 0;
+  margin: 20px auto; /* 상하 여백 및 중앙 정렬 */
+  flex-wrap: wrap; /* 화면이 좁아지면 요소들이 아래로 내려가도록 */
+  /* 자식 요소인 ProfileImageWrapper와 Content의 너비를 잘 조절해야 반응형 레이아웃이 예뻐짐 */
+`;
+
+// 경험 목록 (Experiences) 부분 스타일드 컴포넌트 (ul 태그 사용)
+const ExperiencesList = styled.ul`
+  list-style: none; /* 기본 목록 점/숫자 없애기 */
+  padding: 0; /* 기본 패딩 없애기 */
+  margin: 0; /* 기본 마진 없애기 */
+  display: flex;
+  flex-direction: column;
+  gap: 5px; /* 각 경험 항목 사이 간격 */
+  align-items: flex-start; /* 왼쪽 정렬 */
+`;
+
+// 경험 목록 항목 (li 태그 사용)
+const ExperienceItem = styled.li`
+  font-weight: 500;
+  font-size: 14px;
+  /* 필요한 추가 스타일 */
+`;
 
-export default async function About() {
+// async 키워드 제거
+export default function About() {
   return (
-    <main
-      style={{
-        display: "flex",
-        flexDirection: "column",
-        maxWidth: "80%",
-      }}
-    >
+    // styled-components로 만든 StyledMain 사용
+    <StyledMain>
       <Title
         title={AboutContent.title}
         style={{
+          // Title 컴포넌트 자체 스타일은 그대로 유지
           display: "flex",
           justifyContent: "center",
         }}
       />
-      <article
-        style={{
-          display: "flex",
-          justifyContent: "space-around",
-          width: "70%",
-          gap: "5px",
-          padding: "0",
-          margin: "0 auto",
-          flexWrap: "wrap",
-        }}
-      >
+      {/* styled-components로 만든 StyledArticle 사용 */}
+      <StyledArticle>
+        {/* ProfileImageWrapper와 Content는 기존 컴포넌트 사용 */}
         <ProfileImageWrapper imgurl={AboutContent.imgurl} />
         <Content content={AboutContent.content} />
-        <br />
-        <Flex
-          flexDirection="column"
-          alignItems="flex-start"
-          margin={"0 auto"}
-          width={"100%"}
-        >
-          <h2>Skill</h2>
-          <p
-            style={{
-              fontWeight: "bold",
-            }}
-          >
-            React,Next.js,Typescript
-          </p>
-          <h2>Experiences</h2>
-          <Flex
-            flexDirection="column"
-            gap="5px"
-            alignItems="flex-start"
-            justifyContent="flex-start"
-            style={{
-              fontWeight: "500",
-              fontSize: "14px",
-            }}
-          >
-           <span>💙 토스증권 프론트엔드 어시스턴트 Product Stability Team (2025.03.10 ~ )</span>
-           <span>💙 주식회사 업사이트 프론트엔드 인턴 (2024.08 ~ 2024.11)</span>
-           <span>💙 프로그래머스 프론트엔드 데브코스 (2023.06 ~ 2023.11)
-           <span>2024.01 ~ 멋쟁이사자처럼 SKHU 프론트엔드 운영진</span>
-           <span>2022.08~2023.06 GDSC SKHU 프론트엔드 파트</span>
-          </Flex>
-        </Flex>
-      </article>
-    </main>
+        {/* 불필요한 <br /> 태그 제거 */}
+      </StyledArticle>
+
+      {/* Flex 컴포넌트를 스킬/경험 섹션 감싸는 용도로 사용 */}
+      <Flex
+        flexDirection="column"
+        alignItems="flex-start"
+        margin={"20px auto 0 auto"} // 상단 마진 추가 및 중앙 정렬
+        width={"100%"} // StyledMain 안에서 100% 너비 사용
+      >
+        <h2>Skill</h2>
+        <p style={{ fontWeight: "bold" }}>
+          {" "}
+          {/* 인라인 스타일 유지 */}
+          React,Next.js,Typescript
+        </p>
+        <h2>Experiences</h2>
+        {/* ExperiencesList (ul) styled component 사용 */}
+        <ExperiencesList>
+          {/* 각 경험 항목을 ExperienceItem (li) styled component로 감쌈 */}
+          <ExperienceItem>
+            💙 토스증권 프론트엔드 어시스턴트 Product Stability Team (2025.03.10
+            ~ )
+          </ExperienceItem>
+          <ExperienceItem>
+            💙 주식회사 업사이트 프론트엔드 인턴 (2024.08 ~ 2024.11)
+          </ExperienceItem>
+          <ExperienceItem>
+            💙 프로그래머스 프론트엔드 데브코스 (2023.06 ~ 2023.11)
+          </ExperienceItem>{" "}
+          {/* span 중첩 오류 수정 */}
+          <ExperienceItem>
+            2024.01 ~ 멋쟁이사자처럼 SKHU 프론트엔드 운영진
+          </ExperienceItem>
+          <ExperienceItem>
+            2022.08~2023.06 GDSC SKHU 프론트엔드 파트
+          </ExperienceItem>
+        </ExperiencesList>
+      </Flex>
+    </StyledMain>
   );
 }