[refactor, design] #7 추천 결과 페이지 반응형

.prettierrc

@@ -0,0 +1,12 @@
+{
+  "printWidth": 80,
+  "tabWidth": 2,
+  "useTabs": false,
+  "semi": true,
+  "singleQuote": false,
+  "trailingComma": "es5",
+  "bracketSpacing": true,
+  "arrowParens": "always",
+  "endOfLine": "lf",
+  "plugins": ["prettier-plugin-tailwindcss"]
+}

next.config.ts

@@ -1,7 +1,12 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   images: {
-    domains: ["encrypted-tbn0.gstatic.com"],
+    domains: [
+      "encrypted-tbn0.gstatic.com",
+      "www.gunsan.go.kr",
+      "www.ktriptips.com",
+      "www.saemangeum.go.kr",
+    ],
   },
 };
 

package.json

@@ -29,6 +29,8 @@
     "@types/webpack": "^5.28.5",
     "eslint": "^9",
     "eslint-config-next": "15.3.3",
+    "prettier": "^3.6.2",
+    "prettier-plugin-tailwindcss": "^0.6.13",
     "tailwindcss": "^4.1.9",
     "typescript": "^5"
   }

src/app/_components/LandingPage/index.tsx

@@ -1,9 +1,9 @@
 "use client";
 
-import Logo from "@/assets/icons/logo.png";
+import { useEffect } from "react";
 import { createNewUser } from "@/utils/createNewUser";
 import Image from "next/image";
