refactor: 기존코드 lint 및 코드 포매팅 resolve #8

LikeLion-KNU · May 14, 2024 · 8073fe7 · 8073fe7
1 parent 64ab86b
commit 8073fe7
Show file tree

Hide file tree

Showing 6 changed files with 49 additions and 35 deletions.
diff --git a/src/components/display/Guest.styled.ts b/src/components/display/Guest.styled.ts
@@ -4,7 +4,7 @@ export const Card = styled.div`
     width: 290px;
     height: 100%;
     border-radius: 25px;
-    box-shadow: 4px 4px 5px rgba(0,0,0,25%);
+    box-shadow: 4px 4px 5px rgba(0, 0, 0, 25%);
     position: relative;
     overflow: hidden;
     scroll-snap-align: center;
@@ -22,4 +22,4 @@ export const Picture = styled.img`
     height: 100%;
     object-fit: cover;
     object-position: 50% 50%;
-`;
+`;
diff --git a/src/components/display/ShowData.tsx b/src/components/display/ShowData.tsx
@@ -1,5 +1,5 @@
-import { ShowDateContainer, ShowDateLink} from "./ShowDate.styled";
 import { Paragraph } from "../typography/Paragraph";
+import { ShowDateContainer, ShowDateLink } from "./ShowDate.styled";
 
 interface IShowDate {
     date: string;
@@ -8,7 +8,7 @@ interface IShowDate {
     onClick: () => void;
 }
 export const ShowDate: React.FC<IShowDate> = ({ date, day, active, onClick }) => {
-    const variant = active ? "#5D5A88" : "#adabc3"
+    const variant = active ? "#5D5A88" : "#adabc3";
     return (
         <ShowDateContainer>
             <ShowDateLink href="#" onClick={onClick}>

diff --git a/src/components/display/ShowDate.styled.ts b/src/components/display/ShowDate.styled.ts
@@ -12,5 +12,3 @@ export const ShowDateLink = styled.a`
         line-height: 22px;
     }
 `;
-
-
diff --git a/src/pages/BoothListPage.tsx b/src/pages/BoothListPage.tsx
@@ -34,7 +34,7 @@ const BoothListPage: React.FC = () => {
             <MainContent>
                 {/*<Map />*/}
                 <VisibleList variants={listVariants} initial="hidden" animate="visible">
-                    {lists.map((name, index) => { 
+                    {lists.map((name, index) => {
                         return <Booth index={index} name={name} heart={heart} />;
                     })}
                 </VisibleList>

diff --git a/src/pages/SpecialGuestPage.styled.tsx b/src/pages/SpecialGuestPage.styled.tsx
@@ -7,7 +7,7 @@ export const MainContent = styled.div`
     align-items: center;
     margin-top: 10px;
     p {
-        text-shadow: 0px 4px 4px rgba(0,0,0,25%);
+        text-shadow: 0px 4px 4px rgba(0, 0, 0, 25%);
     }
 `;
 export const GuestContainer = styled.div`
@@ -40,10 +40,9 @@ export const GuestCard = styled.div`
     overflow-x: auto;
     scroll-snap-type: x mandatory;
     scroll-behavior: smooth;
-    scrollbar-width: none; 
+    scrollbar-width: none;
     -ms-overflow-style: none;
     &::-webkit-scrollbar {
-        display: none; 
+        display: none;
     }
 `;
-
diff --git a/src/pages/SpecialGuestPage.tsx b/src/pages/SpecialGuestPage.tsx
@@ -1,62 +1,79 @@
 import React, { useState } from "react";
+import { BiSolidMap } from "react-icons/bi";
+
 import { Guest } from "@/components/display/Guest";
 import { ShowDate } from "@/components/display/ShowData";
-import { MainContent, GuestCard, GuestContainer, Date } from "./SpecialGuestPage.styled";
-import { Paragraph } from "@/components/typography/Paragraph"
+import { Paragraph } from "@/components/typography/Paragraph";
 import { Text } from "@/components/typography/Text";
-import { BiSolidMap } from "react-icons/bi";
+
+import { MainContent, GuestCard, GuestContainer, Date } from "./SpecialGuestPage.styled";
 
 const SpecialGuestPage: React.FC = () => {
-    const [activeDate, setActiveDate] = useState<string>("5.22"); 
+    const [activeDate, setActiveDate] = useState<string>("5.22");
 
-    const handleDateClick = (date: string) => { 
+    const handleDateClick = (date: string) => {
         setActiveDate(date);
     };
     interface GuestData {
-        [key: string]: { pic: string; name: string; }[];
+        [key: string]: { pic: string; name: string }[];
     }
-    
+
     const guestData: GuestData = {
         "5.21": [
             { pic: "./src/assets/jannavi.jpg", name: "잔나비" },
             { pic: "./src/assets/norazo.jpg", name: "노라조" },
-            { pic: "./src/assets/soranband.webp", name: "소란밴드" }
+            { pic: "./src/assets/soranband.webp", name: "소란밴드" },
         ],
         "5.22": [
             { pic: "./src/assets/qwer.webp", name: "QWER" },
             { pic: "./src/assets/10cm.jpg", name: "10CM" },
-            { pic: "./src/assets/haha.webp", name: "하하" }
+            { pic: "./src/assets/haha.webp", name: "하하" },
         ],
         "5.23": [
             { pic: "./src/assets/paulblanco.avif", name: "Paul Balnco" },
             { pic: "./src/assets/loykim.webp", name: "로이킴" },
-            { pic: "./src/assets/bigmama.webp", name: "빅마마" }
-        ]
+            { pic: "./src/assets/bigmama.webp", name: "빅마마" },
+        ],
     };
     const renderGuests = () => {
-        return guestData[activeDate].map((guest) => (
-            <Guest pic={guest.pic} name={guest.name} />
-        ));
+        return guestData[activeDate].map((guest) => <Guest pic={guest.pic} name={guest.name} />);
     };
 
     return (
         <MainContent>
-            <Paragraph size="44px" weight="bold" variant="darkpurple">SPECIAL GUEST</Paragraph>
+            <Paragraph size="44px" weight="bold" variant="darkpurple">
+                SPECIAL GUEST
+            </Paragraph>
             <GuestContainer>
                 <Date>
-                    <ShowDate date="5.21" day="TUE" active={activeDate === "5.21"} onClick={() => handleDateClick("5.21")} />
-                    <ShowDate date="5.22" day="WED" active={activeDate === "5.22"} onClick={() => handleDateClick("5.22")} />
-                    <ShowDate date="5.23" day="THU" active={activeDate === "5.23"} onClick={() => handleDateClick("5.23")} />
+                    <ShowDate
+                        date="5.21"
+                        day="TUE"
+                        active={activeDate === "5.21"}
+                        onClick={() => handleDateClick("5.21")}
+                    />
+                    <ShowDate
+                        date="5.22"
+                        day="WED"
+                        active={activeDate === "5.22"}
+                        onClick={() => handleDateClick("5.22")}
+                    />
+                    <ShowDate
+                        date="5.23"
+                        day="THU"
+                        active={activeDate === "5.23"}
+                        onClick={() => handleDateClick("5.23")}
+                    />
                 </Date>
                 <div>
                     <BiSolidMap size={18} color="#5d5a88" />
-                    <Text size="m" weight="bold" variant="darkpurple">1주차장</Text>
+                    <Text size="m" weight="bold" variant="darkpurple">
+                        1주차장
+                    </Text>
                 </div>
-                <GuestCard>
-                    { renderGuests() }
-                </GuestCard>
+                <GuestCard>{renderGuests()}</GuestCard>
             </GuestContainer>
         </MainContent>
     );
-}
-export default SpecialGuestPage;
+};
+export default SpecialGuestPage;
Original file line number	Diff line number	Diff line change
Expand Up		@@ -12,5 +12,3 @@ export const ShowDateLink = styled.a`
		line-height: 22px;
		}
		`;