[ Refacotring ] tailwind - home (#323)

* 🐛fix: public file

* ♻️refactor: HomeView convention

* ♻️refactor: MyInfo convention

* ♻️refactor: findDust utils 분리

* ♻️refactor: MyLocationWeather remove styled

* ♻️refactor: MyWalkRecord remove styled

* ♻️refactor: WalkListDisplay edit convention

* ♻️refactor: WalkStartButton using twConfig

* 🗑️remove: not using file

* 🐛fix: Style 미적용 버튼 개선

src/app/home/Home.view.tsx

@@ -1,11 +1,8 @@
-import * as S from "./Home.styles";
-
 import { TopNavigator } from "@/components/navigators/TopNavigator";
 import { ProfileResponse } from "@/types/Response";
 import { PostMoreListResponse } from "@/types/Response/Post";
 
-import { WalkList, WalkStartButton } from "./components";
-import MyInfo from "./components/MyInfo/MyInfo";
+import { MyInfo, WalkList, WalkStartButton } from "./components";
 
 interface HomeViewProps {
   MyLikeWalkingTrailsList: PostMoreListResponse;
@@ -23,14 +20,14 @@ const HomeView = ({
       <TopNavigator
         leftChildren={
           <h1
-            className={S.HomeLogo}
+            className="ml-6 font-maplestory font-bold text-green-500"
             style={{ fontSize: "2.2rem" }}
           >
             마실가실
           </h1>
         }
       />
-      <div className={S.HomePageContainer}>
+      <div className="box-border w-full select-none pb-80 pt-24">
         <MyInfo userInfo={userInfo} />
         <WalkList
           MyLikeWalkingTrailsList={MyLikeWalkingTrailsList}

src/app/home/components/MyInfo/MyInfo.tsx

@@ -1,5 +1,3 @@
-import * as S from "./MyInfo.styles";
-
 import { ProfileResponse } from "@/types/Response";
 
 import { MyLocationWeather, MyWalkRecord } from "..";
@@ -10,7 +8,7 @@ interface myInfoProps {
 
 const MyInfo = ({ userInfo }: myInfoProps) => {
   return (
-    <section className={S.MyInfoSection}>
+    <section className="sticky top-24 z-10 w-full bg-background px-6 pt-8">
       <MyLocationWeather />
       <MyWalkRecord userInfo={userInfo} />
     </section>

src/app/home/components/MyInfo/index.ts

@@ -0,0 +1 @@
+export { default } from "./MyInfo";

src/app/home/components/MyLocationWeather/MyLocationWeather.styles.ts

@@ -1,42 +1 @@
-import { FONT_WEIGHT } from "@/styles/theme";
-import styled from "styled-components";
 
-export const MyLocationWeatherLayout = styled.article`
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 1rem;
-`;
-
-export const MyLocation = styled.div`
-  display: flex;
-
-  svg {
-    margin-right: 0.5rem;
-  }
-`;
-
-export const MyWeather = styled.ul`
-  display: flex;
-  list-style: none;
-  font-weight: ${FONT_WEIGHT.BOLD};
-
-  li {
-    display: flex;
-    align-items: center;
-  }
-
-  li svg {
-    margin-right: 0.5rem;
-    stroke: ${(props) => props.theme.gray_200};
-  }
-
-  li.temperatures {
-    margin-right: 0.7rem;
-    color: ${(props) => props.theme.yellow_500};
-  }
-
-  li.fineDust {
-    color: ${(props) => props.theme.green_500};
-  }
-`;

src/app/home/components/MyLocationWeather/MyLocationWeather.tsx

@@ -1,7 +1,5 @@
 "use client";
 
-import * as S from "./MyLocationWeather.styles";
-
 import { useCallback, useEffect, useState } from "react";
 
 import {
@@ -21,33 +19,18 @@ import { useQuery } from "@tanstack/react-query";
 
 import fetchNearbyStation from "../../api/fetchNearbyStation";
 import { convertLatLonToTM, getDetailedAddress, showErrorMessage } from "../../utils";
+import findDust from "./utils/findDust";
 
 const WEATHER_ICON = {
-  맑음: <ClearSky />,
-  구름조금: <PartlyCloudy />,
-  흐림: <Overcast />,
-  비: <Rainy />,
-  진눈개비: <Sleet />,
-  눈: <Snowy />,
+  맑음: <ClearSky className="mr-[0.5rem] stroke-gray_200" />,
+  구름조금: <PartlyCloudy className="mr-[0.5rem] stroke-gray_200" />,
+  흐림: <Overcast className="mr-[0.5rem] stroke-gray_200" />,
+  비: <Rainy className="mr-[0.5rem] stroke-gray_200" />,
+  진눈개비: <Sleet className="mr-[0.5rem] stroke-gray_200" />,
+  눈: <Snowy className="mr-[0.5rem] stroke-gray_200" />,
   없음: null,
 };
 
-const findDust = (pm10: number | null) => {
-  if (!pm10) {
-    return;
-  }
-
-  if (pm10 >= 0 && pm10 <= 30) {
-    return "좋음";
-  } else if (pm10 >= 31 && pm10 <= 80) {
-    return "보통";
-  } else if (pm10 >= 81 && pm10 <= 150) {
-    return "나쁨";
-  } else if (pm10 > 150) {
-    return "매우 나쁨";
-  }
-};
-
 interface LocationType {
   lat: number | null;
   lng: number | null;
@@ -116,36 +99,37 @@ const MyLocationWeather = () => {
   const pm10Value = findDust(pm10);
 
   return (
-    <S.MyLocationWeatherLayout>
-      <S.MyLocation>
+    <article className="mb-[1rem] flex items-center justify-between">
+      <div className="flex">
         {userAddress && (
           <>
-            <Location style={{ marginRight: "0.5rem" }} />
+            <Location className="mr-[0.5rem]" />
             <span>
               {userAddress.depth1} {userAddress.depth2} {userAddress.depth3}
             </span>
           </>
         )}
-      </S.MyLocation>
-      <S.MyWeather>
-        <li className="temperatures">
+      </div>
+      <ul className="flex font-bold">
+        <li className="mr-[0.7rem] flex items-center text-yellow_500">
           {weather && (
             <>
               {weatherIcon} {weather}
             </>
           )}
           {temperature && `${temperature}˚`}
         </li>
-        <li className="fineDust">
+
+        <li className="flex items-center text-green_500 ">
           {pm10Value && (
             <>
-              <FineDust />
+              <FineDust className="mr-[0.5rem] stroke-gray_200" />
               미세먼지 {pm10Value}
             </>
           )}
         </li>
-      </S.MyWeather>
-    </S.MyLocationWeatherLayout>
+      </ul>
+    </article>
   );
 };
 

src/app/home/components/MyLocationWeather/utils/findDust.ts

@@ -0,0 +1,17 @@
+const findDust = (pm10: number | null) => {
+  if (!pm10) {
+    return;
+  }
+
+  if (pm10 >= 0 && pm10 <= 30) {
+    return "좋음";
+  } else if (pm10 >= 31 && pm10 <= 80) {
+    return "보통";
+  } else if (pm10 >= 81 && pm10 <= 150) {
+    return "나쁨";
+  } else if (pm10 > 150) {
+    return "매우 나쁨";
+  }
+};
+
+export default findDust;

src/app/home/components/MyLocationWeather/utils/index.ts

@@ -0,0 +1 @@
+export { default as findDist } from "./findDust";

src/app/home/components/MyWalkRecord/MyWalkRecord.tsx

@@ -1,30 +1,41 @@
-import S from "./MyWalkRecord.module.css";
-
 import { convertMeter } from "@/lib/utils";
 import { ProfileResponse } from "@/types/Response";
 
+import { twJoin } from "tailwind-merge";
+
 interface MyWalkRecordProps {
   userInfo: ProfileResponse;
 }
 
 const MyWalkRecord = ({ userInfo }: MyWalkRecordProps) => {
   const { nickname, totalDistance, totalCount, totalCalories } = userInfo;
 
+  const liStyle = "flex flex-1 flex-col items-center";
+  const notFirstLiStyle = "relative";
+  const beforeStyle =
+    "before:absolute before:left-0 before:top-0 before:inline-block before:bg-gray_100 before:content-[''] before:h-[4rem] before:w-[0.1rem]";
+  const strongStyle = "mb-[0.5rem] font-bold";
+  const spanStyle = "text-large font-bold text-green_300";
+
   return (
-    <article className={S.MyWalkRecordContainer}>
-      <h3>{nickname}님, 산책을 시작해 보세요!</h3>
-      <ul className={S.MyWalkRecordList}>
-        <li>
-          <strong>총 거리</strong>
-          <span>{convertMeter(totalDistance)}</span>
+    <article className="mb-[3rem] rounded-[0.8rem] border-[1px] border-transparent_10 bg-white px-[1rem] py-[2.3rem] shadow-[0_2px_7.8px_0_rgba(0,0,0,0.02)]">
+      <h3 className="mb-[2.3rem] flex items-center justify-center text-center text-medium font-bold">
+        {nickname}님, 산책을 시작해 보세요!
+      </h3>
+      <ul className="flex">
+        <li className={liStyle}>
+          <strong className={strongStyle}>총 거리</strong>
+          <span className={spanStyle}>{convertMeter(totalDistance)}</span>
         </li>
-        <li>
-          <strong>산책 횟수</strong>
-          <span>{totalCount ?? 0}번</span>
+
+        <li className={twJoin(liStyle, notFirstLiStyle, beforeStyle)}>
+          <strong className={strongStyle}>산책 횟수</strong>
+          <span className={spanStyle}>{totalCount ?? 0}번</span>
         </li>
-        <li>
-          <strong>총 소모 열량</strong>
-          <span>{totalCalories ?? 0}kcal</span>
+
+        <li className={twJoin(liStyle, notFirstLiStyle, beforeStyle)}>
+          <strong className={strongStyle}>총 소모 열량</strong>
+          <span className={spanStyle}>{totalCalories ?? 0}kcal</span>
         </li>
       </ul>
     </article>

src/app/home/components/WalkList/components/WalkListDisplay/WalkListDisplay.tsx

@@ -1,4 +1,3 @@
-import * as S from "./WalkListDisplay.styles";
 import { FONT_SIZE, FONT_WEIGHT } from "@/styles/theme";
 
 import { LogDetailCard } from "@/components";
@@ -16,8 +15,8 @@ interface WalkListItemProps {
 
 const WalkListDisplay = ({ isEmpty, title, walkList, url }: WalkListItemProps) => {
   return (
-    <section className={S.WalkListSection}>
-      <article className={S.HomeWalkListArticle}>
+    <section className="mt-8 select-none px-6">
+      <article className="mb-4 flex items-center justify-between">
         <h3 style={{ fontSize: FONT_SIZE.LARGE, fontWeight: FONT_WEIGHT.BOLD }}>{title}</h3>
         <Link
           href={url}
@@ -28,9 +27,11 @@ const WalkListDisplay = ({ isEmpty, title, walkList, url }: WalkListItemProps) =
         </Link>
       </article>
       {isEmpty ? (
-        <div className={S.NoWalkRecordMessage}>산책로 목록이 비어있어요</div>
+        <div className="mx-auto my-0 flex min-h-48 items-center justify-center text-gray-300">
+          산책로 목록이 비어있어요
+        </div>
       ) : (
-        <ul className={S.WalkListContainer}>
+        <ul className="flex gap-8 overflow-x-auto overflow-y-hidden scrollbar-hide">
           {walkList.map(
             ({ id, title, content, thumbnailUrl, distance, totalTime, address, likeCount }) => (
               <li key={id}>