From df13995d728bdad579794fd9c7907a481e7f5d0b Mon Sep 17 00:00:00 2001
From: YangJJune <58018839+YangJJune@users.noreply.github.com>
Date: Thu, 18 Jul 2024 14:35:25 -0700
Subject: [PATCH 1/2] change file location

---
 src/{styles => components}/TopBarText.styled.ts | 1 +
 1 file changed, 1 insertion(+)
 rename src/{styles => components}/TopBarText.styled.ts (97%)

diff --git a/src/styles/TopBarText.styled.ts b/src/components/TopBarText.styled.ts
similarity index 97%
rename from src/styles/TopBarText.styled.ts
rename to src/components/TopBarText.styled.ts
index d3423f4..b5d5398 100644
--- a/src/styles/TopBarText.styled.ts
+++ b/src/components/TopBarText.styled.ts
@@ -5,6 +5,7 @@ export const StyledTopBarDiv = styled.div`
 	justify-content: space-between;
 	align-items: center;
 	text-align: center;
+	width: 100%;
 `;
 
 export const StyledLeftDiv = styled.div`

From dfab70fffd265f55352ab29d4b94e51a82d811c8 Mon Sep 17 00:00:00 2001
From: YangJJune <58018839+YangJJune@users.noreply.github.com>
Date: Thu, 18 Jul 2024 14:35:46 -0700
Subject: [PATCH 2/2] Update TopBarText.tsx

---
 src/components/TopBarText.tsx | 86 ++++++++++++++++-------------------
 1 file changed, 40 insertions(+), 46 deletions(-)

diff --git a/src/components/TopBarText.tsx b/src/components/TopBarText.tsx
index c531ae6..8e92226 100644
--- a/src/components/TopBarText.tsx
+++ b/src/components/TopBarText.tsx
@@ -1,7 +1,7 @@
 import { FC } from "react";
 import logo from "@/assets/logo_space.svg";
 import back from "@/assets/icon_back.svg";
-import * as sty from "@/styles/TopBarText.styled";
+import * as sty from "@/components/TopBarText.styled";
 import { useNavigate } from "react-router-dom";
 
 export enum LeftEnum {
@@ -21,59 +21,53 @@ const TopBarText: FC<topbarProps> = ({ left, center, right }) => {
 	switch (left) {
 		case "logo":
 			return (
-				<div>
-					<sty.StyledTopBarDiv>
-						<sty.StyledLeftDiv
-							onClick={() => {
-								navigate("/");
-							}}
-						>
-							<img src={logo}></img>
-						</sty.StyledLeftDiv>
-						<sty.StyledCenterDiv>
-							<sty.StyledCenterP>{center}</sty.StyledCenterP>
-						</sty.StyledCenterDiv>
-						<sty.StyledRightDiv>
-							<sty.StyledRightP>{right}</sty.StyledRightP>
-						</sty.StyledRightDiv>
-					</sty.StyledTopBarDiv>
-				</div>
+				<sty.StyledTopBarDiv>
+					<sty.StyledLeftDiv
+						onClick={() => {
+							navigate("/");
+						}}
+					>
+						<img src={logo}></img>
+					</sty.StyledLeftDiv>
+					<sty.StyledCenterDiv>
+						<sty.StyledCenterP>{center}</sty.StyledCenterP>
+					</sty.StyledCenterDiv>
+					<sty.StyledRightDiv>
+						<sty.StyledRightP>{right}</sty.StyledRightP>
+					</sty.StyledRightDiv>
+				</sty.StyledTopBarDiv>
 			);
 
 		case "back":
 			return (
-				<div>
-					<sty.StyledTopBarDiv>
-						<sty.StyledLeftDiv
-							onClick={() => {
-								navigate(-1);
-							}}
-						>
-							<img src={back}></img>
-						</sty.StyledLeftDiv>
-						<sty.StyledCenterDiv>
-							<sty.StyledCenterP>{center}</sty.StyledCenterP>
-						</sty.StyledCenterDiv>
-						<sty.StyledRightDiv>
-							<sty.StyledRightP>{right}</sty.StyledRightP>
-						</sty.StyledRightDiv>
-					</sty.StyledTopBarDiv>
-				</div>
+				<sty.StyledTopBarDiv>
+					<sty.StyledLeftDiv
+						onClick={() => {
+							navigate(-1);
+						}}
+					>
+						<img src={back}></img>
+					</sty.StyledLeftDiv>
+					<sty.StyledCenterDiv>
+						<sty.StyledCenterP>{center}</sty.StyledCenterP>
+					</sty.StyledCenterDiv>
+					<sty.StyledRightDiv>
+						<sty.StyledRightP>{right}</sty.StyledRightP>
+					</sty.StyledRightDiv>
+				</sty.StyledTopBarDiv>
 			);
 
 		case "none":
 			return (
-				<div>
-					<sty.StyledTopBarDiv>
-						<sty.StyledLeftDiv></sty.StyledLeftDiv>
-						<sty.StyledCenterDiv>
-							<sty.StyledCenterP>{center}</sty.StyledCenterP>
-						</sty.StyledCenterDiv>
-						<sty.StyledRightDiv>
-							<sty.StyledRightP>{right}</sty.StyledRightP>
-						</sty.StyledRightDiv>
-					</sty.StyledTopBarDiv>
-				</div>
+				<sty.StyledTopBarDiv>
+					<sty.StyledLeftDiv></sty.StyledLeftDiv>
+					<sty.StyledCenterDiv>
+						<sty.StyledCenterP>{center}</sty.StyledCenterP>
+					</sty.StyledCenterDiv>
+					<sty.StyledRightDiv>
+						<sty.StyledRightP>{right}</sty.StyledRightP>
+					</sty.StyledRightDiv>
+				</sty.StyledTopBarDiv>
 			);
 	}
 };