[ Refactiring ] tailwind - Log Detail & Record (#328)

* ♻️refactor: tailwindCSS change Log * ♻️refactor: change Map section * ♻️refactor: changed log detail tailwindCSS * ♻️refactor: changed log record main page * ♻️refactor: changed LogRecord's style code * 🎨style: style 미적용 해결
Team-SilverTown · May 2, 2024 · 07d6083 · 07d6083
1 parent 1e78017
commit 07d6083
Show file tree

Hide file tree

Showing 21 changed files with 137 additions and 418 deletions.
diff --git a/src/app/log/[id]/Log.styles.module.css b/src/app/log/[id]/Log.styles.module.css
@@ -0,0 +1,9 @@
+@media (max-width: 380px) {
+  .log_tab {
+    font-size: 1.6rem;
+  }
+}
+
+.calc_height {
+  height: calc(100% - 14rem);
+}
diff --git a/src/app/log/[id]/Log.styles.ts b/src/app/log/[id]/Log.styles.ts
diff --git a/src/app/log/[id]/Log.view.tsx b/src/app/log/[id]/Log.view.tsx
@@ -1,12 +1,11 @@
 "use client";
 
-import * as S from "./Log.styles";
-import { FONT_SIZE, FONT_WEIGHT } from "@/styles/theme";
+import style from "./Log.styles.module.css";
 
+import tailwindConfig from "@/../tailwind.config";
 import { Button, Tab } from "@/components";
 import { TopNavigator } from "@/components/navigators/TopNavigator";
 import { GoBackButton } from "@/components/navigators/TopNavigator/components";
-import useTheme from "@/lib/hooks/useTheme";
 import { GeoPosition } from "@/types/OriginDataType";
 import { MasilDetailResponse, UserInfoType } from "@/types/Response";
 
@@ -16,6 +15,7 @@ import { LogKebabMenu, LogMemo, LogPin } from "./components";
 import { LogMapSection } from "./sections";
 
 import Link from "next/link";
+import resolveConfig from "tailwindcss/resolveConfig";
 
 interface LogViewProps {
   masilData: MasilDetailResponse;
@@ -41,7 +41,7 @@ const LogView = ({
   handleClickCenter,
   handleClickTab,
 }: LogViewProps) => {
-  const theme = useTheme();
+  const { theme } = resolveConfig(tailwindConfig);
 
   return (
     <>
@@ -50,25 +50,28 @@ const LogView = ({
         rightChildren={<LogKebabMenu />}
         containerStyle={{ backgroundColor: "transparent" }}
       />
-      <S.LogContainer>
+      <section className="relative h-full min-h-dvh scale-100 select-none">
         <LogMapSection
           masilData={masilData}
           currentPinIndex={currentPinIndex}
           mapCenter={mapCenter}
           handlePinIndex={handleCurrentPinIndex}
           handleClickCenter={handleClickCenter}
         />
-        <S.LogContentLayout>
+        <article className={`h-[55%] px-[2rem] ${style.log_tab}`}>
           <Tab
-            className="logTab"
             tabContents={TAB_CONTENTS}
             tabClickHandler={handleClickTab}
             focusedTab={tabIndex}
             layoutId="log-underline"
+            style={{
+              fontSize: theme.fontSize["h6"],
+              fontWeight: theme.fontWeight["bold"],
+            }}
           />
 
-          <S.LogContentSection
-            className="scrollbar-hide"
+          <div
+            className={`px-[0.5rem] py-[1rem] scrollbar-hide ${style.calc_height}`}
             style={{
               overflowY: tabIndex === TabType.Pin ? "visible" : "auto",
             }}
@@ -90,23 +93,23 @@ const LogView = ({
             <Link href={`/post/create?logId=${logId}`}>
               <Button
                 width="calc(100% - 4rem)"
-                textColor={theme?.white}
-                buttonColor={theme?.green_500}
+                textColor={theme.colors["white"]}
+                buttonColor={theme.colors["green_500"]}
                 style={{
                   position: "fixed",
                   left: "50%",
                   bottom: "9rem",
                   transform: "translateX(-50%)",
-                  fontSize: `${FONT_SIZE.LARGE}`,
-                  fontWeight: `${FONT_WEIGHT.BOLD}`,
+                  fontSize: `${theme.fontSize["large"]}`,
+                  fontWeight: `${theme.fontWeight["bold"]}`,
                 }}
               >
                 산책 공유하기
               </Button>
             </Link>
-          </S.LogContentSection>
-        </S.LogContentLayout>
-      </S.LogContainer>
+          </div>
+        </article>
+      </section>
     </>
   );
 };

diff --git a/src/app/log/[id]/components/LogKebabMenu/LogKebabMenu.tsx b/src/app/log/[id]/components/LogKebabMenu/LogKebabMenu.tsx
@@ -10,7 +10,7 @@ const LogKebabMenu = () => {
   };
 
   return (
-    <div style={{ marginRight: "1.5rem", cursor: "pointer" }}>
+    <div className=" mr-[1.5rem] cursor-pointer">
       <DropDownMenu
         onDelete={handleClickAlert}
         onEdit={handleClickAlert}

diff --git a/src/app/log/[id]/components/LogMemo/LogMemo.styles.ts b/src/app/log/[id]/components/LogMemo/LogMemo.styles.ts
diff --git a/src/app/log/[id]/components/LogMemo/LogMemo.tsx b/src/app/log/[id]/components/LogMemo/LogMemo.tsx
@@ -1,5 +1,3 @@
-import * as S from "./LogMemo.styles";
-
 import { Location } from "@/components/icons";
 import { calculateWalkingCalories, convertMeter, convertSeconds } from "@/lib/utils";
 import convertFormatDate from "@/lib/utils/convertFormatDate";
@@ -14,29 +12,36 @@ const LogMemo = ({ masilData, userInfo }: LogMemoProps) => {
   const { distance, totalTime, depth1, depth2, startedAt, content } = masilData;
   const { isUserInfoCheck, calories } = calculateWalkingCalories({ userInfo, distance });
 
+  const liStyle = "flex-1 text-center";
+  const strongStyle =
+    "rounded-[2rem] bg-green_500 px-[1rem] py-[0.5rem] text-mini font-regular text-white";
+  const spanStyle = "mt-[1.5rem] block";
+
   return (
     <>
-      <S.LogMemoLocation>
-        <Location /> {depth1} {depth2}
-      </S.LogMemoLocation>
-      <S.LogMemoWalkInfo>
-        <li>
-          <strong>산책 거리</strong>
-          <span>{convertMeter(distance)}</span>
+      <article className="flex items-center text-medium">
+        <Location className="mr-[0.5rem]" /> {depth1} {depth2}
+      </article>
+      <ul className="mx-0 my-[2rem] flex justify-between">
+        <li className={liStyle}>
+          <strong className={strongStyle}>산책 거리</strong>
+          <span className={spanStyle}>{convertMeter(distance)}</span>
         </li>
-        <li>
-          <strong>소요 시간</strong>
-          <span>{convertSeconds(totalTime)}</span>
+        <li className={liStyle}>
+          <strong className={strongStyle}>소요 시간</strong>
+          <span className={spanStyle}>{convertSeconds(totalTime)}</span>
         </li>
         {isUserInfoCheck && (
-          <li>
-            <strong>칼로리 소모</strong>
-            <span>{calories}kcal</span>
+          <li className={liStyle}>
+            <strong className={strongStyle}>칼로리 소모</strong>
+            <span className={spanStyle}>{calories}kcal</span>
           </li>
         )}
-      </S.LogMemoWalkInfo>
-      <S.LogMemoContent>{content}</S.LogMemoContent>
-      <S.LogMemoDate>{convertFormatDate(startedAt)}</S.LogMemoDate>
+      </ul>
+      <article className="text-basic leading-[1.6]">{content}</article>
+      <article className="mt-[2rem] pb-[7rem] text-right text-mini text-gray_300">
+        {convertFormatDate(startedAt)}
+      </article>
     </>
   );
 };

diff --git a/src/app/log/[id]/components/LogPin/LogPin.style.module.css b/src/app/log/[id]/components/LogPin/LogPin.style.module.css
@@ -0,0 +1,5 @@
+@media (max-width: 380px) {
+  .pinDetailCard {
+    max-height: 13rem;
+  }
+}
diff --git a/src/app/log/[id]/components/LogPin/LogPin.styles.ts b/src/app/log/[id]/components/LogPin/LogPin.styles.ts
diff --git a/src/app/log/[id]/components/LogPin/LogPin.tsx b/src/app/log/[id]/components/LogPin/LogPin.tsx
@@ -1,4 +1,4 @@
-import * as S from "./LogPin.styles";
+import style from "./LogPin.style.module.css";
 
 import { DotIndicator, PinDetailCard } from "@/components";
 import { Pin } from "@/types/OriginDataType";
@@ -13,7 +13,7 @@ interface LogPinProps {
 
 const LogPin = ({ pins, currentPinIndex, handlePinIndex }: LogPinProps) => {
   return (
-    <S.LogPinContainer>
+    <div>
       {pins.length > 0 && (
         <>
           <Carousel
@@ -24,13 +24,13 @@ const LogPin = ({ pins, currentPinIndex, handlePinIndex }: LogPinProps) => {
           >
             {pins.map((pin, index) => (
               <PinDetailCard
+                className={style.pinDetailCard}
                 key={index}
                 content={pin.content}
                 thumbnailUrl={pin.thumbnailUrl}
                 currentPinindex={currentPinIndex + 1}
                 totalPinIndex={pins.length}
                 pin={pin}
-                className="pinDetailCard"
               />
             ))}
           </Carousel>
@@ -41,8 +41,8 @@ const LogPin = ({ pins, currentPinIndex, handlePinIndex }: LogPinProps) => {
         </>
       )}
 
-      {pins.length === 0 && <S.LogPinEmptyMessage>등록된 핀이 없습니다.</S.LogPinEmptyMessage>}
-    </S.LogPinContainer>
+      {pins.length === 0 && <div className="px-0 py-[3rem] text-center">등록된 핀이 없습니다.</div>}
+    </div>
   );
 };
 

diff --git a/src/app/log/[id]/sections/LogMapSection/LogMapSection.styles.ts b/src/app/log/[id]/sections/LogMapSection/LogMapSection.styles.ts
diff --git a/src/app/log/[id]/sections/LogMapSection/LogMapSection.tsx b/src/app/log/[id]/sections/LogMapSection/LogMapSection.tsx
@@ -1,5 +1,3 @@
-import * as S from "./LogMapSection.styles";
-
 import { Button } from "@/components";
 import MasilMap from "@/components/MasilMap/MasilMap";
 import { Center } from "@/components/icons";
@@ -22,7 +20,7 @@ const LogMapSection = ({
   handleClickCenter,
 }: LogMapSectionProps) => {
   return (
-    <S.MapContainer>
+    <section className="relative h-[45%] w-full">
       <MasilMap
         center={mapCenter}
         path={masilData.path}
@@ -31,7 +29,7 @@ const LogMapSection = ({
         selectedPinIndex={currentPinIndex}
         isShowCenterMarker={false}
       />
-      <S.ButtonWrapper>
+      <div className="absolute bottom-[1rem] right-[1rem] z-[1]">
         <Button
           variant="neumorp"
           useRipple={true}
@@ -40,8 +38,8 @@ const LogMapSection = ({
         >
           <Center />
         </Button>
-      </S.ButtonWrapper>
-    </S.MapContainer>
+      </div>
+    </section>
   );
 };