[#16] Option 공통 컴포넌트 개발 (배경 컬러/이미지 선택)

package.json

@@ -14,6 +14,7 @@
     "react": "^19.1.1",
     "react-dom": "^19.1.1",
     "react-router": "^7.8.0",
+    "react-router-dom": "^7.8.0",
     "styled-components": "^6.1.19"
   },
   "devDependencies": {

src/app.jsx

@@ -1,5 +1,5 @@
-import { BrowserRouter, Route, Routes } from "react-router";
-import ModalProvider from "./components/modal/modal-provider";
+
+import { BrowserRouter, Route, Routes } from "react-router-dom";
 import DropdownProvider from "./components/text-field/dropdown-input/dropdown-provider";
 import ContentLayout from "./layouts/content-layout";
 import OnboardingLayout from "./layouts/onboarding-layout";
@@ -9,6 +9,8 @@ import MessagePage from "./pages/message-list";
 import RecipientPostPage from "./pages/recipient-post-page";
 import SendMessagePage from "./pages/send-message-page";
 import TestPage from "./pages/test-page";
+import PostPage from "./pages/post-page";
+import SendPage from "./pages/send-page";
 
 function Provider({ children }) {
   return (
@@ -66,6 +68,9 @@ function App() {
             />
           </Route>
           <Route path="/test-components" element={<TestPage />} />
+          <Route path="/list" element={<MessagePage />} />
+          <Route path="/post" element={<PostPage />} />
+          <Route path="/post/{id}/message" element={<SendPage />} />
         </Routes>
       </BrowserRouter>
     </Provider>

src/components/option/background-select.jsx

@@ -0,0 +1,113 @@
+import styled from "styled-components";
+import Colors from "../color/colors";
+import CheckImage from "../../assets/ic-check.svg";
+import { useEffect, useState } from "react";
+import { OutlinedButton } from "../button/button";
+import BUTTON_SIZE from "../button/button-size";
+
+const BackgroundWrapper = styled.div`
+  padding-top: 50px;
+  width: 720px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 16px;
+`;
+
+const OptionItem = styled.div`
+  width: 168px;
+  height: 168px;
+  border-radius: 8px;
+  cursor: pointer;
+  background-color: ${({ type, color }) => (type === "color" ? color : "none")};
+  background-image: ${({ type, url }) =>
+    type === "image" ? `url(${url})` : "none"};
+  background-position: center;
+  background-size: cover;
+  background-repeat: no-repeat;
+`;
+
+const CircleButtonWrapper = styled.div`
+  height: 100%;
+  overflow: hidden;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  & > button {
+    border-radius: 50%;
+  }
+`;
+
+function BackgroundSelect({ type, selected, onSelect }) {
+  const [imageUrls, setImageUrls] = useState([]);
+
+  const colorOptions = [
+    { color: Colors.beige(200) },
+    { color: Colors.purple(200) },
+    { color: Colors.blue(200) },
+    { color: Colors.green(200) },
+  ];
+
+  /* useEffect(() => {
+    if (type !== "image") return;
+
+    const BackgroundImageUrls = async () => {
+      try {
+        const response = await fetch(
+          "https://rolling-api.vercel.app/background-images"
+        );
+        const data = await response.json();
+        setImageUrls(data.imageUrls || []);
+      } catch (error) {
+        console.error(error);
+        setImageUrls([]);
+      }
+    };
+    BackgroundImageUrls();
+  }, [type]); */
+
+  // 이미지 옵션 테스트 코드
+  useEffect(() => {
+    if (type !== "image") return;
+
+    const testImages = [
+      "https://i.pinimg.com/280x280_RS/44/d2/b0/44d2b0b9e08cf1f05b7215356925a146.jpg",
+      "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTPe2BEhk6RfeibdWPG-1Iac78Tk1bdO1Rtqg&s",
+      "https://center.exm.co.kr/data/goodsimg/phob/l/0018/027/18027744/61709_1661145612.jpg",
+      "https://i.pinimg.com/736x/35/4e/03/354e03cd79702063da7353ffea0c8f8b.jpg",
+    ];
+    setImageUrls(testImages || []);
+  }, [type]);
+
+  const options =
+    type === "color"
+      ? colorOptions
+      : imageUrls.map((url, index) => ({ label: `${index}`, url }));
+
+  return (
+    <BackgroundWrapper>
+      {options.map((option, index) => (
+        <OptionItem
+          key={index}
+          type={type}
+          color={option.color}
+          url={option.url}
+          onClick={() => onSelect(index)}
+        >
+          {selected === index && (
+            <CircleButtonWrapper>
+              <OutlinedButton
+                size={BUTTON_SIZE.extraSmall}
+                icon={CheckImage}
+                style={{ backgroundColor: Colors.gray(500), boxShadow: "none" }}
+              />
+            </CircleButtonWrapper>
+          )}
+        </OptionItem>
+      ))}
+    </BackgroundWrapper>
+  );
+}
+
+export default BackgroundSelect;

src/pages/post-page.jsx

@@ -0,0 +1,133 @@
+import { useState } from "react";
+import InputTextField from "../components/text-field/text-field";
+import TEXT_FIELD_TYPE from "../components/text-field/text-field-type";
+import Colors from "../components/color/colors";
+import ToggleButton from "../components/button/toggle-button";
+import styled from "styled-components";
+import { PrimaryButton } from "../components/button/button";
+import BackgroundSelect from "../components/option/background-select";
+import { useNavigate } from "react-router";
+
+const PostContainerStyle = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  margin: 0 auto;
+`;
+
+const WrapperStyle = styled.div`
+  padding-top: 50px;
+  width: 720px;
+`;
+
+const PostTitleStyle = styled.h2`
+  font-weight: 700;
+`;
+
+const PostSummaryStyle = styled.p`
+  font-weight: 400;
+  color: Colors.gray(500);
+`;
+
+const PostToggleButtonStyle = styled.div`
+  width: 100%;
+  display: flex;
+`;
+
+const ButtonWrapperStyle = styled.div`
+  padding-top: 50px;
+  width: 720px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  & > * {
+    flex: 1;
+  }
+`;
+
+function PostPage() {
+  const [name, setName] = useState("");
+  const [nameError, setNameError] = useState("");
+  const [backgroundType, setBackgroundType] = useState("컬러");
+  const [selected, setSelected] = useState(0);
+  const navigate = useNavigate();
+
+  const handleChange = (e) => {
+    const value = e.target.value;
+    setName(value);
+    setNameError(""); // 값 입력 중 에러 없애기
+  };
+
+  const handleBlur = () => {
+    const trimmed = name.trim();
+    if (trimmed === "") {
+      setNameError("값을 입력해 주세요");
+    } else if (name !== trimmed) {
+      setNameError("앞 뒤 공백 없이 입력해 주세요"); // 텍스트 앞 뒤 공백 에러 처리(임시)
+    }
+  };
+
+  const handleBackgroundSelect = (e) => {
+    let typeSelect = e.target.textContent;
+
+    if (typeSelect === "컬러" || typeSelect === "이미지") {
+      setBackgroundType(typeSelect);
+      setSelected(0);
+    }
+  };
+
+  const handleCreate = () => {
+    const randomID = Math.floor(Math.random() * 10000);
+    navigate(`/post/${randomID}`);
+  };
+
+  return (
+    <PostContainerStyle>
+      <WrapperStyle>
+        <PostTitleStyle>To.</PostTitleStyle>
+        <InputTextField // TextField로 변경
+          type={TEXT_FIELD_TYPE.input}
+          value={name}
+          onChange={handleChange}
+          onBlur={handleBlur}
+          placeholder="받는 사람 이름을 입력해 주세요"
+          error={nameError}
+        />
+      </WrapperStyle>
+      <WrapperStyle>
+        <PostTitleStyle>배경화면을 선택해 주세요.</PostTitleStyle>
+        <PostSummaryStyle>
+          컬러를 선택하거나, 이미지를 선택할 수 있습니다.
+        </PostSummaryStyle>
+        <PostToggleButtonStyle onClick={handleBackgroundSelect}>
+          <ToggleButton
+            value={backgroundType}
+            options={["컬러", "이미지"]}
+            onChange={(type) => {
+              handleBackgroundSelect(type);
+              setSelected(0);
+            }}
+          />
+        </PostToggleButtonStyle>
+      </WrapperStyle>
+      <BackgroundSelect
+        type={backgroundType === "컬러" ? "color" : "image"}
+        selected={selected}
+        onSelect={setSelected}
+      />
+      <ButtonWrapperStyle>
+        <PrimaryButton
+          title="생성하기"
+          size="large"
+          disabled={name === "" || name !== name.trim()}
+          onClick={handleCreate}
+        />
+      </ButtonWrapperStyle>
+    </PostContainerStyle>
+  );
+}
+
+export default PostPage;