-import { useEffect } from "react";
+import Logo from "@/assets/icons/logo.png";
 
 export default function LandingPage({
   routing,
@@ -18,14 +18,14 @@ export default function LandingPage({
   }, [routing]);
 
   return (
-    <div className="flex items-center w-full h-screen bg-[#F7F9FD]">
-      <div className="flex flex-col items-center gap-[40px] w-full">
+    <div className="flex h-screen w-full items-center bg-[#F7F9FD]">
+      <div className="flex w-full flex-col items-center gap-[40px]">
         <Image src={Logo} alt="" />
-        <div className="flex flex-col items-center gap-[24px] w-full">
-          <h2 className="text-[#142448] text-center text-[36px] font-[700] leading-[120%]">
+        <div className="flex w-full flex-col items-center gap-[24px]">
+          <h2 className="text-center text-[36px] leading-[120%] font-[700] text-[#142448]">
             새길에 오신 것을 환영해요!
           </h2>
-          <p className="text-[#7F9CDC] text-center text-[22px] font-[600] leading-[150%]">
+          <p className="text-center text-[22px] leading-[150%] font-[600] text-[#7F9CDC]">
             먼저 간단한 정보부터 시작해볼까요?
           </p>
         </div>

src/app/_components/SurveyScreen/ProgressBar.jsx

@@ -1,8 +1,8 @@
 export default function ProgressBar({ progress }) {
   return (
-    <div className="w-full h-[12px] bg-[#CFDAF2]">
+    <div className="h-[12px] w-full bg-[#CFDAF2]">
       <div
-        className="h-[12px] bg-[#3560C0] rounded-lg"
+        className="h-[12px] rounded-lg bg-[#3560C0]"
         style={{ width: `${progress}%` }}
       ></div>
     </div>

src/app/_components/SurveyScreen/SurveyOption.tsx

@@ -1,7 +1,7 @@
 import clsx from "clsx";
 import Image from "next/image";
-import checkDefault from "@/assets/icons/check.png";
-import checkActive from "@/assets/icons/check_current.png";
+import checkDefault from "@/assets/icons/check_default.svg";
+import checkActive from "@/assets/icons/check_active.svg";
 
 interface SurveyOptionProps {
   text: string;
@@ -18,13 +18,13 @@ export default function SurveyOption({
     <div
       onClick={onClick}
       className={clsx(
-        "flex justify-between items-center pl-[24px] pr-[40px] py-[16px] bg-[#F7F9FD] rounded-[12px] border-[2px]",
+        "flex cursor-pointer items-center justify-between rounded-[12px] border-[2px] bg-[#F7F9FD] py-[16px] pr-[40px] pl-[24px]",
         isSelected ? "border-[#577DD1]" : "border-[#F7F9FD]"
       )}
     >
       <p
         className={clsx(
-          "text-[20px] font-[600] leading-[150%]",
+          "text-body-large",
           isSelected ? "text-[#3560C0]" : "text-[#B3B9C6]"
         )}
       >

src/app/_components/SurveyScreen/hooks/useSurvey.ts

@@ -7,7 +7,7 @@ interface UseSurveyProps {
   routing?: (page: string) => void;
 }
 
-export default function useSurvey({ type, routing }: UseSurveyProps) {
+export function useSurvey({ type, routing }: UseSurveyProps) {
   const router = useRouter();
 
   const questions = surveyData[type];

src/app/_components/SurveyScreen/index.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import useSurvey from "./hooks/useSurvey";
+import { useSurvey } from "./hooks/useSurvey";
 import ProgressBar from "@/app/_components/SurveyScreen/ProgressBar";
 import SurveyOption from "./SurveyOption";
 import Button from "@/components/Button";
@@ -22,18 +22,18 @@ export default function SurveyScreen({ type, routing }: SurveyScreenProps) {
   } = useSurvey({ type, routing });
 
   return (
-    <div className="flex flex-col justify-between items-center w-full h-screen">
+    <div className="flex h-screen w-full flex-col items-center justify-between">
       <ProgressBar progress={progress} />
-      <div className="flex flex-col justify-center gap-[64px] w-[700px]">
+      <div className="flex w-[700px] flex-col justify-center gap-[64px]">
         <div className="flex flex-col justify-between gap-[12px]">
-          <h2 className="text-[#1F2229] text-[28px] font-[600] leading-[120%]">
+          <h2 className="text-heading-small text-[#1F2229]">
             {questions[currentQuestion].title}
           </h2>
-          <p className="text-[#79839A] text-[20px] font-[600] leading-[150%]">
+          <p className="text-title-small text-[#79839A]">
             {questions[currentQuestion].contents}
           </p>
         </div>
-        <div className="flex flex-col justify-between gap-[12px] w-[700px]">
+        <div className="flex w-[700px] flex-col justify-between gap-[12px]">
           {questions[currentQuestion].items.map((item, index) => (
             <SurveyOption
               key={index}
@@ -43,7 +43,7 @@ export default function SurveyScreen({ type, routing }: SurveyScreenProps) {
             />
           ))}
         </div>
-        <div className="flex gap-[12px] items-center self-end">
+        <div className="flex items-center gap-[12px] self-end">
           {currentQuestion > 0 && (
             <Button variant="secondary" width={120} onClick={handlePrevClick}>
               이전

src/app/_components/TransitionScreen/index.tsx

@@ -24,14 +24,14 @@ export default function TransitionScreen({
   }, [transitionContent, routing]);
 
   return (
-    <div className="flex items-center w-full h-screen bg-[#F7F9FD]">
-      <div className="flex flex-col items-center gap-[40px] w-full">
+    <div className="flex h-screen w-full items-center bg-[#F7F9FD]">
+      <div className="flex w-full flex-col items-center gap-[40px]">
         <Image src={transitionContent.image} alt="" />
-        <div className="flex flex-col items-center gap-[24px] w-full">
-          <h2 className="text-[#142448] text-center text-[36px] font-[700] leading-[120%] whitespace-pre-line">
+        <div className="flex w-full flex-col items-center gap-[24px]">
+          <h2 className="text-heading-large text-center whitespace-pre-line text-[#142448]">
             {transitionContent.title}
           </h2>
-          <p className="text-[#7F9CDC] text-center text-[22px] font-[600] leading-[150%]">
+          <p className="text-title-medium text-center text-[#7F9CDC]">
             {transitionContent.subtitle}
           </p>
         </div>